9. How WordPress Themes Work

The first part of this book was about setting the stage for your website. These were the foundational lessons and steps—getting a domain, getting a host, installing WordPress, installing plugins, and installing themes. Now in Part 3 of the book, we move into making your website come alive with all the customizations that we can throw at it—without you having to learn coding. Before we move on to Chapter 10, “Tweaking, Tuning, and Customizing Your WordPress Site,” and Chapter 16, “Customizations Without (Much) Coding,” I thought it would be a good idea to really explain what WordPress themes are all about. As you know from Chapter 5, “Installing WordPress Themes,” themes are a piece of cake. Finding and activating a new look for your website can take just moments, but often when I’m teaching WordPress classes, I find that it can be confusing for new WordPress users to understand what a theme will do, what a plugin will do, and what WordPress does in determining the look and feel of your website.

Frankly, it’s a little confusing to me at times, as well. Themes can include features that are often managed with a plugin (such as social media links to your Twitter, Facebook, and other profiles), and plugins can do things that themes often do (such as changing layouts). However, there are some general guidelines for how themes and plugins are supposed to behave. This is what we’re going to talk about in this chapter—how themes work and interact with WordPress, your content, and plugins.

In WordPress, there is no option to “go naked”; you always need a theme activated for the site to work. There is always a default theme included with WordPress so that there is some way to display your content when WordPress is “turned on.” If for some reason, you delete all the themes from wp-content/themes, your website will be a blank page. Nothing. Zip. Why? Here’s why.

WordPress themes are the instructions for how WordPress should lay out your website. The theme defines the headers, sidebars, footers, menus, and creates the HTML code for the site to be “a site” as well as pull your content from your database. Your theme—through the style sheet—sets the colors, fonts, how big the text is, and where text will and won’t appear on the site. Themes even go so far as to tell WordPress how to organize the structure of your content (from the presentation standpoint). Without all that information, WordPress has no idea what to do with your website. It can’t even create the website itself because it doesn’t have the instructions to do so! So, yes, your theme is more than just a wrapper for your website. It’s more than just a suit of clothes that makes your website look smokin’. Your theme has the code to make your website exist.

All WordPress themes need two things to work. They need files to describe, define, and create the web pages (the HTML code itself) and a style sheet that defines how things should look and be laid out on the site. In truth, the simplest WordPress theme needs only two files, index.php and style.css, to work. The index.php file includes all the HTML required, as well as the special code (called The Loop) to pull the content from your WordPress database, and style.css defines how things should look. In practice, no one has a theme that simple, but it’s possible. In reality, WordPress themes have all the pieces and parts of the layout as separate files (such as header.php., footer.php, sidebar.php) just to make coding and editing the theme easier and the site load faster.

That’s WordPress themes in a nutshell—a set of files that define how a website looks and that pulls information from the WordPress database to put the content there. Now let’s talk about what you’re actually doing when you are customizing your site/theme in Chapter 10.

Chapter 10 can’t cover everything themes can do because themes can do so much now. To cover all the custom post types, post formats, dynamic home pages, and other new theme options, I could write a book just about those and I’d still end up leaving things out.

Some themes (both free and commercial) have more extensive settings available, such as custom logo areas, social media settings, default layout settings, and color choices. When themes have that many options and settings, often there is an option to save/export those settings and then restore/import the settings as well. This is a very handy feature if you need to start fresh at some point or are a developer and need to move a site from one server to another.

A newer feature of WordPress is that a theme’s settings aren’t lost when you switch to another theme. So if you have Twenty Eleven (still one of my favorite of the default themes) all tricked out the way you like it, then you try Twenty Thirteen and change your mind, when you reactivate Twenty Eleven your settings will still be there. It is still a good idea to double-check things, but you shouldn’t have too much work ahead of you.

This brings us to how you know what is a theme setting versus a plugin or WordPress setting. That answer is pretty simple. If you are changing a setting on an option under the Appearance setting, it’s for just the theme; if you’re using an option that’s under the Settings section, it’s sitewide regardless of what theme is active. This can get confusing when themes and plugins have their own buttons on the sidebar (if you look at Figure 6.1 with the menu bar from my site versus our demonstration site, you’ll see these buttons), but generally, if a theme has a button, you’ll know it (and will clearly affect only that theme), and plugins with their own buttons are still sitewide changes. Confused? Don’t worry, as you work with your site, it will make sense in context. Remember the discussion in Chapter 7, “Setting Up Your WordPress Site the Right Way: SEO, Social Media, and More,” when we discussed Google Analytics code? This is exactly one of those times when you could have the setting in a plugin or the theme.

Yes, they really were that bad. Things changed with WordPress 3.0. Big things. Version 3.0 wasn’t just a huge leap forward for WordPress as software (menus and a host of other improvements were launched), but it was the version when the Twenty Ten theme was introduced. Twenty Ten changed everything about the default theme packaged with WordPress. It was elegant. It had solid design and typography behind it. Twenty Ten included support for all the new features in WordPress 3.0 (custom headers, custom backgrounds, menus, and more). Maybe most important, Twenty Ten was designed as a parent theme, but that meant that developers and designers could make new themes based off of Twenty Ten without changing the original theme. If new features were added to Twenty Ten (which happens with every new version of WordPress), those new features would be included in the child theme automatically.

Since then, each year has brought a new default theme. Each theme tries to take a slightly different design direction, giving new users some real choice for their sites before they even need to start looking through the Theme Repository. Personally, I really liked Twenty Eleven. I made a child theme for it (mostly as practice for teaching and writing my second book, Using WordPress) and used that as the theme for my personal blog for a year or two (that’s a long time for a person like me). At the time I’m writing this, Twenty Twelve, Twenty Thirteen, and Twenty Fourteen are the themes included with every new WordPress install. You can download Twenty Ten and Twenty Eleven from the theme repository, and both themes are still maintained and updated by the theme team at WordPress.org. (Yes, there is a team dedicated to just theme design, development, and maintenance.)

FIGURE 9.1 How the Twenty Twelve theme looks in your browser.

The same theme, now on a tablet in landscape orientation, is shown in Figure 9.2.

FIGURE 9.2 The same theme, on an iPad in landscape orientation.

And in portrait (Figure 9.3).

FIGURE 9.3 The 2012 theme on an iPad in portrait orientation.

And finally, an iPhone. Note that the Menu is now behind the Menu button (Figure 9.4).

FIGURE 9.4 The 2012 theme on an iPhone.

All this is built in, ready to go from computer to tablet to mobile device. Twenty Twelve was the first default theme to do this and recognized that people need to have an out-of-the-box solution for supporting mobile devices. Yes, there are great plugins to do this (Jetpack and WPTouch are my favorites), but if you don’t need a plugin for a feature or layout, that’s much better. Remember, you should use the fewest number of plugins to do the job required—extra plugins can slow down your website. I’ve found Twenty Twelve (and Twenty Eleven) to be solid themes for both websites and blogs. Although I like the design of Twenty Eleven better, Twenty Twelve is a solid theme.

FIGURE 9.5 Theme Twenty Thirteen.

Twenty Thirteen was built to give WordPress users a choice between themes that could work great with blogs (but were even better at creating websites) and a theme that is intended to be a blogging theme. The focus is on the words on the page, not putting things in sidebars and such. Like Twenty Twelve (and all the themes now), Twenty Thirteen is responsive and written in HTML 5. If you want to blog away and write great words, Twenty Thirteen is a solid theme to start with.

FIGURE 9.6 The demo site using Twenty Fourteen.

One of the cooler features of Twenty Fourteen is how it can highlight featured posts. Through the Customize section (we’ll talk more about it in Chapter 10), you can have posts with a specific tag (featured is the default, but you can change it) displayed at the top of the home page as a grid (as you see in Figure 9.6) or a slider (as you see in Figure 9.7).

FIGURE 9.7 Featured posts as a slider.

The Grid setting is the easiest to “get right”; picking the right size featured image to display is much simpler. For the Slider option, you should have images at least 1038 pixels wide (or bigger). In either case, you quickly stop using the featured section by not having any Posts with “featured” as one of the tags. Twenty Fourteen highlights an esthetic of focus on the content, not on bells and whistles on the page.