Creating a new header with blocks

Explore how to build a header using a block theme! Gain a deeper understanding of how blocks are nested to create a header and how to replace a header template part. We will also briefly touch on how to insert a header pattern that comes with your theme.

Learning outcomes

1. Creating a new header template part.
2. Building a header from scratch using a variety of blocks.
3. Replacing a header template part with an existing header.
4. Inserting a footer pattern.

Comprehension questions

1. Which block will you use to add a featured image to a header?
2. What is the advantage of editing a footer in Template Editing Mode?

Transcript

Hi and welcome to Learn WordPress. In today’s tutorial, we are going to create a new header using various types of blocks. The header is one of the most important areas of any website. It’s the first thing that visitors see when they get to your site, and first impressions matter. A typical header usually has a logo, a site title, a navigation menu and other elements such as social icons.

Today, we are going to build two different headers using various blocks and also look at how to add a header pattern. Let’s get started. I have created the pages for my site, and I’ve installed a block theme, Twenty Twenty-Two. And this will give us access to the Site Editor where we will be able to manage our templates, template parts and site-wide styles. If we click on the Editor, it will take us into the Site Editor, and at the moment this template is using one of the headers or template parts that is provided by the theme. You can customise this header or create your own.

We are firstly going to create our own headers. To do that, we will make our way to template parts. Now, remember, a template part is a block type used for structuring your site such as headers, or footers. Here is the list of template parts that come with this theme. We will click on Add new top right to create our own new header template part. Name it appropriately. In this case we are going to call it Row block and click Create. This will take us into Template Editing Mode, which will help you to only focus on the header you are working on without any distractions.

The first step is to add a Row block and then within the Row block, we will add a Site Logo block and select an image from our Media Library. I will go ahead and enlarge it slightly. Once I’ve done that, I’ll open the List View, and after the site logo, I’m going to add a Group block as I want to stack blocks vertically. Then I will go ahead and insert the Site Title block and below that the Site Tagline block. Next, make sure you select the parent block, click on the Inserter and add your Navigation block. The next important step is to use your List View and select the Site Logo block as well as the Group block, and put them together in a row using your block toolbar. And then select the parent block, open your sidebar settings and below justification select Space between items, and now you will have your site logo, site title and site tagline on the left and your Navigation block on your right. And lastly, I will change the background colour of the header to grey, and once I click on the colour, I can customise it as I please.

When I save the template part, I can make my way back to the home template. Once here, we merely click on Replace and select the template part we just created. The next thing we can do is create a bit of space between the header and the rest of the content on the page by using a Spacer block. And lastly, let’s modify our Group block with our site title and site tagline. Select the Group block in your List View and then scroll down to block spacing. I will change it to five pixels to bring the two parts closer together. Then I will use my List View and select the Site Tagline block. Click on the three vertical dots next to typography, select Appearance and change it to light. Resize the text to 1 and change the alignment to centre. And now you hopefully have a better understanding of how blocks are nested to create a header. And now we can close the sidebar settings and the List View to see the end result.

Next, we’ll create a header using a Cover block. So click on Add New, select header and name it appropriately. And once you click Create, we’ll be back in the Template Editing Mode. The first block we’re going to add is a Cover block, and then we’ll choose a featured image from our Media Library. Once I’ve done that, I will enlarge the image, and then in my sidebar settings, I will scroll down and change the opacity to zero. Thereafter, I will insert a Group block and then add a site logo. In this case, I would like to use a different site logo, so I will click on Replace and find a new image in my Media Library and then enlarge it.

After hitting Enter, I will add a Spacer block to push my site logo to the top of my Cover block. Then I will change the alignment of the Site Logo block to centre. Next, I will add a Navigation block below my site logo, and once inserted, I will also change the justification to centre and then use my sidebar settings to enlarge the size of the navigation items. Once I’ve saved the header, I will make my way back to the home template. I will open up the List View, select the parent block and then merely replace the old header with the new one I created. And then if we visit the front end our website, we will notice this beautiful featured image that draws the visitor into your website.

Lastly, we can also use patterns to create headers. To do that, select the parent block and then click on Replace. You will notice at the top we have our existing template parts, and if you scroll down, we will have access to header patterns provided by our theme. And now you can scroll through all the available patterns and make your selection, and for this example, I will choose the Header with image background. And you can of course modify this pattern as you please.

Check out one of our other tutorials that covers how to customise a header pattern. I hope you will enjoy exploring all these different ways of building your own header and visit Learn WordPress for more workshops and training material.