Headers are one of the first things customers notice upon visiting your website. Headers have a lot of potential; they can highlight your brand, display important information and help visitors navigate your website easily. That’s why you’re aiming for an exceptional header.
While the header’s position remains constant from page to page, the header’s content doesn’t have to stay static. After all, what if the homepage header contains info that’s distracting on other pages?
You can configure a header that changes to stay acutely relevant to the current page.
This guide explains the best use cases for alternate headers and then tackles how to edit headers in WordPress. We’ll wrap up with best practices so your website is as effective as possible.
The basics of WordPress alternate headers
The header is the horizontal strip at the very top of every website. Typically, it contains the brand’s name, logo and tagline — plus, a navigation menu. Sometimes, brands include contact info and social media links.
On some types of webpages, headers are more effective using different information or none at all. You’ll learn more about that in this guide.
Alternate headers are headers customized for specific pages within a website. You can change the information displayed on a page’s header or customize navigational menus for that page.
These thoughtful headers improve customer experience by displaying the right information at the right time. With that in mind, you’ll now learn how editing headers in WordPress can boost your business by helping your audience.
Why you should use an alternate header
A website usually contains several pages with different layouts. For example, an about us page typically has some photos, followed by subheadings and paragraphs. In contrast, the typical product catalog page has a grid layout, search filters and lots of navigational links.
Irrespective of the layout, the website header remains at the top. Consider the following use cases to learn when homepage headers are suboptimal and how alternate headings provide a solution.
Simplify website navigation
Customers often use a site’s header to navigate. Hence, homepage headers typically include links to important sections like the about us page and support page. Notably, some pages will benefit from additional buttons to simplify navigation.
For example, imagine a fashion apparel brand’s homepage header. It displays the standard home, products and support buttons. A customer clicks on the products page and starts shopping. They’d love to switch between categories easily, to get from hats to shoes.
Configuring an alternate header with navigational buttons for each major apparel category will help customers find something to buy. On the other hand, including all those links on the homepage header would be cluttered.
Alternate headers are the solution for a simple navigational menu experience that still displays helpful links when they’re beneficial.
The online apparel brand Boohoo is an excellent example of using alternate headers for navigation. Click on the women’s or men’s pages; the header swaps its menu according to the target audience.
Keep your marketing relevant
Many brands use the header section to display advertisements, such as discounts, memberships and limited-time products. But these promotions aren’t relevant to every page on the website.
In fact, 66% of consumers say most of the ads they see online are irrelevant to them. This has led to many people ignoring ads entirely unless they’re thoughtfully timed and targeted.
For example, when customers visit your support page, they’re focused on getting answers and assistance. It’s best to put sales tactics aside for the time being.
For your header promotions to be effective, you’ll need to learn how to edit headers in WordPress. Save header ads for pages where the customer is likely open to buying. Be especially restrained on support, checkout and resource pages.
Streamline the checkout process
Just like any other part of the shopping experience, customers want a quick and hassle-free checkout — minimal steps, less data entry and no interruptions. 18% of shoppers abandon their eCommerce carts due to a complicated checkout process.
As shoppers complete their purchases, they don’t need to navigate to your social media pages or anywhere else. Distractions are an enemy to closing a sale.
Optimize your checkout page by eliminating navigational buttons, social media icons and other non-essential links from the header.
Now that you know the benefits of using alternate headers, let’s learn how to edit headers in WordPress with different methods.
Methods for creating custom WordPress headers
To edit headers in WordPress, you can alter the base code, use a website builder’s code blocks or opt for the easiest options — themes and plugins.
It’s best to consider each method before choosing one for your website.
Method 1: Code
If you’re well-versed in WordPress coding, you can create alternate headers using custom CSS. This involves making copies of the header.php file, modifying the theme files and applying them to the required pages via the template code.
Remember to create a child theme before changing the base code. This enables you to test your edits without affecting the main website.
While using custom code will work, it can be complex if you have little to no coding knowledge. It can also become expensive if you plan to hire a web developer to do it.
Method 2: Website builders
Website builders (or theme builders), such as Bluehost’s WonderSuite, provide an easier way of using code to create alternate headers.
These tools usually employ code snippets, called blocks, and use a drag-and-drop interface to create and customize website features.
You can edit existing headers and create entirely new ones that only apply to certain pages on your website. Since website builders use block-based coding, you won’t need a computer science degree.
That being said, if you want to capitalize on the design flexibility of these tools, some basic coding knowledge will help.
Method 3: WordPress themes
Themes are prebuilt templates used to change a website’s appearance. The WordPress repository has over 11,000 themes, many of which support alternate theme headers.
Most themes have built-in page editors with several font, color and style options. With just a few clicks, you can create alternate headers and apply them to the required pages.
Since WordPress themes are prebuilt, modifying them doesn’t require any coding. However, make sure you choose a WordPress theme that does support alternate headers.
Method 4: Plugins
If you already use a website theme and it doesn’t support alternate headers, use plugins to modify your pages. Plugins are WordPress customizer add-ons, each designed to enable a specific function.
Just like themes, using WordPress plugins often involves a built-in interface to help you make modifications easily.
Follow the steps below to create custom headers using a WordPress theme or plugin.
How to edit a header in WordPress
1. Choose a WordPress theme or plugin that supports alternate headers.
2. In your WordPress dashboard, go to Appearance > Customize and create a new header.
3. Apply the custom header to the required pages.
Your tool options include themes, plugins or a combination of both. Regardless, creating alternate headers using this way requires no technical knowledge.
Below, you’ll see a step-by-step explanation of how to edit headers in WordPress for a specific page.
1. Choose a WordPress theme or plugin that supports alternate headers
WordPress has a myriad of options for website themes, but not every theme allows you to configure alternate headers.
Some themes, like Blocksy PRO, support alternate headers by default. Find compatible themes via the following methods:
On your WordPress dashboard, go to Appearance > Themes and, in the dropdown menu, click on Add New Theme.
In the search bar, use keywords like “alternate headers,” “multiple headers” and “custom headers” to pinpoint themes that support the feature.
When you find a theme you’re interested in, read the description carefully, double-checking whether it supports alternate headers.
To make your decision easier, consult resource pages like Themeisle and WPHub, which catalog and review themes.
If you have already applied a theme to your WordPress site, find out whether it supports custom headers; visit the theme’s official website or contact its support team.
Use a theme customizer plugin to configure alternate headers if you have already applied a WordPress theme that doesn’t have a built-in alternate header tool.
Some free plugins help you customize headers using images from your gallery or the WordPress media library; Unique Headers and WP Header Images are good examples.
If you want other customization options, head to your WordPress dashboard and go to Plugins > Add New Plugin. In the search bar, use keywords like “alternate headers,” “multiple headers” and “custom headers.”
Once you find a satisfying plugin, check the details to ensure it’s compatible with your current version of WordPress. Then, click Install to download it. Lastly, activate the plugin — your WordPress dashboard will deliver a prompt for you to do so.
2. In your WordPress dashboard, go to Appearance > Customize and create a new header
When your theme or plugin is ready, simply head to your WordPress dashboard, use the sidebar to open the Appearance menu and click the Customize option. Then, select the Header option from the side menu.
If you’ve chosen a theme with an alternate header feature or you’ve applied a theme customizer plugin, you’ll see a Create New Header option.
Use this feature to create custom headers; you can add and remove header items. Additionally, you can change the header style, background color and font.
3. Apply the custom header to the required pages.
Once you finish customizing a new header, apply it to the pages you want. Depending on your chosen theme or plugin, this option may be worded differently — look for something similar to Apply to Pages or Display Conditions.
The Apply to Pages option is straightforward; it lets you choose the pages you want the custom header on.
The Display Conditions option is more intricate. In addition to selecting pages, it also enables you to choose scenarios that change the header. For example, the header can change color when visitors scroll to the bottom. Or, you can change its appearance when customers click on a certain product.
Either way, preview the changes before saving them.
Best practices and use cases for alternate headers
Beyond the basics of how to edit headers in WordPress, the best practices below will sharpen your execution and share the wisdom you need to use alternate headers effectively.
To improve your website’s user experience, it’s essential you choose the right header elements for each page. Here are some tips to guide your decisions.
Homepage: The homepage is often the first page customers see when visiting your website. When you create your homepage header, aim to contain all the elements required to simplify the website’s overall layout.
In addition to the site logo and brand name, a homepage header should include a navigational menu to important pages such as your products page and support page.
The homepage header should also contain social icons and contact information for customers who want to reach out.
Product pages: If you sell multiple types of products, your product page header should contain shortcuts to the various categories. This helps customers easily find the desired catalog.
As a bonus perk, displaying product categories on your header helps customers learn the complete spectrum of what you sell.
Checkout page: When it comes to creating a checkout page, less is better. Too many elements on the header will distract customers; providing unneeded buttons opens an opportunity for the customer to navigate elsewhere instead of completing their purchase.
Keep the checkout page header minimal; even just the brand name and logo will suffice.
About us and support pages: When a consumer visits your about us page, they’re probably just there to collect information. When they visit your support page, they need assistance first and foremost.
This is a great opportunity to showcase yourself as a customer-centric brand by providing your audience with info — without pushing them to buy.
Refrain from advertisements and offers on your support page header. Make sure to display your contact number and email address to help customers reach out to you quickly.
Loyalty program and subscription pages: Configure a unique header centered around the program. Be clear about where customers can find information regarding what they’ve joined.
In addition to basic elements like the brand logo and home button, include links to the introduction, instructions, forms and FAQ pages related to the program.
User account page: If customers can register on your website to buy products, provide them with easy access to management options. Modify the header to include links to account information, order history, wishlist, help resources and payment information.
Landing pages: A landing page usually prioritizes conversions related to a specific product or service. The header should follow suit with its focus.
For example, if you’ve created a landing page for a promotional offer, the header should contain links to the products covered in the promotion and some FAQs related to the offer.
Similarly, on a landing page for lead conversion, the header can link to useful resources that address the visitor’s pain points.
Blog section pages: Divide your blog section into categories like tutorials, updates, press releases, events and case studies. Include links to the main categories in your header so customers can get straight to their interests.
Final thoughts: How to edit headers in WordPress
Alternate headers are an impactful tool to create a better experience for your website viewers. Now that you know how to edit a header in WordPress, you can raise the quality of pages across your website.
On the other hand, small business owners have better things to do than manually editing headers for every web page. That’s a task for an experienced WordPress website designer who understands WordPress header customizations inside and out.
Most people don’t know where to look for such a specialist, but Bluehost’s website design service brings them to you. Request a consultation to receive a custom website that meets all your requirements — from custom headers to mobile compatibility to eCommerce hosting.
