How to Edit the WordPress Header

Updated on Jun 25, 2019

Changing the content and appearance of your website will be the first step of improving the default design, which is usually applied to your site after the installation of WordPress. Of course, you should begin by changing the design of your header, which is the exact point of this tutorial - to show you how to effectively and quickly to improve its content. For this tutorial, we will be using WordPress 5.2.2 with the Twenty Seventeen theme.

Editing the header of your WordPress website will require from you to know:

  1. How to Access the Header Configuration
  2. How to Edit the Appearance of the Header
step

How to Access the Header Configuration

Assuming that you are already logged into the admin area of your WordPress installation you should navigate to AppearanceHeader.

Access the header customization page in WordPress

Then you will be redirected to the Custom Header admin page where you will be able to perform basic modifications on your header.

step

How to Edit the Appearance of the Header

We will begin with the Header Image section of that page.

The main field is called Current Header, and as the name suggests, it is for the preview of the changes which were already performed on the component.

Add new header image in WordPress

How to Add Custom Header Images to WordPress

We will begin with the Header Image section of that page. To add a custom header image, you will have to select the Add new image option, which will allow you to choose the corresponding image. Once you click on it, you can choose if you want to upload an image from your local machine or use an already uploaded image from your WordPress Media Library. Once you select your image, the option to crop it as much as you like and then to save and publish it will appear.

How to Delete Header Images

If you want to remove the current image header from your website, click on the Hide image button.

Hide WordPress header image

Notifications

Note that further customization of the Header is usually done in the files of the particular theme which you are using. Due to this, you should check your theme's documentation if you want to switch the dimensions, borders, and colors of the header placeholder space.

When all of the changes are performed, and you are satisfied with the result, please use the Save Changes button at the bottom of the page so you can save the changes and finish the editing of your website's top position element.

How to Add Videos to a WordPress Header

Adding a video as a header can be very beneficial for charity organizations, travel agencies, and real estate brokers, to name a few. Video materials draw the attention of visitors stronger than images. Videos also win faster the trust of visitors that the footage shown is legitimate compared to images which are easier to manipulate.

In WordPress, there are two ways of adding videos on the top of your page:

Add a Local Video in .mp4 format

The first is by uploading a video directly to your Media Library. Note that this method can only be used for files that are less than 8MB in size. Dimensions can also be restricted by the container size in your theme (in our case, this will be 2000x1200 pixels). If your video is within the limitations, access the header configuration options and click on the Select Video button.

Upload header video in WordPress

You will see a small box preview of the video and will be able to play/pause it as part of the review process.

Uploaded header video preview

Note

It is a great idea to add an image even though you already have a video in your header. If for some reason the visitor's browser doesn't load the video or is slowed down in loading that element, the user will see an empty space if there is no fallback image already set.

Add a Video from YouTube

For higher resolution clips which will be above 8MB in size, you will need first to upload your video to YouTube. Then copy its link and paste it in the appropriate field in this section.

Add WordPress header video from YouTube

The video should start playing immediately in your preview. The layout will also provide a dedicated pause button and even suggest similar videos via YouTube.

Congratulations! You now know how to edit the header of your WordPress website. With this, you can pin the attention of your website's visitors from the get-go. For more information on the rest of the elements which you will come across on the platform and how to configure them, check our tutorial navigation menu on the left.

On this page...

    WordPress Hosting

    • Free WordPress Installation
    • 24/7 WordPress Support
    • Free Domain for life
    • Hack-free Protection
    • Fast SSD Storage
    • Free WordPress Transfer
    • Free CloudFlare CDN
    • Immediate Activation
    View More