Skip navigation

WordPress School: Header Art

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.It is time to begin to customize the design elements of your test site in Lorelle’s WordPress School free online course. We begin with the header art in the Twenty-Eleven WordPress Theme.

When you set up your WordPress test site for this course, you were instructed to set the WordPress Theme to Twenty-Eleven as it serves as an excellent teaching Theme. It also puts all of the participating students on the same level and experience so we learn together before the WordPress Theme choices get in our way.

This assignment begins the process of customizing the site to make it uniquely your own beginning with the header image. On Friday, you will be styling the background image for the site.

Twenty-Eleven WordPress Theme Header Art

The header art for the Twenty-Eleven WordPress Theme recommends an image at least 1000 pixels wide, and suggests a height of 288 pixels.

We covered how to prepare and modify an image for uploading to WordPress in an earlier tutorial. The principles are the same.

Typically, the image is a photograph or artwork. If the image has a great deal of color and detail, it should be a JPG file. If not, then PNG is a good choice.

The Theme will allow any height for the image, so their 288 pixel height is a suggestion. However, the taller the image, the more the reader must scroll down to get to the content on your site.

With the Twenty-Eleven WordPress Theme, you have the choice to feature an image alone or an image with the title of the site added to it. We’ll cover how to set both in WordPress.

Changing the Header Art in WordPress

To change the header art in WordPress, if the Theme permits it, you have two methods to choose from.

WordPress.com and the Jetpack WordPress Plugin offers a Customize feature for WordPress Themes allowing a WYSIWYG interface for customizing the look and feel of your Theme. Since we are learning WordPress from the inside out, I will be exploring the alternative method of access through the Appearance > Header feature.

Header Art - WordPress Admin - Appearance - Header Upload and Settings screen shot.

On the WordPress Admin, go to Appearance > Header to begin the process of setting the header art in the Theme.

  1. In the section marked Select Image, note the specifications of the header art size.
  2. Click Browse or, if you have already uploaded the header art to the Media Library, click Choose Image.
  3. Select the image, click Open, then Upload.
  4. WordPress will take you to a screen to allow you to crop the image if necessary, or you may choose to skip it and keep the image as it is.
  5. Once completed with the uploading process, scroll down and save the settings.
  6. View the front of your site to see how the new header art looks. It is likely that you may wish to modify the image or select another. Repeat the process by modifying the image in your photo editor and uploading a new version.

By default, the Twenty-Eleven WordPress Theme header art is clickable, as should most header art, taking you to the front page of your site.

WordPress Header Options

Depending upon the settings of your WordPress Theme, you may have the following options for your WordPress Theme header.

  • Header Text: This option allows you to show or not display the site title in addition to the header art image.
  • Header Text Color: You may select the color of the header text to match the look and feel of your site.
  • Header Text Position: Some Themes offer the ability to set the header text above or below the header image, or over it, or align it to the right, center, or left within the header area, on or over the image.
  • Header Text Size and Font: Some Themes allow you to change the font and font size of the site title and tagline.

The Twenty-Eleven WordPress Theme’s header options include selecting a pre-uploaded image, showing random images with each pageview (refresh or reload), and simple modification of the header text by showing or hiding and the text color.

Your Test Site Header Art

Header Art ideas and samples.While this seems to be limited, sometimes the greatest creativity comes from working within the limits of a box where your choices are few but creative invention takes flight.

Consider what images, graphics, visuals, and colors represent your site’s purpose and content. We’ll modify colors later, but think about the header art’s first impression on your site’s visitors. What message do you wish to convey immediately to them?

Do you require a logo or branding, possibly your photograph or photographs of your site’s purpose in the header art? How will you incorporate those?

Do you wish the title of the site to be incorporated into the header art? The tagline? Big or little? Left, right, centered, top or bottom?

Should the image represent the topic of your site definitively or suggestively? Should it represent the emotional quality of your content or the industry you are in?

When we get to incorporating the background image, colors, and other design details into your test site, how will the header art integrate into the design? Will it lead, follow, or blend?

There are many online sources to find free header art, but I encourage you to play with your photo or graphic editor to create your own.

The header art on your test site doesn’t have to be fancy. You don’t have to be a whiz at graphic design or illustration. Experiment. Have fun with this. See what you come up with, then start over and try something else. It’s a box into which you can put literally anything.

Here are some articles and reference material on WordPress header art.

Assignment

Lorelle's WordPress School Assignment Badge.Change the header art on your test site.

If graphic programs are a bit beyond your reach, or you need help considering what images to use in your header art, swing by the WordPress School Google+ Community and look for the post with this assignment and ask. We’re all there to help you through the process.

Once you choose your header art, you aren’t stuck with it. As you continue to modify the design of your site, expect the header art to change with the rest of the site. As you learn more about blogging and web publishing with WordPress, this is normal. Everything changes – all the time!

Please remember to use copyright and royalty free images to protect yourself.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


One Comment

  1. Posted March 11, 2015 at 8:59 am | Permalink

    Reblogged this on learning web development.


4 Trackbacks/Pingbacks

  1. […] few days ago the tutorial was on changing and setting the header art in your test site. Today’s tutorial in Lorelle’s WordPress School free online course is […]

  2. […] WordPress School: Header Art […]

  3. […] a visual on your test site. To customize the look and feel of the site, you were to experiment with header art images and background […]

  4. […] will need to know the recommended width and height for your header art image. For the second part of this tutorial, you will need one or more images such as photographs, […]

Post a Comment

%d bloggers like this: