How to Build a WordPress Theme Part 6 – Theme Design
Build Out Your Visual HTML Structure
Again, I’m not here to teach you CSS. That is not within the scope if this course, and shouldn’t be.
If you are already familiar with the language, you understand that not all CSS properties focus on making things look pretty. Some of them are more concerned with how HTML behaves structurally.
That should be your first concern here. As stated in part 1, the natural HTML flow of your content and sidebar containers is one on top of the other. So if you have Underscores installed already, you’ll notice that your “sidebar” appears beneath your content, as it should.
Now it’s up to you, the theme designer, to change that if, for example, you want your content to be on the left and your sidebar on the right.
Please understand that your content HTML flow is important regardless of how it’s positioned on the screen. It doesn’t matter if your layout is content/sidebar or sidebar/content, the HTML flow needs to remain main content above sidebar content as main content is more important on the page and needs to be available to search engine spiders before less important or irrelevant content is read.
This is where the HTML structure of your template files becomes important.
Remember how we talked about the HTML similarities between the content containers of the various template files? They all called the header, footer, and sidebar just alike. But they also needed to share a common HTML structure around the loop.
The reason for this shared structure is now that you’re writing CSS to position your content and sidebar containers, it’s important that the classes and IDs used in the single.php
file are the same as the classes and IDs used, for example, in the search.php
file.
Can the HTML be different? Sure… as long as it’s intentional. Otherwise, you’ll end up writing many lines of CSS just to get multiple elements to look exactly the same. That’s silly when they could just share the same CSS by sharing the same classes and IDs.
Let’s take a look at how this would work in Underscores.
Here are the single.php
and page.php
files with their loops removed for clarity.
Notice that there is no difference between the two HTML structures. The visible HTML is exactly the same and remember, they are sharing the HTML structures of the header, footer, and sidebar already.
With this kind of consistency throughout template files, we can write CSS like this.
Targeting all elements with an ID of primary
, we can style every content container across every template that uses the same ID. Now it doesn’t matter if WordPress serves a page or a post, the structure will remain the same thanks to one CSS rule.
To make things even better, only one class or ID needs to match across all template that need to follow the same visual structure. So since we target the primary
ID there, we could also give each of those same HTML elements in different template files a unique class that only applies to the template it’s used in.
Being unique with your classes, IDs, and styling is perfectly fine. But before being unique, the goal is to minimize CSS by combining/sharing code wherever possible. That’s just good practice.
With that understood, you’d approach your visual HTML structure by bring all of the pieces together and viewing the HTML as a whole.
Because we know that each page served in our basic theme will include certain components thanks to our strategic approach, we can open up ourheader.php
, footer.php
, and sidebar.php
files. Lastly, we’d want to open up a file we can use to represent the content container of all other template files. If you made them the same, like they are in Underscores, index.php
will do.
Opening those four files in our text editor gives us the opportunity to visualize the full site HTML structure much like we did in part 3.
Remembering the breakdown of which template handles which part of the above HTML, we know which HTML elements to target in our CSS file based on which part of the site structure they represent.
This is really easy to do in Underscores since the structure is so simple. You’d simply need to choose a class or ID applied to the header element in the header.php
file, a class or ID applied to the footer element in the footer.php
file, a class or ID applied to the sidebar container in the sidebar.php
, and a class or ID applied to your content container across all basic template files.
Underscores takes its HTML structure one step further and wraps all body
HTML inside of a container with an ID of “page.” You can see this div
container start just inside of the HTML body in the header.php
and it’s closed just before the closing body tag in the footer.php
file. You’d use this container to determine the width and placement of your site with CSS. Then everything inside of this container, which is everything we’ve discussed up to this point, will still behave as expected.
As we discussed in part 1, Underscores actually comes with CSS you can use to setup either a content/sidebar or sidebar/content site structure. It’s located inside of the /layouts/content-sidebar.css
and /layouts/sidebar-content.css
files. By default, it is not used by your theme.
Though you can write PHP to utilize whichever stylesheet you want from where they currently sit in the file structure, there’s no need have your WordPress theme load an additional stylesheet just for the few rules found in those files.
Instead, open up one of the two CSS files in your layouts
directory and copy its CSS into your main style.css
file. Refresh the site and you’ll see the site structure take shape with whatever content-sidebar configuration you chose.
Very simple stuff.
This kind of styling is what you want to do very when setting up your new theme. Get the overall structure of your web page together first before you start designing small details.
What we’ve done is setup the visual structure for Underscores, a basic layout. Understand that along with the freedom to adjust template files however you’d like as well as the ability to create new ones with new HTML elements, how you handle the CSS for your visual structure depends 100% on how you handled your site structure through HTML.
Build Out Your Design
Once you have your overall structure in place, that’s when it makes sense to start designing your theme for “looks.”
There are two stages to this process if you are using Underscores as your starting point.
- Slowly look over the default
style.css
file to see what you’re already given - Write your own CSS
The reason why you want to look over the style.css
file is because so much work is done for you already.
One of the most overwhelming tasks a new theme developer will face is the amount of things that need to be accounted for when building out a theme design. HTML elements that you’d never consider using on your own personal site still need to be designed if you’re building a theme for distribution.
That said, Underscores does a great job of giving you a head start. Though there aren’t very many fancy styles in place for you, what you need to style is there already so you don’t have to go remember all HTML elements, figuring out CSS selectors, and other redundant tasks.
It is perfectly normal to use some of Underscores’ CSS and delete some of it as well. For example, I don’t like the head start it gives me with styling input elements. So I delete all of it and write it on my own.
That’s still better than having to build out the entire CSS file. Remember, Underscores is just a start theme… a tool. You still have responsibilities to build out your theme.
Once you’re familiar with what’s already styled for you and what CSS selector already exist, you can start writing CSS to make your theme look magnificent.
Understand that your stylesheet will most likely be lengthy so organization is key.
Because you looked over your stylesheet already to see what Underscores had done, you now know what to put where. So when you start styling sidebar elements, for example, make sure you go to the widgets area of the default stylesheet to place your new CSS.
There’s absolutely no reason to have widget related CSS in multiple places in your style.css
file.