How to Create a Header in WordPress: 3 Methods

How to Create a Header in WordPress

Creating a memorable header for your WordPress site is one of the fastest ways to make a good first impression with your visitors. Because your site header is the first thing that users see when they arrive at your website. 

It’s a core part of the overall web design and the user experience you provide. Whether you run a blog, an online store or a corporate website, a well-designed header can help you better represent your brand and navigational settings.

In this tutorial, I will show you how to create a header in WordPress with a step-by-step guide. Before that, I will cover a short theoretical part about headers in WordPress. Get started!

What Is a Header in WordPress?

A header is the top section of a website that typically includes the site logo, web title, and navigation menu. It also includes additional elements like a search bar and social media icons.

The WordPress header serves as a key visual and functional element to help users navigate your site. It provides a consistent branding experience across all pages. The header is usually customizable through your theme settings and plugins.

They allow you to tailor the website header to match your site’s design and functionality needs.

Must Have Elements in a WordPress Header

Below is a list of all the important elements that a well-designed website header must have. Take a quick look at them.

A well-designed WordPress header should include several essential elements to ensure functionality, aesthetics, and a positive user experience. Here are the must-have elements in a WordPress header:

  • Logo
  • Site Title 
  • Navigation Menu
  • Search Bar
  • Call-to-Action (CTA) Buttons
  • Social Media Icons
  • Contact Information
  • Language Selector
  • Login/Register Links

Things By Which You Can Create a Custom Header in WordPress

WordPress offers you various tools and solutions to build and customize your website. Based on the solutions, there are many ways you can create a header in your WordPress website. For example, you can create a header in WordPress using themes and page builder plugins.

There are two types of WordPress themes: Editor Themes and Full Site Editing Themes. Let’s now have a quick overview of these theme types.

Themes

Editor Themes are designed to work seamlessly with the WordPress block editor (Gutenberg). They often come with pre-designed blocks and styles that you can use to create and customize your website content.

Full Site Editing (FSE) Themes allow you to customize not just your content but also your site’s overall layout and design, including headers, footers, and other template parts, using the block editor. In this section, I will explain a few methods of how to create a header in WordPress.

Besides, there are many page builder plugins, like Divi, Elementor, and SeedProd. Using them also, you can create stunning headers for your site. Once you use a page builder, you don’t have to depend on any theme.

Page Builder

In the following parts of this post, I will show you how to create a header in WordPress with these themes first and then with a popular page builder plugin.

Method One: Create a Header in WordPress with an Editor Theme

Some popular Editor Themes are GroundWP, Twenty Twenty Four, Twenty Twenty Three, etc. I’ll show you the tutorial using the GroundWP Theme.

Step 01: Install and Activate the Editor Theme (GroundWP)

Go to Appearance > Themes. Type the theme name in the search box on the top-right corner. If you have any favourite theme, you can write its name there. 

Once the theme appears below, Install and Activate it.

Install and Activate the GroundWP Theme

Once the theme is installed and activated, go to Appearance > Editor.

Go to theme editor

Step 02: Expand the Theme Editor

The theme editor will be opened in a second. Click anywhere on the editor to expand it.

Expand the theme editor

Now, click anywhere on the header section to expand it. You’ll be able to customize it.

Expand the WordPress header in theme editor

Step 03: Select the Header Area

You can see the header area is selected and the Gutenberg toolbar appears alongside. Now, place your cursor on different elements to customize them one by one.

Header selected in theme editor

Step 04: Add a Logo to the Header

First, click the logo section. It will allow you to upload and set a logo for the website. You can upload it from the media library or your local drive.

Select the logo section on theme editor

After the logo is added, it may be larger by default. You can resize it by holding its side edges.

Step 05: Add a Site Title

Next, place your cursor on ‘Write site title…’. You’ll be able to write a text to set it as your site’s title. Do it yourself.

Set your site title

You can see our site title is added to the respective section.

Site title is added to the theme editor

Step 06: Set the Header Menu

Select the menu section on the theme editor.

Select the menu on theme editor

The theme editor automatically comes with some default menu items. You can rewrite them or delete the unnecessary ones.

It’s simple. Just place your cursor on the menu items one by one. You’ll be able to do this.

Rewrite or delete menu on the theme editor

To add a new item to the header, hover your cursor over the space between two items. You’ll see the Gutenberg plus (+) icon appear. Click the plus (+) icon.

Add a new menu item in the header on theme editor

You can see a new menu option added. Now, you can rewrite it or link a page you want to display.

New menu item added to theme editor

Step 07: Add New Elements to the Header

Now, to add a new element to the header, hover your cursor over the blank space on the header. You’ll get the Gutenberg plus (+) icon. Click the plus (+) icon.

Add new element to the header

Search, find and add new elements to the header as you want. The process is similar to adding blocks in WordPress. Hope you can do it yourself.

Search, find and add new element to the header

Step 08: Add Multiple Lines/Rows to the Header

To create multiple lines/rows in the header, click the plus (+) icon on the bottom-right corner.

Create multiple line in the header

Here again, you can add elements to the new line/row you create. Just find the block you want to add.

Add blocks to the multiple lines in the header

For example, I have added a CTA button to the second line/row. You can add anything you want.

Element added to the second row_line

To customize the elements you added in the header, open the sidebar keeping the respected element selected. You’ll be able to configure the settings and stylization options of the block.

Customize the header elements in theme editor

Thus, you can create a header in WordPress using the Editor themes.

Method Two: Create a Header in WordPress with a Full Site Editing Theme

Astra, GeneratePress, OceanWP, Hestia Pro, Blocksy, etc., are some most popular Full Site Editing themes. They offer comprehensive web layout customization options by which you can build various parts of a website, like the header, footer, sidebar, scroll-to-top, tooltips, and more.

I will now use the Blocksy theme in this section to explain how to create a header in WordPress.

Step 01: Install and Activate the Full Site Editing Theme (Blocksy)

Go to Appearance. Type your theme name (for example Blocksy) in the search box on the top-right corner. Once the theme appears, install and activate it.

Step 02: Go to Theme Customizer

Once the theme is activated, go to Appearance > Customize.

Go to Theme Customizer

Step 03: Select Header in the Theme Customizer

You’ll get the Header option on the left sidebar. You may find it at the very beginning or you have to scroll down a bit to find it.

Click the Header once you get it.

Select Header in the Theme Customizer

A header builder will open up instantly. As you can see three rows, means you can create a maximum of three-row header on your website with the theme. Click Logo.

Header builder in the Full Site Theme Editor

Step 04: Add a Logo

Once you click Logo, a panel with logo-adding options will open on the left sidebar.

Click the Select logo option on the left sidebar.

Expand the logo adding option

Now, using the respective options on the right sidebar, upload a logo from your local drive or media library. Resize the logo height as you want by setting a suitable pixel.

Add a Site Title as you like (for example, I have added Media Management). You can preview the update on the right canvas/website.

Based on your theme, the logo may appear on top of the site title by default. But no worries, you can bring them in one line/row.

Add logo and a site title

Scroll down the logo panel. You will get an option to add a site tagline. If you want to add it, toggle on the option first. Then, you can write your tagline as the site title I did a minute ago.

Next, you can change the image position. As I have selected the Left position, you can see the logo and the site title are on the same line in the preview section.

Change logo image position

To stylize the Site Title, go to the Design tab. You’ll get options to customize the font family, font size, and color for the site title. After that, you can modify the margin for the title.

These are so easy that you can do them yourself.

Stylize the Site title

Step 05: Design the Header Menu

Click the Menu 1 option to design your header menu. This option may have a different name based on your theme. A menu builder panel will open up on the left sidebar.

Design the Header Menu

Under the General tab, you’ll get four readymade styles for the menu. Choose the one you like. You’ll get many more options on this sidebar which you can explore by scrolling.

Do the necessary customization for the header menu by using these options perfectly.

Customize the Menu

From the Design tab, you can customize the font family, font size, font color, margin, hover effect, item spacing, and more.

Go to the Design tab to customize the header menu

Thus, complete customizing your header menu.

Step 06: Add New Elements to the Header

Here again, you may want to add more elements, like social icons, a CTA button, phone number, email address, local address, etc., to the header.

Go to the main state of the header builder. Depending on whether your theme is free or pro, you will get options to add elements. For example, the free version of the Blocksy theme offers a very limited number of options.

Blocksy allows you to drag and drop additional elements to the header.

Drag and drop adding elements to the header

Note: Not all Full Site Editing theme allows you to drag and drop. There are many themes that let you add blocks in the header like the Gutenberg editor.

Thus, you can build the header for your WordPress website using the Full Site Editing theme.

Method Three: Create a Header in WordPress with a Page Builder

Elementor, Divi, SeedProd, WP Beaver Builder, etc., are the most prominent page builders in the market. Among them, Elementor is comparatively the most popular one. I will show you how to build a header in WordPress using the Elementor plugin.

Step 01: Install and Activate the Elementor and HappyAddons

Go to Plugins > Add New Plugin. Type Elementor in the search box. Install and activate the plugin once it appears.

Install and Activate the Elementor Plugin

Why HappyAddons? You need the premium version of Elementor to create the header on your site. Actually, Elementor has a theme builder by which you can build a header, footer, blog post template, archive page, and more. But this theme builder is limited only to premium users.

So, if you want to build the header for free with Elementor, you must use an addon like the HappyAddons. Yes, HappyAddons also has a premium version but its theme builder is completely free. Hope you understand. Now, install and activate the HappyAddons plugin.

Install and activate the HappyAddons plugin

Step 02: Go to HappyAddons Theme Builder

Go to HappyAddons > Theme Builder.

Go to HappyAddons Theme Builder

Go to Header. Click the Add New button.

Create a header

Give the header a name. Click the Create Template button.

Open the header with HappyAddons

Step 03: Create the Header in Elementor Canvas

This is the Elementor canvas. On the left sidebar, you can see the Elementor panel with a collection of widgets. The Elementor canvas is on the right. You have to drag and drop widgets from the panel to the canvas and then customize them. Click the plus (+) icon on the canvas.

Open Elementor Canvas

You’ll get two options: Flexbox and Grid. Among them, Flexbox is comparatively better, flexible, and easy to use. Click on Flexbox.

Select how many columns you want to have in your header. Accordingly, choose the suitable structure.

Select a section structure for Elementor

You can resize the columns by dragging their edges.

Resize the column

Step 04: Add a Logo to the Header

Go to Elementor Panel. Type Site Logo in the search box. You’ll get the Site Logo widget in a second.

Add a Logo to the Header

Drag and drop the Site Logo widget to the column you want. I have decided to place the widget on the left column in this tutorial.

Drag and drop the Site Logo widget to Elementor Canvas

After the Site Logo widget is placed, come to the Elementor panel. Click the custom option next to the Logo. Below, you’ll get the option to add/upload an image as a logo. Do it yourself.

Site logo filed in Elementor

The logo will be added instantly. If the logo is big in size, you can resize it by moving its edge. It’s shown in the video below.

Step 05: Add a Site Title to the Header in Elementor

Suppose, you want to create a new column in the same section, meaning header. How to do it?
Taker your cursor on the section container icon and right click.

A list of options will appear. Choose Duplicate on the list.

Add a new column in the Elementor section

You’ll see a new column has been added to the Elementor section.

A new column is added in the Elementor section

Find the Site Title widget. Drag and drop it to the new column or anywhere you like.

Drag and drop the Site Title widget

You will see the Site Title section is empty. How to Solve it? It’s simple.

Site Title is empty?

Go to Site Settings.

Go to Site Settings in Elementor

Select Site Identity.

Select Site Identity

Add your site title, site description, logo, and favicon from here.

Site Title: The site title is the name of the website. It usually appears in the browser tab and is often displayed prominently on the homepage. It’s a key element in branding and helps users identify the site quickly.

Site Description: The site description is a short summary of what the website is about. This description often appears in search engine results below the site title and is crucial for SEO (Search Engine Optimization). It helps users understand the purpose and content of the site at a glance.

Logo: The logo is a graphic mark or symbol that represents the website or business. It’s a visual identifier that is often placed at the top of the website, on the header, and is used for branding purposes. A logo helps in creating a visual association with the site or business.

Favicon: A favicon (short for “favorite icon”) is a small, 16×16 pixel icon that appears next to the site title in the browser tab. It also shows up in bookmarks and history lists. Favicons help users quickly identify the website among multiple open tabs and in their bookmarks.

These elements are crucial for establishing a website’s identity and enhancing user experience. Add them yourself. Once you are done, Update the page.

Add site title, site description, logo, and favicon

You see now the Site Title is displayed. You can then customize and stylize it from the Elementor Style tab. Give Elementor some time to explore it. All will be clear and easy.

Site Title is now displayed

From Advanced > Layout, you’ll get options to move the widget to right, left, top, and down. You’ll get many more options as well.

Move the widget in Elementor

Step 06: Create a Header Menu

Find a menu widget that is free. HappyAddons offers the Nav Menu widget free. Drag and drop it to a suitable column. I am placing it in the right column.

Drag and drop the Nav Menu widget

You’ll see a message that your navigation menu is not created yet. No worries! I will show you how to create a menu.

Navigation menu is not created

Leave the Elementor Canva as it is. But don’t forget to Update or Save Draft so that the changes you have added don’t get deleted.

Save draft elementor

Go to your site’s backend. Navigate to Appearance > Menus. Give your menu a name. Once done, click the Create Menu button.

Create a menu

Select pages you want to add to the header menu.

Add pages to the header menu

You can see the pages you have selected have appeared on the right side under the menu name. Click the Save Menu button at the end.

Save the menu

Go to your Elementor Canvas and reload it.

Select the menu widget section. Navigate to Content > Nav Menu. Next to the Select menu option, you’ll find a dropdown icon. Click the icon.

Open menu list

Select the menu name you created just a while ago.

Select the menu you created

You’ll see the header menu is displayed on the Elementor canvas.

The Header Menu is displayed

Next, you can customize the header menu from the Style tab on the Elementor panel, like any other widget. Hope you can do it yourself.

Customize the header menu

Thus, you can create a header with the Elementor and HappyAddons plugins.

Final Notes!

Indeed, there are many other ways to create a header in WordPress. Actually, it’s a blessing for us that we have WordPress, which is a comprehensive content management system and website builder. You can do the same things in it in various ways.

Creating the header is one of them. But as it’s not possible to cover all the ways in a single blog post, I have covered the best and most popular three methods in this article. Hope you like it. If you have any further questions regarding today’s topic, feel free to write it in the comment box.

My Recent Posts

Share Your Desired Topics!

I’ll Write Engaging Posts Based on Your Topic Suggestions.

Leave a Reply

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