How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP

I will not be teaching you how to write HTML, CSS, or PHP. It is assumed you are already familiar with the languages at least at the beginner level. If you don’t really know PHP, don’t worry. You’ll be fine.

Understanding WordPress is understanding web development. Before ever touching WordPress, I built static websites with .html and .php files.

Because of that experience, learning how WordPress works was as simple as observing how it does what I could already do.

In this lesson, I want to talk to you about the three pillars of any website, regardless of the software script used to build it. Then, with that understanding, I’ll show you how WordPress brings those pillars together to make a theme.

The Three Pillars of a Website

First, let’s go ahead and kill the assumption that HTML, CSS, and PHP are the three pillars. They’re not. Instead, the three pillars are content, style, and behavior.

Content refers the information you see on the screen. Text, images, links, buttons – all of that is content. Content is what it is, not how it looks. HTML is responsible for outputting content to your screen.

Style refers to the way content is designed. What makes a button blue? What makes a link red? What makes a background gray? HTML is styled by CSS.

Behavior refers to what a website does as you interact with it. This is not as simple as a hover color for links. That’s still styling. Behavior is more like page scroll animations, and JavaScript typically handles that.

There’s no doubt that I just generalized content, style, and behavior. But that’s more than enough information to help you understand what we’re about to get into.

We will not be talking about Javascript, so feel free to eliminate the behavior part from your mind for this lesson. Instead, we’ll add PHP to the party and pair it with HTML under the content pillar. Let’s get busy.

How WordPress Themes Display Content

To understand how WordPress themes work, you must first understand what they’re responsible for doing.

WordPress is written mainly in PHP, which is a server-side language. That means PHP does what it does at the server and then sends whatever it needs to send to the user’s web browser.

PHP, when combined with another language we won’t talk about, also has the ability to send data to and pull data from a database… which is why every WordPress install needs a database.

Blog posts, site titles, categories, and even individual checkbox options are all data that WordPress saves to a database every time you submit or save your content or options.

This means everything you input into WordPress, any settings or options you save, and everything you do to make your site unique gets saved to a database.

That said, we now know that all of your content (the first pillar) is stored in a database. When using WordPress, PHP can be used to retrieve that content piece by piece.

This means that instead of my old fashion way of building websites with static HTML files, I can simply use an HTML template filled with PHP snippets that retrieve whatever content I want to display in a particular spot within my HTML.

WordPress themes are just that… HTML templates littered with PHP snippets that go and grab post content, widget content, taglines, etc. from the database whenever and wherever the theme developer has chosen.

Here’s a slightly modified (for clarity) example what the content portion of a WordPress Page template might look like.

Notice that the majority of the template is HTML. Simple stuff, right?

Building this website from scratch using static files, you’d need to type your Page title between the H1 tags and type your page content inside of theentry-content div.

However, that means you would have one Page with specific content on it and any other page you created would need to have its own template. How inefficient is that?

Instead, WordPress uses what is called the loop along with the_title() andthe_content() PHP functions you see in the screenshot to determine which Page is being loaded so the title and content data you’ve already saved to the databased can be retrieved and inserted into the HTML.

the_title() will retrieve whatever you typed into the title field of that particular WordPress Page and the_content() will retrieve the content you created for that WordPress Page.

And like we discussed earlier, PHP is a server-side language. So this hard work is done at the server. Then, the content retrieved from the database is dynamically placed in the HTML template and served to the user’s browser, giving the appearance of an actual static HTML website.