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

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
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion

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.

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
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion
18 Comments:
  1. I downloaded a theme and installed it but at the time of uploading, there is an error. Help me to fix this problem.

  2. hello!
    thank you very much for this website that youve made, its seriously been useful. the current theme i use is getting outdated and after having learnt HTML, CSS, and a little bit of PHP i now want to create my own template which this website seems to offer very very well, and has been well explained. cheers

  3. I want to know if the Underscore works on WordPress(.org) or the WordPress(.com)? I am fairly new to this, but am learning the fullest.

    • Hi there. Underscores is a starter theme for wordpress.org. Most everything you find on this website will be for .org.

  4. That last question above (the website) is kind of my question. I am building a new website for this group which is hosted on Bluehost.com. Our file count is relatively low for running 2 active website so there’s plenty of room to add the underscores theme so that I can learn about themes. Is it OK if I add underscores from the WordPress “Add a theme” location in wp-admin? It won’t in anyway interfere with the other files there will it?

    • Hi Margaret,

      Installing a theme will not interfere with other themes, no. If you are new to WordPress, though, I would highly suggest looking for a WordPress introductory course, perhaps wp101: https://www.wp101.com/ This site is dedicated to theme development but it assumes you are already familiar with the inner workings of WordPress.

      • Thanks Sean! I’m so happy to hear from you. I will absolutely check out the course you recommended in your email. But I have already learned so much from reading your modules. They are very clear and helped me understand the continuous and integrated nature of the php files. Next I will go through the videos.
        I mentioned in an earlier email that I started building websites with Macromedia Dreamweaver 2004. I guess I am primarily a designer — I need to be able to see the results of the changes I’m making in real time. Text editors tend to not be WYSIWYG.
        I really really want to build my own themes because I do not want to be at the mercy of a developer who thinks I should use what they created with no modifications.
        More later.

        • Hello again! I ended the previous message rather abruptly and just wanted to explain. This is the first time I have ever purchased a theme from Envato Marketplace, (or anywhere else, for that matter). In hindsight, I perhaps should have purchased the html version instead of the full blown CMS version. If there’s a bell and whistle out there for theme developers, this theme includes them all. We like it. It includes Visual Composer, Woo Commerce, Modern Tribe for Events – I’ve dumped the last 2 because it was just too much for our little group. I basically asked the Developer to help me identify the files where I could change the email contact form (it comes with Mail Chimp, we use Constant Contact) and to reroute the sidebar Donate button to Act Blue (from PayPal). He hardcoded those two elements. He said it would require a customization and to talk to Envato about it. The he took off for 10 days, his wife had their first baby. I get that. I support family — I’m a Democrat. But, that’s just not the kind of customer service I’m used to.
          Is it unreasonable to expect to be able to modify a theme? If so, that’s just crazy.
          Anyway, I say all this to let you know that I am motivated to learn BWPY and I hope that you are still in business and will accept my interest as sincere.
          And finally, all future emails will be kept short. I promise.

          • I’m glad to hear you’re excited to learn! The thing to understand about the WordPress development community is that there are no actual rules. While there are guidelines and best practices that many of us try to follow, no single developer is obligated to behave a certain way within the community, in response to support, etc.
            That said, it is not uncommon to:

            1. …find yourself with a product that was not put together with your best interest in mind. Envato is a really popular marketplace. But trust me when I tell you it’s not because of code quality. It’s because of variety, also known as the vast array of bells and whistles. This is something you’ll notice more over time. But the main influencer there is design and cool features, which causes a lot of developers to sacrifice usability to make sales. I do not purchase or use themes from that marketplace. They are not all bad. But I’d rather roll my own:

            2. …receive bad support. Many theme and plugin developers work 100% on their own. Some simple have a hard time keeping up. Some are receiving support requests that take up too much time for the amount of money they’re charging. This is again common with Envato products because many brand new WordPress users find themselves making their first purchases there and asking very simple but time consuming questions and the developer just can’t keep up. And some developers are just flat out lazy.

            All of that said, the purpose of BWPY is to encourage everyone to be self-sustaining in this space. It’s not necessarily a site for support but of course I will answer questions about my own material or products. But a lot of it is just a push in the right direction.

            Understanding WordPress itself will be instrumental in understanding themes. No two themes have to do *anything* alike. So the common thread to understand themes does not actually lie within the theme. It comes from understanding WordPress itself and having some theming experience of your own.

            So just give it time and keep playing around with things like Underscores. Perhaps make some tweaks to it on your own (watch my video series… it will help). Over time, you’ll find yourself understanding how to move through any theme, regardless of who built it.

            And yes, short is good (ironic, right?). 🙂

  5. How to make a child theme on this underscores starter theme to prevent error and code changing when underscores gonna be updated.

  6. Hi Sean

    First of all I would just like to thank you for all the time and effort you put into making this course. I am really enjoying it and find it extremely easy to follow along.

    Just a suggestion from my side, perhaps put a “next page or section” to this course at the bottom of each course section?

    Regards
    Abdul

  7. Hello Sean! I got a question for this moment in the process of building a wp theme.
    I know that WordPress.org (the codex) not recommend Bootstrap. Which Css Framework you recommend for design a WP theme under underscores?

    • Hi Mario,

      I actually don’t have any recommendations. Sorry. I’ve never been one to use CSS frameworks. I just write the CSS I need whether I’m working with WordPress themes or some other sort of website. So really, I’d say just use whatever fits your needs as far as design goes as well as efficiency.

Leave a Reply

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

*