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

WordPress Theme Building Course!

This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.

FULL COURSE

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.

Screen Shot 2014-01-24 at 3.00.55 PMStyle 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.

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

wordpress-page-template

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 the entry-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() and the_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.

For those of you who know how to use your browser inspector, this is why you never see PHP when you inspect HTML elements. You’re in the browser (client-side), so you only see the content retrieved by the PHP… not the PHP itself.

WordPress has a large number of PHP functions like the_title() and the_content() ready for use in your themes.

If you understand HTML, and you are aware of which WordPress function does what, you can combine that HTML and PHP to create any kind of HTML structure that displays any type of data saved to the databased.

Your structure and display options are endless. The typical blog layout is simply a trend, not a requirement.

This is how HTML and PHP come together in WordPress to handle the Content pillar of a website. Please go back and read this section again if that does not make sense.

How WordPress Themes are Styled

Though styling is what themes are most known for, it’s actually secondary to the section above. It’s not hard to understand why.

In this context, “style” refers to the way content is designed. We’ve already looked at how the content pillar is established in WordPress. Now we need to style that content.

css3-logoCSS is used to style HTML. It’s that way for static file websites as well as WordPress websites. There’s no difference. We don’t have to spend much time on this section because it’s fairly simple.

When building your WordPress theme, you (or the starter theme creator) chose the HTML tags to use as well as their classes and IDs. Now you simply need to use CSS to target that HTML in order to create your design.

Because most WordPress themes are built using a template system, the perfect use of CSS selectors will oftentimes handle styles all the way across your site.

Page content, Post content, archive listings, search results, and 404 error content, for example, will most likely all sit within the same HTML container element, as described in part 1 of this course. So all it takes is one CSS rule for that particular element to handle the display of all the aforementioned web pages.

This is how the dozens, if not hundreds or thousands, of your WordPress “pages” will be styled using just one stylesheet – style.css. This means a strategic approach to theme templates is critical.

Bringing the Important Pillars Together

In review, a few different elements come together to make a WordPress theme act as static website.

PHP retrieves saved data from the database and partners with HTML to display that data. Then CSS is used to style that HTML into what we recognize as a WordPress theme.

You downloaded Underscores in part 1 of this course. If you installed it and took a look, you noticed that it looked quite plain. Though its stylesheet includes plenty of styles, they are only the very basics in order to overwrite default web browser styles and set a few style rules to build your custom style upon.

Besides that, you have nothing but the first pillar – content. Your theme is just a complex combination of HTML and PHP.

At this point, Underscores is a fully functioning WordPress theme. Now it’s up to you to style it.