How to Build a WordPress Theme Part 6 – Theme Design
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
The final lesson covers theme design. But like the rest of this course, it’s not going to be what some of you may have expected.
WordPress themes are intended to be unique. Functionality aside, there’s no reason for two themes to look exactly alike. The way a theme looks is an expression of a designer’s personal style or the requests of someone guiding the creative development.
That said, the very last thing I want to do in this course is help all of my readers create the same exact theme. That’s pointless.
Instead, I want to talk to you about how to approach theme design when starting from scratch (as far as design is concerned) like you are with Underscores.
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 our header.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.
html-structureOpening 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.
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.
Seeing the Big Picture
Designing a WordPress theme is not a general task. Instead, how you approach the design is completely tied to how the theme was built.
So when you’re building out your template files and developing your site structure, you should already be thinking about how the overall design of your theme will look.
As described earlier, proper HTML flow should not be negotiable. Therefor, you have to be able to balance your content with your intended style.
It takes practice. It takes skill. But first, it takes an understand of what is expected of you as a theme developer.
Hopefully, this lesson gave you a clear understanding of your responsibilities as a theme designer.
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
The final lesson covers theme design. But like the rest of this course, it’s not going to be what some of you may have expected.
WordPress themes are intended to be unique. Functionality aside, there’s no reason for two themes to look exactly alike. The way a theme looks is an expression of a designer’s personal style or the requests of someone guiding the creative development.
That said, the very last thing I want to do in this course is help all of my readers create the same exact theme. That’s pointless.
Instead, I want to talk to you about how to approach theme design when starting from scratch (as far as design is concerned) like you are with Underscores.
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 our header.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.
html-structureOpening 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.
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.
Seeing the Big Picture
Designing a WordPress theme is not a general task. Instead, how you approach the design is completely tied to how the theme was built.
So when you’re building out your template files and developing your site structure, you should already be thinking about how the overall design of your theme will look.
As described earlier, proper HTML flow should not be negotiable. Therefor, you have to be able to balance your content with your intended style.
It takes practice. It takes skill. But first, it takes an understand of what is expected of you as a theme developer.
Hopefully, this lesson gave you a clear understanding of your responsibilities as a theme designer.
Share story
0 comments: