Feb 18, 2014 / Beginner

Create an Awesome Header in Ten Minutes

Adding personality to your site has never been easier.

Every theme on WordPress.com is different and offers a mix of options. In our Theme Showcase, you can narrow down search results to see the themes that support a custom header image.

A custom header image is one of those personal touches that can really set the tone of your site and establish your visual brand. What’s that murmur in the back? You don’t have time to create a custom header? Image-editing software is too expensive? Think again. Today, we’ll show you how to create your own snazzy header quickly.

Are you a blogger, a freelancer, or a business owner? Do you love tinkering with design and want your site to look just so? Explore our different WordPress.com plans — some, like the Premium plan, come with advanced customization options and unlimited premium themes.

Creating the right header for the right site

For this exercise, you’re the proud owner of the imaginary Goodnight Loon, the web’s premier birdwatching-cum-parenting blog. You need a custom header that will channel your site’s blend of quirky humor, warm parenting advice, and love for all feathered creatures (well, maybe not Kukulkan). What do you do next?

Find a few images that speak to you

Comparing and contrasting a handful of pics can be really useful. You can use something from your own photo library, or a great find you stumbled upon while looking for Creative Commons-licensed images or free-to-use stock photography. Focus on larger, high-quality images, and take a look at your theme’s support page to see if there’s a minimum-size requirement for the header.

Note: It’s fine if your chosen image is larger than the header image needs to be — you’ll be able to crop it once you’ve uploaded it to your blog.

Select the image you want to work with

We sometimes try to find images that literally channel what we’re saying. In this case, this would send you on a wild-goose chase (no pun intended) for a picture of two loving loons tucking their hatchling into bed. Good luck with that. Instead, aim for images that are somewhat abstract — a pattern, a landscape, a collection of items shot from afar — but are still evocative of your theme and your site’s overall vibe. For the site in question, how about this lovely shot of painted eggs from Ukraine?

Pysanky2011

Image by Luba Petrusha (CC BY-SA 3.0)

The eggs create a direct mental link to both birds and the concept of offspring, and there’s a lot to work with here in terms of texture and color. We have a winner!

Edit your image to suit your specific needs

Using a photo-editing service (in this case, picmonkey.com), you can tweak your chosen image  — if its license allows users to adapt it — to make it header-friendly. With this one, I first cropped it into a narrower rectangle, to help it fit better into the header space. For readability, I’ve brightened up the image and lowered the contrast. I wanted to create a stronger nursery vibe, so I played with the color palette to give the image a soft, bluish tint. Finally, using the photo editor’s Texture settings, I made it look like a soft, woven fabric — an egg-patterned cloth diaper, anyone?

Screen shot 2014-02-13 at 12.09.25 PM

How long did this entire process take me? Roughly three minutes (and I’m about as proficient in stuff like Photoshop as a baby loon).

Add in your site title

Still in the photo editor, you can insert your site’s name into your header-in-the-making. (This is optional: if you opt to display your site title through your theme, you’d want to avoid repetition.) You can choose among several dozen fonts; here, I settled on a font — and a color — that makes a winking nod at the well-known cover of the classic Goodnight Moon. For good measure, I cropped the image a bit more, to better position the text:

goodnight-loon

Note: While you’re editing your image, you can save as many versions of your header as you like — that way you can always revert to an earlier state if you decide against a change you’ve introduced.

Final touches

Once you’re satisfied with your header, save the image to your computer and add it to your site — you can do this in the Customizer (My Site(s) → Customize → Header Image). (If you don’t see this panel in your Customizer, it means that your current theme doesn’t support the use of a custom header image.)

Then, check how your header fits into your overall look: does it work with your theme? Do the colors blend well with your custom background, if you have one? Does it help build a cohesive look to your site?

In this case, I wasn’t too happy with the header’s whimsical font after all. A quick hop back to picmonkey.com was in order. There, I switched to a clean, serif font in more subdued colors, but kept the positioning of the text for a subtle echo of the original book cover. The final product:

goodnight-loon2.jpg.

A personalized header tailored to a site’s particular needs: yours is just a few minutes away, too.

For more tips on photo editing, check out PicMonkey’s tutorials, including this one, designed for beginners.

Show Comments

84 Comments

Comments are closed.

Close Comments

Comments

  3. Hi, I uploaded an image to the header and it is really blurry and not as clear as the original image. Also when using picmonkey, the text is very blurry as well. Any suggestions would be greatly appreciated.

    Like

    1. When in PicMonkey, you can change the size of your font — increasing it should result in larger text in your finished header, too.

      Like

  4. My blog is only a month old but I did make my own custom header. Since I’m using the free version of wordpress and couldn’t edit the font nor the size of the header text, I wanted to do something that made the site look less “free” so to speak. Once made, I removed the header text all together. My theme had a black border around the header image so i used that to my advantage by blending the menu into the header image so it looked more seamless.

    An alternative to letting wordpress crop the image for you is to make it from an image editing program first. First, go to your site, right click the header image, and select “View Image Info”. From there, you can see the exact dimensions of the header image size for your theme. Take those dimensions and go into an image editing program (I use Hornil StylePix which was free on windows 8 store) and create a new image with the dimensions. It may be obvious to a lot of you but for some it isn’t. You can get this information from any image on the web. When customizing a website using code that little trick can come in real handy if you are trying to replace some standard images in your theme, that way it’s always exactly the right size.

    Liked by 1 person

  6. I knew I needed a new look. I had selected a theme that was good for awhile, but then it started to feel crowded. I found a new theme, then searched Google for (larger) background images. I found what I was looking for & then cropped it to fit the header. You know it’s right, when it all falls into place.

    Like

  11. Hello, Ben. Thank you for sharing this awesome header maker tool. What I want to know is could I use this same header tool for making a header in an email for an e-zine? I comment in other blogs. I don’t have my own blog. Thank you for your time in this matter. Take care. Happy Spring from Alaska! Rosella Young, AA-1 Designs, Invest in your shelf! P.S. This web site only operates in the United States, Ontario area of Canada, and in Australia. For all other locations, please check your area for one near you.

    Like

  17. Hi, I’m actually a decent writer, I just never got into the blogs and forums on the internet. I just have one simple question. Is a blog a subject someone starts, and it takes off from there and may end in a different subject? Do you use a header just if you are the one starting the blog? Thank You, I want to learn something new. Mel

    Like

  21. Why when searching in Google does your blog page not show up? Is that a special feature for upgrade? Does it take as while? I just want to know. I’ve been trying to get people to view my page and nothing comes up in search engine. Help please!!!!

    Like

    1. Ultimately, search engines have their own quirks. It could also be that your page hasn’t been visited and linked to enough yet, which would push down the search results. Over the long run, though, if you continue to publish quality content, with clear post titles and slugs, you’re search engine ranking is bound to improve.

      Like

      1. Thank you, Ben, that was very informative. I was doing it through google search engine. But I did pull it up. Just not through google. Thanks.

        Like

  22. Thanks for the advice! It is a really easy to follow article and I think it will really help me customize my blog to make it unique

    Like

  23. I was able to create a header using all of the advice above. However, every time I try to add it to my header, it is oversized and pixellated no matter how much I resize it. Anyone know what I’m doing wrong. I made it on pic monkey and it is currently 320 x 320 pixels. I sized it all the way down to 20 and it still is too big for the header

    Like