The Anatomy of a WordPress Theme

Using a WordPress theme is one of the fastest and easiest ways to get a high quality website. A good theme can allow you to implement all the latest design trends and get a site up the same day (5 minutes to install). Knowing the anatomy of a WordPress theme can help you get a better understanding of how a WordPress theme works.

The best thing about themes for many people is how simple and easy it makes your work. All you need is some basic knowledge to carry out complex tasks. There are many things a WordPress user can do without having any technical background at all. If you are looking for a theme, checkout out our WordPress Theme Repository. When you are theme shopping, make sure and choose a theme that has all the functionality you want built-in. 

This post goes over the different blocks and files that make up a WordPress theme – to accomplish two objectives:

1. Give you a better understanding of how a theme is works.
2. Help you understand how a WordPress theme generates web pages.

This article is good for anyone who wants to become more familiar with the terminology surrounding a WordPress Theme. We will look at some basics and then open up a premium theme and take a look at it.

How a WordPress Page is Structured

Modular design using grids make it easy to organize and manage content. Grid based designs are popular in graphic design and have been around for ages. Using blocks is a great way to utilize modular design. In web design, a block is a section of the grid.  Below is an example of a common WordPress grid for a webpage made up of php files. The files that make up this webpage include header.php, sidebar.php, index.php and footer.php.

The grid can be customized any way you see fit. You can rearrange blocks, add new blocks or replace them with other files. Below is an example of another possible grid layout. This layout adds search function via the search.php file and puts the sidebar to the right-hand side.

The example images can be found at WordPress.org

How does WordPress use a grid like this to generate a webpage? The answer to that lies in the HTTP client, your web browser. WordPress sites set index.php as the default file for a given URL. When you type in www.looks-awesome.com into your web browser, the web server will direct it to www.looks-awesome.com/index.php. The index.php file will use a list of other files to generate content, such as the header.php and footer.php files.

Below is an example of an extremely simple index.php file for a blog using pseudo code.

start
load header
load sidebar
if there are posts:
 load posts until there are no more
load footer 
end

So when you type in a URL in the browser, the code will run and generate a WordPress webpage. You will notice functions like get_header() and get_footer(). These will render the different blocks on your page. In the example above you can see that the blocks are loaded in a particular order. First the header, then the sidebar, then posts, then the content() adds a filter and finally the footer is loaded.

This is a very simplistic example. In most themes you will find much more code in the index.php file. Most of the time the index.php file will reference many other files located on your web server. This includes the following file types:

CSS – for styles such as mobile themes.
JS – Javascript files which handles dynamic behavior such as animation.
Img – images for icons, buttons, logos etc.
Language – for translation.

Below is an example of the index.php file for an installation of WordPress running the Enfold theme.

Files Needed to Make a Theme

All that is necessary to make a WordPress theme are two files.

1. index.php – creates the blog.
2. style.css – styles your website.

While the files mentioned above are all that is needed, there are almost always more files involved. Below is a list of some of the most common files found in a WordPress theme.

header.php – generates the header, which is usually made up of an image and a nav menu.
footer.php – generates the footer which typically contains widgets, links and contact information.
sidebar.php – sidebars which can contain widgets. The one on this page has category links, recent posts with thumbnails and a social sharing widget.
functions.php – adds functions to your site related to the theme/framework. It works like a WordPress plugin.
screenshot.png – this is a thumbnail image that represents the theme. You will see this image in Dashboard if you go to Appearance > Themes.
single.php – generates a blog post.
page.php – generates a static page.
archive.php – generates a page that displays posts sorted by date.
category.php – generates a page that displays posts sorted by category, such as our Themes page.
tag.php – generates page sorted by tag.
comments.php – generates page that display posts by comments.
404.php – generates a 404 page when a page or post requested doesn’t exist.
front-page.php – displays a static page as the home page or blog. You can change this option by going to Settings > Reading in the dashboard.

That’s a lot of files, but things get even more complex. If you are interested in learning more about how WordPress decides to which template file(s) to use on a page, check out the Template Hierarchy page at the WordPress Codex. Below is an example of an index.php file from the Bateaux Theme.

<?php
/**
 * The main template file
 *
 * @package bateaux
 * @since 1.0.0
 */
?>

<?php get_header(); ?>

<?php
 $archive_args = array(
 'type' => 'blog',
 'style' => bateaux_mod( 'blog_style' ),
 'sidebar' => bateaux_mod( 'sidebar' ),
 'sidebar_position' => bateaux_mod( 'sidebar_position' ),
 'entry_alignment' => bateaux_mod( 'blog_entry_alignment' ),
 'inner_spacing' => bateaux_mod( 'blog_entry_inner_spacing' )
 );

$content_class = 'btx-content';
 if ( bateaux_mod( 'page_title' ) ) {
 $content_class .= ' btx-content--with-header';
 } else {
 $content_class .= ' btx-content--no-header';
 }
?>

<div class="<?php echo esc_attr( $content_class ); ?>">
 <div class="btx-content-wrapper">
 <?php get_template_part( 'templates/bateaux/archive-title' ); ?>
 <div class="btx-container js-dynamic-navbar">
 <main id="main" class="<?php echo esc_attr( implode( ' ', bateaux_main_archive_class( $archive_args ) ) ); ?>">
 <?php get_template_part( 'templates/bateaux/archive-blog' ); ?>
 </main>

<?php get_sidebar(); ?>
 </div>
 </div>
</div><!-- #primary -->

<?php get_footer(); ?>

Final Word

This is not a definitive or comprehensive guide on theme structure. It is intended to familiarize you with how a theme generates pages. With WordPress and the web in general, there are multiple ways to do the same thing. There is no correct or incorrect way to structure a theme, just best practices. There are many other acceptable ways to construct a theme. Remember, that when you look for a theme make sure it has all the functionality you want before you download it. Many people realize this after they already purchase one. So if you want a photography website, checkout a photography theme and so on. For a guide to help you choose the right theme, see our post on Choosing a WordPress Theme. Thanks for reading and don’t forget to share if you like this post!