Now you need to get some templates into your theme. As you know, the most important theme files needed for any theme are the index.php and style.css files. You will also set up some other base files to use here: header.php, footer.php, and functions.php.
Now your theme folder should look something like Figure 2-11.
Now that your files and folders are created, you can start to add some code. First, add your theme information into the style.css file to make sure your theme can be picked up by WordPress.
Style.css
You can use whatever information you prefer here; just remember to substitute anything you customize yourself when you work through the rest of the examples so things work correctly. I suggest that you always have a few attributes as an absolute bare minimum. Here's an example of the style sheet header you'll use for your theme:
/**
* Theme Name: Pro WordPress * Author: Adam Onishi
* Author URI: http://adamonishi.com
* Description: An example theme for the Pro WordPress theme development book * Version: 0
* Text Domain: prowordpress */
Next, you can start adding some markup to your theme. Start with the header and footer, which create the base of the generated HTML pages.
header.php and footer.php
You will use a very similar version of the code you’ve already looked at in the header.php example, but with a few modifications just to keep the header a bit cleaner and more compact.
<?php /**
* Pro WordPres header file *
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>> <head>
<meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '|', true, 'right' ); ?></title>
<!-- HTML5 SHIV for IE --><!-- If using Modernizr you can remove this script! --> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<?php wp_head(); ?> </head>
Chapter 2 ■ theme anatomy and template hierarChy
<body <?php body_class(); ?>> <header class="site-header"> <h1>
<a href="<?php echo home_url(); ?>"> Pro WordPress Theme Development </a>
</h1> </header>
Again, this is just a very simple header template with a few PHP functions to output some useful bits that are set up or accessible via WordPress. I also included the HTML5 shiv for IE because the rest of the theme uses HTML5 markup.
Next is the footer.php file; for now all you do is close the main tags like so: <!—- END OF THEME -->
</body> </html>
Now you have really simple header and footer files for your theme; you’re doing just enough to get the basic information about your site output on every page at the top of your document. Your final basic template to set up is the functions file.
functions.php
The last of the basic files is the theme functions file. You will set up a couple of functions to enable you to use certain features in your theme. Here is where you’ll include your style sheet and where you can add your JavaScript files later on.
When you write things into your theme functions file, you don’t always want the code to be run as soon as the theme is being set up because it might not be necessary. So in the following examples, I use some WordPress hook functions to make the code you add run only for certain actions. (Don’t worry too much about the details; you’ll learn about actions and hooks in much more detail in Chapter 6).
<?php /**
* Pro WordPress functions and definitions * * @package prowordpress */ if ( ! function_exists( 'prowordpress_setup' ) ) : function prowordpress_setup() { /**
* Add default posts and comments RSS feed links to head */
/**
* Enable support for Post Thumbnails */
add_theme_support( 'post-thumbnails' ); }
endif; // prowordpress_setup
add_action( 'after_setup_theme', 'prowordpress_setup' );
This example sits at the top of your theme and is the main theme setup function you’ll use throughout your theme development. You’ll keep adding to it as you go along. The function is wrapped in a conditional to see whether the function already exists, which prevents any issues when using child themes. Inside the function are two simple setup functions that you saw earlier in the chapter, and the hook function is in the last line. It tells WordPress that when the after_theme_setup action is performed, it should run the function that’s in the second argument.
The only other bit of setup you’ll do in the functions file is to include your style sheet. Instead of including the style sheet directly in the header.php file, you can do it programmatically using the wp_enqueue_style() function: /**
* Enqueue scripts and styles */
function prowordpress_scripts_and_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() ); }
add_action( 'wp_enqueue_scripts', 'prowordpress_scripts_and_styles' );
The function is named scripts_and_styles because it is also where you include any JavaScript files. Next, you can start creating some page templates to use in the theme.