They say that in web design, the first impression you make on your audience is crucial. When visitors land on your website, their eyes naturally go to the top of the page. Thatโs where the design of your WordPress header plays its key role. If you donโt pay enough attention to designing your siteโs header, you might struggle to attract a large number of users. To design a header in WordPress, you may not need to write code or add anything special to your site, but knowing the right methods to get it done is essential. The WordPress content management system dynamically design a header in WordPress by combining the site themeโs structure with the database. This means it fetches links for elements like the logo, navigation menu, and more from the database and incorporates them into the themeโs design.
Itโs hard to find a website that doesnโt need a header. Visitors generally expect to see some specific elements at the top of a site (the header section). Some of the most common elements include:
- Site Branding: This usually includes the siteโs name or logo placed in the header. Additionally, colors, fonts, and other design elements that reflect your siteโs identity and brand are often showcased here.
- Site Navigation: If your website has more than one pageโwhich is usually the caseโusers expect to find the siteโs menu or navigation structure in the header.
In the world of WordPress, numerous themes have been designed and developed for websites of various types. Depending on the type of website and the field you operate in, you might use any of these themes for your site. However, regardless of the theme you choose and install, you will need to design the header in WordPress. Using the available elements in the theme and the WordPress ecosystem, you must successfully create the site’s header.
This is why we have written the article about how to Design a Header in WordPress to introduce you some methods for creating a site header. The focus of this article is not about how to design a header, but rather on exploring the different approaches you can take. The specifics of the design depend on the creativity of the website designer and the needs and functionality of the intended website.
Simple Ways to Design a Header in WordPress
The way you design a header in WordPress depends on the type of theme your site is using. WordPress themes are generally divided into two types: Block Themes and Classic Themes.
In block-based themes, every part of the site, including the header, is built using WordPress blocks. Blocks refer to structures and elements that are added to the site through the WordPress editor (Gutenberg). Essentially, site pages are created by arranging and aligning these blocks together. With such themes, you can design different parts of the site by modifying, rearranging, adding, or removing these blocks.
On the other hand, Classic Themes use programming languages like PHP to define the structure and layout for different parts of the site, including the header. In these themes, you donโt manually add blocks to create the header. In fact, many classic themes donโt offer this option.
Instead, you can make changes using the Customize section in WordPress. This allows you to adjust things like colors or decide whether to show or hide certain elements. However, compared to block themes, classic themes often give you fewer options for customizing the header exactly the way you want.
In addition to using block themes and classic themes, there are other ways to create a site header. One popular method is using page builders in WordPress. Over time, page builders have become increasingly popular in the WordPress ecosystem.
Some well-known examples include plugins like Elementor and Divi Builder. With these tools, you can design a header in WordPress in a more flexible and customized way. In the rest of this guide, weโll explain each of these methods for creating a header in more detail.
Creating a Header in Block Themes
As mentioned earlier, WordPress uses the Gutenberg editor to edit pages and create the necessary elements. Each of these elements is called a block. Titles, paragraphs, images, lists, and more are all considered blocks in this built-in WordPress editor.
On block themes, these blocks or widgets play a key role. You can add or edit these blocks in different sections of your WordPress theme, including the header. This means you can design and edit the header directly from the WordPress dashboard without needing to modify theme files. This feature is what sets block themes apart from classic themes, offering greater flexibility and ease of use.
Using the Editor section to Edit the Header
If you’re using a block theme (like the UniBlock theme) on your site, youโll find an option called “Editor” in the Appearance menu of your WordPress dashboard.

When you click on this option, a preview of the entire site (including the header) will appear. By clicking on the header section, you can easily edit it. Editing the header is similar to working with the Gutenberg editor on any other part of your WordPress site. After clicking on the header, youโll enter the Gutenberg editor. In the image below, you can see the header of a sample site using the Site Title and Navigation blocks within the same row in the header.

Using the features of this editor, you can, for example, remove the “Site Title” block and replace it with another block or blocks of your choice. For instance, you can replace it with an Image block and add your siteโs logo there.

In other words, you decide which elements and layouts should be included in your siteโs header. You donโt need to edit the code or theme files for this. Instead, you can make these changes using the Gutenberg editor directly within the WordPress dashboard.
Creating a Header in Classic Themes
Since the introduction of the “Customizer” section in WordPress version 3.4 in 2012, there have been many changes. However, one thing has always remained the same: what you can access in the Customize section depends on the theme youโre using. In fact, itโs the theme developer who decides what you can and cannot edit.
Working with classic themes is different from block themes. You donโt have the freedom to add or remove elements and decide on the design yourself. Instead, the design is already built into the structure and files of the classic theme. You can only customize and modify the design using the options provided by the theme.
Using the Customizer in WordPress
To customize your theme, go to the Appearance menu in your WordPress dashboard, then click on Customize.

As mentioned earlier, the content of this section will vary depending on the theme you are using. One of the sections that are commonly found in most themes and is related to header design is Site Identity.

In this section, you can usually define your siteโs logo. You can also set the site title and tagline here.

After clicking the “Select logo” option, as shown in the image above, you can choose your desired logo from the Media section in WordPress. This means you first need to upload your logo and then link it to this section. You can also delete or change the logo from this section later.

The logo is just one part of the elements you may need when creating your siteโs header. Using other options in this section, you can determine which items will appear in your siteโs navigation menu. Some themes even offer several pre-designed header layouts, and by selecting one, your header will automatically adjust to that design.
Next, weโll explore the third method to design a header in WordPress: using page builders.
Designing a Header in WordPress with Page Builders
Page builders are very useful in WordPress. Nowadays, most websites use one of the popular page builders to design their pages. In addition to the built-in Gutenberg editor, other well-known page builders like Elementor and Divi Builder are available to help you build different pages and sections of your site.
However, keep in mind that not all page builders are compatible with every type of theme. Specifically, if you are using Divi Builder, it is highly recommended to use the Divi theme as well, as it offers the best compatibility with this page builder.
These page builders have a feature that allows you to design the header, footer, or other sections of your website, and usually, the custom header you create will override the default theme header. This means the themeโs original header will no longer be displayed, and the header you design using the page builder will be shown instead. This gives you the freedom to implement your preferred elements and design.
To design a header in WordPress using a page builder like Divi Builder, after installing it on your site, go to the “Divi” section in your WordPress dashboard menu and enter the “Theme Builder” section.

In this section, you can create different templates for various parts of your site. If you want a “global header” for all pages on your site, you should edit the Global Header under the Default Website Template section.

Alternatively, you can create a new template for each page or section of your site and edit the header for that specific page. For example, by creating a template for your store and selecting the Edit Header option, youโll be transferred to the Divi Builder page builder.

In this page builder and in this part, just like when creating pages for your site, youโll have access to all the elements of Divi Builder to design your header. You can add any element you need to the header structure. For example, we used the Menu and Search elements for our hypothetical site. You can see the “wireframe” structure of the header design in the image below.

Depending on the menu you defined in your WordPress dashboard under Appearance and then Menus, your logo and other elements used in your header design will vary. The design created for this articleโs example is shown in the image below.

Such features are usually available in most page builders. In Elementor, you can go to the “Templates” section and then “Theme Builder” to start building your siteโs header. However, this feature is part of the “Pro” version of Elementor and is not available in the free version.

Conclusion
In this article, we discussed the topic of designing a header in WordPress and outlined three different methods. These methods largely depend on the type of theme (classic or block) you are using for your site. Additionally, whether or not you use page builders in WordPress can also influence your choice of method for creating the site header. If youโre new to WordPress, we recommend reading the book “WordPress for Beginners” to increase your knowledge of this content management system. A Persian version of this article is in the “learnblog” website.