Simon Pollard
Web developer
@WPBristolPeeps
@WPBristolPeeps
Wordpress Themes
The Basics
@WPBristolPeeps
A theme needs
just needs two files:
index.php
Creates the blog.
style.css
Includes styling information for the site
@WPBristolPeeps
But should at least contain:
header.php
Generates a page’s first elements such as a header image and top level menu.
footer.php
Generates a page’s final elements such as widgets and menus.
sidebar.php
Generates a page’s sidebar usually including widgetized areas.
functions.php
Adds features and functions to your site. Works like a WordPress plugin.
screenshot.png
Graphic thumbnail image representing the theme.
Template Hierachy
Source: http://codex.wordpress.org/Template_Hierarchy
@WPBristolPeeps
Folder Structure
wp-content
themes
mytheme
Folder Structure
mytheme
css
images
js
header.php
index.php
footer.php
functions.php
page.php
screenshot.png
single.php
sidebar.php
style.css
style.css
/*
Theme Name: My Theme
Description: A theme what I made
Version: 0.0.1
Theme URI: http://www.myswebsite.com
Author: Simon Pollard
*/@WPBristolPeeps
index.php
<?php
get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div class="page-content">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php
endwhile;
endif;
get_sidebar();
get_footer();@WPBristolPeeps
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<title><?php wp_title('');</title>
<?php wp_head(); ?>
</head>
<body>
<div id="content">@WPBristolPeeps
footer.php
</div>
<?php wp_footer(); ?>
</body>
</html>sidebar.php
<div id="sidebar">
<?php dynamic_sidebar('default'); ?>
</div>@WPBristolPeeps
// Register the sidebars for the admin panel.
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Default Sidebar',
'id' => 'default',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}To enable a sidebar add this to functions.php
Roughly looks like...
@WPBristolPeeps
Try using an existing theme
or template...
@WPBristolPeeps
/*
Theme Name: [Your Theme Name]
Description: The custom theme [Your Theme Name] using the parent theme Twenty Thirteen.
Author: [You]
Author URI: [Your URL]
Template: twentythirteen
Version: 0.0.1
*/
@import url("../twentythirteen/style.css");Use a theme as a parent, style.css:
The child theme uses the parent theme files
unless the file is in the child theme
Useful Stuff for Functions.php
@WPBristolPeeps
// Removes "built with wordpress" and version number from meta data
remove_action ('wp_head', 'wp_generator');
// Add support for menus
function register_my_menus() {
register_nav_menus(
array(
'main-nav' => __( 'Main Nav' ),
'footer-nav' => __( 'Footer Nav' )
)
);
}
add_action( 'init', 'register_my_menus' );
// Enqueue Scripts
function my_scripts() {
wp_register_style( 'mystyle', get_stylesheet_directory_uri() . '/css/main.min.css');
wp_register_script( 'myscript', get_stylesheet_directory_uri() . '/js/app.min.js');
wp_enqueue_style( 'mystyle' );
wp_enqueue_script( 'myscript' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );Further reference:
@WPBristolPeeps
Wordpress Codex
http://codex.wordpress.org
Official Documentation:
http://codex.wordpress.org/Theme_Development
Template theme:
http://underscores.me/
Further reference:
@WPBristolPeeps
This Slideshow:
http://slides.com/simonp303/wordpress-theme-basics
Simon Pollard
@smp303
http://www.deckchair.co.uk/
Big thanks to our hosts:
Next meetup:
http://phpsw.org.uk/
We team up with
Check meetup for details
Bristol Wordpress People
Needs you
Speakers needed - get in touch via meetup
wordpress-theme-basics
By Simon Pollard
wordpress-theme-basics
Basic theme creation for wordpress
