The basics of WordPress alternate headers<\/h2>\r\n\r\n\r\n\r\n
The header is the horizontal strip at the very top of every website. Typically, it contains the brand\u2019s name, logo and tagline \u2014 plus, a navigation menu. Sometimes, brands include contact info and social media links.<\/p>\r\n\r\n\r\n\r\n
On some types of webpages, headers are more effective using different information or none at all. You\u2019ll learn more about that in this guide.<\/p>\r\n\r\n\r\n\r\n Alternate headers are headers customized for specific pages within a website. You can change the information displayed on a page\u2019s header or customize navigational menus<\/a> for that page.\u00a0<\/p>\r\n\r\n\r\n\r\n These thoughtful headers improve customer experience by displaying the right information at the right time. With that in mind, you\u2019ll now learn how editing headers in WordPress can boost your business by helping your audience.<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n Customers often use a site\u2019s 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.\u00a0<\/p>\r\n\r\n\r\n\r\n For example, imagine a fashion apparel brand\u2019s homepage header. It displays the standard home, products and support buttons. A customer clicks on the products page and starts shopping. They\u2019d love to switch between categories easily, to get from hats to shoes.<\/p>\r\n\r\n\r\n\r\n 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.\u00a0<\/p>\r\n\r\n\r\n\r\n Alternate headers are the solution for a simple navigational menu experience that still displays helpful links when they\u2019re beneficial.<\/p>\r\n\r\n\r\n\r\n The online apparel brand Boohoo<\/a> is an excellent example of using alternate headers for navigation. Click on the women\u2019s or men\u2019s pages; the header swaps its menu according to the target audience.<\/p>\r\n\r\n\r\n\r\n Many brands use the header section to display advertisements, such as discounts, memberships and limited-time products. But these promotions aren\u2019t relevant to every page on the website.<\/p>\r\n\r\n\r\n\r\n In fact, 66% of consumers<\/a> say most of the ads they see online are irrelevant to them. This has led to many people ignoring ads entirely unless they\u2019re thoughtfully timed and targeted.<\/p>\r\n\r\n\r\n\r\n For example, when customers visit your support page, they\u2019re focused on getting answers and assistance. It\u2019s best to put sales tactics aside for the time being.<\/p>\r\n\r\n\r\n\r\n For your header promotions to be effective, you\u2019ll 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.<\/p>\r\n\r\n\r\n\r\n Just like any other part of the shopping experience, customers want a quick and hassle-free checkout \u2014 minimal steps, less data entry and no interruptions. 18% of shoppers<\/a> abandon their eCommerce carts due to a complicated checkout process.<\/p>\r\n\r\n\r\n\r\n As shoppers complete their purchases, they don\u2019t need to navigate to your social media pages or anywhere else. Distractions are an enemy to closing a sale.\u00a0<\/p>\r\n\r\n\r\n\r\n Optimize your checkout page<\/a> by eliminating navigational buttons, social media icons and other non-essential links from the header.<\/p>\r\n\r\n\r\n\r\n Now that you know the benefits of using alternate headers, let\u2019s learn how to edit headers in WordPress with different methods.<\/p>\r\n\r\n\r\n\r\n To edit headers in WordPress, you can alter the base code, use a website builder\u2019s code blocks or opt for the easiest options \u2014 themes and plugins.\u00a0<\/p>\r\n\r\n\r\n\r\n It\u2019s best to consider each method before choosing one for your website.<\/p>\r\n\r\n\r\n\r\n If you\u2019re well-versed in WordPress coding, you can create alternate headers using custom CSS. This involves making copies of the header.php<\/strong> file, modifying the theme files and applying them to the required pages via the template code.\u00a0<\/p>\r\n\r\n\r\n\r\n Remember to create a child theme<\/a> before changing the base code. This enables you to test your edits without affecting the main website.\u00a0<\/p>\r\n\r\n\r\n\r\n 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.\u00a0<\/p>\r\n\r\n\r\n\r\n Website builders (or theme builders), such as Bluehost\u2019s WonderSuite<\/a>, provide an easier way of using code to create alternate headers.\u00a0<\/p>\r\n\r\n\r\n\r\n These tools usually employ code snippets, called blocks, and use a drag-and-drop interface to create and customize website features.\u00a0<\/p>\r\n\r\n\r\n\r\n 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\u2019t need a computer science degree.<\/p>\r\n\r\n\r\n\r\n That being said, if you want to capitalize on the design flexibility of these tools, some basic coding knowledge will help.<\/p>\r\n\r\n\r\n\r\n Themes are prebuilt templates used to change a website\u2019s appearance. The WordPress repository has over 11,000 themes<\/a>, many of which support alternate theme headers.\u00a0\u00a0<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n Since WordPress themes are prebuilt, modifying them doesn\u2019t require any coding. However, make sure you choose a WordPress theme<\/a> that does support alternate headers.<\/p>\r\n\r\n\r\n\r\n If you already use a website theme and it doesn\u2019t support alternate headers, use plugins to modify your pages. Plugins are WordPress customizer add-ons, each designed to enable a specific function.\u00a0<\/p>\r\n\r\n\r\n\r\n Just like themes, using WordPress plugins<\/a> often involves a built-in interface to help you make modifications easily.<\/p>\r\n\r\n\r\n\r\n Follow the steps below to create custom headers using a WordPress theme or plugin.<\/p>\r\n\r\n\r\n\r\n 1. Choose a WordPress theme or plugin that supports alternate headers.<\/p>\r\n\r\n\r\n\r\n 2. In your WordPress dashboard, go to Appearance<\/strong> > Customize <\/strong>and create a new header.<\/p>\r\n\r\n\r\n\r\n 3. Apply the custom header to the required pages.<\/p>\r\n\r\n\r\n\r\n Your tool options include themes, plugins or a combination of both. Regardless, creating alternate headers using this way requires no technical knowledge.\u00a0<\/p>\r\n\r\n\r\n\r\n Below, you\u2019ll see a step-by-step explanation of how to edit headers in WordPress for a specific page.<\/p>\r\n\r\n\r\n\r\n WordPress has a myriad of options for website themes<\/a>, but not every theme allows you to configure alternate headers.\u00a0<\/p>\r\n\r\n\r\n\r\n Some themes, like Blocksy PRO<\/a>, support alternate headers by default. Find compatible themes via the following methods:<\/p>\r\n\r\n\r\n\r\n On your WordPress dashboard, go to Appearance<\/strong> > Themes <\/strong>and, in the dropdown menu, click on Add New Theme<\/strong>.\u00a0<\/p>\r\n\r\n\r\n\r\n In the search bar, use keywords like \u201calternate headers,\u201d \u201cmultiple headers\u201d and \u201ccustom headers\u201d to pinpoint themes that support the feature.<\/p>\r\n\r\n\r\n\r\n When you find a theme you\u2019re interested in, read the description carefully, double-checking whether it supports alternate headers.<\/p>\r\n\r\n\r\n\r\n To make your decision easier, consult resource pages like Themeisle<\/a> and WPHub<\/a>, which catalog and review themes.<\/p>\r\n\r\n\r\n\r\n If you have already applied a theme to your WordPress site, find out whether it supports custom headers; visit the theme\u2019s official website or contact its support team.<\/p>\r\n\r\n\r\n\r\n Use a theme customizer plugin<\/strong> to configure alternate headers if you have already applied a WordPress theme that doesn\u2019t have a built-in alternate header tool.<\/p>\r\n\r\n\r\n\r\n Some free plugins help you customize headers using images from your gallery or the WordPress media library; Unique Headers<\/a> and WP Header Images<\/a> are good examples.<\/p>\r\n\r\n\r\n\r\n If you want other customization options, head to your WordPress dashboard and go to Plugins<\/strong> > Add New Plugin<\/strong>. In the search bar, use keywords like \u201calternate headers,\u201d \u201cmultiple headers\u201d and \u201ccustom headers.\u201d<\/p>\r\n\r\n\r\n\r\n Once you find a satisfying plugin, check the details to ensure it\u2019s compatible with your current version of WordPress. Then, click Install<\/strong> to download it. Lastly, activate the plugin \u2014 your WordPress dashboard will deliver a prompt for you to do so.\u00a0<\/p>\r\n\r\n\r\n\r\n When your theme or plugin is ready, simply head to your WordPress dashboard, use the sidebar to open the Appearance <\/strong>menu and click the Customize <\/strong>option. Then, select the Header <\/strong>option from the side menu.<\/p>\r\n\r\n\r\n\r\n If you\u2019ve chosen a theme with an alternate header feature or you\u2019ve applied a theme customizer plugin, you\u2019ll see a Create New Header <\/strong>option.\u00a0<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n 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 \u2014 look for something similar to Apply to Pages<\/strong> or Display Conditions<\/strong>.<\/p>\r\n\r\n\r\n\r\n The Apply to Pages<\/strong> option is straightforward; it lets you choose the pages you want the custom header on.<\/p>\r\n\r\n\r\n\r\n The Display Conditions <\/strong>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.<\/p>\r\n\r\n\r\n\r\n Either way, preview the changes before saving them.<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n To improve your website\u2019s user experience, it\u2019s essential you choose the right header elements for each page. Here are some tips to guide your decisions.<\/p>\r\n\r\n\r\n\r\n Homepage<\/strong>: The homepage is often the first page customers see when visiting your website. When you create your homepage<\/a> header, aim to contain all the elements required to simplify the website\u2019s overall layout.\u00a0<\/p>\r\n\r\n\r\n\r\n 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.\u00a0<\/p>\r\n\r\n\r\n\r\n The homepage header should also contain social icons and contact information for customers who want to reach out.<\/p>\r\n\r\n\r\n\r\n Product pages<\/strong>: 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.<\/p>\r\n\r\n\r\n\r\n As a bonus perk, displaying product categories on your header helps customers learn the complete spectrum of what you sell.<\/p>\r\n\r\n\r\n\r\n Checkout page<\/strong>: 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.<\/p>\r\n\r\n\r\n\r\n Keep the checkout page header minimal; even just the brand name and logo will suffice.<\/p>\r\n\r\n\r\n\r\n About us and support pages<\/strong>: When a consumer visits your about us page, they\u2019re probably just there to collect information. When they visit your support page, they need assistance first and foremost.<\/p>\r\n\r\n\r\n\r\n This is a great opportunity to showcase yourself as a customer-centric brand by providing your audience with info \u2014 without pushing them to buy.<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n Loyalty program and subscription pages<\/strong>: Configure a unique header centered around the program. Be clear about where customers can find information regarding what they\u2019ve joined.\u00a0<\/p>\r\n\r\n\r\n\r\n 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.\u00a0<\/p>\r\n\r\n\r\n\r\n User account page<\/strong>: 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.<\/p>\r\n\r\n\r\n\r\n Landing pages<\/strong>: A landing page usually prioritizes conversions related to a specific product or service. The header should follow suit with its focus.<\/p>\r\n\r\n\r\n\r\n For example, if you\u2019ve 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.<\/p>\r\n\r\n\r\n\r\n Similarly, on a landing page for lead conversion, the header can link to useful resources that address the visitor’s pain points.<\/p>\r\n\r\n\r\n\r\n Blog section pages<\/strong>: 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.<\/p>\r\n\r\n\r\n\r\n 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.<\/p>\r\n\r\n\r\n\r\n On the other hand, small business owners have better things to do than manually editing headers for every web page. That\u2019s a task for an experienced WordPress website designer who understands WordPress header customizations inside and out.\u00a0<\/p>\r\n\r\n\r\n\r\n Most people don\u2019t know where to look for such a specialist, but Bluehost\u2019s website design<\/a> service brings them to you. Request a consultation to receive a custom website that meets all your requirements \u2014 from custom headers to mobile compatibility to eCommerce hosting<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":" 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\u2019s why you\u2019re aiming for an exceptional header. While the header\u2019s position remains constant from page to page, the header\u2019s content […]<\/p>\n","protected":false},"author":15,"featured_media":49256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"Alternate Header Benefits & How To Edit Headers in WordPress","_yoast_wpseo_metadesc":"This guide explains how to edit headers in WordPress, the benefits of making alternate headers and the best practices for headers that improve your website.","inline_featured_image":false,"footnotes":""},"categories":[3043,21],"tags":[3317,3330,3340],"ppma_author":[592],"class_list":["post-6424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","category-wordpress","tag-cms","tag-how-to-guides","tag-tips-tricks"],"acf":[],"yoast_head":"\n![\"Bluehost\u2019s](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/Bluehosts-website-header.png\")
<\/figure>\r\n\r\n\r\n\r\nWhy you should use an alternate header<\/h2>\r\n\r\n\r\n\r\n
Simplify website navigation<\/h3>\r\n\r\n\r\n\r\n
![\"Boohoo\u2019s](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/Boohoos-website-headers.png\")
<\/figure>\r\n\r\n\r\n\r\nKeep your marketing relevant<\/h3>\r\n\r\n\r\n\r\n
Streamline the checkout process<\/h3>\r\n\r\n\r\n\r\n
Methods for creating custom WordPress headers<\/h2>\r\n\r\n\r\n\r\n
![\"There](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/create-custom-headers-in-WordPress.png\")
<\/figure>\r\n\r\n\r\n\r\nMethod 1: Code<\/h3>\r\n\r\n\r\n\r\n
Method 2: Website builders<\/h3>\r\n\r\n\r\n\r\n
![\"Bluehost\u2019s](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/Bluehosts-WonderSuite-page.png\")
<\/figure>\r\n\r\n\r\n\r\nMethod 3: WordPress themes<\/h3>\r\n\r\n\r\n\r\n
Method 4: Plugins<\/h3>\r\n\r\n\r\n\r\n
How to edit a header in WordPress<\/h2>\r\n\r\n\r\n\r\n
1. Choose a WordPress theme or plugin that supports alternate headers<\/h3>\r\n\r\n\r\n\r\n
![\"The](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/Add-New-Theme-WordPress.png\")
<\/figure>\r\n\r\n\r\n\r\n2. In your WordPress dashboard, go to Appearance<\/strong> > Customize <\/strong>and create a new header<\/h3>\r\n\r\n\r\n\r\n
![\"The](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/12\/WordPress-dashboards-Customize-option.png\")
<\/figure>\r\n\r\n\r\n\r\n3. Apply the custom header to the required pages.<\/h3>\r\n\r\n\r\n\r\n
Best practices and use cases for alternate headers<\/h2>\r\n\r\n\r\n\r\n
Final thoughts: How to edit headers in WordPress<\/h2>\r\n\r\n\r\n\r\n