How to Customize WordPress Header

how to customize wordpress header

The header section of your WordPress website contains some of the most important design elements of your site. Major site defining aspects like your main menu, header image, contact information are located in this section. Since it usually meets the eyes first, it has to be captivating enough to make a good first impression. To do this, start by creating a WordPress custom header.

Your WordPress default themes header will usually not be appealing to users. So it makes so much sense to brand your website by adding code, custom videos, images, and taglines to your header. This enables your website to easily convey its uniqueness to your target audience.

After reading this article, you will learn how to create custom headers in WordPress how you can use it to personalize the design and appearance of your WordPress site.

Content

  1. What is a custom header?
  2. Customizing the WordPress header
  3. Header plugin for Social media icons

What is a custom WordPress header?

A custom header is a WordPress feature that allows users to improve the appearance of their website’s header using the default WordPress theme customizer. This can be achieved in a number of ways including; uploading customized title images, adding or removing header text, inserting header widgets, and adding social media icons.

Customizing the WordPress Header

The features on your WordPress header is determined by your chosen theme. The latest default WordPress themes (both free and premium) have the custom header feature. These themes provide header image options to choose from, they also allow users the liberty to upload custom videos and images.

However, if your default WordPress theme is not custom header enabled, you will not be able to customize your WordPress header. To determine if your theme is custom header enabled, go to your WordPress admin panel and click on Appearance. If you find the Header option under its menu, then the theme supports custom headers.

appearance wordpress header

Steps to add a custom header image

We will use the Twenty Sixteen default WordPress theme to customize the header. You can look at the dimensions for your header image in the header section by clicking Appearance >> Header on the admin dashboard.

Default header image dimension

Step 1 – Get a new image

The first thing you need to do is to get a good quality image that represents your site well. The image should be both meaningful and relevant. You can source for images from websites that provide royalty free images or use an original image that suits the purpose. We are using a sample image from Pixabay.

Step 2 – Edit and resize the image

Some themes allow you to crop the image as soon as you upload it, while some do not. In any case, you can use an image editing tool such as Adobe Photoshop to resize your image to the dimensions your theme specifies. This would also be a good time to add any artistic or graphic details to your header image. We’ll use the Microsoft Office Picture Manager.

WordPress custom header - how to resize an image

Step 3 – Upload and replace the image

The default Twenty Sixteen theme does not have a set header image. So as we have seen already, go to Appearance >> Header, then click the Add new image button.

WordPress custom header - add new image

On the new window, click the Upload Files button.

Custom header - upload your image to wordpress

Click Select Files and select the image file you want to upload.

drop files or select files to upload

Next, provide alternate text, then click on Select and Crop.

Select and crop image

If you intend to crop the image, choose Crop Image. Otherwise, click Skip Cropping.

Image for custom header

Click on Publish to display your new WordPress header.

press publish to update your header image

How to add a video header

There are themes that support video headers and for this feature, we will use the default Twenty Seventeen WordPress theme.

Option 1 – Use an mp4 video format

On your admin dashboard, follow the same steps through Appearance >> Header >> Select Video.

custom video header

The next window gives you the option to upload the video from your computer. After uploading click Choose video.

upload custom video header

Click Publish to save and display your header video.

publish video header

Option 2 – Load a video from Youtube

The second option is to load the video from YouTube. So instead of doing Select video, copying and pasting the URL of the header video you wish to use in the text input bar will do the job.

YouTube Header Image

Go to Appearance >> Customize, then select Site Identity

site identitiy

Click Select logo to upload the logo file. The process is the same as the steps outlined above.

custom website logo

Delete the Site Title and Tagline as they may no longer be necessary. Click Publish to display your logo.

website headers logo

Header plugin for social media icons

You can always use custom header WordPress plugins to speed everything up. Many WordPress themes have support for adding social media icons to the footer and other widget enabled parts of the website. But if you need to add social media icons to your header, there are a couple of things you may need to do first.

  1. Download and install the plugin Menu Image (its free)
  2. Source for social media icon images

From your WordPress admin dashboard, go to Appearance >> Menus. Provide a name for your menu, check the box for Top Menu, and click Save Menu.

custom menu

Select Custom Links, fill in values for the URL (to your social media pages) and the Link Text (such as Facebook), then Add to Menu.

custom links

A Custom Link is created under the Menu.

social links

Click on the custom Link to expand it. You will notice that the image size defaults to 36 x 36 and there are radio button options to determine the displaying of the link text (title). Check the Hide radio button and click Set Image.

set menu icon

Upload your selected image file and click the Save Menu button.

social icons

Hit the refresh button to see your social media icon on the top menu of the header.

customized header menu

Conclusion

There are many advanced changes and customizations you can make to your WordPress header. It may require further research and even getting your hands dirty with adding code. When all is done, your site should present the look and feel that you want to give your users.

This article has taught you most of the simple customizations you can perform on your site to make it look unique. For more step by step WordPress tutorials check our WordPress blog.

More Resources: