Chapter 2. Introduction to WordPress Themes: Anatomy of a Theme

For and (?)

In the previous chapter we went over the principles of a theme and used the ‘house analogy’ that labeled themes as “the finish work of the house.” Let’s get into what those pieces and parts are that make up a theme.

Anatomy of a WordPress Theme

Not all themes are coded or designed or even function the same. But there are some elements that are mandatory to a theme in order for it to be recognized by your installation of WordPress as a “valid” theme. And then there are some elements that are not mandatory, but that are common to most themes today.

It’s up to the WordPress theme developer

You can think of each .php file of a theme as an enabler. By that I mean WordPress has hundreds of things available to developers such as actions, filters, functions, APIs, loops, hooks and more. If a developer does not put in a specific function to do something like enabling Featured Images to show on Posts, then they won’t show (even if you assign a featured image to a Post.) Themes do not come with all possible functions and features of WordPress; a developer adding its code to the theme enables them individually.

When a developer decides to use a function such as Featured Images, they also need to decide parameters like size of the image, if it should link to the Post or to the image itself, alt tags, and how it aligns on the page (left, center, right.) And Featured Images is just one possible function of a theme! There are literally hundreds of these pieces and parts that developers have at their disposal, each with their own set of parameters.

Analogy: In the previous chapter we compared WordPress Core to the structure of a house. We mentioned that wiring should be considered embedded in the structure. This wiring reaches every part of the house. The theme is like the finish work, which would include electrical sockets.

These electrical sockets can be thought of as the actions, filters, functions, APIs, loops, and hooks of a theme. The electricity is available in the wall, but if the contractor did not put in an electrical socket on a wall, you can’t readily to tap into that power. In fact, you would have to tear open the wall and add an outlet, just like you would need a developer to modify the theme (see chapter 13.)

The mandatory parts of a WordPress theme

While WordPress.org does not dictate how themes must be made, they do have a short list of items that must be present in order for WordPress Core to consider it a valid theme and allow it to be activated. In fact, it’s only two files: the style.css file for styling the website’s overall look and feel; and the index.php that basically gathers any other files for the theme.

WordPress Codex. Again: WordPress.org does not dictate how themes must be made, but they do however manage a site called the Codex where developers, owners and operators can share and find the latest guidance on theme development. While it can get very technical at times, it’s not just for developers: http://codex.wordpress.org/

When you upload a theme to WordPress via the Admin Panel, it unzips the file and looks for the style.css mainly to get the name and version of the theme from the topmost part of the file called the stylesheet header. Frankly, WordPress doesn’t care if there is any code (or CSS rules) beyond this, though if it didn’t have it your site would look pretty basic.

WordPress uses this stylesheet header to identify the theme, as well as index it in the “Themes” section (Appearance > Themes) and to display supporting details about it.

A screen capture of a valid CSS header for the default theme “Twenty Seventeen.”

It also looks for the index.php file which has two basic jobs: one is to gather up any other theme files it needs to build the structure of the site, and the other is to make a request to the database for content to show on the page. This content could be things like blog posts, page content, and widgets, as well as build the navigation menu. In many themes, this file also builds the home page.

Another mandatory part of a theme is really a piece of code within a file, and it’s called “the loop.” It’s a complex and powerful piece of code that makes a request of the database to get things like a list of blog posts, content for Posts and Pages, as well as all the common elements like the title, metadata, excerpts, tags and more. You will often find a loop on a handful of files in your theme.

The Loop. WordPress doesn’t care if the loop is in your index.php file, or any other file for that matter. It doesn’t even look for it when you upload the theme. But, it is a mandatory part of the theme for the fact that you need it to get dynamic content from your database. And for that reason, themes have at least one loop installed. Further reading on the loop.

Common pieces of a WordPress theme

There are some elements that you can count on to be in the vast majority of well-coded and robust themes. For instance, the header, footer, sidebars and navigation are in almost every theme. They may look different and live in different parts of the screen for each theme, but they are there.

Buying tip: When looking for a theme, look for the terms “sidebar”, or better yet, “widgetized sidebar” (which I’ll explain below.) There is a trend toward dropping the two-column layout in favor of a full-width layout in order to ‘clean it up.’ I’m not fully convinced this is a good layout to rely on for your entire website, so I recommend you buy a theme with the traditional two-column plus sidebar option still available.

Since WordPress started out as a blogging platform, themes that want to use Pages to make their site more like a traditional website (not just a blog) will need a page.php file. This file controls the content for a Page, such as its structure and layout, title, metadata, the main content, whether it has a sidebar or not, and more. Today, it is pretty rare for a theme to not have a page.php file.

The sister file to page.php is the single.php file. It displays your individual Posts. Where the index.php file can be used to show what some refer to as the “blog roll” (a list of all your Posts), the single.php file shows only one of those posts. It too dictates things like structure and layout, title, metadata, the main content, whether it has a sidebar or not, and on and on.

When visitors view pages for archives, categories or tags, the theme uses the index.php file. The developer can control the content and layout of these sections using an archive.php, category.php, and tag.php file, respectively.

In my opinion, a theme without sidebars is like a house without windows. Sidebars allow you to dynamically showcase just about any content you have on your site in a specific area of the page, which is why many themes will come with at least one or two sidebars. You may see them showing lists of Pages, Recent Posts, tags clouds, Twitter feeds and more.

Crazy as it sounds, while navigation menus are very common to websites, being able to customize them in the Admin Panel is not always possible. You would think this would be mandatory, but the fact is allowing a user to customize the order and names of tabs in the navigation menu is something a developer has to include in the theme’s functions.php file. So keep that in mind when selecting a theme—you want to be able to edit and change the contents of your navigation menus!

Names

All themes have a name attributed to them. You will find themes called “Twenty Thirteen,” “Solo,” “Canvas,” “Ozzie” and on and on. In a world where there are tens of thousands of themes floating around and no global WordPress theme name registry, you could come across two or even six themes with the same name. This can be confusing for those times where you are searching for a theme based on the name you know it by.

Public themes found in marketplaces use this name (much like any other product does) to brand it apart from others and make it memorable. Custom themes created for one client will have a name attributed to it because WordPress requires it to have one, and that name can be anything (I once saw a custom theme called “Magic Johnson” and another called “onetwothreefour.”)

There can be only one. Theme names and their respective folders play an important role when you go to install your theme, or go to add another theme to your website. In chapter 8 we will go over what names—especially folder names—mean for themes.

For now, know that you can only have one theme folder named “awesometheme.” If you were to find another theme developer selling a different theme also called “Awesome Theme”, it is highly likely that its folder name would be “awesometheme” as well. And this will become problematic when you go to install it. Again, more on this in chapter 8.

Widgets, and widgetizing

The WordPress Admin Panel has the capability built into it to control the placement and content of widgets. During the coding of a theme, a developer must consider if it will be “widgetized”, how many widgetized areas there will be, and where they will be placed on the page as well as any specific styling for them. Most developers have at least one to three widgetized areas made available.

Contrary to popular belief, they do not have to be in a sidebar. They can be located just about anywhere on the page: in the header, before the footer, in the footer, across the middle of a home page, and even assigned to Custom Post Types.

It is important to know that widgetized areas are tied to the theme. Meaning, if your current theme has three widget areas in the footer, it’s likely your new theme won’t recognize them, even if it too has three areas for widgets in the footer. The reason is that the theme’s widgets have unique names assigned to them and each of them is coded differently. It is highly unlikely that your new theme will have the exact same names and code for its widget areas.

See chapter 14 for more of what to expect when switching themes.

Screen capture showing inactive widgets. This can happen when you switch to a new theme that does not recognize the previous theme’s unique widget names and structure. All information and settings in the widgets is saved.

The WordPress Theme Package: Contents

Theme packages are .zip files that include:

1. theme files (.php, .css, .js, .jpg, .txt, etc.)
2. sometimes secondary files like dummy content, plugins and documentation
3. tertiary assets like Photoshop files (more common with ThemeForest downloads)
4. and even non-related items like hidden system files, and markdown files meant for GitHub.

A screen capture showing the contents of a typical theme package. In this example, you would upload the “simplefolio.zip” file. We’ll go over this in detail in chapter 8.

WordPress Theme files

We already introduced you to these, and will cover them again throughout the book.

Photoshop files

Photoshop files (files ending in .psd) are technically not part of the theme, though some marketplaces like ThemeForest will deliver them with the theme download package. These files are there to help you if you ever need to create new image assets like backgrounds or other visual treatments.

You should not upload Photoshop files to your server because they are often large files (further burdening your backup process,) and are not needed by the theme. If you want to keep them, store them locally (on your laptop.)

Dummy content (or sample content)

Some theme developers include an .xml file that contains dummy content (sample Posts and Pages with text and images.) If you are starting a site from scratch, you may find that this dummy content is helpful to flesh out the site a bit and speed up the initial setup. One benefit is that some themes come with numerous shortcodes, and these dummy content files often add a page called “shortcodes” to help show you how they work (though documentation of the shortcodes can sometimes be found in the documentation or marketing pages on the website of the theme developer.)

Caution: If you have an existing website and are switching themes DO NOT import this dummy content. Your existing website already has content, so it can cause confusion by adding more Pages and Posts to your website.

This content can be imported to your website via the Tools > Import screen in the Admin Panel (self-hosted users will be prompted to install the WordPress Importer plugin.) This content is often similar to the content you see in the demo found on the theme developer’s marketing pages, and usually contains some Pages, Posts, menu items, main content and images.

I find the vast majority of this content to be counter-productive, and in some cases the imported dummy content can be forgotten and turn into odd pages your visitors (or Google) may stumble across. Before you go live you will have to comb through your Posts and Pages to make sure all dummy content is removed, or hidden by placing into draft mode if you want to keep it.

Skip it. I recommend not using the dummy content. This file is really for people setting up theme demonstrations. If you have a client and you feel uncomfortable sending them to the theme developer’s demo to see how it works, only then would you use this dummy content to quickly create your own demo website.

Documentation / instructions

You may see a folder in the .zip file you downloaded from a marketplace or developer that says something like “docs”, “instructions” or “read me.” These are either PDF or HTML files that help you with setting up your theme and other related details.

I highly recommend you always read through the documentation before you upload your theme. If you ever have an issue with setting up a theme, make sure you refer to the documentation before you contact the developer. Read twice, set up once, as they say.

I recommend not uploading these to your server. In the vast majority of cases, they can run locally (off your laptop or USB drive.) Even if you are installing this for a client, I recommend keeping all documentation/instructions off the server and simply sending the files to the client to store locally. Why? If you store these files in the theme folder, or in the WordPress Core, they could be lost/deleted during the next Theme or Core update. If you must, store them in a folder at the root level of your server (outside WordPress.)

I believe all purchased themes (even custom themes where you hired a developer to create it) should include documentation with the download. It doesn’t have to be a 200-page book, but it should cover step-by-step documentation of all features that are controlled by the theme, like sliders, galleries, shortcodes, forums and online storefronts, and instructions on how to use them. High fives for the developers that go so far as to have links to video tutorials for complex features!

No docs from WordPress Theme Directory. Don’t expect extensive documentation from themes downloaded from the WordPress Theme Directory. In most cases there is a “readme.txt” file included in the download that documents the basic feature set of the theme.

If you install your theme directly from the WordPress Theme Directory using the Appearance > Themes > Add New button, then you will not see the download files, nor the readme.txt file. You can, however, view the readme in the three following ways:

• View in the browser by visiting: yourwebsite.com/wp-content/themes/themefoldername/readme.txt You will need to change out the domain name for yours and the theme name for the theme you installed (this is typically all lowercase and one word.)
• View on the server via your web host’s cPanel.
• Go to the Directory and search for the theme and download the files to your computer.

Plugins

Some theme downloads from marketplaces come with a folder containing third-party plugins. These can be for building forms, sliders, video galleries, and more. You will need to refer to the documentation or marketing pages to see if these plugins are required or recommended (see chapter 11, “Dealing with the required and recommended plugins for themes,” which also covers bait and switch and other gray-area business practices.)

Plugins do not get uploaded with a theme. They are uploaded using the Admin screen Plugins > Add New.

Superfluous files

You may find non-related items like system-specific files (Mac OSX .dstore files) or GitHub files (usually .md and .gitignore files.) These are typically harmless when uploaded with a theme, though if you run the plugin “Theme-Check,” you may see a recommendation to remove them.

Worse case scenarios are themes with malware, viruses and other malicious crap. For theme packages that I download, I always scan them with my anti-virus program to check for malware before I upload it to my server. If malware exists, I delete the entire theme package from my computer and notify the developer and or marketplace.

Once a theme is activated, I run Theme-Check to verify the contents and “test for compliance with the [WordPress.org marketplace] Theme Review guidelines.” If I find any major issues with Theme-Check, I notify the developer. I may still use the theme depending on the number and severity of the issues, but major issues may make me think twice.

Marketplace theme validation. Some marketplaces have a set of rules and minimum standards by which they test and validate themes and theme packages submitted to them. This can include the way the theme is structured, certain theme options, files included in the download (Photoshop files, documentation, images, etc), as well as ensuring HTML and CSS is valid. But, in no way does it mean all of this applies for all vendors. Some don’t check at all.

Check with the marketplace for a list of standards developers must meet. A vague list or no mention of standards/checks may be a sign for you to stay away from that marketplace. A long, prescriptive set of features and options themes “must have” is also a sign of a marketplace directing the market, and not allowing the developers, designers and customers to work that out for themselves.

An example of a list of standards is ThemeForest’s “WordPress Theme Submission Requirements”: (Included here without comment.)

The WordPress Theme Package: Source

There are three sources for theme packages:

• WordPres.org using the in-app method (Admin Panel) or the manual method
• Download from marketplace, agency or developer
• And the one you created. Yes, you too can create a theme package. There is nothing proprietary or secretive about it: you just compress the theme files you coded into a .zip file. Chapter 8 will go into detail about the format and structure of the contents of a .zip file.

Download and install from WordPress.org

This is considered the most lightweight option in that it only installs the necessary theme files and nothing else. Downloading from WordPress.org can happen two ways: in-app and manual.

The in-app method is done by logging in to your Admin Panel. Self-hosted sites require you to navigate to the Appearance > Themes > Add New screen. WordPress.com sites require you to navigate to the Appearance > Themes screen to start browsing.

In the case of the self-hosted site, you are searching for a theme in the WordPress.org marketplace and installing it (add it to your server) by clicking on the “Install now” ink. In the case of the WordPress.com sites, you are searching for a theme in the WordPress.org marketplace and activating it by clicking on the “Activate” ink. We’ll go over the differences of installing and activating in later chapters. The key takeaway here is that self-hosted sites store the theme files on their server. WordPress.com sites all share the same centralized theme files.

The manual method for installing themes from WordPress.org is only for self-hosted sites. It requires you to visit the marketplace, download a theme package to your computer, and then upload it to your self-hosted WordPress installation (see chapter 8, for details on the three ways to install a downloaded theme.) Again, every download I have received from WordPress.org only delivers the necessary theme files—no/minimal documentation, no Photoshop files, no junk.

Download from a marketplace or developer

This is considered the most full-featured option in that it often includes documentation, instructions, and sometimes Photoshop files and suggested plugins. In fact, downloading from a marketplace or developer can be interesting and surprising in what you get in the theme package. It can be anything from simply just the theme files, to a ‘grab bag’ collection of folders and files that make you question what they have to do with the theme at all.

Over the years I have found the following files in my theme downloads from marketplaces: a few .mp3 songs from an unknown heavy metal band, malware, plugins, a .zip file with hundreds of low-quality stock photography images still with watermarks, other themes by the developer, and I even once got a dummy content file that was chock full of links to veterinary pharmaceutical sites.