WordPress Header Background, Font, Title and Color Modifications

Changing or adding a new header image to a WordPress theme is one of the first things most people want to do to change the look of their WordPress blog. Changing a WordPress header image is a little easier than adding one to a theme that has none. Since all themes are coded differently its hard to explain exactly how to do this for each one, but here are the basics.

If your theme already has a header image then changing can be pretty easy but there are a few things to consider first. First, you must determine what, if any, image or images your theme is using and how it is displayed. The best case scenario to change a header image is with the theme using one large header image. Some WordPress themes can be using multiple images for the header, using a small repeated image or even a larger image that is the header and background image for another part of the theme. These situations can be pretty tricky to work with if you have limited knowledge working with WordPress themes. The first thing to do is to determine what, if any header image your theme is using.

First, you must determine what, if any, image or images your theme is using and how it is displayed. The best case scenario to change a header image is with the theme using one large header image. Some WordPress themes can be using multiple images for the header, using a small repeated image or even a larger image that is the header and background image for another part of the theme. These situations can be pretty tricky to work with if you have limited knowledge working with WordPress themes. The first thing to do is to determine what, if any header image your theme is using.

The easiest way to determine if your WordPress theme is using a header image is yet another reason to use Firefox as your web browser instead of Internet Explorer. With your front side (not the dashboard) of your WordPress blog loaded in Firefox, simply right-click the header area of the blog. If a menu option is View Background Image then choose that and you will see the actual header image. In the address bar you will see the path to, and the name of the header image as well. Right click again on the actual header image and choose properties to get the actual size and type of the header image. If you don’t see the right click View Background Image option or see an image that doesn’t look like your header try different areas of the header.

For IE users, switch to Firefox! But if you must keep using Internet Explorer you will see a few options when you right click the header like Save Background As and Copy Background. Chose Save Background As and open it on your computer with your image editing software to get the information.

You can also look through the theme’s stylesheet (style.css) to find the themes current header image, and you can figure out how to do that below when I explain how to change the header image.

Make sure your new header is the same size, or smaller than your current header image. Please realize that I can’t get into resizing or creating header images in this post or the comment section below, that can get very involved so you are going to have to use Google for more about your particular case.

Now upload the new image to your themes image folder. I suggest naming the new header image something short like a header or new header with no spaces in it. Remember when you right clicked the image to find its name in the address bar? Well, that also tells you where the actual image is. It is almost always in the themes image folder like this:  YourSite.com/blog/wp-content/themes/ThemeName/images/header.gif

With the new header uploaded into the themes images folder next you need to change the theme’s stylesheet (style.css) to point to the new header image. This is also another way to find the header image.

In the WordPress dashboard open the Theme Editor menu, click the stylesheet to load it in the editor. Now look for code similar to this:

#header{
width: 100%;
height: 100%;
background: #253B86 url(‘images/header.jpg’) no-repeat left;
}

The example above is specifying the width, height, background color (#253B86) and finally the path or URL of the header image file. Before editing this file you may need to change its file permissions in your hosting account to 777. I strongly suggest you make or have a backup of these files before editing. Now just change the file name to the newly uploaded header and click Update File. Note: you can specify another absolute URL to the header image using the full URL like http://www.SomeSite.com/image.gif, but I strongly suggest that the image is hosted and controlled you and not on a site that can remove the specified file.

Now just change the file name to the newly uploaded header and click Update File. Note: you can specify another absolute URL to the header image using the full URL like http://www.SomeSite.com/image.gif, but I strongly suggest that the image is hosted and controlled you and not on a site that can remove the specified file.

If you don’t have a header image and want to add one follow the steps to upload a header image and after the code that specifies the background color add this part: url(‘images/header.jpg’) no-repeat left; You may need to play with the positioning, sizing or other settings to get it properly aligned. If all went right you now have the new header image showing on your WordPress blog.

We really just scratches the surface and tries to explain the easiest circumstance to change or add a WordPress header image. For example using multiple images, a repeated image or adding one that currently uses none can get quite involved. You may also need to add or remove the blogs title and description in the header. And then there is the chance that your theme is calling for the header in the actual header.php file! Wow, now I know why I never wanted to write this post, there can be so many variables involved and yours can be as easy as I explained or a big pain in the butt! If you just want someone to do it for you, my fees are very reasonable, just click the Contact page on the footer menu or send me an email.

4. How to Make Custom Header Image/Logo Clickable

Now, you have successfully changed the header image of your choice and want’s to make it clickable.

Well, it sounds simple enough huh? Well not so fast. There a few things to consider, like the size of the new image. Make sure it fits and looks well proportioned on your WordPress blog. But all that will be for another post. This is kind of backward but after you change your header image it will usually cover the name of your blog that is linked to main blogs URL and now there is now way for your visitors to click it to get back to the main blog page.

The fix is quite simple on the WordPress default theme. Open the themes header.php file. and look for the following code near the bottom.

<div id=”page”>

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php

Now add the following code between the page and header id and change the red URL to your blogs URL.

<div class=”header” onclick=”location.href=’ Blogs URL Here.com‘;”
style=”cursor: pointer;”></div>

The code should look like this:

<div id=”page”>
<div class=”header” onclick=”location.href=’http://www.YourBlogsURLHere.com’;”
style=”cursor: pointer;”></div>
<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

Now your whole WordPress header image will be linked to your main blog’s URL or the blogs home page.

Conclude

WordPress Header modifications can be a simple task if you pay little attention to some styles and HTML. I have tried to cover almost everything related to WordPress Header modification but if you need something specific for WordPress headers then let me know in the comments section below.