Wordpress is a great way to build a website because of its flexibility through add-ons and the simple user interface. The banner or header image is one the elements that the interface affects in different ways depending on the theme that is being used. This is an important graphic because it is often the first graphic element that a visitor will see for that website. The following article explains how to modify the default header banner within the Wordpress interface.

 

Adding your own header image for your Wordpress site

  1. Login to your Wordpress Dashboard as an Administrator.
  2. Main Menu for DashboardScroll down the left side of the Dashboard until you find APPEARANCE.  Click on HEADER in order to make changes to the default header image.
  3. The HEADER image dimensions and settings may depend on the theme that you select.  For example, take a look at the theme graphic below:

    Default header graphic for 2011

    This graphic is fairly large and dominates the page.  When you go to modify the header you may often find that the theme provides the information for the header.  In the case of the 2011 theme above, you can see the instructions for the header in the dashboard:

    Instructions for header size

    When selecting your image, make sure that your header is already trimmed the recommended dimensions (1000 pixels wide x 288 pixels high in the example above), or something close to those dimensions.  The Wordpress interface lets you crop the image so that you select parts of a larger image as the header image. 

    Click on BROWSE in order to add a custom image.  In the example below, a JPG image has been added with the exact dimensions recommended above.
     
  4. Option to crop image and publishWhen you have selected the image, you will see the option to CROP AND PUBLISH. Crop the image as necessary, then click on the button CROP AND PUBLISH to proceed.
  5. You will then see the banner as it would appear in the page, but slightly scaled down.  Click on SAVE CHANGES at the bottom left hand side of the screen.
     
     

This completes the modification of the header graphic. Click on VISIT SITE in the top menu bar in order to see the website with the changed header.

Example of a completed header/banner change

 

Did you find this article helpful?

Login to comment.

Your Opinion Matters

... but we need to know what you're thinking!

I'm Arnel Custodio, your friendly Community Support technician, and I wrote the article you're looking at now. I like to think it's perfect, but I'm sure you have some suggestions. Please, let me know what they are!

Feedback
Your Email Address
Because we'd like to talk with you!

Have a Question?

If you need some help, submit your question to our Community! We guarantee a response within 60 minutes (8am - 9pm EST, Monday - Friday)

Recent Questions

  1. Site under brute force attack
  2. URLs in Installation of WordPress Don't Redirect
  3. Choosing a Directory With WordPress

Support Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.