header image for wordpress

We are a group of professionals that help you solve your problems.

We are available 24/7 to help you with any issue you may encounter with WordPress or any other platform.

Save the added header by clicking on Publish

header image for wordpress

Modern WordPress themes have the capability to edit the header, footer, and other theme areas within the Appearance section of the WordPress dashboard. This article will explain how to change the banner in the header of your WordPress site.

Some WordPress themes may not have options for you to add or edit the header. You will need to review the theme in order to determine if they have the style and formatting that you wish to use. For most themes, you can do this freely, but for those that require payment, you will need to see screenshots or obtain a trial license in order to fully explore that theme.

Your great WordPress site starts with hosting optimized for WordPress. Get the speed and performance you deserve and find out why BoldGrid recommends us as a top WordPress Web Host.

https://www.youtube.com/embed/NIdBsiS5-cg?feature=oembedDon’t have time to read our full article? Watch our walk-through video.

Steps to Change the Header Image

  1. Log into the WordPress Dashboard.
  2. Navigate to Appearance in the menu, then click on Header. Note that the Header option will be available depending on the theme in use. In some themes, there is no header option with the theme.

    appearance-then-header
  3. You will see that the screen jumps to the Customize option for the theme. Make sure to read the description. It will generally tell you the recommended dimensions for the header graphic. To add an image click on the Add new image button. The theme in this screenshot is Twenty Sixteen and it allows you have multiple headers that can be randomized.

    click add new image
  4. When you have selected an image you will be taken to the Crop Header Image page. You can adjust what portion of the image will be seen. Click Crop and Publish to save your selection. You can also skip the cropping and publish the image as is. You will be sent back to the header page in Customize after it’s done.

  5. When you have finished with adding your header, click on the blue Publish button. This will save your changes.

This completes the tutorial on adding a new header banner image to your WordPress site. To learn more about using your WordPress site, please see our Product Guide for WordPress.

make header image for wordpress

A header image is a picture at the top of your site that gives your site a personalized look and feel. How to add a header image will depend on your theme — this guide will explain each option.

Table of Contents

  1. Your Theme
  2. Upload a Header Image Using the Site Editor
  3. Upload a Header Image Using the Customizer
    1. Video Tutorial
  4. Choosing the Right Image
  5. Related Guides

Your Theme

The theme you use on your site will determine how you can add a header image. Starting from your dashboard, click on Appearance and look for one of these options:

  • Editor: You can add a header image using the Cover block in the Site Editor. Jump to this section.
  • Customize: You can click on Customize and look for the Header Image option that is available on these themes. Jump to this section.
    • If your theme doesn’t include the Header Image option here, you may be able to upload a featured image on your homepage instead.

↑ Table of Contents ↑

Upload a Header Image Using the Site Editor

Themes that include the Site Editor have the most flexibility when it comes to where and how you can display a header image. Follow these steps:

  1. Go to Appearance → Editor.
  2. Click on the area where you want to place a header image. This could be just above your site’s title and menu, for example.
  3. Click the + Block Inserter icon to add a new block.
  4. Search for the Cover block and click to add it.
  5. Click Upload to upload the image from your computer or click Select Media to choose an existing image on your site. Video headers are also supported.

For more detailed instructions on using the Cover block settings, see the Cover block guide. If you want to display the header image on certain pages only, see Templates.

↑ Table of Contents ↑

Upload a Header Image Using the Customizer

If your theme uses the Customizer, you can follow these steps:

  1. Go to Appearance → Customize.
  2. There, look for a Header Image option (if it’s not there, this means that your current theme does not support the use of a header image.)
  3. Click Add new image:
    • Under Media Library, you can choose from existing images on your site.
    • Under Upload files, you can upload an image from your computer.
Video Tutorial
https://youtube.com/watch?v=JFX6rzhV7-k%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den%26autohide%3D2%26wmode%3Dtransparent

↑ Table of Contents ↑

Choosing the Right Image

Choose a .jpeg, .gif, or .png file.

Every site and theme is different, so there’s no specific image size that we can recommend here. You can try different-sized images and view the results on your site. Some common scenarios you might encounter include:

  • If the image is blurry, upload an image with a larger file size.
  • If the image does not span the full width of your site, upload a wider image file.
  • If the image takes a long time to load on your site, upload an image with a smaller file size.
  • If the image includes text that is getting cut off on mobile screens, use a decorative, abstract, or photographic image without text. You can then add text on top of the image in the Cover block.

A header image typically spans most or all of the width of the site. You may see good success by uploading an image with dimensions with a 16:9 ratio (such as 1920 × 1080 pixels or 1280 × 720 pixels.)

Your theme may have a recommendation for the best image dimensions to use. To check this, go to Appearance → Themes and click on Info. Scroll down to the Quick Specs section and look for a recommended header image size, if any.

cropping the header image

Leave a Comment