WordPress Headers – Start a Website – Complete Plan and Steps – Chapter 6

screenshot of header imageWordPress Headers – Steps, Software, Tips

Free Software and Steps for Creating Website Header Images and Uploading Them

 How to Use Multiple Headers So Different Headers Show on Different Pages

How to Create a Header That Visitors Will Encourage Visitors to Stay on the Site 

WordPress Headers Can Be Created Using Images or Backgrounds With Text.  Logos Can Be Created in Free, Relatively Easy to Use Graphics Software Such As Picasa, XHeader, GetPaint.net or Gimp.

WordPress Headers

Sizes vary with the theme and some themes have a flexible header size. For example, the header size allowed in WordPress Theme Twenty Twelve is 960 pixels by 250 pixels.  You can drag a dotted line to resize for a header that is less than 250 pixels in height.  Frequently I use headers that are more narrow so that more of the content on the website shows above the fold.  This means people do not need to scroll down as much to see more of the content.

Website headers and titles are important because visitors can click to instantly go to another site.  The guidelines for creating headers include tips for making the site have visitor appeal.  We can start with these tips and trends.

  • Headers need to be easy to read on mobile devices such as tablets and smartphones
  • Keep the Header area easy to read.
  • Keep the header image clean and uncluttered.
  • Avoid busy graphics.
  • If you want visitors to focus on the site’s content then keep the height of the header image narrow so more of the site content shows “above the fold.”  This means more of the content shows when the visitor first lands on the website. 
  • If showing a display header of products or services is an important focus for visuals then use a header with more height.
  • Remember, on each page of the site the visitor will need to scroll down to see the content that does not show up “above the fold” automatically when the visitor lands on the page.  Scrolling is more work and visitors can be hurried and distracted.  Decide which is more important, a very large header so the page needs more scrolling or a narrower header.
  • Use the top 3 tips for headers – Easy to read, Not too busy, Inform about the site.  Resist the temptation to make the header busy.

Header Trends

You may have noticed that the most popular sites on the internet use a white website background and a simple, easy to read text. 

The most visited sites on the internet include google, facebook, youtube, amazon, twitter and wikipedia.  Take a look at these sites. 

The idea is to keep it simple but with a dash of something unique.  It sounds a little the guidelines for classic style. 

Header Size Has a Flexible Height

WordPress Twenty Twelve headers can be as large as 960 pixels in length by 250 pixels in height.  The height is flexible.  You can drag the dotted line in the uploaded header box to show a header of the desired height. 

Titles Without a Header Image

You can choose whether to have a header image or not.  In the header screen you can choose to show a title and use a color picker for choosing title color.  If you do not upload a header then no header will show since Twenty Twelve does not come with a default header image.


Titles, Taglines and Header Images

In WordPress Twenty Twelve and many other themes you can choose to use either the Title and Tagline or the Header Image or both just by clicking.

A website without a title and tagline might sound confusing but you can put the title and tagline text directly on the header image when you create the header.  Adding a logo, the title and the tagline to the header text is easy in free Picasa or other graphics software.

Using one or the other saves precious space “above the fold” where you can show the website and get people interested in the site.  Plus you can choose to use a narrow header. 

Easiest Option – Title, Tagline and No Header Image

This is the simplest.  It is the plainest but you can upload images to your homepage that will show “above the fold” so these will provide images to please the eye.


  1. Go to Appearance in the Dashboard
  2. Go to Headers
  3. Do not upload a header image.  Since WordPress Twenty Twelve does not come with a default header image there will not be a header image showing without an upload.
  4. Click Show Header Text
  5. Click the color picker to choose a color.
  6. Click Save.

Show Title, Tagline Plus a Photo – Option #2

You can click the browse for an image button to find a photo on your computer to use in the header.  

  1. Click to upload the photo.
  2. Click on the dotted line that surrounds a part of the photo and drag the line to choose the length and width. 
  3. You can make the header narrow or wide depending on what you wish.
  4. As described above click to choose to show the header and click the color picker to choose a color.

Using Multiple Headers So Different Headers Show on Different Pages

1.  Upload multple headers using the steps above

2.  On the header page put a dot in the radio button for “Random”

3.  Click Save at the bottom of the page

Create a Custom Header With a Logo, Text, Image, or Colored Background

Several Free Programs You Can Use to Create Website Headers

You can make a simple logo to put on your header by using the website name with a shape around it.  The letters in the text can be formatted in a color and style to suit you.  The Title and Tagline can be added and a background color can be chosen. 

Making a Header Using Free Picasa Software

  1. To make a header with some or all of these elements you can use free Picasa software or a graphics program of your choice.
  2. To make this header in PIcasa click on an image in your Picasa library to use as a small logo or graphic on the header.
  3. Click the green Hold button and then go to Create in the menu across the top and click on Create a collage.
  4. In the screen that opens choose to set a custom size according to the header size specified in your header screen on wordpress.  You can also make the header have the  same length but with less height.  It will depend on your theme but many themes allow headers of different sizes.
  5. Drag and resize the image.  Click to choose a background color.  Click to Create the collage.
  6. In the library screen click to select the collage image and the editing tools will open on the left side of the screen.  Click on the Text tool.  Format a size, font, and color for each bit of text you wish to add.  Resize and drag around on the header to fit what you want.
  7. When you are done click File in the upper left and Click Save. Save it to the desktop.
  8. Now go to the Appearance, Headers screen on the WordPress Dashboard and click to browse and upload the header. 

Making a Header Using Free xheader.com Software

  1. The xheader software comes with free basic header images for various categories of website topics.  It is very easy to use. 
  2. You choose the topic group and choices of header images pop up. 
  3. Next you use text tools and image tools to customize it with your title, tagline or other elements that you wish to add to it.

Making a Header Using Free Gimp Software

Gimp is often compared to Photoshop software. 

The Gimp software is free and much easier to use. 

For those who do not wish to purchase Photoshop and spend time learning the more complex program then Gimp is a good alternative.

WordPress Custom Headers Created Using Free GetPaint.net Software

  1. GetPaint is another relatively easy to use software that is popular with the WordPress community for making headers.
  2. The image editing tools allow you to choose text, header sizes, various effects, layers, and backgrounds.
  3. As with the other softwares Getpaint.net is free.

Click to go to the next chapter – Create Pages – Start a Website – Complete Plan and Steps

Published by

Kristi Marie Gott

Kristi Marie Gott is the webmaster for StudioMediaCam. She was an award winning computer support tech for a Fortune 500 company. Her computer and software education was at California Polytechnic University at San Luis Obispo, Cailfornia. She has a college degree in computers and has college and university certificates in html5, css3, SEO, Creating Webpages, Writing and Marketing Ebooks, WordPress and in tutoring at the college level. She continues to attend online classes.