Since WordPress introduced the block theme in the 5.9 version, the process of creating and customizing website designs has become significantly more flexible and user-friendly. Block themes offer a modular approach, allowing you to construct your website using a Site Editor with individual blocks that can be easily arranged, styled, and reused.
Site Editor allows you to design everything on your site using blocks, from the header right down to the footer. In his article, we’ll guide you through the process of creating a custom header in WordPress using the Site Editor.
We’ll cover essential steps like accessing the Site Editor, customizing header elements, assigning your header to a specific template, and publishing your changes.
How to Create a Custom Header in WordPress using Site Editor
Before we start the tutorial, we would like to inform you that the Site Editor is primarily designed for block themes. If you’re using a classic theme, you might not be able to access the Site Editor on your WordPress dashboard.
So, we highly recommend you switch your WordPress theme to a block theme.
1. Access the Site Editor
On your WordPress dashboard, navigate to the Appearance -> Editor.
2. Add and Customize the Header Elements
Once in the Site Editor, here you can create a new template or reset any customizations made to the templates supplied by your theme.
In this example, we choose one of the patterns available in our pattern library.
You will see the template settings on the right side of your screen. Scroll down and you will find the Header button under the AREAS section. Click on it, and it will bring you to the Header template part.
In the Header template part, you can start everything from scratch by adding new blocks and elements you want to appear on your header. The header template defines a page area that typically contains a site title, logo, and main navigation.
If you want a simpler way, click the Block tab and you will see several premade header designs that are suggested by the theme you’re using.
Next, you can modify and customize your elements as you want. Feel free to rearrange the blocks by dragging and dropping them. Customize their alignment, spacing, and colors using the block settings on the right side.
3. Save and Assign a Custom Header to a Specific Template
Save and Publish a Custom Header
Click the Save button in the upper right corner to make your custom header live across the entire website if you are happy with it, and the changes will be applied immediately on all pages using that header template.
If you ever want to make further adjustments, you can revisit the Site Editor and update your header without affecting the rest of your site’s content.
Assign a Custom header to a Specific Template
If you want to assign the header to a specific template, such as the homepage, archive, page, or single post, you can see the instructions below:
- Return to the Design panel by clicking the Previous button of your browser. Next, navigate to the Templates sections and click on it. Select the template where the custom header appears (e.g., Blog Home, All Archives, Single Post, Page, etc.).
- After the template opens, you can edit the header or create a new one by selecting the Header block. Don’t forget to save your changes once you finish.
Repeat this step for the relevant template if you’re working with multiple headers (e.g., a different header for the homepage or pages).
The Bottom Line
Creating a custom header in WordPress using the Site Editor is a user-friendly and flexible way to personalize your website’s look and functionality. With the ability to modify blocks, adjust styling, and assign headers to specific templates, WordPress provides a powerful toolset for customizing your site without adding any code or additional plugins.
The WordPress Site Editor is a useful tool for creating and customizing basic headers. However, compared to more advanced page builders like Divi and Elementor, it currently lacks the depth of features, design flexibility, and ease of use.
If you’re looking for advanced design options, dynamic content, or third-party integrations, Divi and Elementor are better choices. On the other hand, if you prefer a lightweight, native solution without the need for additional plugins, the Site Editor is a good option.
