Do you want to edit the header of your WordPress website? If you want to change your WordPress header style and create a custom header, then hop in!
The header is one of the most important parts of your website. You can add a menu, social icons, user registration, or login link, you name it. Point is, headers can be excellent navigators, appetizers for your main content, and more at the same time.
Through the words of this article, we’ll tell you how you can edit and customize your header to make it more attractive and useful. We’ll also talk about what a header is and why you need to have a good header.
A. What is a Header in WordPress? And Why Edit it?
While creating your WordPress website, you must’ve come across the term ‘Header’. The header is the topmost part of a webpage. A header introduces your website to the visitors. So you make your first impression with a header.
For example, here’s the screenshot of our blog’s header. P.S. You can scroll back to the top and see this header for real. 
A header usually contains the title of your website, a navigation menu, a video or image, a search bar, a button, or more. So it’s basically your whole website’s navigation in one place.
The header in your site is like a mini version of your website. It introduces your website and makes the first impression. Surveys reveal that visitors decide to stay on or leave your website after looking at it for under one second. In that amount of time, what do they see? The header.
A good header will always invite more people to your website. This leads to more people looking at your content or more people buying your products.
You can also add social sharing buttons in your header. So, some added publicity too. This is why your header needs to be awesome. And, you need to edit it, if you haven’t already.
In the following sections below, we’ll show 3 simple methods to customize and create a WordPress custom header. Let’s get in
B. How to Edit the Header in WordPress? (3 Methods)
WordPress, being the most beginner-friendly and best website builder, has the most simple ways of doing things. That goes for changing style too. You can edit and customize the WordPress header in mainly 3 different ways:
- From the Live WordPress Customizer (Easiest way)
- Using a WordPress Header Plugin
- Editing Header Code from Theme Editor (*not recommended to non-coders)
Now, WordPress Customizer is the best way to go for everyone. But there’s a condition, your WordPress theme must have the header customization abilities that you need. Thankfully, most of the popular and best WordPress themes have it.
If you believe in the power of coding, then there’s a Theme Editor as well. And for the plugin lovers, the market has some amazing WordPress header plugins.
We’ll show all 3 ways to change WordPress header style here. Let’s start with the ‘WordPress Live Customizer’ method now!
1. Editing Your WordPress Header from Live Customizer
Before we start editing the header in WordPress, it’s important to know something. As we stated above, different WordPress themes come with different header options. You wanna choose a theme that offers you a variety of options while editing your header.
And on that note, we have chosen the Zakra theme. It’s one of the best free themes available on the WordPress theme repository. But it also has a premium version with awesome features.
If you need help with installing a theme, check out our article on ‘How to Install a WordPress Theme?’.
To begin editing your website’s header, login to your WordPress dashboard. After that, go to Appearance >> Customize.
This will take you to the WordPress Live Customizer. Customizer is a core part of WordPress design. It lets you edit and customize your overall website design, including header, footer, etc. with live previews. Meaning, you can see the changes you made here in real-time.
On the left is the customizer’s navigation menu. The right side is for the live preview of your website. On the Customizer’s menu, click on the Header Tab.
There, you will see different tabs for customizing your header. The first tab you’ll see is the Site Identity. Click on it.
This tab is responsible for holding different options to edit your site’s identity on your header.
i) Modifying Your Website’s Logo and Icon
Inside the Site Identity tab, you’ll see options to choose your site’s logo, retina logo, icon, title, tagline, etc. Customizing these items is the first step towards creating a custom header in WordPress.
Your website’s logo will appear in the header inside your webpage. And the Site Icon will appear in the Title Bar of your browser alongside your webpage’s title.
To upload your website’s logo, simply click on the Select Logo button.
Clicking on the button will take you to your website’s media library. If you already have your logo on the media library, select it by clicking on it. If you don’t, simply drag and drop the file in the media library to upload it.
After you select your logo, click on Select.
Time to crop your image. Crop it as needed and hit the Crop Image button.
To adjust the size of your logo, you can adjust the Logo Width bar.
Hit the Publish button on the top to finally apply this change to your website.
To upload a Retina Logo or Site Icon, follow a similar process. Retina Logo is a high definition version of your Site’s logo.
Don’t forget to read the specifications before uploading the site icon.
There are options to edit your Site’s title as well as the tagline. Simply edit the text in those options to edit your site’s title and tagline. You can even hide your site’s title and tagline by unchecking the box that says ‘Display Site Title and Tagline’.
The Typography option at the bottom is for editing different aspects of the Site Title and Tagline’s text, like font family and size, etc.
That was it about defining your website through your header. There are other things you can do in the header. Let’s have a look at those.
ii) Adding Header Image in WordPress
Did you know that you could add images and even videos to the header on your WordPress website? Let’s explore how we can do that in WordPress.
A good image in your header will instantly impress your visitors. To add a header image to your website, Go to Appearance >> Customize >> Header. After that, click on the Header Media tab.
There you will see the option to add or customize your header image or video.
Before adding an image or a video, it’s always better to read the specification of your image or video resolution.
To add an image to the header, look at the Header Image section of your customizer. In there, click on Add New Image.
You will now be taken to your website’s media repository to select an image. If you already have your image in there, then you can simply select. If you don’t, then just drag and drop your image in the media repository to upload it.
After you select the image you want to add, click on Select and Crop.
You will be taken to the image editor where you can crop the image to fit on your page. Crop the image as you see fit and hit the Crop Image button.
You can see your image on your WordPress Customizer now. That’s how your website will look with that image.
In the Pro version of Zakra Theme, you can set what page users will be redirected to when they click the image. This is done using the Link To option.
After you’ve uploaded the image that fits, click on the Publish button on the top of the WordPress Customizer to make it go live.
Congratulations! You just uploaded the header image to your site. Your website is one notch more aesthetic.
iii) Adding a Header Video to Your WordPress Site
But what if you wanted to add a video to your header? Don’t worry, we got you.
Under the Header Video section, you will see a short description of your video resolution. Try to upload a video of that resolution. Also, WordPress will not let you upload a video to your header if it’s more than 8MB.
To add a video that is less than 8MB, click on Select Video.
Now, choose a video from your website’s media repository, or drop your video into it to upload.
After you’re done uploading or selecting a video, click on Choose Video.
Voila! Your header now has a video.
If you have to add a video that is over 8MB, then you will first have to upload it to YouTube and paste the link to your customizer. So, first, upload the video to YouTube. Copy the link of the video and then paste it into the box under the Header Video section.
As soon as you paste the link you will see your video on your header. To publish your video, simply click on the Publish button.
It’s better to add an image in your header even if there’s already a video. If in some case, your video doesn’t load, there won’t be a blank space. But a beautiful image will be there for your visitors.
iv) Remove the Header Image or the Header Video
If you somehow concluded that your header image shouldn’t be there, you can always remove it. To do that:
On the Header Image section, click on the Hide Image button under your Header Image to remove it from your header.
Click on the Publish button to save this change. That image will not bother your site, never again.
To remove the video that you uploaded to your site directly, (the one that is less than 8MB) click on the Remove button under your video.
But if your video was more than 8MB, then you must’ve first uploaded it to YouTube. Then, you pasted the link here.
To remove that video, simply delete the link from the box. Hit the Publish button to save this change.
Done! Your Header space no longer has that video. Also, you can change your WordPress header video, easily from the ‘Change video‘ button.
v) Customizing Your Header Top Bar
The header top bar is situated at the very top of your webpage. It’s often used to keep a simple navigation menu, a search bar, a login button, or more.
Not all themes will give you many options to customize your header top bar. So choose your theme carefully. Fortunately, Zakra has a lot of options to customize the header top bar even in the free version. Let’s go ahead and do that then.
To begin editing your header top bar, go to Appearance >> Customize >> Header. Then, click on the Header Top Bar tab.
Inside the Header Top Bar tab, you can choose what to keep on your header top bar. Under the Left Content Section, you can choose what to keep on the left side of your Header Top Bar. You can choose to keep a menu, text, or a widget. The same goes for the Right Content Section.
You can choose what color your Header Top bar, its text, icons will be. Under the Background section, you can choose the background color, image, size, and other attributes.
If you go for the pro version, you’ll have the option to customize the Link Color, Link Hover Color, Padding, Border Bottom, its color, and more.
Once you’re done making your header top bar look good, hit the Publish button to apply the changes.
vi) Adding Menus to Your WordPress Header (Using Widgets)
We said earlier that menus are often used in headers as primary navigators. Zakra lets you add menus in your header from the customizer. But not all themes will, and if you want to do it from the dashboard, you can do that too.
Now let’s see how we can add menus to the header in our WordPress website via widgets. Widgets are the small drag and drop content elements you can add to your website’s sidebars, footer, and defined areas.
First, go to Appearance >> Widgets.
This will take you to the Widgets Panel of your dashboard.
There, you’ll see widgets on the left and the locations those widgets can go, on the right. To add a widget to a specific location, simply drag the widget and drop it on the location’s name on the right.
We’ll use this process to add menus to our header. Grab the widget called the Navigation Menu, drag and drop it on your header’s location. For Zakra, there are two locations, Header Top Bar Left Sidebar and Header Top Bar Right Sidebar.
Once you drop the widget, you will see a panel. In there, you’ll be asked to enter the Title for your menu and select which menu you want to add. Choose your title and menu. Then click on the Save button to save the menu in that location.
And that’s how to add a menu to your header in WordPress using the power of widgets.
If you’re wondering which other themes have plenty of header options, then you can try our themes ColorMag (magazine theme), Flash (business theme), eStore (WooCommerce theme). They have as many header customize options as available on the Zakra theme.
2. Using a Plugin to Create a Custom Header in WordPress
WordPress has a mountain of plugins for every functionality you will need. Of course, there are plugins for creating headers as well.
In search of a plugin that needs minimum coding and provides a good user interface, we found the Pearl Header Builder. To start editing your header with Pearl, you first need to install it.
i) Install ‘Pearl Header Builder’ Plugin
To install the header editor WordPress plugin, log into your dashboard first. Once you’re on the dashboard, go to Plugins >> Add New.
You will see the plugin repository of WordPress. On the search bar, type Pearl. The first option you’ll see is the Pearl Header Builder. Click on Install Now.
After you install it, click on Activate to activate this plugin.
Pearl Header Builder plugin successfully installed.
Wanna know more about installing and updating a plugin, things to consider before installing a plugin? Head over to our article on ‘How to Install a WordPress Plugin?‘
You can now see a new tab named Header Builder added to your dashboard menu. To start building a header, click on it.
Before you start using the easy drag and drop interface of this plugin you actually have to paste a bit of code. Not write code, but only paste it.
ii) Paste the ‘Header Builder Code’ in Header Template
When you click on the Header Builder Tab, you’ll see the header builder window. There, after the option to select the header, you’ll see some lines of code.
Now, you see two different codes. You only need to copy one of those codes. And paste it on your themes code. So that your header builder can be integrated with your theme.
Copy this code and click on the ‘header template‘ link. This will take you to the header file of your Theme Editor.
In the code of your header file, you will find a section that starts with <head> and ends with </head>. This is the code for your header.
Delete this and paste the code you copied from Header Builder. Click on Update File to save your code.
That’s it, your coding part is over. Feel like a programmer yet?
iii) Editing the Header With Header Builder
On to the next part, which is easier to use. Click on the Header Builder tab. After the coding bit, you’ll see different options on the left like Header Options, Header Builder, Top Bar, etc. Use these options to edit and customize your header.
Once you’re done editing, hit Submit.
The only sad part of this is that you can’t see the changes being applied in real time, like with WordPress Customizer. But to compensate for that, the plugin has an Import Header option. This allows you to import templates for your header, saving your effort and time.
To work with a premade template. Click on Import Header, choose a header template. Tweak the settings and submit it. Your header is done.
And, be sure to use a good theme with many options to edit the header. Because header builder plugins works best with those.
You can also create headers with some of the best page builder plugins like Elementor, Beaver Builder. Those plugins have theme builder sections that let you easily customize your theme. But unfortunately, almost all of them have those options only in the pro version.
3. Change Your Header from Theme Editor (Developer’s Method)
Using WordPress Customizer is not the only way to customize your WordPress Header. There is another method that can be more flexible if you have enough coding knowledge.
*** This is exclusively suitable for developer’s only. Don’t open ‘Theme Editor’ if you’re not a WordPress developer.
If you know HTML and CSS, then you can customize your WordPress Header from your dashboard. Click on Appearance>>Theme Editor to go to the theme editor in WordPress.
The first time you approach the Theme Editor, you will be given a Heads Up!. This is done so that non-programmers don’t accidentally mess up the Theme’s code.
Click on I Understand to continue. You will be taken to the Theme Editor.
There you have lines of code that can be edited. These codes have shaped your theme and you can change this code to change how your theme will look.
You can edit your theme here by writing codes here. But if you specifically want to edit the header only, find a file on the Theme Files on the right side that says header.php.
This file is dedicated to your header. Customize the code here to change your WordPress header.
After you’re done editing the code, click on the Update File button at the end of the page. This will save your edited code.
There, your header has just been customized. Go check out the header that you’ve just edited.
So, you can also create a custom WordPress header by editing the header code. But once again, note that this is only for the developers!
Wrapping Up
Headers are primary navigators, appetizers, your site’s first impression and there’s more to it. A good header will reduce your bounce rate, keeping your visitors in your site longer. You can add social sharing options to your header as well.
One small area and all those benefits. Headers are important. So you gotta make sure your website has a good one. And we hope we were a good help at that. If you agree, please share this article and leave some feedback.
If you’re starting your website and want to know more about WordPress, there’s more information on our blog. How about this easy guide on using WordPress customizer? Explore our blog for more awesome articles on WordPress!
The post How to Edit Header in WordPress? 3 Easy Ways to Customize WordPress Header appeared first on ThemeGrill Blog.
Discover more from WIREDGORILLA
Subscribe to get the latest posts sent to your email.
