Customize WordPress Header without Plugins with this Theme

As we all know WordPress is a Content Management System (CMS) using which anyone can create a dynamic website without knowing to write a single line of code.

In recent times, the advent of the Gutenberg editor has added such great features to WordPress that every page can be customized to our liking.

The blocks in WordPress have given rise to the upgradation of a WordPress developer’s creativity with a lot of options including the starter templates that they offer and these stunning modern slider designs that you can afford to have in your WordPress websites.

But unfortunately, the blocks are yet to show up on the header and footer of WordPress though they can be added using widgets, the full-fledged modification of the header is yet to fall in place.

What is a header in WordPress?

A header is a part of a WordPress website that is constant throughout the website navigation unless intentionally made otherwise. Logo, Navigation, Social Media Icons, and a Cart for e-commerce websites are more or less a part of the header.

If you have worked on Word, you would have heard of headers. The concept is extended to website development just like Word.

If you want a sticky header for your website, you can do that by following this article.

If there are multiple pages, the header remains more or less constant but for the page number that has to change and is not hard coded.

Very similar to that is it on a website. The header remains constant. When we used to develop websites using raw HTML, we had to maintain the same code of the header and footer throughout, they had to remain constant.

But don’t worry, this is not the case in WordPress. There is a separate page for the header and footer for your access. Changing it in one place will change it across the website.

How do I manually edit a header in WordPress?

You have to go to the Appearance link on the left sidebar of the WordPress admin dashboard. Select “Theme File Editor” from the submenu. Agree there and proceed to the editor page.

Look out for the right menu where you can see different PHP pages meant for different functionalities. The one to edit the header is the header.php. Select that and start changing the code to whatever suits your requirement.

How do I edit the HTML header in WordPress?

Once you select the header.php from the previous image, you will get to see the HTML codes embedded amidst the PHP code. You change them according to your requirement and update the file.

Modify this file only if you know what you are doing, or else you might land in problems.

How do I add a custom header in WordPress?

You thought it right. In the previous section, we have shown you how to edit the header.php file. But unless you are a developer, you will not be able to do so.

Even if you are not a developer, it is easier to add a custom header in your way.

There are two ways of doing this. Let us discuss both of them. The first one of the two will be to add a plugin. But before doing it this way, remember one thing.

The more plugins you start adding, the slower your website will become. So, install a plugin if it is absolutely required.

1. The Plugin Way of customizing WordPress Header

There are a lot of plugins out there. We have selected this one because we saw that there are no dependencies whatsoever with no other plugin.

This makes it the best option. Just install the plugin, go to the settings of the plugin and start customizing.

STAX Header Builder

Search for this plugin by going to the Plugin section > Add New Plugin.

Once the search engine lists related plugins, go ahead and install the right plugin.

Since we don’t want to cover this plugin in this article, you can view the video below that explains to you how to use the plugin.

How do I change the header in WordPress without plugins?

This is the way that we have been using for quite some time. If you think what else do we have other than plugins?

Themes! yes, WordPress theme. This theme is extremely good. It can help you out with a lot of customizations right out of the box.

2. The Theme way of customizing WordPress Header

The theme is called Kadence.

Install the theme Kadence from the sidebar link Appearance” > “Themes”

Add themes and search for the theme Kadence. Once it shows up in the list, hover over it and install it.

This is not enough. What we do is install the child theme from this place here.

Upload it to WordPress Appearance > Themes > Add New button and upload from there.

You will get the following screen.

Drag and drop the child there to add it to your themes and activate it.

Now start working on the header. Let us see the options we have in the Kadence theme.

How to add a logo to the header in WordPress without a plugin?

Go to Appearance > Customize

Here select the header to start customizing the header

Now, click on the logo block, and settings icon.

Select the logo and upload a logo from your computer

Publish and you are done. If you visit your website’s front end, you will see that you have a logo in the header.

Advance customization of the Theme

Go back to the header tab from the customization.

On the left, you can add the available items to the three placeholders provided to your right.

Drag and drop the available items from the left to the placeholders on the right.

You can create three headers for the website. There are three sections for each of these three headers. You need to add the available items to one of these three sections for the item to appear in the exact same place in the front end.

Like so:

You can see that we have added three available items to the two header placeholders.

These placeholders will add the relevant items to the places you have added them to.

This is what the front-end header now looks like:

How to add text in the header WordPress?

You can similarly add an HTML block to the header placeholder and write HTML code to display text on the header. As easy as Word…!

And insert the HTML Code here.