WordPress Header Design 101

One thing that I love doing is searching on Twitter, for people asking for help. Recently I saw two Tweets that had been asking for help in customizing their WordPress header.

Those tweets became the inspiration for this tutorial.

I wanted to make this tutorial as easy as possible, and completely using FREE tools.

Let’s Get Started

WordPress Header Image Website

WordPress Header Image Website

I created a WordPress site on WordPress.com, but this tutorial can also be exactly replicated on a self-hosted WordPress site.

The site that I created was WordPressHeaderImage.WordPress.com, and I kept the default current WordPress theme, which is Twenty Eleven.

WordPress Default Twenty Eleven Theme Header

WordPress Default Twenty Eleven Theme Header

This tutorial works for any WordPress theme you can upload a custom header.

Finding A Royalty Free Image

You can use an image that you already own if you like, but I used Stock.XCHNG to find a free image to use as my background.

Rocky Valley

Rocky Valley

Stock.XCNG is great… it’s a community of photographers that share their photos for free!

If you don’t find a photo that you like, they also include photos from iStockPhoto that you can buy.

I decided on a photo called Rocky Valley.

I loved the photo and it was 3000 x 2000 pixels. Perfect, since I needed an image at least 1000 pixels wide.

To use a header in Twenty Eleven, you need an image that is 1000 x 288 pixels.

Free Web-Based Photo Editing

I got my image, let’s edit it.

I used pixlr, they have 2 tools that we are going to use. The Retro Vintage Effects tool and Photo Editor.

Editing Rocky Valley in Retro Vintage Effects

Editing Rocky Valley in Retro Vintage Effects

I first used Retro Vintage Effects to quickly add some effects to my Rocky Valley photo.

Retro Vintage Effects is very easy to use… in 3 steps you can completely get a very cool, customized image.

Literally, I uploaded my photo and picked the effects that I wanted to use in about 2 minutes.

My next step was to save the new image to my computer, and then head back to Pixlr.

This time I opened the Photo Editor, and uploaded the new Rocky Valley image that I had just created.

Photo Editor is somewhat of a web-based Photoshop alternative. It’s not at all a Photoshop replacement… but it’s very powerful, fast and stable.

Stable being important here, as a professional photographer I’ve had to use online tools when Photoshop just wasn’t available… and it’s very frustrating when the photo editing software keeps crashing.

Pixlr has never crashed for me.

Preparing Your Header for WordPress

Editing Rocky Valley in Photo Editor

Editing Rocky Valley in Photo Editor

I now need to resize this image to fit the dimensions in my WordPress theme, which is 1000 x 288 pixels.

I went to Image, Image Size, and changed the width to 1000. I couldn’t change the height of my image here, because my proportion will not be right.

To change the height to 288, I had to go to Image, Canvas Size, pick the center box as my anchor point and clicked ok.

Adding Text

Adding Text In Photo Editor

Adding Text In Photo Editor

Now I needed to add some text to my header.

Just click on the Type Tool and Photo Editor will create a new text layer for you. I typed in my sites name, which is WordPress Header Image.

You can easily pick the font and size that you want to use. In this case I wanted something modern looking, to go along with the look of my header. I used TITILLIUM TEXT, a free font that I installed on my computer. I was very impressed that Pixlr was able to use it, straight from my computer.

Uploading to WordPress

WordPress Header Image Website

WordPress Header Image Website

Once I saved my new WordPress header image to my computer, it was time to upload it to WordPress.

I went to Appearance, Header. Here I just simply uploaded the file and saved it. Notice that I kept the option to “Display Text”. I did this for SEO purposes… search engines can’t read text in images, that’s why it’s important to fill out your image alt tags and descriptions.

However, headers don’t have these options… so I kept the option to display the text version of the sites name for the search engines.

Conclusion

This entire process took me less than 10 minutes, and I feel that my header is not bad looking at all. It has a completely customized look and feel to it, and best of all I used free online tools.

I hope that I’ve opened up your mind with the possibilities of creating your own customized WordPress Header. Most importantly don’t let something as little as a header stop you from becoming a pro blogger.

I see many people that say things like… “Oh, if I had this, then my website could be that”.

Just start blogging, you can always change the look and feel of your site later on.

P.S.

Alternative WordPress Header Image

Alternative WordPress Header Image

You can use the Retro Vintage Effects tools on your finished photo again. You’ll be able to stack effects and really create a header that will standout.

What do you think?

Does creating your own header seem too difficult now?

Share this article on Facebook and Twitter, and with anyone who is starting to blog.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Wilson Davalos

I'm a New Media Veteran who has worked at some amazing tech start-ups in Silicon Alley. My career transitioned into photography, with thanks to Complex & Interview Magazine.

Leave a Reply

Comments

  • Brandon Tucker says:

    Hello Wilson,
    Thank you for the article. It was very helpful, except for the fact that every time I
    save or upload a photo, it is in a compressed and smaller pixel size. They never open large and need to be reduced. The pics are always smaller and when I change to 1000×288 pixel size it distorts view. This happens with photos that were originally a minimum of over 2000 pixels wide.
    Can you please tell me what am I doing wrong?

    Thank you – Brandon

    • Wilson Davalos says:

      Brandon… the only thing that comes to mind is that you aren’t making your canvas size 1000 x 288. You can always do all of your edits and customization first… then as a last step set your canvas size.

      So when you upload your header… you will be sure that it’s the correct size.

  • I am an old girl trying to learn new technology. Some years ago, I was asking people that I met through online writing sites (like Gather & Helium) about blogging. I just got lost in the ‘credible’ responses (or lack thereof). I went away from the idea for a time; but I find the more and more it does feel approachable. I appreciate the simplicity of your step by step process.

    What you offered (without trying to sell me at every turn) was worth me following what you write on a regular basis!

  • Nikki Mclean says:

    Hello Wilson,

    I have to say that i can’t thank you enough for this article and directing me to that online photo editor, it has helped me create exactly what i wanted for my blog. Thank you, i’ll be sure to follow you’re posts from now on.

    Kind regards

    Nikki

  • Rolanda says:

    I was extremely excited when I found this website! I mean who new there were good Samaritans online helping us poor technology unsavvy folk navigate our way through the blogosphere! Making a header is something I always wanted to do but just got frustrated with trying in the past. Thanks again, and I am definitely going to be back for more. Looks like I have some weekend reading ahead of me.

  • Maureen says:

    Wilson, you are a rockstar!! Thank you so much for your post. I spent hours trying to resize an image to fit the Word Press header using Microsoft Paint – and then when realizing that that wasn’t going to work, looking for other images that I thought would resize better. I came across your blog post and literally had a beautifully proportioned header uploaded to my blog within 10 minutes. Thank you, thank you, thank you!!

    • Wilson Davalos says:

      10 minutes… Amazing! I’m really glad that you could make your own header.

      P.S. I hope that you never have to use MS Paint again… Be sure to bookmark Pixlr. I use it everyday.

  • Mile says:

    Thanks! :D

  • Alistair says:

    Hi Wilson, I am using the Retro theme by Ali Han. It doesn’t have a header to tweak. I like the theme but would be keen to jazz up the top section where the header would have been. Do you think you may be able to take a look at my site sometime and perhaps let me know whether or not this is possible. Alistair

  • Wilson Davalos says:

    Alistar, thanks for your question.

    It doesn’t seem possible to add a header image to your particular theme.

    But, that’s not a bad thing.

    The focus of your site is information, people want to be able to know about gardening in NE Scotland.

    You can add personality with your font.

    It would be interesting to run a test for a few week with a san-serif font. (Helvetica is the reigning king)

    Also test out line spacing, by breaking up a large paragrph into multiple one or two sentences paragraphs.

    Just these two tweaks should be enough to give your site the proper amount of personality, without being tacky.

    Best of luck!

  • Alistair says:

    Wilson, thank you very much for the response to my question.

    I will check out changing the fonts as you suggest.

    WordPress doesn’t make this very easy.

    I also take on board what you say about breaking up large paragraphs.

    I think your reply to my comment is giving an idea or example as to how this should be done. I will have to take care not to over do it.

    Thanks again for being so kind to take the time, my experience in the past has been that people with your knowledge simply get annoyed with novices.
    Regards Alistair

  • Alun says:

    This is sooo simple. I have been faffing about for so long with different image software and all along there was an online site that does everything I need.
    Sometimes it is just a case of asking the right question.
    Cheers
    Alun

  • Brittany says:

    So, is Pixlr only for iPad or iPhone? Cause I just downloaded it and that’s what it says.

  • Steve says:

    Great work. I especially like the font chosen