4 Simple Ways to Customize Headers in WordPress - Beginner's Guide

How to Customize Headers in WordPress: Beginner’s Guide

Looking for an easy way to customize the WordPress header?

Because your header sits at the top of every page, it plays an essential role in branding your website, helping your visitors navigate, and promoting your most important content.

However, to get the most benefits from your site’s header, you need a way to edit it, which many themes don’t offer.

In this post, we’ll share some different tactics that you can use to customize the header in WordPress using both simple drag-and-drop interfaces and your own code.

The easiest option is to use the Astra theme and its drag-and-drop header builder, but we’ll also share some other tactics that will work with any WordPress theme.

What Is the WordPress Header?

The WordPress header is the part of your site that appears at the top of every page. Typically, it includes at least two elements at the bare minimum:

For example, here’s what the header looks like on the Astra blog. You can see that it includes the Astra logo, as well as two separate navigation menus:

Astra Header

Depending on your needs, you can also include other elements such as social media icons, a search box, promos, your phone number and other information.

If you ever need to see how it works, the WordPress header is contained in the header.php file in your WordPress theme.

How to Customize the WordPress Header With Astra

If you want full control over your WordPress header, the free Astra theme gives you a drag-and-drop, no-code way to fully customize your WordPress header.

You’ll be able to see your changes right away on a live preview of your website and you can easily add different types of content, such as buttons, social icons, a search box, and more.

To get started, you’ll want to install and activate the Astra theme. You can also import one of the hundreds of pre-built demo sites to get quickly up and running. If you need a helping hand with any of those steps, we have plenty of guides to help you out:

Once you have your basic site ready to go, here’s how to customize your header using Astra.

1. Open the Astra Header Builder

To get started, go to Appearance → Customize in your WordPress dashboard to launch the native WordPress Customizer. Then, select the Header Builder option:

Astra Header builder

Once you launch the header builder, you’ll see a new set of options where you can control the layout of your header:

Astra Header builder customizer settings

2. Add and Organize Header Content

Now for the fun part – adding content. You can see that you have three rows in the header builder. Each row controls the content for a different part of the header:

  1. Above header
  2. Primary header – this is where you’ll put your “main” content.
  3. Below header
Astra Header builder content

You’ll absolutely want to include content in the primary header, and then you have the option to add content above or below that according to your needs.

To add content, you can click on the spot where you want to add content. This will open a set of options:

  • Primary menu
  • Secondary menu
  • Logo
  • Button
  • Search
  • Social
  • HTML 1
  • HTML 2

Note that, as you add content, you’ll see fewer options. For example, you can only add your logo once, so that option will disappear once you’ve already added a logo to your header:

Astra Header builder add content

Once you’ve added some content, you can click on that content to open its settings. For example, if you add a button, you’ll be able to control the button text and link.

You can also open the Design settings to customize things further:

Astra Header builder customize content

If you want to rearrange your content or move it to a different row, all you need to do is drag-and-drop it:

Astra drag and drop header builder

3. Customize Header Layout

Above, we showed you how to customize the individual elements inside your header. You also have several options to customize your header as a whole.

First off, you can go to the Design tab of the main header builder to control the width and spacing of your header. You can also click on the gear icon for each header row to customize its height and design:

Astra Header builder customize layout

4. Experiment With Different Types of Headers

Depending on whether you’re using the free version of Astra or Astra Pro, you’ll also get access to additional types of headers, such as transparent headers (free) and sticky headers (Pro).

You can use the same header and footer builder above to design your transparent or sticky header. You’ll see those options under the Header Types section. You can click on them to expand the settings and design those different header types:

Astra Header builder transparent header

Three Other Ways to Customize the WordPress Header

While Astra’s drag-and-drop header builder offers the easiest way to customize the WordPress header, there are also other tactics that you can use, no matter what theme you’re using.

Here are some of the best strategies…

1. Use Your Theme’s Customizer Settings

Most WordPress themes give you some control over your site’s header in the native WordPress Customizer. You’re unlikely to get the level of detail that Astra gives you, but you will get some options to control how your header looks and functions.

These options will vary based on your theme, but you can usually open them by clicking on the blue pencil icon next to elements in your header. For example, in the new Twenty Twenty-One default theme, you can see that you’re able to customize your:

  • Logo
  • Site headline
  • Menu
Default theme header customization

If you need some extra help, you can consult your theme developer’s documentation.

2. Use Elementor and a Free Custom Header Plugin

If you’re not familiar with Elementor, it’s a visual, drag-and-drop design tool that you can use to create content on your site. With the free Elementor – Header, Footer & Blocks Template custom header WordPress plugin, you can use the free version of Elementor to design your own WordPress custom header.

This plugin works perfectly with the free Astra theme, as well as any other WordPress theme you might be using.

To get started, install and activate the free plugin from WordPress.org. You’ll also need to install the free version of Elementor if you haven’t done so already.

Once you’ve done that, go to Appearance → Header Footer & Blocks and click Add New:

Header Footer and Blocks to design header

Give your template a name and choose Header under Type of Template. You can also use the Display On or User Roles options to target your header to specific content/users.

Then, Publish your header and click Edit with Elementor to open the visual builder:

Header Footer and Blocks header settings

Now, you can fully customize your header using Elementor’s visual drag-and-drop interface. The plugin also gives you new Header, Footer & Blocks widgets that you can use to add important site elements, like your site’s logo or a navigation menu:

Elementor edit header with header footer and blocks

To learn more about using Elementor, check out our full Elementor tutorial or Elementor review.

3. Use Custom Code (Advanced)

Finally, if you’re an advanced user, you can also customize the WordPress header using your own code. To do this, you’ll need at least a working knowledge of HTML, PHP, and CSS, so this isn’t an option for non-technical users.

If you don’t know those coding languages, you’ll want to stick with one of the previous methods on this list.

There are two parts to using code to customize your header:

  • HTML/PHP – this controls the actual content in your header.
  • CSS – this controls the styling of your header.

As we mentioned earlier, your site’s header content resides in the header.php file. So to customize your header’s content, you’ll need to work directly with this file. Or, some themes, such as Astra, also offer hooks that you can use to add content to the header.

In the Astra visual hooks guide, you can see that you have a number of options to customize the header:

Astra hooks

If you want to edit your theme’s header.php file directly, you should use a child theme to make sure that you don’t overwrite your changes when you update your theme.

On the other hand, if you’re using hooks, you don’t need to use a child theme as long as you use a plugin like Astra Hooks or Code Snippets. If you add your hooks directly to your theme’s functions.php file, you should still use a child theme, though.

With Astra Pro, you also have the option to add hooks using Astra Pro’s Custom Layout feature.

The neat thing about Astra Pro’s Custom Layouts is that you can use display rules to control exactly when the changes display. For example, you could add custom content to your header that only appears to logged-in users.

That’s how to customize your header’s content – but what about the styling?

To customize your header’s styling, you can edit the style.css file directly if you’re using a child theme. Or, you can use the Additional CSS area in the WordPress Customizer to add your own custom styles to the header.

Customize Your WordPress Header Today

Your WordPress header plays an essential role in your site’s success. It helps brand your website, guide your visitors to key content, promote important information or social profiles, and plenty more.

The easiest way to gain full control over your site’s header is to use the free Astra theme. With Astra, you get access to a visual, drag-and-drop header builder. You don’t need any code or external plugins – you’ll get 100% control of your header from right inside the WordPress Customizer.

In other situations, you can also use a different theme’s Customizer settings, the Elementor – Header, Footer & Blocks Template plugin, or your own code if you have the technical knowledge.

Do you still have any questions about how to customize the WordPress header? Leave a comment!

Join 304,719 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Astra 3.0 Is Here! Our Biggest Update Ever!

Download is Just A Click Away!

Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.