Changing the header in my WordPress Revolution Blog

Dear readers, this post is one of a series I’m writing as I set up my new blog and get it looking just the way I’d like when visitors come to call. It’s been an arduous process, as setting up a WordPress self-hosted blog means that you have to go in and play around with the HTML code a lot more than I was used to with my old blog hosted by Blogger. Hopefully it will be worth it in the end, as I’ll have more flexibility to make it look just the way I want.

There’s help available in the WordPress help area here and in the Revolution Lifestyle support area here. However, I’ve found that developers often assume you have a fair level of background knowledge of WordPress and HTML code, which may not be the case. Also in the WordPress support there’s so much information, it’s sometimes difficult to pinpoint exactly the help you need. That’s why I’m giving you a detailed guide on what I did to set up the Header on my Wordress Blog using Revolution Lifstyle as my theme. I can’t guarantee that this will apply to you, but it might help if you’re trying to do the same thing. If not, then use the WordPress support area and forums or the support area and forums for your own theme.

Now read on for the technical details;

WARNING: This involves changing the HTML code in the Design/Theme Editor/Templates. Before you make these or any other code changes, you should always as a precaution make a copy of the original HTML code, for instance in a Word Document, in case you make a mess of it and need to easily go back to the original version.

Changing the Title from an Image to Text
Revolution Lifestyle comes with an Image set up as the Title within the Header bar. As I didn’t yet have a nice, well designed Heather on her travels image to put in there, I needed to change this to text. There are instructions on how to do this in the Revolution Lifestyle Support area here. Just in case you can’t access this, I’ll reproduce the instructions. They worked for me.
1. In your WordPress Admin area go to Design/Theme Editor. From the list of Theme Files on the right select Header.php. template. This will bring all the code into the Text Editor window.
2. Towards the bottom of the template find the following code

<div class=”headerleft”>
<a href=”<?php echo get_settings(‘home’); ?>/”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”<?php bloginfo(‘name’); ?>” /></a>

and replace it with this code

<div class=”headerleft”>
<h1><a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<p><?php bloginfo(‘description’); ?></p>

Save your changes.

3. In the WordPress admin area, you can now go to Settings/General. Set up your Blog Title and Tagline (if you want one). Whatever you put in these boxes will now appear as Text in your header

Adjusting the look and position of the Title in the Header
1. In the WordPress Admin area go to Design/Theme Editor. From the list of Themefiles on the right select the Stylesheet at the bottom. This will bring all the code into the Text Editor window.
2. Find the code below in the Header section of the stylesheet.

#header h1 {
color: #FFFFFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0px;
padding: 15px 0px 0px 20px;
text-decoration: none;

3. Now you can make the changes you want. For instance I changed the font size from font-size: 36px; to font-size: 50px;

Adjusting the depth of the Header
The width of the header is pretty much fixed, but I wanted to make the header taller from top to bottom in order to have more room to add a nice colourful photo. This is what I did to change the depth of the header.
1. In the WordPress Admin area go to Design/Theme Editor. From the list of Themefiles on the right select the Stylesheet at the bottom. This will bring all the code into the Text Editor window.
2. Scroll down the code in the window until you find code like this.

#header {
 background: #85ACAC url(images/header.png);
 width: 960px;
 height: 100px;
 color: #FFFFFF;
 font-size: 11px;
 margin: 0px;
 padding: 0px;
 overflow: hidden;

I changed the height to 150px to make the header wider
Then save your changes.

Changing the colour of text in your header
Follow the same process as above but in the Stylesheet template in the header seaction you will need to change wherever it says color: #FFFFFF; to the colour of your choice. To find a menu of colours and the numeric codes representing each one, go to this page.  Take the code for the colour of your choice and use it to replace  #FFFFFF. Then save your changes and check your blogsite to make sure it looks as you wish.

Changing the header background to an image
I wanted to change the plain blue background to a photograph from my collection, which I’ll probably change this from time to time. I keep my photos on Flickr which has an editing facility called Picnic. I used this facility to edit my image to the correct size, but if you don’t want to open a free Flickr account there is plenty of other photo editing software around you can use.
1.In order to check the size of my header I found a couple of options. a) In the WordPress Admin area go to Design/Theme Editor and in the Stylesheet find the code that starts #header as shown above. The width and height is part of this code e.g. width: 960px;height: 100px; b) Go to the folder on your computer where you downloaded the unzipped files for your theme. In the images folder you should find the header.png image and if you hover over this it will give you the dimensions. You can also right click on it and look in properties/details.
2. I downloaded my correctly sized image to my computer, then saved it into the Theme folder on my computer in the images folder. I gave my new photo image the same name as the original header image header.png.
3. Then I uploaded the new header.png image to my server into public_html/wp-content/themes, lifestyle_10 (or your theme)/images folder.
4. Now the new photo image should appear as background in your header.

Read related posts
Setting up my feeds in WordPress Revolution Lifestyle
Setting up pages in my new WordPress blog
Project Planning for my WordPress blog

Return to My Blogging Journey Home

You Might Also Like


  • Reply
    Jen Laceda
    January 24, 2009 at 6:58 pm

    Very useful tips indeed!

  • Reply
    Nomadic Matt
    January 25, 2009 at 4:58 am

    FYI- the header for your blog is larger than the main body….looks funny. and the alignment of your catagories and adverts is too large and overlaps on the main column.

  • Reply
    Heather on her travels
    January 25, 2009 at 12:24 pm

    @ Matt

    Thanks Matt for alerting me to this

    The problem seems to be worse when you view through Firefox but is still a bit misaligned through Internet explorers – I’ll have to get some help on the forums unless you have any ideas what’s causing it.

  • Reply
    How to set up the Featured Content Gallery in Wordpress Revolution Lifestyle : Heather on her travels
    January 27, 2009 at 11:15 am

    […] Related Posts Changing the Header in my WordPress Revolution Blog Setting up pages in my new WordPress blog Setting up my Feeds in WordPress Revolution […]

  • Reply
    Nomadic Matt
    January 28, 2009 at 9:28 am

    it looks like you are closing the wrap in your header or somewhere to early before it reaches the footer. it probably happened when u changed the header.

  • Reply
    Jim Brogli
    January 29, 2009 at 7:03 pm

    Hi Heather, I am brand new to this so this is very helpful….I did have one small snag though and thought you might have some insight. When I replaced code as above my header becomes the blog title twice and does not show the tagline. Any thoughts??
    Thanks again for helping the newbies!

  • Reply
    Heather Cowper
    January 31, 2009 at 3:41 pm

    @ Matt
    Thanks for alerting me to this. I got some help on the Revolution Lifestyle forum & it turned out I had an extra in my sidebar code, which was causing the mis-alignment.

    @ Jim
    I’m much of a beginner like you so I’m not sure what might cause your problem with the blog header appearing twice. I would try uploading the header again, making sure you save it in the right folder and that if asked whether you want to replace you say yes. If this doesn’t sort it out then I’d seek help in the Revolution two support area – I’ve managed to sort out most of my problems with their help.

  • Reply
    February 21, 2009 at 7:57 pm

    Great job!

    You wrote “I’ve found that developers often assume you have a fair level of background knowledge of WordPress and HTML code, which may not be the case.”


    It can be frustrating, especially if you pay someone like I did, and ask for a detailed step by step directions and explantions, and still struggle.

    You did a great job and every expert on Brian’s forums should provide detail as you have, especially if you pay them for your time.

  • Reply
    May 26, 2009 at 6:10 pm

    I just start using WordPress. Your post is very useful and helps me a lot.
    Please keep writing your helpful instructions.

  • Reply
    July 11, 2009 at 8:02 pm

    Well done. I was searching so long for information on changing the header. Thank you!

  • Reply
    July 19, 2009 at 2:48 am

    thank you for this– been looking for ‘how to change this stuff without getting a doctors degree in HTML’–
    really appreciate it. wish there were go-to places that did just this– sure there are but have not found them and like you, don’t want to spend a week sifting through info.

  • Reply
    August 31, 2009 at 10:52 pm

    Thanks so much for your help- you really helped out! Can you give me some tips about putting the ‘search this website’ field lower down? Mine is in the header!? Nice blog.

  • Reply
    Heather Cowper
    September 1, 2009 at 7:53 pm

    So glad the article was helpful. I wouldn’t mind moving the search box myself to make more room for new pages. I think you’re best bet is to post a quetion on the forum or support area of your theme – if you’re using Revolution then go to

    You’ll need to go to your wordpress dashboard then Design/ Theme Editor and find the relevant code in one of the Theme File Templates. However, best to get advice from the experts on where to go and what to do as I’m not very techie. When you find out, do let me know!

  • Reply
    September 4, 2009 at 4:21 pm

    THANK YOU SO MUCH!!! I’ve looked for over an hour on the support pages to learn how to change the dimensions of the header!

  • Reply
    September 9, 2009 at 8:38 am

    This has been very helpful.

  • Reply
    Kasey@All Things Mamma
    September 14, 2009 at 4:23 am

    THANK YOU for the help! I figured it out and changed my header!

  • Reply
    November 17, 2009 at 2:54 pm

    You are a lifesaver! Your site is now among my Favorites. I had no idea starting a blog was so complicated. I was able to locate a theme that is more user-friendly — Suffusion by Sayontan Sinha. At least now I can focus on setting up my blog.
    Good job setting up your site; thanks so much for sharing.

  • Reply
    August 12, 2010 at 2:08 pm

    Thanks for this tutorial, I was searching everywhere for how to change the image header to a text one 🙂 Many thanks, keep up the good work 🙂

  • Reply
    Heather Cowper
    August 14, 2010 at 11:19 am

    @Suzanne, Joseph, Kasye, Kim, Jane
    So pleased that this was helpful, these problems can take hours to work out unless somkeone tells you how.
    Good luck with setting up your sites.

  • Reply
    Gulam Ali
    December 16, 2010 at 6:47 am

    Thanks for the effort you took to expand upon this post so thoroughly.
    Why valid html code is important to your web site’s search engine optimization efforts and consequent high rankings! Such invalid html codes… A single missing bracket in your html code can be the cause your web page cannot be found in search engines… Providentially, there are free services that allow you to check and fix the validity of your html codes.

  • Reply
    My 7 Links – a delve into the archives at Heather on her travels | Heather on her travels
    July 10, 2011 at 2:45 pm

    […] people tearing their hair out trying to work out how to set up their featured content gallery or changing their header and finding my articles […]

  • Reply
    November 30, 2012 at 12:36 am

    Hi there, I enjoy reading all of your post. I wanted to write a little
    comment to support you.

  • Reply
    February 17, 2014 at 4:13 am

    Saved as a favorite, I like your website!

  • Leave a Reply

    CommentLuv badge