Seasoned WordPress users are pretty familiar with the concept of themes. They allow you to customize your site and swap out functions and features as you see fit. There are tons of themes to choose from, both free and premium, that give you robust options.

But even if you know how to install a theme and customize it, you might not be so clear as to what exactly goes into a theme. That’s what I’m going to explain today.

So get out your notebooks and No. 2 pencils, class. It’s time for WordPress Theme Anatomy 101.

The Basic Elements

All WordPress themes are made up of a few essential elements. They are:

• HTML: The basic building block of all websites, HTML stands for HyperText Markup Language and uses elements enclosed in tags (<tag>like this<tag>), most of the time to help web browsers identify how a web page should look.
• PHP: A scripting language that runs server-side, PHP is used more often than not generate elements of a web page. It is typically embedded within an HTML file.
• CSS: This stands for Cascading Style Sheets and is a quick way to change the look and formatting of an entire website just by modifying one file: style.css. So long as each of the files within a site call up the CSS file, those pages will adopt the style elements identified there, from fonts, colors, tables, and so forth.
• Images: Usually JPEG or PNG files, images bring a WordPress site — well, any site, actually — to life.

These elements are used to power the structure of the site and ensure everything shows up where it’s supposed to.

The Bones and Muscles

I’m calling the site structure the bones and muscles. Normally, you’d think to separate the parts you’d identify as “bones” from the parts you’d identify as “muscles” into two separate categories, but when you’re dealing with WordPress theme structure, the bones and muscles are tied up all together.

So, while the basic outline of a site includes the homepage, post, comments, and sidebar, it’s much more useful to talk about how these parts function together.

The Home Page

Since WordPress runs primarily on PHP, as we established above, the home page is actually made up of two files:

• index.php
• home.php

When you visit the home page of a WordPress site in your web browser, the HTML will call up these two PHP files. Then, these files will call up additional files to generate the website on the spot. It’s pretty cool how dynamic all of this is. WordPress is anything but static, and taking a peek at the operations that push a site from the server to you is pretty impressive.

To get more specific, the index.php file calls up the following files:

• header.php
• sidebar.php
• footer.php

If you’ve poked around at the internal workings (the PHP files) in themes at all, you probably understand what the above files are referring to.

• The header.php file brings up the content you want to appear at the top of the homepage. This usually includes the name of the site and top navigation elements.
• The sidebar.php file calls up the sidebar portion of the theme, which is where most people place their social media stuff, site categories, recent posts, recent comments. and so on.
• Finally, there’s the footer.php file, which calls up the footer portion of the site.

The index.php files tells the header, sidebar, and footer where to appear on the page and each of these subsequent files tells the browser what content to display in those areas.

Individual Posts and Pages

On most WordPress themes, the attributes for individual posts are carried in the single.php file. When you click on the “Read more,” link on the teaser for a post on the homepage of a blog, you’ll be taken to that individual post. While you can have many posts on a site, how they look and function are determined by the single.php file. It’s a template, basically.

The same can be said for individual pages. You know, your “About Me,” “Contact,” and other static pieces of content? Page attributes are carried by the page.php file.

Categories, Tags, Search, 404 and Comments

Similar things happen server-side for the categories and tags pages. Individual category pages are generated using category.php and archive.php and tags are handled by tag.php.

So, when you create new categories or new tags, they’ll automatically be included on their respective pages, with all of their associated content included. Again, it’s pretty cool to think how all of this happens when you click on a link. It’s all disassembled content, and with one click, it’s cobbled together.

If the theme you’re using has the option of adding a search box (which they all do), the search results will appear thanks to search.php. And if someone makes a boo-boo when typing in an address or a link is broken, that’ll be handled by 404.php. Can you guess what comments.php controls? Yup. The comments section on each post is handled by this file.

It’s a pretty simple concept to understand when you get right down to it and every WordPress theme uses these bones and muscles to hold the structure of the site together. Without these elements, the site wouldn’t exist in any usable sort of way. It’d just be a bunch of disparate components. A header floating here. A footer floating there. It’d be a headless, footless, beast of a thing and we definitely wouldn’t want that!

The Skin

Now that you have an idea of how WordPress themes function, let’s talk about their form for a moment.

We’re talking about CSS here. I’m calling this the “skin,” because it dictates how your WordPress theme looks. Where the “bones and muscles” above are the main components that tell your web browser what to load and where, the CSS file controls the layout and design elements within those structural elements.

To put it more simply, while the PHP files control where the header shows up, the CSS tells it what size and font the text should be in that space, where images should appear, and if there should be any tables (and, if so, how large each cell should be). You get the idea.

CSS is the makeup or tattoos of your WordPress theme. Without it, the site would be bare bones and very plain. All the content would appear where it’s supposed to but it’d be pretty drab. You know when a website breaks and everything goes all white background, Times New Roman, blue hyperlink, and left align on you? Yeah. That’s what WordPress themes would look like without CSS. It’s not pretty.

Conclusion

Every theme uses these same anatomical components to build up a fully-fledged WordPress framework that you can customize and tweak to your heart’s content. But when you get down to the bones and muscles and skin, every theme is pretty much the same. It’s what you do with them that counts.

Now customization…that’s another topic altogether. Several topics, really. But now that you know how it all goes together, you’ll have an easier time diving in.

Over to you, readers. What do you like most about how the anatomical bits and bobs of WordPress go together?

Photo Credit: Double–M