WordPress School: Header Art

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.

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

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.

• Designing Headers « WordPress Codex
• Design That Shines: 10 Tips For A Dynamic Blog Header | IFB
• Personalizing your WordPress.com blog: Part 2 – Custom Image Headers – One Cool Site
• 5 Easy Steps To Make Your Own Blog Header in Pixlr – Sweet Jelly Bean
• WordPress Header Design 101 – Art of Blog
• Behind the Design: Creating My Logo and Header – Blog Clarity
• How to Use PicMonkey to Create Header Images and Blog Buttons – Fabulous Blogging
• Blog Headers: 20 Great Examples and Best Practices – Webdesigner Depot
• 14 Truly Artistic WordPress Header Designs – WPBeginner

Assignment

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:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---