To create a WordPress theme, the next thing we would like to do with our theme is to edit the functions.php file. Currently, the maximum content width is set to 640px but our full-width design asks for wider content and it is a good idea to change 640 to 900. This ensures that no content will be wider than 900px in our theme.
Next we have theme support for post formats, but since we don’t need most of these, I’m going to remove them so that they don’t clutter our dashboard needlessly.
Just replace the code in the picture with add_theme_support( ‘post-formats’, array( ‘aside’, ) );
If we need to support a post format later, we can add it at any time.
Next we have the option to support a custom background. If we don’t want the users to “break” our design with a custom color of their own, we can just deactivate the option by either commenting or deleting the following code:
The design of our theme uses three fonts – Times New Roman, Ariel, and Droid Serif. While the first two fonts are common and we can use them right away in our stylesheet, the third one, Droid Serif, must be properly enqueued in functions.php.
First, we must search for the custom font we need in Google Fonts, and when we find it, we will just add it to our collection.
Then, we press the “Use” button and the site automatically outputs the code we need to add to our theme to enqueue the fonts. In our case the resulting code is:
[code language=”html” 1=”true”]<link href=’http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’>[/code]
Now that we have the link we need from Google Fonts, it is time to create a new function inside the simple_portfolio_scripts function in our functions.php file like this:
This is actually all you need to do to add this font to the head section of your markup.
If you wonder whether you have done this the right way, you can check it with your browser. Just reload the front page of your theme in Chrome, right click and inspect any element and then go to Resources -> Frames -> localhost -> style -> css. You should see the new font we have already added.
This is it. We’ve done it properly, although we haven’t told WordPress where we want it to apply this font. Now it is time to apply fonts to existing elements and style them the way we want. However, having a single post and only a single Sample Page that come with WordPress by default, isn’t very helpful. That is why it will be a great idea to import the Theme Unit Test Data, which will populate your WordPress installation with the needed data for testing your WordPress theme against different types of content. Just go to Tools -> Import and click on WordPress. This will install the WordPress imported, with which you can import the data we are talking about. Once you activate the importer plugin, click on “Choose file” and point to the Theme Unit Test Data you have already downloaded.
Then just press on “Upload file and import”, place a tick on “Download and import file attachments” and click Submit. The procedure takes some time to complete and once it is over, you’ll have all the content (posts, pages, images, comments, etc.) you need to test your WordPress theme against.
Now it is time to start styling the elements. If you scroll down to the Typography section of your style.css, you will see that Underscores uses rems instead of ems for font sizes. This is because getting the math right with ems is complex. Rems are relative to the outermost html element, which in our case is html. This is why the first thing I always do in my WP themes is to set the font size of the html element to 62.5%. This allows me to easily calculate rems from pixels. For example, if the font-size of the text area is 16px, the value in rems will be 1.6rem.
The font-size in pixels serves only as a fall-back for older browsers that do not support rems. Say, for example, that you want to match 18px in font size with rems. You can simply type “font-size: 1.8rem”.
I’ve also set the font-family to Arial, because this is the font for the body area of our design.
Right below the text area in our Typography section we have the headings. And now you can see from the screenshot below why we needed to enqueue that particular font. It is because the headings in our index.php template, the one that displays the latest posts of our blog, are in Droid Sans.
Now I’ll just set the font size of all the headings to 3rem and the font family to Droid Sans by adding the code below:
[code language=”html” 1=”true”]
.blog h1,
.blog h2,
.blog h3,
.blog h4,
.blog h5,
.blog h6 {
font-family: ‘Droid Sans’, serif;
font-size: 30px;
font-size: 3rem;
}
[/code]
The reason why I’m using the “blog” class is to ensure these styles only apply to the blog section of our site and not to the pages we will be creating later as these have different styles.
I’ll also set the color of the links to the color of our PSD design and remove the text underline style, like this:
[code language=”html” 1=”true”]
.blog h1 a,
.blog h2 a,
.blog h3 a,
.blog h4 a,
.blog h5 a,
.blog h6 a{
color: #518e00;
text-decoration: none;
}
[/code]
As you see, all our blog headings are now just the right size in rems, use the Droid Sans custom font we enqueued previously and are of the color we want them to be.
Here is a list of all the other parts on how to create a WordPress theme: part 1, part 3, part 4, part 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
