How To Create a WordPress Theme From A HTML/CSS Template Part 3 – Styling Your Theme

In this third part on how to create a WordPress theme, we’re going to implement all the different designs that you use in your template, by tayloring the CSS to work with WP. (Or if you’re starting from scratch, I’ll show you how to apply some basic styles to WordPress to make it display content like a normal theme.)

Let’s start by adjusting the design of the header, including the header image, text and the menu.

Open up the style.css file.

In general you should be able to do most of these initial changes to CSS that you want to affect all pages by simply copying and pasting the relevant CSS, and then changing the selectors based on the difference in ID and classes.

We’ll still cover each section step-by-step for those who need the instruction.

The first thing you probably want to change the style of is the header. Use the #site-title id as a selector. An example:

#site-title h1 a{
	font-family: YOURFONT;
	text-decoration: none;
	color: #000;
	font-size: 12em;
}

We can use the class “wp-custom-header” to style the header image/video. The id you want to target is #wp-custom-header. Embed if it’s video, or img for images. Let’s say in your theme the header is full page, your css code should look something like this:

#wp-custom-header img {
	width: 100%;
    height:100vh;
}

Now let’s deal with styling the menu.

If we take a look at the unstyled menu, it is a complete mess. Because it’s displayed vertically and also because the child links get shown by default.

Let’s say in your template you already have a horizontal menu that reveals child items on hovering the parent, simply apply that CSS to .menu ul , .menu li, li.page_item_has_children ul.children, and .children li.

If not, a very basic CSS style to achieve that in WordPress looks like this:

.menu ul{
	list-style-type: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	display: block;
}
.menu li {
	display:inline-block;
	float:left;
	margin-left: 1em;
}



.page_item_has_children:hover > ul.children { 
	display: block;

}

ul.children {
	display:none;
}

.children li {
	float: none;
}

This pushes the content if you hover and show child menu items though, so if you want the child menu items to float on top of the content, you can set the position to absolute.

ul.children {
display:none;
position: absolute;
}

This leaves our final menu looking something like this:

Next you can meddle with other design in the header, such as the search box, if you chose to include one in your theme. Simply target the different input under the #search id. I don’t like the standard button design so I changed it to be flat, black background to mold into the surrounding, and changed the text to white.

#search input[type="submit" i] {
 height:100%;
 width: auto;
 border:1;
 border-style: solid;
 border-color: #fff;
 background: #000;
 box-shadow:none;
 border-radius: 0px;
 color: #fff;
}

#search label {
	display: none;
}

This leaves the header area looking like this. There are of course many more things you can do to change the design of the header, but let’s move on to the rest of the page.

Now that we’ve finished our basic index page template, it’s time to move on to unique page templates.

The complete bare bones of template we set up earlier left us with just one page template for all occasions, index.php. Before we move onto creating different templates for different kinds of pages, we need to style our page a little bit.

By default, the way that we’ve made our index.php file, everything is full width, and the sidebar is pushed to the bottom instead of being an actual sidebar.

To work around this all we need to do is set container widths. The easiest way to do it, is just to set the widths and margins using percentages. (If you are a more advanced HTML/CSS developer, you might want to look into CSS grids as more an more browsers start to support it.)

For example:

section#content {
	display: block;
	width: 75%;
	float: left;
        box-sizing: border-box;
	margin-right: 1em;
}

div#sidebar {
	display: block;
	width: 25%;
	float:left;
}

You can choose to either set the margin or padding as a percentage, and take that percentage out of the content area, or you can set the content area’s box sizing to “border-box” like above (this will include padding in the width), and set the padding manually.

At this point, you might notice that the thumbnails are flowing out of the main content area and into the sidebar, to counteract this, simply use this snippet to restrict the max-width of all pictures to 100% of it’s container:

img {
	max-width:100%;
}

As far as entry titles, and the entry content goes, style it however you see fit. For example by changing font, or size.

.entry-title h1{
	font-size: 5em;
}

.entry-content p {
	font-family: arial;
}

Now let’s move onto the sidebar. You can easily manipulate the design of your sidebar by working with #sidebar div, and the .widget-title selectors. If you didn’t start with a template, you could for example add an underline to the titles, and add some padding.

#sidebar div {
	padding-top: 1em;

}

.widget-title {
	font-size: 1.5em;
	text-decoration: underline;
	padding-bottom: 0.5em;
}

Fairly straight forward. Finally it’s time to deal with the footer and the footer widget area (if you included one). For example, if you want the individual divs to show up next to each other three in a row instead of displaying downwards in full width, you can use the simple code.

#sponsors div {
	padding-top: 1em;
	display: block;
	width: 33.3%;
      width: calc(100% / 3);
	float: left;
}

However few or many sections you break the sponsor widget area into is up to you, and is easily changed by altering the %. (If you choose 2, 4 or 5 you wouldn’t need to use calc however.)

With the footer done, that should be it for styling a basic all-purpose index page that is used only when other templates are not chosen.

Responsiveness
Now your style should look reasonably presentable on a computer screen, but that still leaves the important task of making it look presentable on other screens. Now given that we’ve set the width of our divs with percentages, they are already responsive, but having multiple columns show up on smaller screens make it difficult to read.

If you designed a full-width design first, it’s appropriate to use max-width queries to apply different styles to smaller screens, if you designed a single column design for mobiles first (as many consider to be best practice these days) it’s appropriate to use min-width queries.

This means that if you started with a single column design, you’d include CSS to create a multiple column design that would look something like this:

@media only screen and (min-width : 320px) {

section#content {
	display: block;
	width: 100%;
}

aside#sidebar {
	display: block;
	padding-top: 1em;
	width: 100%;
}


#sponsors div {
	padding-top: 1em;
	display: inline-block;
	width: 100%;
	color: #fff;
}
}

@media only screen and (min-width : 992px) {
	section#content {
		width: 75%;
		float: left;
		box-sizing: border-box;
		padding-right: 1em;
	}

	aside#sidebar {
		width: 25%;
		float:left;
	}

	#sponsors div {
		float: left;
		width: 33.3%;
		width: calc(100% / 3);
}

}

This CSS delivers the basic one column design to mobile first, and then a two column design with sponsors in 3 columns to computer screens. (The 992px width breakpoint is used by major frameworks such as bootstrap for laptops.) There are a number of breakpoints you can introduce to your design, for wider screen computers or tablets etc. You can take a look at what twitter bootstrap works with here.

In the next part of the series, we will cover how to work with page templates to implement different designs from your template (or simply how to create them from scratch.)