The Anatomy of Your WordPress Theme

April 4, 2015

Every WordPress theme has a common set of files to ensure a functioning website. While some of these files, which are considered “core,” are not required, others are absolutely necessary. In this post, I’m going to discuss a few of both types of files, while offering commentary regarding each.

STYLE.CSS

We all know what stylesheets do. They control the presentation – the visual design and layout of a website. While this may be true, WordPress also uses the primary stylesheet (style.css) to identify the meta details pertaining to your theme via a comment block located at the top of the file.

While I won’t discuss styling CSS here, because it’s really beyond the scope of this post, I will offer an example of the header comment I referred to above. And since it’s probably the first task you’re going to complete when putting your custom theme together, it’s important to understand.

Parent Theme Meta Data

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: The WordPress Team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Now, there are two different versions – or actually one version and another modified version of this meta data area at the top of your CSS file. If you have a parent theme, or just one theme version on your site, you’d use something similar to what I just posted. If you have a child theme that’s built off of a parent theme, you would need another style.css file in that child theme directory, along with another comment meta data area at the top of that file. Your child theme meta data area would look something like this:

INDEX.PHP

The index.php file is a good one to have because it provides as a backup for all other templates. You can learn more about this by checking out my “Working With WordPress Templates” post.

If you decide that you aren’t going to do much customizing or engage in a lot of granular control of many other WordPress template pages on your site, you’ll likely want to keep the coding of your index.php file fairly high level, so it’ll capture all the necessary functions of every available page you plan to have on your website. Remember, if you only have your index.php file, it’s going to be responsible for the functionality of all pages. Although this isn’t the most ideal setup, it certainly is possible to have your website operate this way.

Here is an example of some code you might have in your index.php file:

In the section above, you can see the very first function is wp_title() up in the title area. This pulls in the title you input in the back end admin area. The next function is the wp_head() function, which pulls the data you enqueued in your functions.php file. Such data might be your css and js files. The body_class() function adds CSS class names for the HMTL body tag and is dynamic, depending on which page you’re on. Of course, you can have many more functions in this file, but like I said above, I stripped things down for simplicity’s sake. Just know, the header.php file gets pulled into most files by using the get_header() function. WordPress automatically knows which file to pull in because it’s part of their naming convention.

FOOTER.PHP

Similar to the header.php file, the footer.php file gets pulled into index.php using the get_footer() function. You can see this above as well.

There potentially isn’t much to this file. There are a few reasons for it to exist though. The first reason is to simply close any markup that was opened, or initiated, in header.php. If you take a look above, you’ll see that we opened up the <html> and <body> tags and then in the example below, we closed them.

Another common item found in footer files is the wp_footer() function. This function doesn’t output anything by itself, but is often used by developers as a hook to reference JavaScript files. If you don’t have this code in your footer.php file and someone attempts to load a plugin or the equivalent, it won’t work, if it relies on those referenced JavaScript files. Lastly, this function should be coded in right before the closing body tag.

SIDEBAR.PHP

Sidebars on WordPress installs are generally active areas. They hold all sorts of navigation, sign up forms and advertising. Primarily, when coding the sidebar.php file, you’d want to make it widget friendly because those widgets are the things that folks use to include the items I just mentioned. I’ve written some sample sidebar code below:

As you can see, that’s pretty straightforward. Basically, all we’re doing is calling in the primary sidebar, if it exists, using the dynamic_sidebar() function. If it doesn’t exist, you could certainly add a bit of text there that says something to that effect. It would be up to you whether it’s hard coded or dynamic.

—–

Well, that’s it for today. My fingers are tired and now I’ve got to go through this post to edit it and add some links to all the WordPress functions and other items I talked about. Until next time!

What’s Next? Email Updates!

If you enjoyed reading this post, why not consider signing up to receive others like it by email? It's so easy and you can unsubscribe at any time.

E-Mail Address

About Jay Gaulard

Hi. My name is Jay Gaulard and I've been designing websites and taking photographs since 2002. My passions lie with learning the latest coding techniques and development tools as well as staying on top of the digital imaging world. When I'm not studying or writing, I'm practicing Brazilian Jiu-Jitsu in Maine, USA.

About IndustryDev

IndustryDev is an online publication that focuses primarily on lovers of the digital world. We write articles that cast a wide net, including those that discuss website development, design and WordPress. We also post, daily, about the image related aspects of the web, including photography and illustration, along with other topics like blogging and SEO.