How To Tailor a WordPress Template In 15 Minutes

You know what my favorite WordPress development gigs are? The ones where I get to start from scratch and build out a theme on my own. I really don’t like having to jump into a previously modded theme and try to figure out what’s going.

So, let me show you my own quick fixes for skinning a WordPress theme. I’ll cover some of the obvious tweaks that you’re likely to encounter and show you how to jump into the fray fast.

Step 1: Child Theme or Bust

I cover creating a child theme extensively in other posts, but here’s the down and dirty version. Create a folder in your themes directory and save the below CSS as style.css and drop it into the folder:

[sourcecode language=”css”]

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url(“../twentytwelve/style.css”);

[/sourcecode]

This example takes the default Twenty Twelve theme in WordPress and makes it your own. If you have your own theme, just replace the theme folder name in both the Template tag and the import statement.

Now, go to “Appearance” > “Themes” and select your child theme. This is the safest way to build code, and frankly it’s a lot less distracting to work with a blank slate.

Step 2: Modify the Header Image

In WP 3.5+ and some older themes, you typically have the ability to upload a site header through an “Appearance” > “Header” or “Appearance” > “Theme Options” dialogue. If your theme has this available, it’s better to use it than to hardcode a graphic.

But, for you Ranger Joes out there who need to hardcode the image, you can typically find what you’re looking for in the header.php file. The Twenty Twelve theme has a wonderfully complex example of how to bloat some simple code. So, if you can work through this code, you should be fine:

[sourcecode language=”php”]

<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php echo esc_url( $header_image ); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>
<?php endif; ?>
[/sourcecode]

You can modify this to be:

[sourcecode language=”php”]

[/sourcecode]

Fit the width and height as you need it. Since you have a header-image class, you can get in there and add some extras as needed like borders, max-width, and the like.

Step 3: Import a Web Font

A really great way to give a site a personal touch is with a unique font for headings. I’m a big fan of the Google.com/fonts selection, and they’re incredibly easy to implement.

A simple example is one of my favorite fonts — Simonetta. It has four styles, so you can get a lot of leverage out of it. If you want to import all four styles, you would place this in your style.css file for your theme.

Note: if you have a child theme, make sure this import code comes after you import the parent theme’s style.css.

[sourcecode language=”css”]

@import url(http://fonts.googleapis.com/css?family=Simonetta:400,900,400italic,900italic);

[/sourcecode]

Now, you can declare this font for any of your styles — from paragraphs to headings or even specific classes. To make this webfont work for your H1 tags sitewide, simply add this to your style.css file:

[sourcecode language=”css”]

h1 {
font-family: ‘Simonetta’, cursive;
font-size:30px;
}
[/sourcecode]

Step 4: Colors, Colors, Colors!

Another really easy way to give a site its own look is by changing up the color scheme. While you’re going to hear all kinds of arguments about readability (and you should pay attention to them), I’m going to skip them and just say this: keep the fonts and their background high-contrast. Period. That being said, let’s change some of the colors in a theme, like the background colors and heading fonts.

Before jumping into your style.css doc, look to see if your theme has an “Appearance” > “Background” or “Appearance” > “Theme Options” like interface for changing the colors. It’s just so much easier to work with this and identify conflicts if you use the built in functionality for background colors. Most themes have them these days.

If not, in your CSS, you simply need to define this in your body element:

[sourcecode language=”css”]

body {
background-color:red !important;
}
[/sourcecode]

Note that I used the !important code to override any other functionality that may have been blocking my code. When working with a child theme, this can happen and an easy workaround is to just throw down the !important statement after your code.

You may run into the same problem with font colors (and other styles for that matter).

[sourcecode language=”css”]

h2 {
color: red !important;
}

[/sourcecode]

Now, if you look at your site and don’t see any changes, it’s likely because that particular heading may have its own class. For example, the default setting for the Twenty Twelve H2 on a post is to wrap the heading in a “entry-title” class that is also a link. So you will need to customize this in your style.css file like this:

[sourcecode language=”css”]

.entry-title a {
color: red !important;
}

[/sourcecode]

If the element you want to change is in some container with an ID, you may have to declare the style like this:

[sourcecode language=”css”]

#entry-title a {
color: red !important;
}

[/sourcecode]

Note that I used a “#” symbol instead of the period before the declaration. This tells your theme to look for something with the ID of “entry-title”, like:

[sourcecode language=”html”]

<div id=”entry-title”><h2><a href=”#”>Some Heading</a></h2></div>

[/sourcecode]

Step 5: Integrate a Slider/Image Carousel

I think every WordPress developer has their favorite slider, but mine is Revolution Slider. It’s not free, but it’s worth a few bucks for all the functionality. It takes some work to get the slides looking amazing, but the end result can be absolutely stunning.

Many premium themes come with a built-in slider, but if you need a freebie to get you started, check out Meta Slider. It has several options and a couple of different image carousels built into a single plugin.

Whatever slider or carousel system you use, dropping one into the home page and adding some images can have a dramatic impact on the design and can take just a few minutes to implement.

Wrap Up

With a custom header graphic, fancy font work, and changing up the color scheme of some of the primary elements like headings and backgrounds — you too can quickly mod a theme to have a custom look for whatever brand you may be working with.

How often are you called upon to tailor a WordPress theme? Do you prefer starting from scratch, or are you content to build a child theme and make the existing WordPress design your own?