How to change the header in your WordPress Studiopress blog

by Heather Cowper on 3, December 2010

In this article I share how I changed the header on my WordPress blog at Heatheronhertravels.com when I was setting it up in 2009, using the Revolution Lifestyle (now Studiopress) theme, having just moved over from a Blogger platform. It’s possible that some things may have changed on the theme and the WordPress interface since I wrote it, but I hope it may help any of you struggling with how to set up your header. The article was originally published on Heatheronhertravels.com under the title of Changing the header in my WordPress Revolution Blog

Wordpress logo

Wordpress logo

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 Studiopress 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 Lifestyle (now Studiopress)  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 Studiopress Support area. 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>
<a href=”<?php echo get_settings(‘home’); ?>/”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”<?php bloginfo(‘name’); ?>” /></a>
</div>

and replace it with this code

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

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.

This article is published at My Blogging Journey, but originally appeared on my Travel Blog at  Heather on her travels where you can find travel tales, videos and podcasts from Europe and around the World.

You’ll also find lots of great travel stories, videos and podcasts at our travel blog at Heather on her travels .

Subscribe to My Blogging Journey Don’t miss out – subscribe to My Blogging Journey

Related Posts Plugin for WordPress, Blogger...
Save on hotels with HotelsCombined.com

{ 9 comments… read them below or add one }

Reedu February 24, 2011 at 21:00

I just wanted to say that I stumbled across this blog post by doing an extensive Google search on to how to change my image logo to dynamic text and customize the dynamic text in StudioPress themes. My web guy made an image logo for me last year but has since fallen off the face of earth. I recently had been looking to change it and have control over it and had no idea how to even begin doing that until I found this post. Thank you for taking the time to share it. Your efforts helped me out in a big way. Cheers!
Reedu recently posted..Why I Love Love Love Parenthood

Reply

admin February 24, 2011 at 22:29

@ Reedu Thanks so much, I’m glad the article was of help. Sometimes these technical problems can be so taxing and you just want someone to tell you the answer.

Reply

Nels May 2, 2011 at 16:50

Your article was very helpful. I changed the code in the header. Now my website name comes up there. But, it also comes up as the tag line as well and when I click on it it goes to the 404 page. Any thoughts?

Reply

karelmark May 9, 2011 at 08:48

@Nels, Hello! I suggest that you don’t just copy and paste the code , try to do it manually. Sometimes copy and paste may cause unwanted characters. try to retype the qoutes/double qoutes on the code.
karelmark recently posted..Sierra Leone – a friendly welcome and a taste of paradise

Reply

jackie August 3, 2011 at 16:09

I just found your post here. I’m in the same boat as Reedu. But, I want to keep my header and just change the wording on my header. The designer used a Lifestyle theme, which is preium. He set this all up a couple years ago. Is there a way I can change the wording on the header without purhcasing the theme? Thanks!

Reply

produk hukum October 29, 2011 at 19:28
admin October 29, 2011 at 19:30

@produk – sorry to hear that – you may need to seek help from the Studiopress support as things may have changed since I wrote the article.

Reply

Grace Visconti March 16, 2012 at 15:52

Thank you. I find your blog very usefule.

Reply

Heather March 17, 2012 at 16:02

@ Grace Glad to be of help

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: