Changing Site Header in WordPress Theme 2012 aka Adding Custom CSS

On one of my self-hosted WordPress sites, it kept niggling at me that the size of the header on the main page was so small relative to the rest of the text. It needed some “oomph!”.

Old Chess Club Heading

Heading Before Change

One way to do this is to hunt for the CSS file which affects the presentational features of the responsive site. In this case, you can do that in Chrome by right clicking on the element (the heading in this example) and choosing Inspect Element. Once done, you should see something like this in the bottom right section of the opened sidebar.

Location of CSS File

Location of CSS File

See the style.css part? That actually lives in wp-content/themes/twentytwelve but should you actually edit it? Nope!

There are a few reasons why though:

  1. When the theme is updated (as they often are), you might lose your changes.
  2. You might inadvertently make other changes which damage the site in some way.
  3. You don’t need to!

The way around it is so much easier and doesn’t require any direct access to that file or the file system on which your theme is hosted.

Firstly, go to Plugins -> Add New and in the Search Plugins textbox (upper right), type in Simple Custom CSS (this is a direct link). There are many others but this one works well and has some good reviews.

All being well, you should see something like this:

SimpleCustomCSS Plugin Results

SimpleCustomCSS Plugin

Click on Install Now and follow the usual instructions for installing a plugin. Here, I don’t have that button, but that’s only because I have already installed it.

Next, once you have activated it (there should be a link once it is installed – just click on it), select Appearance -> Custom CSS from the side menu.

Now if you think back to when we inspected the element in Chrome, it referred to “.site-header h1” – that’s the element that we want to change (and only that one). Our last step is to add the following:

Custom CSS Code

Adding Custom CSS Code to Increase Header Size

This tells WordPress (via the plugin) to make all h1 site header tags be a font size of 3.5rem. REM? That’s a CSS3 unit which stands for Root EM. Put simply, it’s a relative measure against the default font size for the web browser so ought to be 3.5 times bigger (or 350% bigger).

Lastly, click on Update Custom CSS and refresh your website in the browser.

How does it look?

New Sidcup Chess Club Heading

Heading After Change

AKA, much better!

You can obviously use this technique to update other features of your website that can also be affected through a style sheet. Why not give it a go?

twittergoogle_plusredditpinteresttumblrmail

Written by Stephen Moon
email: stephen at logicalmoon.com
www: https://www.logicalmoon.com


Hey! Did you enjoy reading this? If you did and would like an email when I add new content, just subscribe to my list. You can unsubscribe at any time.


Leave a Reply

Your email address will not be published. Required fields are marked *