An Introduction to WordPress Theme Anatomy for Beginners - ManageWP

An Introduction to WordPress Theme Anatomy for Beginners

Anatomy

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:

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:

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:

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 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

Tom Ewer

Tom Ewer is the founder of WordCandy.co. He has been a huge fan of WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not working, you're likely to find him outdoors somewhere – as far away from a screen as possible!

5 Comments

  1. Theodor Imholz

    Hi
    Thank you for this lesson in anatomy.
    regards
    theo

  2. Keith Davis

    Nice run through Tom
    I think that most of us take WordPress for granted, not to mention all those awesome plugins.

    I use Genesis, which takes us on to child themes… a topic for your next post maybe?

    I’m not bad with html and CSS, but all I can do with PHP is copy and paste.

    1. Tom Ewer

      Thanks Keith. I’ll keep it in mind for next time :-)

  3. Carolina

    Great article Tom! As an avid WordPress user with not much front-end coding experience, it’s really interesting to see the breakdown of how exactly the WordPress framework fits together. Thanks for the anatomy lesson!

    1. Tom Ewer

      My pleasure Carolina!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>