If you've ever used a free theme, you know that some are just flat out…
WordPress Header Design 101
Your header is the first thing people see when they land on your website. For that reason alone, you’ll probably want to do more than leave the stock header.
You only have once chance to make a memorable impression on your visitor, so every element of your design needs to be intentional. In fact, research by the Nielsen Norman Group suggests you have 10 seconds or less to keep a user on your site.
Luckily, giving your website a custom feel isn’t complicated.
By the end of this post, you’ll understand why the header is so important and how to change your WordPress header — from image selection all the way to uploading your design.
Best of all, you don’t have to be a professional designer to create something beautiful and impressive.
Why Is Your WordPress Header Important?
Your WordPress header is the same thing as the cover of a book. Regardless of the old adage “don’t judge a book by its cover,” we do judge books by their covers. And your visitors judge your website based upon your header.
The design of your header must align with your target audience. When a reader lands on your site, they’re making quick judgments to see if it’s right for them. If they think of themselves as manly men who wear flannel and like to hunt, they’ll hit the back button if they see a hot pink header. On the other hand, if you’re in a creative industry, you can get away with using loud colors and a bold font choice.
To further carry the branding of your blog, you might choose to include a tagline or phrase that sums up what your blog is all about.
Finally, to differentiate your blog you need to showcase what makes you unique. That’s the reason you’re not using the stock header in the first place.
To determine what needs to be present in your new header, ask yourself the following questions:
- What mood do I want to convey that’ll speak to my target audience?
- How can I communicate what my blog is all about with a quick glance?
- What makes me different from other brands/websites in my niche?
Avoid These Beginner Design Mistakes
If this is your first time around the design block, then you’ll want to avoid the following mistakes. It’s very easy to over-design and end up with something that looks tacky. When in doubt, keep it simple, and avoid the mistakes below.
1. Doing Too Many Things at Once
Designing is a lot of fun. If it’s your first time using a design program, you’re probably a little giddy about testing all of its features. But, a little word of warning. Don’t do too much.
You’d hate for your final header to look like a children’s collage.
For the purposes of your header, it’s enough to have an enticing background image, the name of your site, and a potential tagline. That’s it.
2. Choosing the Wrong Font
There are hundreds of fonts you can use to customize your header. But just because you can use a font doesn’t mean you should. Typography is an entire field unto itself. So, if you’re just getting started make sure you choose something simple.
You’d hate to choose a font that will communicate the exact opposite of what you’re going for. If you’re unsure of what fonts to choose, then take a look at 20 Best Web Fonts from Google Web Fonts and @font-face.
Along the same line of choosing the wrong font, make sure not to use too many fonts. Pick one or two and call it a day. Having too many fonts in a single space will overload your visitor.
3. Not Aligning to the Grid
The grid exists for a reason. It helps to keep your image in balance. If you have text or photo elements that are out of alignment, your final image will just feel off. If you don’t know what the grid is, read this article.
There are multiple variations of grids you can use. Most professional grids are composed out of 12 or 16 thin vertical columns. If all this stuff confuses you, don’t worry. The free tools we highlight below have built in grids that will help you compose your image. Some tools, like Canva, even have an automatic snap to grid feature.
How to Add a New Header to WordPress
Before you learn how to create and upload a header to WordPress, you need to make sure that your theme actually supports a custom header. Some themes simply have a top navigation bar that doesn’t allow for much customization beyond uploading a new logo.
To see if your theme supports a custom header login to your WordPress dashboard, then navigate to Appearance, Header as shown in the image below.
This will bring up a customization screen that enables you to edit your header image.
Depending on your theme, you may have a limit to the overall image size as well. For the sake of this tutorial, we’re going to stick with the default Twenty Sixteen theme.
This tutorial will work with any WordPress theme you choose (as long as you have the option to edit your header), although the final size image required may be different.
1. Source Your Image
Unless you’re just including white text on a black background, you’re going to need to source a royalty free image. There are dozens of places you can find free royalty-free images online. Below you’ll find a few of my favorites:
On most of these free stock photo sites attribution to the creator isn’t necessary. However, if you’re feeling generous, you can always include a link to the photographer’s page in your about page.
If you can’t find a single image you’d like to use for your new header, then take a look at this list of almost 100 free stock image sources.
If you have some money to spend and you want something truly unique to set your site apart, then you can find images on paid stock photo sites like iStockPhoto and Shutterstock. The benefit of paying for an image is there’s less chance another website will be using that same image.
I ended up choosing this image from photographer Mark Basarab. For the Twenty Sixteen header, I needed an image of 4608 × 2592, so this image will work perfectly.
2. Edit Your Photo
With your image chosen it’s time to dig into editing. For this tutorial, we’re going to use the online tool called Pixlr.
First, we’ll run the image through their Old Photo adjustment. All you have to do is upload the photo, select Adjustments > Old Photo, and save the image to your computer. This will immediately differentiate it from anyone else’s who’s decided to use this photo.
You can also play around with the “Filter” function, which offers effects like Water Swirl, Art Poster, etc.
Now, we’ll head back to Pixlr once more. This time choose the Photo Editor app and upload your recently edited photo.
The Photo Editor is quite feature- heavy. You can do basically anything here that you could do in Photoshop.
You can do simple adjustments like adjusting the brightness and contrast to make certain elements pop, or even crop the photo to get rid of photo elements you don’t like. Just make sure that when you’re cropping the image is still large enough to fit within your set WordPress header dimensions.
To adjust the size of your image click on Image, Canvas Size, then adjust the width to your header dimensions. For this photo, the dimensions were changed to 1200 × 280.
With the background looking good it’s time to add some text.
Just click on the Type Tool and it will create a new text layer you can customize to your liking. For this header, I used the name of a fictional site called “Get Outside” and chose an all-time classic font called Arial Narrow.
Feel free to play around with your font choice until you find one that perfectly complements your image.
Then, download your image and you’re all set.
If you’d like different photo editing options, then feel free to choose one of the programs referenced towards the bottom of this post.
3. Uploading to WordPress
Finally, the time has come to upload your new WordPress header. Navigate to Appearance, Header, then click on Add new image. This will bring up a screen where you can drag and drop your finished header image.
You can add a relevant image title, alt text, and description that both define your image and include any relevant keywords.
On some themes, you can choose to include the site title and tagline, or you can remove them and instead just use your header image. It all depends upon the layout of your site and how prominently you’d like to display your header.
Web-Based Editing Solutions
For this tutorial, we ended up using Pixlr. It’s a free photo editing app that has two different tools. The first is a robust photo editor, and the second is a tool that lets you add filters similar to Instagram.
Their photo editor is almost as feature heavy as Photoshop and allows you to do things like, create layers, use selection tools, add masks, and everything else you’d expect from a high level desktop editor.
Another great free tool is Canva. Canva can be used for a wide range of projects, from Kindle eBook covers, to Facebook post images, to infographics, and a lot more. If you decide to use Canva for your WordPress header image, you can always create a project using custom dimensions.
With this tool, you don’t even have to preselect a royalty-free image. Simply type in the style of the desired image from within the editor and the tool will give you a list of images to choose from. Most of this tool’s design elements are free, but they do offer paid images and other design elements that are usually around a dollar.
Desktop Editing Solutions
If you’re more skilled when it comes to design you might prefer to use a desktop photo editor. There are dozens of these tools available. Below you’ll find the most common tools out there today:
- Photoshop: this tool is the standard for photo editing. It has a steep learning curve, but once you know you way around it, you can do some incredible things. It’s available on both Windows and Mac.
- InDesign: this tool isn’t a pure photo editing tool, but it can be handy for adding quick effects to photos and overlaying text. Plus, it’s much easier to learn. it’s available for Windows and Mac.
- GIMP: a free tool for Windows, Mac, and Linux operating systems. It’s interface and toolset is similar to Photoshop. However, the learning curve is a bit steeper.
- Paint.NET: this tool is perfect for simple editing tasks that don’t require a full-fledged editor, like GIMP or Photoshop. It is only available for Windows machines.
- PhotoScape: this tool is aimed at beginners who don’t care for the complexities of a tool like Photoshop. But, even though it is simple to use it’s still packed with premium features. It’s available for both Windows and Mac.
Image Sizes for Various Platforms
If you want to keep your brand consistent across all major social media platforms, you can use the same header image. Just make sure you resize it within your chosen photo editor first. The most common cover photo dimensions for the most prevalent social media platforms are listed below:
- Facebook: 828px × 315px
- Twitter: 1500px × 500px
- Pinterest: 222px × 150px
- LinkedIn: 1400px × 425px
- YouTube: 2560px × 1440px
- Google+: 1080px × 608px
Creating a custom WordPress header doesn’t have to take a long time. You can quickly create a header that gives your site a custom look and feel, all with free tools and images.