How to customize WordPress Website Header

How to Customize WordPress Website Header

Many elements make up a well-designed website. Your WordPress website header is particularly important because it’s the first thing visitors see when they arrive at your site. By creating a custom header, you can grab your visitors’ attention and build brand recognition.

In this post, we’ll show you why some well-known headers are effective and explain how you can easily create your own custom header with Beaver Themer.

We just launched 6 FREE Beaver Builder courses. Learn how to easily build WordPress websites with step-by-step video tutorials. Get started today.

What Custom Headers Are (And Why They’re Important)

Your WordPress website header is at the top of the page. It usually contains the site’s name, logo, and other identifying information. In this screenshot of the Beaver Builder website, there’s a banner in the top bar, then the main part of the header with a logo and navigation menu:

The Beaver Builder website header.

The header displays on every page, so visitors see it multiple times. In fact, the header is often the only element that remains consistent across all of your pages. As a result, your header plays a huge role in your website’s identity and helps to improve brand recognition.

On WordPress sites, your active theme controls nearly everything about your header. You can make a few tweaks in the WordPress Customizer, such as uploading your own header image, adjusting the color scheme, and perhaps controlling the layout a bit. Some themes have specific areas where you can add your logo and another branding.

However, the Customizer almost never gives you complete control over your header’s appearance. If you want to create a truly custom header that helps visitors remember your brand, you need more control over customization.

Examples of Effective Website Headers

Let’s look at some high-quality examples of custom website headers. They exemplify how this key design element plays a huge role in your site’s branding, navigation, and more.

WPBeginner

As a popular resource on all things WordPress, it’s not surprising that WPBeginner has an excellent, professional header. The orange color is a common feature across the website, making it a strong signifier for the site’s brand:

The WP Beginner website header.

This header also includes a navigation menu so users can easily move between pages no matter where they are on the site. The lower portion is a prominent Call to Action (CTA), which points users in the direction of WP Beginner’s most popular resources.

WP Beginner’s header incorporates its branding, improves User Experience (UX) through clear and accessible navigation, and drives conversions with a highly-visible CTA. This example shows that you can pack a lot into a small space.

WP Engine

This WordPress hosting company provides UX and branding through its header. It displays the WP Engine brand name and logo prominently on the left. Like WPBeginner’s header, it has a simple and unobtrusive navigation menu:

The WP Engine website header.

This header offers some other very important features. First, it has a sign-in link so returning users can easily access their accounts.

Then there are the support features. You can open an instant chat window and talk to a customer support representative. You can also access a variety of self-help resources. By being placed on the header, these features are easily accessible from every page.

These features reinforce an image of WP Engine as a reliable hosting provider, so they both improve the UX and strengthen brand identity.

Blondish.net

Headers can be highly effective on smaller sites as well. Blondish.net is the website of WordPress developer, designer, blogger, and podcaster Nile Flores:

The Blondish.net header.

With the bright colors, the star logo, and key navigation links, this is a memorable header. The prominent color scheme provides a lot of personality to the site. If you were browsing the web for a developer to hire, this site would definitely get your attention.

A Cup of Jo

Popular lifestyle blog A Cup of Jo features a header that’s perfectly matched to its owner, Joanna Goddard, who comes across as a laid-back, approachable, yet sophisticated professional. Her header’s classic typography and streamlined look reflect great design and imagination, as you can see in this screenshot.

The main header for A Cup of Jo.

What captures your attention is the small image within the first ‘o’ in the blog’s title. It changes as you move from page to page, reflecting the topic at hand. For example, check out how it features slices of citrus fruit when you navigate to the Food page:

The header on the Food page of A Cup of Jo.

Small details like this dynamic photo can create an instant impression of the site and its creator even with a minimalist design.

Amazon

Even the biggest name brands use headers to reinforce their branding and encourage visitors to convert. Take the Amazon header, for example:

The Amazon site header.

It has the well-known Amazon logo in the top-left corner and multiple navigation menus. There’s a cart icon that counts the number of items you’ve added, and not one but two CTAs – Try Prime and Shop Deals of the Day.

That’s a lot to squeeze into a small space. However, Amazon is known for providing access to a huge range of products, so the header’s design fits the brand’s image.

How to Customize Your WordPress Website Header 

Traditionally, in order to customize a theme, a developer would write custom code. This requires advanced coding skills, especially with the requirement for sites to be responsive.

Nowadays, even if you don’t have coding experience, you can still create highly effective custom headers by using Beaver Themer, our theme builder for the Beaver Builder plugin. Beaver Themer gives you the power to create custom headers using the drag-and-drop front-end Beaver Builder editor, which is normally used for layouts in the content area.

Here’s how easy it is. This is the template for a Themer header layout:

Beaver Themer header template

You can see in the screenshot above how Beaver Themer seamlessly integrates with the Beaver Builder editor. The header template features two rows: a top bar, a Heading module, and a Menu module.

With just a few clicks, you can create a similar layout, but with a noticeable impact on design and functionality:

Beaver Themer Header Layout

Here’s all we did to update the template:

  • Changed the top bar background to a dark color and made the text and icons white.
  • Added a background image and overlay color gradient to the second row and made it full height.
  • Moved the right column’s Menu module underneath the heading.
  • Tweaked styles and row padding in the rows and modules.

In addition to headers, you can create layouts for footers, archive and single post pages, search pages, 404 pages, and “parts” of pages such as sales banners, and similar layouts for WooCommerce, The Events Calendar, and Easy Digital Downloads, if you have those plugins installed.

Beaver Themer is included with all Beaver Builder Premium Plans, with usage limited by the number of sites. To use it, you’ll need both the Beaver Builder Page Builder and Beaver Themer plugins installed and activated.

Steps to Create Your Custom Header with Beaver Themer

Here is how you create a Themer layout for your custom header. Start by installing and activating a premium version of the Beaver Builder plugin and the Beaver Themer Add-On plugin. Then go to your site’s dashboard and click Beaver Builder > Themer Layouts in the sidebar.

Click Add New at the top of the screen. As shown in this screenshot, create a title for your header layout (it doesn’t display on your web page or in the URL), and set the Type as Themer Layout and Layout as Header:

Adding a new custom header in Beaver Themer.

Click the Add Themer Layout button. Then click Launch Beaver Builder, the blue button in this screenshot.

The Themer Layout editor.

This opens the Beaver Builder editor with the Header layout template already imported. Modify the template to create your custom header, as shown in the following screenshot. Or you can delete one or both rows in the template and start from scratch.

Editing a custom header in Beaver Builder.

Remember that you can use the Beaver Builder editor’s Responsive Editing Mode to view how your header will look on medium and small devices and make changes to settings that apply to only one device size. Just use the keyboard shortcut R while you’re in the editor to toggle large, medium, and small screen views.

One thing you’ll notice when you open the template rows and modules is that some of the fields use a field connection instead of static text. In this example, the “Demo Site” text that appears on the screen is dynamically created from the Site Title field connection, as shown in this screenshot.

Beaver Themer field connections heading module

You can create field connections by clicking the plus sign that appears on the right for eligible fields, then choosing one of the dynamic values in the list. In this case, the Site Title field connection draws its value from the WordPress setting found at Settings > General > Site Title, and the Site URL field connection draws its value from Settings > General > Site Address (URL). You can type in static text in those fields if you prefer, but the advantage of the field connections is that if you ever change your WordPress settings, the new values will automatically display in your header.

In other locations, field connections allow the value to change depending on which page the layout occurs on. For example, if you’re creating a single post layout and the Heading module’s field connection is set to Post Title, the heading changes depending on which post is being displayed. Besides the field connections that come with Beaver Themer, you can connect to WordPress custom fields, Advanced Custom Fields, or Pods custom fields, so your customization options are almost unlimited.

When you’re finished creating your header, save your changes in the editor by clicking Done > Publish.

Click Edit Themer Layout in the WordPress admin bar at the top of the page to return to the settings for your header, as shown in this screenshot.

The Themer Layout Settings for a new custom header.

Specify how you want to display your header. You can make it sticky, meaning that it will remain visible when users scroll down the page. Or you can make it an overlay with a transparent background:

The Themer Layout header display options.

Choose where to display your header by setting the location where it will appear, as shown in this screenshot:

The Themer Layout Location Rules for custom headers.

Selecting Entire Site makes your header visible across all posts and pages. For more control, you can apply specific location rules to target certain post types or pages, and even add multiple rules for precise placement.

If there are any areas where you’d like your header to not be visible, use an exclusion rule. Select the Add Exclusion Rule button and specify which locations on your site you would like your header not to appear. For these excluded pages, you could use another Themer header layout or your theme’s header will display.

Once you’ve configured all the necessary rules, click the blue Update button. Your custom header is ready to go!

You can also create custom transparent headers with Beaver Themer. Here is a video tutorial that walks you through how to do it. Check it out below:

Conclusion

Effective branding and design are essential to any site. Your header can help establish your site’s identity and capture visitors’ attention.

With Beaver Themer, you can create custom WordPress website headers quickly without any advanced coding skills. You can test it out for free with our Live Demo site

Do you have any questions about using custom headers with Beaver Themer? Let us know in the comments section below!

About Anthony Tran

Anthony Tran is the Marketing Director for Beaver Builder. Before working with the company he managed a WordPress web design agency. He loves Starbucks iced coffee, watching NBA basketball, and catching the latest blockbuster movie.

16 Comments

  1. timecom on June 14, 2019 at 11:54 pm

    thanks anthony! does it work with wpml language switcher?



  2. timecom on June 18, 2019 at 1:16 am

    Yes, i know WPML works fine with the BB. But with the Themer? I try with the themer, but I wasen’t successfull. Problems to change the header with WPML.



    • Anthony Tran on June 18, 2019 at 7:49 am

      Hello WPML is compatible with Beaver Themer too =) We’re sorry you’re experiencing problems. If you need assistance you can submit a support ticket to help look into this for you.



  3. Meyer on June 18, 2019 at 8:22 am

    Thanks I’am happy to hear that, i will have a closer look to this articles.



  4. Pablo on June 21, 2019 at 2:06 am

    Hello! great article.
    Is there a tutorial of how to hide the complete header, until the user scrolls and then see the menu appear in sticky mode?
    Thanks in advance



  5. Billy on July 8, 2019 at 2:14 am

    Is there any plans to adapt Beaver Themer Headers? I would like to see a few more options. Side Menu down left, centred logo menu, sticky menu on mobile, logo/header inverting colour on scroll, that kind of thing.

    A bit more control over styling of the mobile menu colours without custom css. These things would really help us open up more possibilities without adding some custom code.

    Themer works great for basic menus, but I would like to see it expand a bit more in future versions and hopefully something in the pipeline.



    • Anthony Tran on July 9, 2019 at 6:03 am

      This is great feedback Billy. I shared it with our development team =)



  6. Sabrina Capelli on January 20, 2020 at 1:04 am

    Hi – why is the menue not staying on the responsive version? on the mobile – the menue is just showing up – if you click on the empty white background …
    https://eventchalet.ch/ you can see what I mean.



  7. Manny on April 20, 2020 at 12:28 pm

    Im trying to customize the header so that the info div/bar hides upon scroll. Ive tried the many ways that they suggest online with js but i get errors. Nothing seems to work.



    • Anthony Tran on April 28, 2020 at 9:32 pm

      Hi Manny if you submit a ticket to our support team we would be happy to look into this for you =)



  8. oskar Winther Andreasen on August 3, 2021 at 2:58 am

    hi i dont have the theme layout, how can i get it



  9. Andy Globe on June 6, 2022 at 6:05 am

    Thank you for sharing with us. Good article, by the way.



Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy.
We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

How to use Header Templates in WordPress

How to Use a Header Template in WordPress

Customizing a WordPress header isn’t often an easy process. If you’re not comfortable editing theme files, there aren’t many ways…

Read More...
How to create a WordPress Author Page with Beaver Themer

How to Create a WordPress Author Page with Beaver Themer (In 5 Steps)

If your blog has multiple contributors, readers may want to browse posts by a specific author. While WordPress provides a…

Read More...

How to Create a Sticky Header with Beaver Themer (In 4 Easy Steps)

Are you wondering how to create a sticky header on your WordPress site? Sticky headers keep your website’s navigation easily…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.

Since 2014

Build Your Website in Minutes, Not Months

Join Over 1 Million+ Websites Powered By Beaver Builder.