ThemeGrill AuthorWondering how to edit header in WordPress? 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. The point is that 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.
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 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. 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!
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 plugin lovers, the market has some amazing WordPress header plugins.
We’ll show all 3 ways to change the WordPress header style here. Let’s start with the ‘WordPress Live Customizer’ method now!
Method 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. So, you need to choose a theme that offers you a variety of options while editing your header.
And on that note, we’ve chosen the Zakra theme. It’s one of the best free themes available on the WordPress theme repository. However, it also has a premium version with awesome features.
If you need help with installing a theme, you can also check out our article ‘How to Install a WordPress Theme?’.
To begin editing your website’s header, log in 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. It means you can see the changes you make 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’ll 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, Logo Width, Icon, Title, Tagline, etc. Customizing these items is the first step toward 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 and 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’ll 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.
Now, you’ll 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 it. If you don’t, 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’ll be taken to the image editor where you can crop the image to fit 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.
With the Pro version of Zakra Theme, you can even 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’ve 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 want to add a video to your header? Don’t worry, we got you.
Under the Header Video section, you’ll see a short description of your video resolution. Try to upload a video of that resolution. Also, WordPress won’t let you upload a video to your header if it’s more than 8MB.
To add a video, 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’ll first need 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 paste it to the ‘Header Video URL‘ section.
As soon as you paste the link you’ll 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 won’t 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.
Once you enable 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 even choose what color your Header Top bar, its text, and icons will be. Likewise, under the Background section, you can choose the background color, image, size, and other attributes.
Furthermore, 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 page of your dashboard. There, you’ll see different widget areas based on the theme you’ve installed on your site. For Zakra, there are two header locations, i:e, Header Top Left Sidebar, and Header Top Right Sidebar.
So, hit the drop-down menu of the header top bar of your interest. After that, click on the Add block (+) button and Browse All to bring up the menu of all the available widgets. Now, search the required widget under the WIDGETS section and click it.
For instance, here we’ll add the Navigation Menu to the header’s location.
Now, you can add the Title to your navigation menu and select the required Menu from the dropdowns. Then, click on the Update 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 headers customize options as available on the Zakra theme.
Method 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 WPCode (formerly Insert Headers and Footers). It’s extremely simple and doesn’t require any complex configuration to edit your header in WordPress.
The plugin enables you to insert code like Google Analytics, Custom CSS, Facebook Pixel, and more to the header, footer, as well as other areas of your WordPress website.
Further, it stores all your edits in one convenient place. Thus, you can further edit or remove them without any hassle. Above all, it also saves your website from crashing as it prevents the risk of placing the code in the wrong place.
Thus, to start editing your header with WPCode, you need to install it first.
i) Install ‘WPCode’ Plugin
To install the WPCode WordPress plugin, log into your dashboard first. Once you’re on the dashboard, go to Plugins >> Add New.
It’ll take you to the Add Plugins page. In the search bar, type WPCode. Once the plugin is displayed, click on the Install Now button.
The plugin gets installed in no time. Then, click on Activate button to activate the plugin.
Congrats! You’ve successfully installed the WPCode plugin on your site.
Want to know more about installing and updating a plugin? Then, head over to our article on ‘How to Install a WordPress Plugin?‘
ii) Add the Code to the Header Section
Now, you’ll see a new tab named Code Snippet added to your dashboard menu. So, to edit a header, hover your mouse over the Code Snippet tab and click on the Header & Footer option.
There you’ll see three sections that you can edit as per your need. They are:
- Header
- Body
- Footer
Now, under the Header section, you can paste any code that you want to add to your header. And, the plugin will automatically insert it before the </head> tag. Also, you can do exactly the same with the other two sections as well.
Once you add the code for the header, don’t forget to click on the Save Changes button at the top.
Hence, WPCode is a fabulous plugin that allows you to edit the header in WordPress without having to code. Just as its name, it makes it easy to add the essential scripts/codes to make changes to your header as well as the body and the footer part of your website.
Likewise, you can also create headers with some of the best page builder plugins like Elementor, Beaver Builder, etc. 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.
Method 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 developers 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 File Editor to go to the theme editor in WordPress.
The first time you approach the Theme File Editor, you’ll 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 File 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 on your site longer. You can add social sharing options to your header as well.
One small area and all those benefits, thus headers are important. So you got to 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 your 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!
