Adding a Site Tagline to Block Themes

In this workshop, we will learn how to add a Site Tagline block and manage a header template part when installing a block theme.

Learning outcomes

1. Describing the purpose of a site tagline.
2. Inserting a Site Tagline block to your header template part.
3. Using sidebar settings to modify the style of your site tagline.

Comprehension questions

1. What are the differences in managing your site tagline when using a block theme compared to a classic theme?
2. Do all websites need a site tagline?
3. Where would you like your site tagline to be displayed?

Resources

Templates

Template parts

Site Editor & Template Editor

Customizer Taglines (Classic Themes)

Transcript

Welcome to Learn WordPress. If you have installed the block theme and are keen to include an attention-grabbing site tagline, you have come to the right place. Just a reminder, a site tagline is the short phrase located under the site title, and the goal of the tagline is to convey the essence of your site to visitors. Basically, letting a visitor know what your website or blog is all about. Let’s look at two effective examples.

Firstly, we have the website This is Finland and their site tagline is ‘Things you should and shouldn’t know.’ The second website is called Positively Positive and their site tagline is ‘Your attitude + your choices = your life.’ In the past, when using a classic theme, you would have used your Customizer to manage your site tagline, but when you install a block theme, you will use the Site Editor. Let’s go and see what that looks like.

At this stage, I still have a classic theme installed Twenty Twenty-One, and usually, I would have accessed the Customizer to modify my tagline by going to Site Identity and changing it there. Now I’m going to return to the dashboard and activate a block theme such as Twenty Twenty-Two, and once you’ve activated it, you will notice that the Customizer has disappeared. Before 5.9 or full site editing we only used blocks for Pages and Posts, but now we are able to use blocks to customise our entire site, the header, content, footer, and everything else. You basically have control over customising all parts of your website. That means we are going to have full control and flexibility in designing our header and be able to use the Site Tagline block to add our tagline wherever we please. Let’s see that in action.

Before we continue, please note you can find other workshops on Learn WordPress that explore how to use templates and template parts. I will add links to these resources below. Make your way to Appearance and click on Editor. You are now in the Site Editor where you are able to manage templates and template parts. Templates express overall page layout, including areas like your header template parts and footer template parts. And you will use template parts within templates to create site structure. For context; template parts are best used to create areas like your header, footer, and sidebars.

So let’s go and alter the header template part of our site and see how we can use the Site Tagline block. Firstly, I’m going to remove my current template part, click on Insert Before and add a new header. Now you have a choice between choosing an existing header or adding a new header. Let’s add a new header. We are in Carousel View and here you have an option to browse between various patterns to choose from. As you will notice this pattern has a site title and a site tagline. But let’s move on to the next pattern with a different background colour. I like this pattern therefore I will click on Choose. Name your header appropriately and click Create, and now your template has a new header template part which you can modify as you please. And when we look at our List View, we will be able to see all the blocks that were used and nested to create this header template part. And you will also see that the site title and site tagline have been grouped together with a Group block.

Next up we are going to create our own header template part. So let’s remove this template part again, click on Insert Before, add a new header, click on New Header and then select Start Blank. Provide a descriptive name for your new header and once you are ready click Create. And now we have a blank canvas to work from. Click on the Inserter and add a Group block. Click on the Inserter again and insert a Columns block. I’m going to select the ‘three columns equal split’. In the left column, I’m firstly going to add a Group block and then within the Group block, I will add my Site Title block and below that my Site Tagline block, and in the middle column, I will add my Site Logo block; and then align it to centre. In the right column, I will add my Navigation block and I will select an existing menu. And then I’m going to add a Spacer block and send it to the top to create a bit more space above my header.

And now I’m going to edit my site title and site tagline by using the sidebar settings on the right, so let’s look at the site title first. Change the typography to extra large and the Appearance to black italic. And if we move on to our site tagline, we can use the sidebar settings to change the typography to large. Please note, the Advanced tab in your sidebar settings allow you to add additional CSS classes. Once we click save and make our way to template parts we will notice that all the new template parts that we’ve created are stored here.

Let’s look at one more example and replace our current template part with a different header template part that I’ve created. Once we select our entire header, click on replace in your toolbar and select the new header template part that you’ve created. And as you will notice, I’ve added an image, repositioned the site title and site tagline, and I’ve changed the colour of the site tagline using my sidebar settings.

So you have the power to modify your header and site tagline as you please. Visit Learn WordPress for more workshops and training material.