The Anatomy of a WordPress Theme | WEB170 | Students of Premium Design Works

WEB170 » The Anatomy of a WordPress Theme

Tired of using the default WordPress theme? Me too. But, before we get into Creating & Customizing a WordPress Theme, we should probably take a look at what this whole theme thing is about.

What is a Theme?

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software.

You can find your theme within the “themes” folder inside the “wp-content” folder:

Dude… Where’s my Theme?

Here you can see the folders for the”default” themes that are packaged with the WordPress install download.

Eventually, we are going to create our own theme for our project in this class. But, for now lets take a look at what a typical theme looks like.

Let’s take a closer look at the theme that I use for my business site:

My Premium Design Works Theme

Inside the “premium-design-works” folder, you can see all of the files associated with my theme.

View: https://github.com/msinkula/premium-design-works

What are all of the files of a Theme?

Before we get into creating and customizing our own theme, we need to know how all of the pieces of a theme fit together.

These template files control how your site generates and displays the information from your Database. These template files call other pages as includes in order for the whole system to work together.

When a page in your WordPress website loads, it will load your theme files in a modular fashion:

page.php

Let’s take a closer look at the parts of a WordTheme and what each file does.

1) Pages (page.php)

When you are loading a regular page in your site, you will most likely load the Pages template:

The Page Template

Here you can see that the code for the default page template is incredibly light.

The bulk of this page’s code is within the “content” division tag where the loop is located.

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.

The loop pulls your page specific information from your database. This page specific content is then displayed as the main content of your web page.

Notice that the Pages template also calls the Document Head and Footer template files.

2) Single Post (single.php)

When you are loading a single blog posting in your site, you will most likely load the Single Posting template:

Single Posting Template

You can see here that this template also uses the loop and calls the Document Head and Footer template files.

3) Index (index.php)

When the blog feed loads (or the home page in some cases), you are most likely using the Index template :

The Index Template File

You can see here that this template also uses the loop and calls the Document Head and Footer template files via WordPress functions.

4) Document Head (header.php)

The Document Head is the first file that is included in your from your templates:

The Document Head Include

Your Document Head include typically contains everything from your doctype through your main Navigation Menus and possibly beyond.

5) Footer (footer.php)

The Footer include is the last file that is included in your from your templates:

The Footer Include

The Footer include usually contains any copyright statements any scripts as well as closing up the page’s code.

6) Widgets (sidebar.php)

The Widgets (sidebar.php) can be included from any number of places within your templates:

The Widgets (Sidebar) Include

The typical blog sidebar contains the category links for your posting and sometimes the main and sub navigation for your pages. It might also contain, some plugin widgets that show the latest photo you took of your family doing something totally adorable.

The Sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.

7) Main Styles (style.css)

Main Styles (style.css) is the main style-sheet for your site that is linked to from your Document Head include:

The Main Style-Sheet

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments.

Super Important Note: Don’t forget to put the WordPress Stylesheet Header or all of the WordPress Generated Classes within this file!

8) Functions (functions.php)

A theme can optionally use a Functions (functions.php) file, which resides in the theme sub-directory:

The Functions File

This Functions (functions.php) file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). It’s where I store a lot of my hand written functions like my awesome title tag.

Finally! It’s time to go to Creating & Customizing a WordPress Theme!