Image of the WordPress Admin Appearance screen.

To modify your WordPress theme, you will use the customization options in your WP-Admin Appearance sidebar, or create a Child Theme.

There are basically two ways to change or modify our WordPress themes: use the built-in theme options or change the actual code, preferably using a Child Theme.

But actually before we begin worrying about making changes to our theme, we need to ask the big questions

  • Is this change really necessary?
  • Is this change necessary now?

If the change is simply because we prefer cherry red to apple red, then we can probably skip the wasted time and expense; no one ever said, “I’m not buying this from Amazon because I don’t like its link colors.” And usually when someone says “But I want it to look like a real website” what they mean is that they want the Front, or Home, screen to appear non-blog-style. That’s built-into WordPress already and is explained in another post here.

If, on the other hand, there is a good reason — with solid data to back it up — then keep reading. I’ll explain how to use the built-in options, how to modify just the CSS for things like colors, and what is needed to make structural changes like getting rid of the author or date, or adding an additional menu to the footer.

We may want to make the minimum changes necessary. For example, if  our target audience are middle-aged, middle-class, suburban Romance readers, then the hipster earth-tone banner and colors of the Twenty Thirteen (or even Twenty Fifteen) aren’t appropriate. The minimum change needed would be the header banner and probably some of the colors like the brown sidebar background. But we don’t really need to start fussing with fonts or moving sidebars and so forth. Everything you could possibly need in terms of features (e.g., slide shows, boxes, forms, managing sidebar widgets, et al) are available through a plugin.

Having identified a true need, for a quantifiable reason, we can proceed with a defined goal — and know when to stop!

Start With Minimal Theme Changes

If we find ourselves fussing over small issues of design and layout, we need to stop, just stop. Fussing over minor theme details — particularly layout, color schemes, and fonts — is a sure sign that we know, deep in hearts and minds, the problem isn’t with the design, it’s with the content, the product, or the business. No one has ever decided not to buy a product or service because a link was cherry red instead of apple red, or the button was 1/16″ too far (or close) to the text, or the font didn’t really nail our “identity.”

We have no control over the device the site visitor uses. Repeat after me, we have NO control over the device the site visitor uses.  In 2015, there will be more website visits from mobile devices (smart phones, tablets, et al) than computers.  Visitors may be using anything from a “watch” to a tablet to a notebook computer to an 80” high-definition TV. So this is why we want a theme that uses Responsive Design, and we put our focus on making the content — the images, video, text, Calls to Action — as effective as possible. Let the professional theme developer present our content in the best possible fashion for the screen-size used. (Which, of course, means using professionally designed themes like the WordPress default themes or premium themes from dedicated WordPress developers.)

Two Ways to Customize Your Theme

Having decided we do need some theme customization, there are basically two options and approaches. We can either use the customization options included in the theme design or plugins from inside our WordPress-Administration, or we can create custom code, usually CSS, to effect changes.

There were some significant changes between WordPress 4.0  and earlier versions that affect changes. I recommend upgrading to the most current version of WordPress before you start for a number of reasons, not the least of which is security.

Using the Theme Options in WP-Administration

First, I’m assuming the theme comes from a trustworthy, professional WordPress theme developer (and if you don’t know why, you might want to quickly check out the first part of this post on trustworthy WordPress Theme sources). I honestly don’t know of many currently available themes for download from wordpress.org that don’t include at least the option modify the header and background of the theme. Many, including Twenty Fifteen, now include options to change the colors, and many offer options for modifying fonts. If you  know there is a specific customization you will likely need — or want —  then you should look for a theme that offers that type of customization.

Themes For Total Design Control

There are premium themes that offer total customization and layout control — such as ElegantThemes’ Divi, Pagelines’ DMS, and DIY Themes’ Thesis 2. Do keep in mind, however, that the more options and power, the higher the learning curve.

Screen capture of the WordPress Admin theme customizer sidebar

The WP theme customizer sidebar shows what options are built into your theme. By clicking on the right-hand arrows, you expose your option details.

Wordpress Admin for the Twenty Fifteen theme customizer color options.

In the Twenty Fifteen theme, not only can we specify the colors for certain elements, but there are some built-in color combinations.

Wordpress Admin color scheme Blue for Twenty Fifteen theme

Choosing the Blue color scheme loads different CSS code for some elements in the Twenty Fifteen theme.

Unfortunately, it isn’t always possible to find everything we want in a theme that meets our skill or budget limitations. Which leads us to our second option, custom coding.

Changing the The CSS Code

Most of the customization we want or need to do is basic styling. These are changes to the CSS (Cascading Style Sheet) code, usually in the style.css file. Unless your theme has an option to add custom CSS code, you should make all changes using a Child Theme or a custom CSS plugin, because each time a parent theme (the theme we are using as our base theme) is updated, it overwrites any changes made. (And you can imagine how frustrating that was if you changed the Parent Theme directly every time!)

You will need a Child Theme if you are making structural changes to the php files. We’ll look at this kind of change in a moment, but for now we’ll look at just making CSS changes. For details on creating Child Themes, check out the WordPress documentation here.  And, obviously, you will need to know something about CSS, HTML, and php coding.

Which CSS Selector & Property Needs Changing?

Wordpress Admin customizer screen showing theme menu in serif font.

Let’s say we want to make the Navigation Menu in the same sans-serif font style as the site title.

The first thing we  need to know is what code are we changing.

We need to know what CSS selector and property you are wanting to change. And if this a global, local, or selector-specific change. Fortunately, our modern computer web browsers offer tools to help us find out exactly what CSS needs to be changed.

Notice I said “computer web browsers?” Unfortunately, in dumbing down mobile device browsers, short-sighted companies (yes, I’m talking to you Apple and Google) have eliminated most of the developer tools and view source options in mobile browsers. For Firefox, you will need to download and install additional developers’ tools (add-ons) such as Firebug. For Chrome, you will find the Developers Tools under View > Developer drop-down menu and check out the Elements.  For Internet Explorer 11+, press the F12 key on your keyboard to open the tools and use the DOM Explorer. (If your keyboard doesn’t have function keys, you can use the IE Tools menu.) For Safari, under the Develop drop-down menu, select “Show Web Inspector.”

Make the minimal changes necessary.

When creating the custom CSS, let the style element inherit everything except what you absolutely must change. For example, if we only want to change the font choice in our site title in the header then we should simply specify only the font-family attribute in the designated selector like this:

.site-header h1 {font-family: Baskerville, Georgia, Times New Roman, serif;}

This will leave everything else about site title the same — color, size, spacing, and so forth — while changing only the font family used.

The fewer changes made the less likely we are to create a “train wreck,” conflicting code or unexpected outcomes, that send us down the rabbit hole of chasing all of the problems we have created. Making minimal changes will save us both time and money in our site development now, and later as our base theme is updated and new web devices and features come on the market.

Next, we need to know the CSS code to use to make our change.

In this case, we want to use the same font family style as the site title, so we can find that in our browser and copy the CSS. We could, of course, also have just written the code (if we knew the which font-family we wanted).

Using the browser developers' tool to see the CSS for the site title font family.

We can use the browser’s inspection tool to find the CSS defining the font-family we want, and copy-and-paste (or just type it in, if we’ve got a good memory).

Now we need to know the selector ID for the element we want changed.

In this case, we want to change all the font families in the navigation menu, so we can apply our change to the group ID, “#site-navigation,” rather than drilling down to a very specific CSS class and element like “.secondary a:hover.”

Identifying the CSS tag for the site navigation using the browser developers tool

Using the browser developers’ CSS inspector tool, we can find the CSS selector that affects all of the elements we want changed. In this case, the ID “site-navigation.”

Finally, we can write or paste our code into our Child Theme style sheet (or the custom CSS option in our WordPress Administration),

The Simple Custom CSS plugin editing form

Using the Simple Custom CSS plugin, instead of a Child Theme, we can make CSS changes in our WordPress Administration. Alternatively, having installed and activated a Child Theme, we can edit the style sheet with the Appearance > Editor.

—save it, and view our change!

Oops! Uh-oh, what if we didn’t get the result we expected?

Didn’t work? First, of course, we need to clear the cache and reload the page just to make absolutely certain we are seeing the current results. Still doesn’t work? Usually errors fall into one of two general areas: no apparent change or other changes we didn’t want.

Common Problem #1: No Apparent Change

Are we certain we have the complete selector property? For example, perhaps we wanted to change the site title color and we made the change:  “.site-header h1 {color: #cc0000;} — but nothing happened. Let’s check again. Is the site title by any chance a link to the home page? Ah! In reality the site title element is “.site-header h1 a”, the anchor link styling which overrides our text color change.

Common Problem #2: Changes We Didn’t Want

To reduce unexpected results, we need to determine how global is the change, and how does our theme treat that attribute throughout the stylesheet. For example, if we determine that we need to change the link color throughout the template, we may think we only have to change the anchor link selector — a — and be done with it. Or perhaps all the anchor link selectors —  a:visited, a:hover, a:focus, and a:active.

But if we’re modifying WordPress Twenty Thirteen, it’s not so easy! Changing the global anchor colors won’t have any affect on most of what we see in the header, the content or the sidebar. We have individual area styling in that theme, so we’d have to style ALL the individual ID stylings of our anchor links: .entry-content a, .comment-content a { color: #bc360a; }; .entry-content a:hover, .comment-content a:hover { color: #ea9629; }; .format-status .entry-content .page-links a, .format-gallery .entry-content .page-links a, .format-chat .entry-content .page-links a, .format-quote .entry-content .page-links a, .page-links a { background: #e63f2a; border: 1px solid #e63f2a; color: #fff; }; .format-gallery .entry-content .page-links a:hover, .format-audio .entry-content .page-links a:hover, .format-status .entry-content .page-links a:hover, .format-video .entry-content .page-links a:hover, .format-chat .entry-content .page-links a:hover, .format-quote .entry-content .page-links a:hover, .page-links a:hover { background: #fff; color: #e63f2a; }

And that’s just related to the post or page content! It doesn’t include the header, footer, or sidebar styling!

So if we are wanting to make a number of changes to our theme, we’d best put on some soothing music and drink some camomile tea before settling in for some serious work.

Are we absolutely certain we need this modification to our theme?

But what if the changes we want to make are to the actual template structure and not just the stylesheet(s)?

Customizing the Theme Templates & Functions

The most common requests I get for customizing  are:

  • Make the Front, or Home, Page look like a “real” website instead of a blog.
  • Eliminate the author’s name or other meta information such as date.
  • Eliminate or change the wording at the top of archive and category views.
  • Have widgets appear on some posts or pages, but not all.
  • Add another menu, usually to the footer.

The first one is built-into WordPress and I’ve explained how to do it in this other post. The others require you actually make code changes to the php templates. Some are simple changes, others require editing both a php template but the functions.php file.

I can’t possibly cover all that’s necessary to make substantive changes to a theme’s templates and functions, however, there are some relatively simple things that can be done with limited PHP and HTML knowledge. Learning how to comment out code in PHP, HTML, and CSS is recommended for anyone planning to try DIY coding.

Example of Commenting Out the Meta-Data on Content

Let’s say we want to keep it completely clean and have absolutely no entry meta-data — author, date, categories, tags — in our posts and we are using the Twenty Twelve theme. The easiest way to do this would be to create a Child Theme (details here) and copy the content.php template into it. We then open the content.php template, find where the entry meta-data information is in the HTML, and comment it out like this:

<!-- <?php twentytwelve_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>  -->

Why comment it out instead of simply deleting it? Well, we could. It depends entirely on your approach to coding. I’m rather lazy and strongly suspect that I will find myself wanting some of that information on my posts later, so rather than have to go look it up in the Parent Theme (Twenty Twelve), copy the necessary code, re-paste it into my Child Theme, and then edit it, I can just un-comment it, and modify the code in situ. I prefer to do the minimal amount of code changes at all times. (Note: The changes above only affect Standard posts, if we use any other post type for Twenty Twelve, we’ll need to copy those into our Child Theme and edit them as well. An alternate method for eliminating all the entry meta-data — except the date —  in the Twenty Twelve theme, is to use the Quote post type instead of the Standard post type.)

Of all the WordPress default themes, my favorite is Twenty Twelve. Not only is Twenty Twelve a clean design that’s easy to modify, but it comes with three page templates: default with sidebar on the left, full width with no sidebar (great for what internet marketers call “sales pages”), and front page with two sidebars at the bottom of the page. Page templates allow us to have distinctive layouts and feature control. With some judicious use of plugins and widgets, even the non-technical site owner can have an effective site like this one with minimal effort: The Dungeness Crab and Seafood Festival.  You can find find out about creating your own custom Page Templates here on wordpress.org.

I’ve created a basic Child Theme for Twenty Twelve that does add a menu in the footer, allows you to edit the footer copyright, and change the link and title elements, while making full use of the templates and features of the Twenty Twelve theme. You can install it and edit the templates with your Appearance > Editor (just be certain you keep a backup copy in case you need to start over):

Click here to download: CECTwentyTwelveChild

It used to be necessary to do some pretty clever coding and create a great many templates to control where sidebar widgets appeared based on things like categories or individual pages, however, there are now plugins that can manage widget appearance within our sidebar areas. The most popular is included as part of WordPress.com’s Jetpack plugin. Jetpack requires we have a WordPress.com account, even if we don’t use the free blog offered. If we don’t want to install the entire Jetpack plugin, there are others such as  JP Widget Visibility and Widget Visibility available from wordpress.org here.

If we want considerable total control and customization, our choices are purchasing a fully-customizable framework theme— such as ElegantThemes’ DiviPagelines’ DMS, and DIY Themes’ Thesis 2 — or building a new or Child Theme. If we aren’t proficient in PHP, HTML5 & CSS3,  we should hire a professional WordPress theme developer or dos some study. There are excellent courses and references at Learnable.com

Which brings us back to the question —

Is this theme change absolutely necessary?

And if you are going to muck about with your site design, you may want to read this post on Creating a WordPress Development Sandbox. 

Please Support the Site: Shop Our Affiliate Links*