What is the best way to customize the header in WordPress? Because your header appears at the top of every page, it’s crucial for branding, navigation, and presenting your most vital information.
To get the most out of it, you’ll need a way to change your site’s header, which many themes don’t provide.
In this tutorial, we’ll go over a few various ways to alter the header in WordPress, including simple drag-and-drop interfaces and custom code.
What does the WP header look like?
Every page has a header, which is the top bar. A logo, a menu to access other sections of the site, a search bar, and contact information are frequently included in this element, which displays on every page of the site. The cart and the things you’ve added to it are frequently visible in eCommerce stores.
Why would you want to change the header in WordPress?
The header is one of the most important aspects of any website. It’s the first thing people see when they arrive at your site, and you know how important first impressions are. According to a recent study, users decide whether or not they like your website in 0.05 seconds, and hence whether or not they will stay or leave.
A visitor spends only 10-20 seconds on a website on average. It doesn’t matter if your content is fantastic. If they don’t like what they see and leave, they’ll never get to the good stuff. As a result, you must have a visually appealing header that encourages visitors to stay on your site.
Here are the 3 Ways to Change the Header in WordPress
In WordPress, there are various options for changing the header. We’ve highlighted 3 beginner options for you to consider:
1) Use a plugin to customize the header.
This is the ideal option if you prefer WordPress plugins to code and edit the core files. “Insert Headers and Footers” is a free plugin accessible in the WordPress plugin repository. This basic utility does not require any further complicated preparations.
Let’s have a closer look:
- Log in to your WP backend first.
- Go to Plugins > Create New to add a new plugin. You may then look for new WP plugins in the repository or upload the plugin files to install them. Insert Headers and Footers in the search bar.
- Choose the appropriate choice and set it up. Then turn it on.
- Customize it. The Insert Headers and Footers Settings are found in the Settings section, as seen below.
You’ll notice that there are three sections you can alter there:
If you use the header section to incorporate code, it will display before the /head> tag. The footer is in the same boat as the body. The codes will appear before the /body> and /footer> tags. In this situation, you’re changing the header, so check for the /head> tag.
- Add the code you wish to go under the head tag to the Scripts section of the Header section.
- Don’t forget to save your modifications after you’ve added the code by clicking Save.
- That’s all there is to it! Your header will be updated with the code. Overall, Insert Headers and Footers is an excellent solution for people who don’t want to bother with coding and want to make modifications to their WordPress header.
2) Modify the Header.php file in the theme.
There are more alternatives if you want more control over your header and have some basic coding knowledge. Don’t worry if you don’t want to use the Insert Headers and Footers plugin since you don’t like utilizing too many plugins to avoid slowing down your website. We’ll teach you step-by-step how you can still alter your WordPress header with a little scripting.
We recommend that you begin by making a child theme. You can either do it manually or use a child theme plugin to aid you. Let’s look at how to edit the header file using the WordPress admin panel once you’ve created the child theme.
- Go to the admin section and log in.
- The Theme Editor is located in the Appearance section.
- Make modifications to the theme’s core files here. The editor will grab the current theme’s style.css file to edit by default, and it will look like this.
- On the right, you’ll see a list of all the files and folders in the current theme’s directory.
- Find Header.php by scrolling down the list (under the Theme Header).
- Click on the file to open it in your editor. We used the GeneratePress WordPress theme to make this guide, so it looks like this.
- Now it’s time to have some fun. Make careful to place the snippet between the head> and /head> tags when changing the Header.php file and inserting your custom code. We’ll put some sample text immediately before the /head> tag in this scenario.
- To save the changes, click Update File. The modifications are saved appropriately if you get the File modified successfully notification. You can check it by visiting to your site’s front end and inspecting the source code.
3) Use FTP to make changes to the header
This is also a simple method for novices. You might utilize an FTP client if you’re having trouble with the WordPress theme editor. We’ll be using FileZilla for this tutorial because it’s our favorite, but any other program will suffice. Let’s look at how to change the WordPress header using FTP now.
- You’ll need an FTP account to connect to your server using FTP. You can make one from the hosting cPanel. Connect the FTP client to your server using the username, hostname, and password port.
- The local storage will be on the left, and the server storage will be on the right. Go to the directory of your active theme to edit the header file.
- /wp-content/themes/theme-name/ will be the path. The Header.php file can be found there.
- Select the editing option from the context menu by right-clicking on it. The file will be saved to your computer’s local storage and opened with a file editor such as Notepad or Notepad++.
- Right before the /head> tag, make the changes you want. After you’ve made your modifications, save the file and upload it to the server again.
- That’s all there is to it! You’ve modified your site’s WordPress header by editing the file! The source code of the website can be viewed to verify the changes. It’s important to note that this strategy has one major flaw.
You will lose all of your prior modifications once you change the theme, so if you plan to change themes in the future, this may not be the best solution for you. If you need to change the header of your new theme to match the old code, a simple copy-paste would suffice.
To summarise, there are a few easy ways to change the header of any WordPress website. We recommend the Insert Headers and Footers plugin for novices since it is easy to use and administer.
On the other hand, if you don’t plan to alter your WordPress theme anytime soon, modifying the header.php file is a great option.
Finally, it’s crucial to note that if you change your WP theme after editing the Header.php file, all of your adjustments will be lost, but you can copy and paste them. So, weigh the pros and cons of the various possibilities and determine which is ideal for you.