How to Change Your Header

One of the questions I am asked frequently is how to change your header from a default header included with a WordPress theme, to one that’s all your own.

Basically you just need to (1) find out the dimensions your new header should be (2) create it (or have it created) and then (3) upload it to your server.

Step 1: Figure out the dimensions you need.

There are several ways to find out the dimensions you’ll need your new header to be:

The way I find an image’s dimensions is to simply use the “Inspect Element” feature in my browser, Google Chrome. Here are some more ways to find the dimensions:

  • Sometimes you’re just told how big your header should be. For example, if you’re using TwentyTen (the default theme in WordPress), go to Appearance –> Header and you’ll see the measurements. TwentyTen’s dimensions are 940 x 198 pixels. If you’re using a different theme, check the theme’s site, support forums, help, FAQ, ReadMe files or anything else which might specify the dimensions of your theme’s header.
  • Check in your theme files for the size of the header that came with the theme. Login to your cPanel (or fire up your FTP) and search for the header images for your theme. (Or, you may have your theme files on your computer if you had to download them before uploading them.) Probably the easiest way to find them is to login to your cPanel –> click the “File Manager” icon (under the “Files” section) –> (if it prompts you to choose a directory, choose “Web Root” –> wp-content –> themes –> click your theme folder. At this point, most themes have an “images” folder which you should click. Hunt around in there until you find your header image. You can click on it and then view it; often there is a “View” icon in your cPanel which allows you to see it.
  • Save the image to your computer and then open it and search the Info about it to find the dimensions. Just right click on the existing header image (Mac users, Control-Click is the same as right click). On my Mac, I can look at an image in my Finder and get the dimensions.

Step 2: Create a new header.

You can create your own header or have someone do it for you. Make sure you make the header according to the dimensions required for your theme. Here are some resources that might be helpful:

  • Many designers can create a blog header for you for $100-$150 or so. You can check out this list of designers for options.
  • If you’re not particularly technically inclined but would like to do it yourself, check out my How to Make a Blog Button tutorial (it would be the same process, only using your header’s dimensions).
  • If you’ve got a bit more technical know-how, try using the free, online Pixlr to create your own. (Of course you could also do it in any image editing software like Photoshop, Gimp, Illustrator or whatever else you’ve got.)

Step 3: Upload your new header to your server.

Once your new header is created, the easiest way to make the switch is to give your new header the same file name as your old header, and then upload the new one into the same location. For example, if my existing header is logo.jpg, I can name my new header logo.jpg and it will replace the old one. However, doing this will replace the old one completely and it will be gone. In other words, if you upload the new one and it doesn’t look quite right, you can’t retrace your steps and re-install the old one while you further tweak the new one. Make sense? So, to safeguard against this problem and to have the ability to revert back to your old one if you need to, follow these steps:

  1. Login to your cPanel.
  2. Click the “File Manager” icon under the “Files” section (if it prompts you to choose a directory, choose “Web Root”).
  3. Click the “wp-content” folder.
  4. Click the “Themes” folder.
  5. Click the folder bearing the name of  your theme.
  6. Many times there will be another folder named “Images” in which you will find your existing header image. (To ensure you are looking at the right image, highlight the one you think it is and then click the “View” icon at the top of the page.)
  7. Once you find the existing header image, take note of its name. Write it down.
  8. Now, go back to the header you just created and name it something similar but not the same thing. So, for example, if the pre-existing header is logo.jpg, I would name the header I just created logo1.jpg.
  9. Go back to your File Manager. Upload your new header to the very same folder where the old one is located using the “Upload” link at the top of the page. Once this is done, you should see the old (ex. logo.jpg) as well as your new header (logo1.jpg) listed.
  10. Now, you are going to rename the old logo.jpg file to something a little more different, like logo2.jpg. (Do this by clicking the “Rename” icon at the top of the page.) Now you will have logo1.jpg (your new header) and logo2.jpg (the old header) in one folder. You will not have logo.jpg at all. Note: During this step, your site will have no header for just a minute. You might consider putting your blog in maintenance mode (there’s a maintenance mode plugin for this) during this process if you want.
  11. Now, quickly rename your new header from logo1.jpg to logo.jpg, again, using the “Rename” icon at the top of the page. Save. Now you have effectively replaced your old header with your new one.
  12. Refresh your site and you should see your new header.
  13. If you see your new header installed but it doesn’t look right and you want to revert back to your old header again, simply go through the same process by changing logo.jpg (your new one) to logo1.jpg and then renaming logo2.jpg (your old old one) to logo.jpg. Now your old header will be back.

I know it sounds a bit confusing, but if you follow the steps, I think you’ll get what I’m saying as you go. I hope it helps!

Note: If you are looking for my old video tutorial about changing your Atahualpa header, you can find it here. However, please note, I no longer recommend the Atahualpa theme. Instead, I recommend Genesis.

Do you get The Useletter?


Comments

  1. says

    Amy, this was a FANTASTIC tutorial. I am feeling like a rockstar for figuring out how to get the header I made onto my new WP blog! I’m just getting started with a self-hosted WP blog and I am going to be using a lot of your instructions! My friend Elsie Callender from Richly Rooted highly recommended your site, which is what she used to design and setup her own blog recently. Thank you so much for this!

    • says

      So glad it was helpful, Jaimie, and I’m glad you stopped by. All the best as you begin your blogging journey!! I’ll be glad to have you hang around. :)

  2. says

    Amy– Can you create a custom banner and upload it to wordpress 2012? It seems like the options unter 2012 are very limited (especially after watching your genesis videos). However, I know you mentioned that you used these for years. So, I was wondering if there was a trick or if you just kept the blogs simple.

  3. says

    Amy,

    I spent hours and hours these last 10 days moving my blogger blog to WP. I went with Genesis per your advice and am using the prose theme (I selected it because of the ability it to customize it). I have spent over four hours trying to figure out a way to customize the header to make it span the way the header in WP 2011 spans and I wanted to install the meateor slides plugin so I can have an ever changing slideshow at the top of my screen. I’m at a last resort, to change the header I think I’m going to have to do something to the html code. Is there a way to copy the header code in WP 2011 and replace the prose theme code with it? And then install the plugin? Also, do I need a child theme to do this? Any advice would be greatly appreciated. I’m on a shoestring so I have to try and do it myself if possible. Thanks so much!

    In His Grip,

    Monica
    you can also msg me on FB at https://www.facebook.com/HappyAndBlessedHome

    • says

      Hi Monica, not sure I’m following exactly, but if you’re using an image from TwentyEleven, it seems like you should be able to upload your header image in Dashboard –> Appearance –> Header. It’s possible they are not the same dimensions in which case you’ll either need to make a new header image to the Prose dimensions or change Prose to your header image. (Like I said, sorta tricky to know from here.) In any case, I highly, highly recommend the StudioPress forums. Search their old forum (lots of answers there) and ask in the new forum if you still have more. Prose is a child theme so you’re already there. :)

  4. Lisa says

    I am just about done with all of your wonderful directions!!! What a lifesaver! I am using the TwentyOne theme and I have a search box by where my page title links are and again on my sidebar. How do I get rid of the one under my header by my page titles?

  5. says

    How quickly should the header change? The directions sound pretty immediate, but when I do this, my site becomes unavailable for quite a while.
    Also, if I only want the header image I’ve created to appear on my site, can I delete the others from the image folder?
    Thanks so much… I’ve been wanting to build a site like this for a long time and your blog has given me the nerve to try!

  6. says

    The Joy that you reccomend shows she is not accepting any new jobs for web page designs. Do you have any others that you could reccommend?

  7. says

    Wahoo!! (I know I’ve been posting alot:) I started this process last night I was a very frusterating thing, and all day I have been working at this. Just as my kids all told me-mom put the computers down (at the desktop with my lap top next to me) I did it!! It is not the best header, and could be bigger and a little better, but I did it I did it and I did it!! You speak my language which makes everyday people like me do amazing things!! (it beats cleaning and cooking right now!:)

  8. says

    Hi. I have been trying and trying to create a header the right size. No matter what I do it only wants to use part of it. I have saved the original picture to my compter, checked the size and made my header that size. Nothing works. I’ve tried this in the Adahualpa theme and now in the twenty-eleven theme. What am I doing wrong/?

  9. says

    Thanks for the great tutorial… love your whole site & have learned bunches as I’ve just moved my blog to wordpress. I’d love to know how you put your social media buttons in your header. I’d love to put mine in the upper right corner of mine but can’t figure it out. I have have genesis and their happy pixel child.

    • Amy says

      Check to see if you have a Header Top Right widget. That’s what mine are in. Otherwise, ask in the Pixel Happy Genesis support forums. Just tell them you want to put a widget in the top right of your header. (Love Genesis!)

  10. says

    Not sure what is going on! I thought I had my header changed. When I look at my website it shows the default Atahualpa header. I logged in to my File Manager, went through the process above to change it, and then viewed it – it’s still the same. If I select the header and “View” it, it is the header I created. If I leave that window open and refresh my blog, the header I created shows up. ???

  11. takeya says

    I think that a video would be good for this one cause im a little confused on this one but i will try it thank you for the infor

  12. says

    Great advice and useful for people just starting out, a good tool to use to change the headers on each page is the Dynamic headers plugin.

  13. says

    Amy,
    Great advice as well as a very concise 13 step process for getting the change done. I personally would rather just email you my cpanel and wordpress login info and pay someone like you an hourly rate to get the job done quickly and right the first time.
    But that’s just me.
    Paul

  14. Renee says

    How timely to receive this article in my email TODAY! I was just thinking i needed to email you or something to ask this question: In Atahualpa (did I spell that right?), is it possible to have a *different* header for each page (I speak of static pages here– this will be for a business web site with a blog as part of it but we need several static pages as well)? I actually even have an idea of how I want it to look– with a different “center image” for each page– but I’m not sure if I’m biting off the proverbial “too-large of a mouthful”. Thanks, Amy! This is the first time i’m commenting on your blog, but I have been *devouring* your site here for a few weeks now and am learning so *much*! Thank you so so so so so so so so much!

    • Amy says

      If I’m following, in that case, you would just replace each of the header images in Atahualpa (I believe there are 3 or 4) with your own 3 or 4 images using the same steps for each.

      • Renee says

        Actually, I’m not sure that will do what I’m thinking. I have noticed that the image changes with page refreshes. What I want is one image, but a different image on each page. Like the “about” page would have one image, the “home” page another, the “prices” page a third, etc.. I imagine that all the “blog” pages/posts would end up with the same image with this deal, too. Does that make more sense?

        I an *thinking* that I’d probably have to set the headers on each individual page, rather than in the . Right? But I’m not quite sure how to do that (yet!).

        • Amy says

          Ah, I see what you’re saying. I’d see if you could find out how to do that in the Atahualpa forums.