Building a WordPress Theme

Building a WordPress Theme Part 1 –
Setting up the stylesheet and the file structure

There are many articles out there on building a WordPress theme, and many different techniques for doing so. I would like to tell you what I’ve learned, the best practices I’ve found, and the easiest path for creating a WordPress theme. If you want to include additional functionality, I suggest you use a plugin. If you’re just looking to style your website, then a template is what you’re after.

The first step is to ensure that you have the latest version of WordPress installed on your server.

Starting Out: Okay, WordPress is installed. Now what?

Start by creating a directory in the wp-content/themes/ folder with an obvious and appropriate title. All of the theme’s work will go into this folder, such as your images, JavaScript, additional CSS, etc.

The Stylesheet

A theme’s default stylesheet is its identifier and the main styling tool for its content. The stylesheet is the best place to start because it is the initial definition of how your theme is going to act.
You identify your theme in the section of your stylesheet at the very top that’s been commented out. Below is an example of this:

The ‘Theme Name’ portion of this comment is where you name your entire theme.
The ‘Template’ portion of this comment is where you will assign a parent theme.

For more information on this, view the WordPress Codex.

Child themes and why

It is important for us to always assign parent themes for the custom themes that we create. There are a multitude of reasons why, but the most important for us would be that it provides some security. If there is ever a vulnerability that is assessed and patched for a theme, it will come through as a push-button update available to the WordPress backend user.

In addition, when using child themes, it ensures that the website owner will not override our work when they update WordPress. There are some themes that scavenge and cannibalize a default WordPress theme, but keep all of the original data intact. When a user updates this theme, all of the modifications that you’ve made will be overridden. It’s important that we ensure all of our work is kept intact, but also that any website that our work is installed on can also be updated. Updating WordPress is extremely important and a seamless integration of style and security make for a great website.

Another fairly important reason to child theme is to make use of the set of templates and code snippets already available with the parent themes.

Setting up Your Theme’s Structure

The best place to start in a child theme is your header and footer files. When using a child theme, WordPress will pull in any files that are needed from its parent theme. The header.php and footer.php files are the most important to get right because they start and close the wrappers for the content of the site.

Architecture of Your Design

When looking at the approved site design, where does the header stop and the content begin? Where does the content end and the footer begin? These are the landmarks of where you want your header, footer, and content sections. If there is an obvious container for your content and your sidebar(s), you may want to include the beginning in your header and the end of that container in your footer. This will make your templates and any templates provided by WordPress plugins easier to manage.

Header File

Your header.php file will include everything you need for the top portion of your website. This includes everything within your tag and the declaration of HTML type as well as your opening body tag.
Always make sure that important and useful functions are being included in the appropriate places. For instance, the wp_head(); function in the tag, just before you close it.
The wp_head(); function spits out the enqueued scripts and CSS files for your plugins and themes, where they need to go. It is important to always enqueue these, as it prevents duplicate files from being loaded and ensures that the scripts are only needed on the pages that you want them included.
Remember: A site running just one version of jQuery is much more effective and responsive than a site that has several versions bogging down browsers.

For more information on wp_head(), visit the WordPress codex entry.

Enqueueing Styles

The following is a function that can simply be added to your functions.php file and modified as needed in order to enqueue JavaScript and CSS files.

The first function used within load_theme_scripts() is wp_enqueue_script(). This function will enqueue a JavaScript file and put it in its proper container the <head> of your theme. The first command this function accepts is a unique title for the file being provided. Be sure to remember to change this name and keep it unique. The next argument is the path to the JavaScript file. The final argument is an array of different types of JavaScript dependencies. This script requires jQuery, and is the only entry in that array.

The next function used is wp_register_style(). This function works with the last – wp_enqueue_style() – to place an extra stylesheet in the of your theme. Just like wp_enqueue_script(), the first argument passed to wp_register_style() is the unique name given to this style. The second, again like the former function, is the location of the file. To make sure that all of the information in wp_register_style() is placed correctly in the <head> of your theme, call it by its handle with wp_enqueue_style().

To make sure that this entire function is called, we add an action specifying when enqueueing scripts happens in the WordPress markup, and we let WordPress know that this function must be called at that time.

For more information on these functions, check out their entries in the WordPress Codex:
wp_enqueue_script() – http://codex.wordpress.org/Function_Reference/wp_enqueue_script
wp_register_style() – http://codex.wordpress.org/Function_Reference/wp_register_style
wp_enqueue_style() – http://codex.wordpress.org/Function_Reference/wp_enqueue_style
add_action() – http://codex.wordpress.org/Function_Reference/add_action

More helpful header functions

WordPress has many more extra functions and helpers to make theming easier.

body_class(); – http://codex.wordpress.org/Function_Reference/body_class
This function is to be placed within your opening body tag, like so:
    i.e. – <body <?php body_class(); ?>>
This simple addition can make your life a lot easier. This will add classes to the body tag pertaining to the type of page that’s being viewed. For instance, on the page designated as your blogroll, it will add the class ‘blog’. On your front page, it will add the class ‘home’. It also makes sure to identify each page that it is on with its unique post ID number. This is extremely helpful for doing something like hiding a contact form in the sidebar of certain pages (however, this can be done programmatically as well).

get_stylesheet_directory_uri() – http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

This is a function that returns the path of the current theme directory. It defaults to the child theme (where applicable) and returns a string that can be worked with. In order to save just a bit of memory, it may be a good idea to store the result in a variable and print that out as needed within the theme.
  i.e. – <img src=”<?php echo get_stylesheet_directory_uri(); ?> /images/logo.png” />

get_template_directory_uri() – http://codex.wordpress.org/Function_Reference/get_template_directory_uri
This function works exactly the same as get_stylsheet_directory_uri(), however this one explicitly returns the parent theme’s directory when a child theme is being used.

site_url() – http://codex.wordpress.org/Function_Reference/site_url

This function returns the site’s URL as defined in the WordPress settings. Because sites’ URLs sometimes change from development to testing to live, it is important to use functions that can handle this sort of change.
  i.e. – <a href=”<?php echo site_url(); ?>”>Home</a>

home_url() – http://codex.wordpress.org/Function_Reference/home_url

This function works exactly as site_url() above, but returns a different parameter based on your settings. The Site’s URL and the Blog’s URL specified in the settings correlate to each of these functions.

Footer File

Your footer.php file closes off all of the HTML and presents the bottom of your theme. It is important to remember to add the wp_footer(); function just before the closing <body> tag in this file. This function prints important hooks and references for JavaScript files used by your plugins and may even be used by you.

For more information on the wp_footer() function, visit the WordPress codex.

The Importance of Those Extra Steps

Always make sure to include the wp_head(); and wp_footer(); functions in your header.php and footer.php files respectively. These functions make sure that hooks are available for the JavaScript used by plugins and your own theme. You may have noticed sites that don’t show the WP Admin bar on the front end when you’re logged in. The most common cause for this is neglecting the wp_footer(); function before the closing <body> tag.

What if the site’s URL changes? What happens when you transfer hard-coded URLs in theme files from a development site to a testing site? Going through each file, or even performing a find-and-replace on an entire directory can cause much more frustration and provide a lot more hassle than simply remembering to use the proper functions.

Now what?

Now you have a few tips and best practices to get started. I am planning on writing more on this topic, but if you get as impatient as I do, you can check out your next best steps on the WordPress Developer site. This page will help you figure out which template files will get loaded for the page being loaded. The very best mapping I’ve been able to find is listed in the image displayed on this page.

I also urge you to navigate the WordPress developer site and look at the code of other themes. One of the best pieces of advice that the incredibly intelligent Helen Hou-Sandi gave during the talk that I saw was to look at the Core code. She was specifically saying that if you want to be a Core contributor, you should look through that code. However, this is great advice for anything you’re trying to do. Don’t just copy and paste (or COPYPASTA), but understand the code as well. If you see a function that you aren’t familiar with, then look it up! Read about it and enjoy learning!

I will be posting more on this and other subjects as I can. Please stay tuned for more!