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
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.
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.
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.
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.
On the new window, click the Upload Files button.
Click Select Files and select the image file you want to upload.
Next, provide alternate text, then click on Select and Crop.
If you intend to crop the image, choose Crop Image. Otherwise, click Skip Cropping.
Click on Publish to display your new WordPress header.
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.
The next window gives you the option to upload the video from your computer. After uploading click Choose video.
Click Publish to save and display your header video.
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.
How to add a custom logo to your header in WordPress
Go to Appearance >> Customize, then select Site Identity
Click Select logo to upload the logo file. The process is the same as the steps outlined above.
Delete the Site Title and Tagline as they may no longer be necessary. Click Publish to display your 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.
- Download and install the plugin Menu Image (its free)
- 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.
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.
A Custom Link is created under the Menu.
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.
Upload your selected image file and click the Save Menu button.
Hit the refresh button to see your social media icon on the top menu of the header.
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.
