How To Customize Your WordPress Theme Header – Part One

palette One of the best things about using WordPress as a platform is all of the free WordPress themes that are available on the web. The problem, however, is that with free themes, what you see is what you get. If you want to customize your theme by adding your own header graphic or changing the size, color, or style of the header title font, you are simply out of luck…
 

Until now :-)
 

This two part series on how to customize your WordPress header will provide the knowledge you need to make your theme reflect your personal or corporate identity without having to pay a professional big bucks to do it.
 

Let’s start with replacing the header image -
 

Customizing Your WordPress Header Image

Changing your WordPress header to your own image is actually a pretty simple task. This tutorial will not instruct you on how to create header graphics for yourself, as that is not the scope of this blog. However, the first step to replacing the header graphic in your theme with your own header is to find the current header image in your theme files and determine its dimensions. Header graphics can usually be found in the “images” folder within your WordPress theme, and may be called “header.jpg”, “header.png”, or another image file type. Create or edit your header image to be the exact same dimensions as the header included with your theme, and then do one of two things:
 

1) Save it in the “images” folder of your theme with the same name as the original header to replace the file altogether, or
 
2) Keep the old header but change the style.css file to display the new image instead of the old one.
 

If you want to keep the original header in case you want to change back, the second option is a safe way to do it. Just open the style.css file in your theme file folder and find the code that controls the appearance of your blog header image. It should look something like this:
 

/* header area */
#header {
background: #0C72A2 url(images/head-bg.gif) repeat-x;
height: 110px;
border-top: 5px solid #222D2D;
position: relative;
color: #D16683;
}

 

Simply change the name of the file that is there (usually header.jpg) to the new header file name. Once the style.css file reflects the header file you want to use, just upload the new header image to the “images” folder in the theme folder on your server and if necessary, upload the edited style.css file as well.
 

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Facebook
  • Digg
  • del.icio.us
  • StumbleUpon
  • Squidoo
  • LinkedIn
  • MySpace
  • Technorati

2 Responses to “How To Customize Your WordPress Theme Header – Part One”

  • Hi
    What about many themes that have items auto loading in the header such as the title etc and sometimes the search and rss links

    how would these be moved

    thanks

  • Andrea says:

    Your instructions seem simple enough, but when I tried to replace my old header with the new one, it turned out blank when I activated it. I’ve tried everything and I don’t want to be stuck with the default font. It looks terrible, but I don’t know what else to do.

Leave a Reply



Tip Jar

If this blog has helped you enjoy your Wordpress experience, show your love!


Contact Us!