Part 2: Grasping a WordPress Theme’s Anatomy
A Beginner, Couch to WP Pro Series article, posted on Feb 27, 2013by Justyn Hornor
WordPress’ theme framework is very powerful but also slightly complicated, so to the novice theme developer, things can be a little tricky. In this tutorial we’re demystifying WordPress Theme Anatomy.
But have no fear! When you break down a theme into it’s basic parts, it’s much easier to understand what is going on and where to make your own customizations.
This is a high-level review. Each of the below parts and pieces have their own maze of terms and functions you’ll become familiar with. The key is getting a grip on the overall structure first and THEN we’ll jump into the details of each.
Categorizing WordPress Theme Files
I break WordPress themes into the following categories:
- Content Organization
- Page Types
- Functionality Files
- Extras
Content Organization
At it’s most basic level, how WordPress displays your content can be broken into four general parts:
header.php– core HTML head content, navigation elements, and header graphics- The Loop – content areas that are dependent upon posts, pages, home page, and custom pages you create
sidebar.php– the side area where widgets and other custom areas can be definedfooter.php– core closing HTML and footer content
Each of these are highly customizable but critical for theme development. Understanding how a page is rendered will help you troubleshoot and identify where various pieces of content you want to customize are located.
Here’s a common theme layout.
Let’s break each of these down so you can tell what goes where and how to find it if you happen to view the rendered HTML page on a WordPress site.
header.php – What Browsers See First
The header.php file has all your normal markup to tell a browser how to interpret the contents of the page. Typically everything from the starting <HTML> tag to the beginning of The Loop (content) can be found in your header.php file. This includes navigation areas.
The first thing I look for in a header.php file is the initial head content to see how the browser will interpret my content. For example, a theme may have an old DOCTYPE that can throw off interpretation of HTML5 content, as an example. So check the head info out to make sure you’re theme is going to be compliant with whatever DOCTYPE you declare.
Of course, the theme navigation is a big deal as well. While you can fully customize the navigation using Hooks that can be used in a plugin or your functions.php file, it’s a pretty important to know how your theme handles the navigation area, so definitely familiarize yourself with this area. Below is a small section of a Theme’s header file.
The Loop
This is where the content of the page is displayed. You can display the home page, a post, a page, summary of information from posts and pages, and other custom content you create. The key here is to understand that The Loop is the primary dynamic area of your site. This is where content is loaded based upon what the user is looking for.
The other elements – header, sidebar, and footer – are fairly static. They won’t change much from page to page. But The Loop is the part of the code that grabs the content specific to that page/post and displays it.
Below is an example of what a loop can look like.
sidebar.php
If you display a sidebar, this is file that generates the content. Widgets are typically loaded here. You can customize this area to an infinite degree. The key is to understand that the sidebar area of a WordPress theme is an individual unit with its own set of rules.
I typically only modify the sidebar.php file when I need to create some kind of advertisement system or want highly customized features. Otherwise, it’s a good idea to just use (or create) a plugin that does what you want in the form of a widget.
Here’s a look at a Theme’s sidebar code
footer.php
The closing code and footer content is in this area. If I have a div that is floating around weird or some content that doesn’t stay where I want it to, it’s usually because their is either an extra closing div or I need to add one here (instead of in The Loop or in the sidebar.php file). Here’s an example of an extremely simple footer.
Page Types
The primary page types you need to know immediately are:
home.php– the home page for your sitesingle.php– the template for your postspage.php– the template for your pages- others – include
archive.php,category.php, andtag.php
There are many other page types and you can create your own custom versions for special cases or custom templates you may want to use. But these three are the primary page types used for 99% of the content your visitors will see.
home.php
This is your home page and contains any unique code you want for visitors to see. Typically I have some customized code in the home.php file to display unique content like videos, image sliders, and extra columns for organizing content.
single.php
This is the template of your post content – the parts of your site that get added frequently. In contrast, your pages remain fairly static in their content and are often your navigation menus.
The single.php is usually pretty small – it just starts The Loop. You can control if and where the sidebar.php file is call here.
page.php
Here’s where page content is called. It’s very similar to your single.php file, but it queries and displays content for a single page – as opposed to a post. You can create custom page templates very easily and choose which template you want to use when creating the page in the WordPress editor.
Other page types
The other common types of pages you may see are the archive.php, category.php, and tag.php files. These simply display multiple pages, posts, or other content in a truncated format. When you see a page with a summary of posts, this is usually an archive, category, or tag page.
Functionality Files
Last, but certainly not least, are your core functionality files that contain custom functions and styles that bring your theme to life. The three most obvious include:
functions.phpstyle.csscomments.php
functions.php
This is where your custom functionality comes from. While WordPress has scores of built in functions, most themes have their own set as well. If you want to create custom functionality, this is generally where it should go.
style.css
This is the core CSS file for your entire theme. You can always break it out into a separate file and include the file. For the most part, everything can and should go in your style.css file.
comments.php
Your comments.php file is where the magic for comments happens. You can customize this little file to do all kinds of interesting things.
Recap
WordPress has a powerful content engine that can be understood by its major parts. I think in terms of:
- Content organization – the parts of the page:
header.php, The Loop,sidebar.php, andfooter.php - Page types – how content is displayed:
single.phpfor posts,page.php, andhome.phpfor the home page - Functionality files – the
functions.phpandstyle.cssfiles - Extras – plugins and widgets for further customization
As you begin to develop your own themes, you WILL run into snags. This breakdown of the anatomy of a WordPress theme can help you understand where to look when experiencing problems.
Table of Contents
- Part 1: Setting up Self Hosted WordPress
- Part 2: Grasping Theme Anatomy
- Part 3: Templating with PHP
- Part 4: Beginning Our First WordPress
- Part 5: Preparing The Loop with Test Content
- Part 6: Learning The WordPress Loop
- Part 7: Getting Familiar with the Template Hierarchy and Building Pages
- Part 8: Creating an Easy, All-in-One Archive Page for Your Theme
- Part 9: Building Comments into your Template
- Part 9: Build a Dynamic, Customizable Menu
- Part 10: Widgetized Sidebars
- Part 11: Implementing Search
- Part 12: Your 404 Page