Using Schema with WordPress theme.json

Learn how using schema with a WordPress block theme’s theme.json file can help you write code efficiently and precisely.

Learning outcomes

  1. Explain the benefits of using schema with a theme.json file.
  2. Utilize schema to write, modify, and edit json code.

Comprehension questions

  1. What are the four main benefits of using schema with theme.json?
  2. How can schema help designers create block themes?

Transcript

Welcome to using schema with WordPress theme.json. Let’s get started. First, what is schema? Json schema is a vocabulary that allows you to annotate and validate json documents. In other words, it helps you to write code with confidence. In order to use schema successfully, you’ll need a text editor that works with it such as Visual Code Editor, which is pictured here or another, such as Eclipse or PHP Storm. Let’s see how it works.

Schema is made up of two lines that you add to the top of your theme or child themes theme.json file. First, I’m going to add the schema line to this theme.json file. Now that I’ve added the schema line, it’s telling my code editor that this file has a specific set of rules that can be applied to it so that it can do a few things for us.

First, it can autocomplete for us. If I remove this version, and I started a new line, I’ll start by opening up the quotes. Now the schema will tell me what my options are for this line. The only thing available that isn’t already present in this file on this level is version, which is the version of the schema. If I hit enter, now, it will fill in the rest of the line for me; it put in version, close the quotes, add the colon, and it added the value. The only value we should use here is two, which as of this recording is the most recent version of schema. There is an earlier version, but this should recommend the current version to you.

Now let’s watch this magic work under “Settings” next. In this instance, things that are available but not already used in this theme are blocks and borders. Schema is maintained by the core development team, so it should stay updated.

What else can schema do? Well, schema can also tell you if you make a syntax error. For example, if we remove this comma, it says, “Oh, this doesn’t look right.” If I hover over it, it will sometimes give me a clue as to what I did wrong. If I add the comma back, the squiggly lines go away. Finally, if you hover over these different objects, you will see some tooltips, which is inline documentation to go along with each of these things. You can see which customization options are available default colors, CSS custom properties and the default layout of the editor. Let’s see this again. If I hover over the section custom templates, it gives a little more information about this section. Pretty cool, right?

That’s the short version of how you can use schema with WordPress theme.json file. In short, schema helps you write code by providing suggestions of what’s available in each theme.json setting, auto completing your code with available options, alerting you to errors and providing more information such as hints as to what could be wrong and what each section might do. We hope you have fun experimenting with this fantastic feature.

The Difference Between Reusable Blocks, Block Patterns, Templates & Template Parts

This workshop will walk you through the key differences between reusable blocks, block patterns, templates and template parts. We will also shed light on when and why you need to use them.

Learning outcomes

  1. Explaining the difference between reusable blocks, block patterns, templates and template parts.
  2. Identifying which block type is used for which purpose.
  3. Converting a regular block to a reusable block and inserting it into a different page.
  4. Adding a block pattern to a page or post.
  5. Accessing and describing the role of templates and template parts.

Comprehension questions

  1. What are the advantages of using reusable block or block patterns?
  2. How do you access and manage templates and template parts?

Transcript

Good day and welcome to Learn WordPress. This lesson will walk you through the key differences between reusable blocks, block patterns, templates and template parts. We will also shed light on when and why you need to use them. So let’s jump straight into it.

Let’s start with reusable blocks. Well, the reusable block is a content block that you create, save, and reuse later as you need, and it allows you to save a block or a group of blocks. You can even export reusable blocks and import them to another website. So I think you will agree with me; reusable blocks will save you a tonne of time and effort. You can use reusable blocks for example, for things like social icons, a call to action, a thank you note, feedback forms, tables and promotional banners. For this example, I have created a restaurant website and an Hours and Location block, which I would like to save as a reusable block and use elsewhere on my site.

I will use the List View to ensure that I select the entire block. And once the block is selected, I will click on the three vertical dots in my List View and select Add to reusable blocks. And once selected, I will name it appropriately, and in this case, I will call it Hours and Location and then click Save. Now I will make my way to my About page and then scroll down to the bottom to add the reusable block there, and once you’re ready, click on the Inserter top left, and then next to blocks and patterns, click on Reusable and then select the relevant reusable block.

You will notice once you convert a block to a reusable block, it seems more narrow, but don’t stress, it will still appear as normal on the front end of your website. If you edit your reusable block, the changes will apply everywhere the block is used. So let’s say you don’t want it to be reusable anymore. Well, click on the three vertical dots and select Convert to regular blocks. Any changes now will only apply here. One last thing, If you have multiple reusable blocks you can select Manage reusable blocks, and as the name implies, here you can manage all your reusable blocks. Let’s move on and talk about block patterns.

Block patterns are predefined groups of blocks or pre-made designs. In one click, you can have access to beautiful and functional layouts from testimonials, headers, galleries and more. It is also important to note; changes made to a block pattern do not affect the pattern or any other content that uses the particular block pattern. To add a block pattern, click on the Inserter top left and select Patterns next to Blocks. Here you are able to choose from a wide variety of patterns: footer patterns, header patterns, column patterns, etc. I’m going to insert a columns pattern and a text pattern to show you how quickly you can create structure on your page.

Firstly, I will add the columns pattern and once selected, you will be able to modify the block to meet your requirements. I am organising a conference with various speakers so let’s change the heading to Conference, and of course, you can change the image, the buttons, the paragraph, etc.

Next, I’m going to insert a text pattern so let’s make our way back to Patterns, click on Text and I will select the pattern labelled List of events. And now you can edit the detail in just a few steps. Let’s change the name of one of the speakers for example and just for interest sake, you even have the option to save a pattern as a reusable block.

Lastly, let’s briefly talk about templates and template parts. Templates are broken down between templates that describe a full page and template parts that describe reusable areas within a template. Templates can be described as a full-page layout that includes template parts like headers, footers, and sidebars. Let’s make our way to Appearance and click on the Editor. This will take us into the Site Editor where you are able to manage your templates and template parts. I’m currently on my homepage template. Click on the WordPress icon or site icon top left to view all the available templates and template parts. If I return to my homepage template, you will notice the header and the footer template parts that have been created to add site structure to our template.

If you would like to create templates that a page or post uses, you have to make your way back to the Dashboard and open a Page or a Post. I will be opening my About page and in the sidebar settings you can assign a different template to a page or post or you could edit the template assigned to the post, or you could create a new custom template. I have already created a custom template for a landing page so let’s open up the page Sign up for our newsletter and then I will select Edit to edit the template that this page is assigned to. And as you will notice, I have created a custom template for my landing page with a unique header and footer.

I trust you will now be able to differentiate better between reusable blocks, block patterns, templates and template parts. Visit Learn WordPress for more workshops and training material.

Displaying the Post Comments block in Block Themes

In this workshop, we are going to take a closer look at how post comments are displayed when you are using a block theme.

Learning outcomes

  1. Managing the Post Comments block via the Site Editor and Template Editor.
  2. Using the List View to gain a clear picture of the structure of the Single Post template.
  3. Identifying the implications of removing the Post comments block.
  4. Creating a custom template and adding a Post Comments block.

Comprehension questions

  1. What is the function of the Post Comments block?
  2. What happens if you remove the Post Comments block from the Single Post template?
  3. How does using a classic theme and block theme differ?

Resources

Intro to the Site Editor and Template Editor

Templates

Transcript

Hi, and welcome to Learn WordPress. Today we are going to take a closer look at how post comments are displayed when you’re using a block theme. But before we make our way to the backend of our website, let’s see how comments display when people respond to a blog post.

So when I visit the front end of my website, I will scroll down to one of my blog posts called Go Local. When we go to the bottom of the post, we will notice three people have already responded by adding their comments: Roger, Tina and Ross, and below that there is a section for more people to have their say.

Allowing comments on your site has many advantages. It allows you to deepen your relationships with readers and find out what readers are interested in. It also increases the likelihood of them subscribing to your newsletter or purchasing something in future. Essentially, allowing comments can help you to build a community around your blog. It is of course important to manage comments effectively by using the built-in settings of WordPress under Discussions in your dashboard and installing an anti-spam plugin.

But for now, let’s make our way back to the dashboard to investigate the Post Comments block. But to do that, we need to access templates. There are two ways to access templates, via the Site Editor and the Template Editor. Let’s first make our way to the Site Editor. Go to Appearance and click on Editor. This opens up the Site Editor where you are able to manage your templates, template parts and also where you can customise the global styles or site-wide styles of your website. We are after the Single Post template today.

The Single Post template displays the page structure for single posts. When we open up the List View we will have a clear picture of the current layout of single posts. And right at the bottom, you’ve got your post comments below. Just a reminder, you have the choice to modify the layout of single posts according to your requirements.

But have you wondered what will happen if you delete the Post Comments block, well all comments on all blog posts that have been assigned to this template will disappear on the front end of your website. If we make our way back to the front end of my website, we will notice that this post has been assigned to the Post template and the three comments below display because of the Post Comments block. Let’s go back to the template, click on the three vertical dots and remove the Post Comments block. Click Save, and then let’s return to the front end of my website. I’m going to reload the page and when we scroll down, we will notice that the comments are gone. I actually want my comments to display so I’m going to go back to my template, click on Undo, click Save, and then we will notice after reloading the page, the comments are back. So tread carefully as some might accidentally remove the Post Comments block without realising the impact it will have.

The second way we access templates is via the Template Editor. We are going to make our way back to the dashboard, click on Posts and open one of our existing posts. And in the sidebar settings, we’ll see that the default template is being used which is the Single Post template. And when you click edit, it will take you into the Template Editing Mode. You will be able to customise how single posts are displayed just as when you were in the Site Editor.

If we open the List View again, we will see that the Post Comments block is part of a Group and is located below the Separator block. The one difference you will notice when you are in Template Editing Mode is that the content of your page and post comments are visible. Please remember though, templates are used to create site structure and are not used to add or edit content. But when you go back to your post and click on Default Template you will notice that you can assign this post to a different template. Or if you click on New, you can create your own custom template.

Give your new template a descriptive name and click Create. Open the List View and remove the header. Click on Insert Before and then add your new header. I’m going to choose an existing header that I’ve already created then scroll down, click on the Inserter and add a footer. You can choose an existing one but I’m going to create a new footer. I will use the Carousel View to select one of the available patterns, and once you’re happy, click Choose. Name it appropriately and click Create, and lastly, don’t forget to add your Post Comments block, otherwise no comments will display.

Let’s go to the front end of our website to see our changes in action. Firstly, I’m going to open up a different post The World is Your Oyster and you will notice that this post has still been assigned to the single post template. And if I go back and open up the Go Local post, you will notice that this post has been assigned to the custom template which I’ve just created.

So if you have installed a block theme, be on the lookout for the Post Comments block. Explore Learn WordPress for more workshops and training material.

Taking Advantage of Query Loops

Query loops can be used to showcase blog posts, pages, categories, tags and more! You can have automatically updated lists on your homepage and other web pages without requiring any coding skills. In this workshop, we will learn how to use query loops on a post or a page in order to show off dynamic content with a few clicks of a button.  

Learning outcomes

  1. Modifying the way blog posts are displayed using the query loop.
  2. Using query loop patterns.
  3. Effectively utilizing the ‘List View’ and sidebar settings.
  4. Assigning taxonomies (categories, tags, authors) to create a range of dynamic content.

Comprehension questions

  1. What type of lists would you like to display?
  2. How can you display lists of posts with set specified parameters without code?

Transcript

Hi, and welcome to Learn WordPress. When you hear the term query loop is your first thought “query what”? If so you’re not alone. This powerful block can be used to showcase blog posts, pages, categories, tags, and quite possibly so much more. You can have automatically updated lists on your homepage and other web pages without requiring any coding skills. It allows you to display specific things. Maybe you would like to change the way your blog posts are being displayed, or you would like to display a list of reviews, portfolio content, new features that have been released or even recipes. Let’s look at a few real-life examples to see what can be achieved.

In our first example, a query loop has been used to highlight the latest stories recognizing women’s creativity, leadership, courage and innovation. And below that, a query loop has been used to display blog posts. In the second example, query loops have been used to display different types of recipes. First up, we have breakfast recipes, and if we scroll down, amazing appetizers. And in our last example, a query loop has been used to create a news page.

Here are the objectives of today’s workshop: modifying the way blog posts are displayed using the query loop, using query loop patterns, effectively utilizing the List View and sidebar settings. And lastly, assigning taxonomies, things like categories, tags, authors, etc. to create a range of dynamic content.

So our first stops are Modifying blog posts and Exploring patterns. So let’s make our way to Appearance and click on Editor. This will take us into our Site Editor and currently, we are on our homepage template that displays all our blog posts. Let’s open up our List View and scroll down to the Query Loop block. On our right, we will see how blog posts are being displayed at the moment in list format. If we look at our block toolbar, we will notice we are seeing our blog posts in list view, but we can change that to grid view in one click. And now, we are viewing our blog posts in grid view. At the moment we can see the post title, the post featured image, the post date, as well as post categories and post tags. But of course, we can alter what we want to have displayed. So let’s add a Post Author block so that we can see who wrote each post. If we change something in one post, it will appear everywhere else, and of course, don’t forget to click Save.

But what if we want to use a completely different pattern and layout? Well, we can remove the current Query Loop block we are using by clicking on the three vertical dots on the right-hand side and then selecting Remove query loop. Now we can add a query loop block in the exact same spot. You will have two options; to choose a pattern for the query loop or to start blank. If you select Start blank, you will have a few variations to start with. Or you can decide to choose a pattern. You can view all the different patterns available by clicking through the list view or the grid view. If you are in the list view, you can use the arrows to browse through all the various patterns that are available and hopefully, you will find the exact pattern you were looking for. Some patterns have post featured images, and some don’t; it all depends on your requirements. If you don’t want to browse through the patterns one by one, you can use the grid view to see multiple patterns at the same time, just scroll down to view all the available options. I think you will agree; the grid view allows you to compare the different patterns much easier. And once you find the pattern you’re looking for, you can merely click on the pattern, and it will insert directly into your page. And now you can modify it as you please.

Next up, we are going to have a look at taxonomies and how to use the sidebar settings. Firstly, I’m going to create a Lifestyle page that only relates to the topic. So I’m going to select the query loop. Then I will go to my sidebar settings and deselect Inherit query from templates as I want to customize the settings of the query loop. And when you scroll down, you’ll be able to filter your posts by using categories, tags, authors, and even keywords. I have created a category called Lifestyle and once selected, only posts with this category will be displayed. Secondly, I’ve created a Nutrition page and now I will use tags to only display posts with the Nutrition tag, and once selected, all the posts will be related to healthy eating.

You also have the option to display posts from a specific author. Once I select the Query Loop block again, I will go to my sidebar settings, click on Author and select the person whose posts I would like to display.

Lastly, let’s have a closer look at our sidebar settings. As mentioned, I’ve deselected Inherit query from the template. This is an option that you can toggle on and off depending on whether you want to customize the query that the loop relies upon. If you toggle it on, certain customization options will be hidden, and if you toggle it off, more customization options will appear. The next option is post type. At the moment we are displaying blog posts, but you can even display pages if you wish to. The next setting we are going to look at is Columns, and here you can change how many columns you would like to have displayed. Below that, you have the option to order your posts by newest to oldest, oldest two newest or alphabetically. Next, let’s talk about Sticky posts. A sticky post is a post that sticks to the top of your blog page, and the option in your sidebar settings will allow you to include sticky posts, exclude them, and only means exactly what it says. You have the option to only show sticky posts if you wish to. And then, of course, we’ve already discussed using filters. And lastly, you also have the option to change the colour of the text and the background of your Query Loop block.

Enjoy exploring the power of the Query Loop block and visit Learn WordPress for more workshops and training material.

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.

Building Sidebars With the Site Editor

In this short workshop, learn how to create and build sidebars in your block theme’s site editor using templates.

Learning outcomes

  1. Use the site editor to add a sidebar automatically to any post, page, or template that you would like

Comprehension questions

  1. Which block can you use to create a sidebar?
  2. Where in the site editor should you build your sidebar?
  3. Why is it helpful to use the ‘List View’ button to create a sidebar?

Transcript

Sarah Snow 0:00
Welcome to Building Sidebars With the Site Editor. In order to do this with your website, first, you will need to make sure your WordPress version has been updated to 5.9 or the latest version of WordPress. You will also need to make sure you have installed and activated a block theme on your website.

Today we will use the Twenty Twenty-Two theme. By the end of this workshop, you will learn how to automatically add a sidebar to every post or page that you’d like. It’s pretty common to have different sidebar options on posts or pages so we’ll focus on adding a sidebar to posts today. Let’s get started.

The secret to adding sidebars can be found in your block theme’s site editor in your dashboard. If you head to Appearance > Editor, you will be taken to your site editor. From there, select the W icon in the upper left hand corner of your screen. You will find a list of options you can use to edit your site’s layout and add a sidebar. We’ll click on templates. I’d like to add a sidebar to every post, new and old, so I am going to select single post which is the Twenty Twenty-Two default post type.

This is a template for my blog posts. Anything I do to this page will make changes on existing and new blog posts, so I can add a sidebar here. Let’s see how it’s done.

Here you can see that this page is made up of three main parts. I’ve minimized them so you can see them clearly. They are the header, the group of different posts, features (such as post title, featured images, and post content) and a footer.

Let’s create a sidebar. We’re going to do this with the Columns Block. First, you’ll want to make sure that group is selected so that you don’t accidentally add these columns to the header or footer. Now, let’s add the column block. I select “Columns”, scroll down to where this has appeared in my editor and find several options. Now, I prefer the right sidebar over left ones. So I select that one, though either will work for this process. I click on the list view again. Because it’s easier to select the blocks that I want, I minimize everything except for the Columns Block to make sure I select the entire block containing the post information that I want to display. Then, I select the group select move to and drag and drop this option into the columns that I want.

I know I’m moving it to the right column by the line that appears under the Columns Block. I have moved the existing post template information, including the title featured image and the post content to the left. Now I’m going to save, just in case. From here, I’m going to add whatever content I would like to the right sidebar. Watch as I add a heading and a subscription form block.

Now, on every blog post, past, present and future, people can subscribe to my blog using my new sidebar. My sidebar can have whatever blocks I would like. For example, on this one, I chose to add a post author, archive and a few separators for spacing.

Your theme’s template parts will not save automatically. I click Save once and I’m showing a warning: “Are you ready to save?” Note where it says this change will affect pages and posts that use this template. I’m sure, so I click Save again. Now let’s see the magic: before, my posts looked like this with no sidebar, which is the default for posts using the Twenty Twenty-Two theme. Now that we’ve changed and saved the post template, they look like this complete with a sidebar that I’ve customized. When I click over to a page on my website, you’ll notice that there is no sidebar. This is because I only edited the post template, not a page template. So you can show different things depending on what post type you’re using on your website.

You might notice that there are different options in both Posts and Pages under the template section. This allows you flexibility if you want some of your posts or pages to have a sidebar and others not. Remember, what you do to one template will be done to any poster page using that template. So take care as you edit. What will you put in your new sidebar? Have fun.

Using Page Templates

Templates are groups of blocks combined to create a design for a webpage. You could also say templates can be described as a full-page layout that includes things like header, content, and footer areas. This workshop will explore using, editing and adding templates to customize your site by giving your posts and pages their own unique designs and styles.

Learning outcomes

  1. Accessing templates and understanding the difference between dynamic and static content.
  2. Editing existing and adding new templates provided by your theme.
  3. Assigning existing and creating new templates for posts or pages.
  4. Clearing customizations

Comprehension questions

  1. Do you want to change how single posts are displayed?
  2. How can you create a landing page using templates?
  3. Do you know the difference between the Site Editor and the Template Editor?

Transcript

Hi, and welcome to Learn WordPress. Today we are going to dive into templates. So templates is one of the new features of full site editing. And the aim of full site editing is to give you the power to customise your entire site without code. So what are templates? Templates are groups of blocks combined to create a design for a web page. You could also say templates can be described as a full-page layout. That includes things like header, content and footer areas. Don’t get confused between templates and themes. A theme will give your site the look and functionality you need, and it will allow you to set the design of your entire site. Templates, on the other hand, allow you to customise your site by giving your posts and pages their own unique designs and styles.

I think it is important to clarify the following information from the start. Templates are not for posting content, and templates for a post or page display your content with a Post Content block. And templates are as the name implies, design templates that can be used by single or multiple pages and posts.

To access templates, make your way to Appearance and click on Editor. This will take you into your Site Editor and open up to your homepage template. If you click on the WordPress icon top left, it will open up the Template List View. Now let’s stop and talk about the site editor for a moment. The Site Editor can be used to modify templates and template parts and also customise the style of your site. When you click on the Styles icon top right, you have the ability to change the typography and the colour of your entire site. But we are here to talk about templates. So let’s go ahead and click on templates in the Template List View. When you start building a new website, you can edit existing templates or add new ones.

The theme you’re using will determine which existing templates are available to use, or which templates you can add. If we change our theme to a different block theme, such as TT1 Blocks, we’ll be able to compare. So make your way back to the Editor. Click on the WordPress icon, templates, and you will see the existing templates you can use and the ones you can add using the TT1 Blocks theme. Let’s look at some of the most common templates you will find and what function they fulfil. So first up is the Single Post template. And this displays a single blog post. Next is the Page template. And this displays individual pages and if you edit this template, all your pages will display the changes you have made. You can override this by creating a custom template using the Template Editor. The Index template is the default template used when no other template is available. And lastly, the 404 template displays when no content is found.

How to edit templates via the Site Editor? Let’s make our way back to the Editor. Click on the WordPress icon and choose Templates. You merely have to click on a template and once it opens up, you can start editing. So let’s open up the Single Post template. This template displays a single post so you can customise the way you want your single posts to be displayed. Let’s make a few adjustments. Firstly, select the Post Title block and use your block toolbar to align the text to centre. Below that is the Post Featured Image. You will see the Post Content block, Post Date, Post Author and Post Terms. Let’s remove the Post Author block and then insert it below the Post Title. And use your block toolbar to align the text to centre. And now we have modified how we want our single posts to be displayed by changing the template. Take note of the Post Content block. This is where your dynamic content or post content will be pulled into.

Let’s pause to reflect for a moment. When you create a template you get the best use when you separate the dynamic part and the static parts. The dynamic part is the content part that will change for every page or post that uses the template. And the static parts are the reusable parts of the template that will stay the same like the header and footer areas. As mentioned, the dynamic part or post content is pulled into a template through the Post Content block and you, therefore, don’t add content to your template, only structure and static information. The content from your page or posts will be displayed where the Post Content block has been added. If we make our way back to Templates and click on the three vertical dots on the right-hand side of the template, you will be able to clear all the customizations you have made in one click.

Next up, we are going to click on our page template. Here you can decide how pages must be displayed. So let’s change the footer template of our Page template. Click on the footer template part and then click on List View to see everything in context. And once you’re ready, click on the Replace button on your block toolbar. And replace this footer with a different one. This template will now have a different footer than other templates. If you wanted to edit your homepage, you can find your homepage template under templates. Or when you click on Site in the Template List View, you can access your homepage directly and start editing. How to add a template via the Site Editor? If you want to add a new template via the Site Editor, select the Add New button top right. A modal appears where you can choose between different template options depending on your theme. The 2022 theme allows me to add a Frontpage template or Search template, I’m going to go ahead and add a Search template. Once I click on Search, it will open up a blank canvas for me to personalise my Search template.

Lastly, we are going to discuss how to edit or create templates for posts and pages via the post also known as the block editor. The Template Editor is a feature that allows block editor users to edit and create templates that are page or post users. So let’s make our way back to the Dashboard and click on Pages, Add New. And let’s name this page Templates. When you’re on a page or post you can assign an existing template to the page or post or create a new one. When you create a new page or post it is automatically assigned to the default template and for Pages. The default template is the Page template. To edit the default template click on Edit in the setting sidebar. And this will take you into the Template Editing Mode. And as you can see at the top this is your Page template, you will know you are in the Template Editing Mode when you see the doc frame around the page. And here you are able to make any changes you wish.

If you would like to assign a different template to this page, go to your sidebar settings and click on Default Template. And here you will see a list of other templates you can choose from. I will go ahead and select the page with no seperators template. And now you can edit the template as you please. If you would rather want to create your own custom page template, click on New next to Edit. You’ll then be asked to name the new template and make sure you give it a descriptive name. I’m going to call this my landing page and then click on Create. Again this will take you into the Template Editing Mode and you have the option to create your own personalised template. And remember, you can assign this template to this page or other pages.

Visit Learn WordPress for more workshops and training material.

Using Template Parts

The template part block is an advanced block introduced in WordPress 5.9 that can be used with a block theme or a theme that supports template editing. This block is best used to edit areas like your site header and site footer.

Learning outcomes

  1. Define the purpose of a template part.
  2. Add an existing template part to your site.
  3. Edit an existing template part.
  4. Create a new template part.

Comprehension questions

  1. Which parts of your site are appropriate to use a template part?
  2. What happens if you make changes to an existing template part and save?

Transcript

0:00
Are you interested in personalizing a header or footer that can be used throughout your entire site? Have you ever wanted to edit a header or footer beyond what the customizer allowed, but didn’t want to make changes to the theme’s code? In this workshop, we’ll explore how template parts block fits into the array of Full Site Editing features and gives you flexibility in designing your own header and footer.

0:26
The template part block is an advanced block and it’s used to organize and display your site structure. For context, this block is best used to create areas like your header, footer, and sidebar. Once you have created a template part, you can use it, reuse it or edit it. When you change blocks inside a template part. The editor will update the blocks on every block template that includes that template part. If you change a template part in one place, it will change everywhere it has been used.

1:00
For this workshop, I’ll be making changes in a local test site called my travel blog. I’ll be using the 2022 block theme and running WordPress version 5.9. Feel free to pause this video if you want to try it out on your own.

1:16
First, we’ll need to access template parts. One way to do this is through the editor. Make your way to dashboard, Appearance, Editor, Click on the W in the top left. And then template parts. You’ll find any existing template parts listed on this page. You can either edit an existing template part by clicking on the template part you want to personalize. Or you can add a new template part to your site by clicking the Add New button in the top right corner.

1:51
Let’s start by editing an existing template part. I’m going to click on Header. This brings me to the template part focus mode. This is a dedicated mode that only shows the selected template part. From here, I can edit the header by customizing existing blocks, adding new blocks or removing existing blocks. For instance, I’m going to upload a site logo of my initials to the existing site logo block. I could also click on the existing navigation menu and delete it. And then I could click on the plus sign to insert a block and bring the navigation menu right back in. You’ll notice that that familiar experience from the editor applies to template parts now like your header too. I’m going to hit save in the top right corner and it will alert me that changes are being applied to this specific header template part. That means that any place that the particular template part appears throughout my site will also be updated with these changes. Great.

2:57
Now let’s add a new template part to our site. We’ll access the template editor focus mode the same way as we did to edit an existing template part. From your dashboard, Navigate to Appearance, Editor. Click on the W in the top left corner and then Select Template parts. However, this time we’re going to click the Add New button in the top right corner. Since there’s a new template part, we’ll have to select the type we want to create: either general, header or footer. If you select General, it’s not tied to any particular area. Unlike a header being at the top of your site and a footer being at the bottom.

3:35
I’m going to select header. And now I’m going to give it a name and call it my travel blog header. Once the name is entered, and the area is selected, you can click the Create button. Now I can create a header from scratch, I’m going to click on the plus sign to access the block inserter and type in cover so that I can add in a cover image. I have a picture from my travels in Montana already uploaded to my Media Library. So I’m going to select that. Wonderful. I want to change this color overlap how it’s a little bit greyed out. So I’m going to click on the cover image and open Settings. Let’s scroll down to color and reduce the opacity to zero. Now I want to add the site logo into my header. So I’m going to go back to the inserter, type site logo and click on that block to add it. I now have created a brand new header. I’m going to hit save so that I can reuse this template part throughout my site.

4:41
You might be wondering how to add a template part into an existing template. Let’s explore that now using the editor. I’m going to access the editor from the dashboard by clicking on appearance and then editor. I am currently editing my site’s homepage which is indicated by where it says home in the top middle of the screen. My homepage with the 2022 theme already comes pre-loaded with a header that has a cover image of a bird, a site logo, site title, and navigation menu. I have the option to simply make edits to this header similarly to how we did it with the template focus mode. However, I want to show how to add a header into the editor.

5:23
Let’s get rid of this existing header first by opening up List View, hovering over header dark small, clicking the three vertical dots to access options, and then clicking on Remove template part. Now I’m going to go to the toggle block inserter which has that plus sign to add a template part. I can do this a few ways by adding the template part block or the header block. I’m going to select the template part block. It will automatically insert this block at the bottom of the page.

5:54
I then have the option to choose an existing template part or to create a new template part. But this time, I’ll be able to edit it right from within the editor. I’m going to select “Choose existing.” Any available template parts will then be available to choose. There are the pre-loaded headers from my theme, but also the header we created earlier called my travel blog. I’m going to click on my travel blog header to add that into the homepage template. And for my last step, I’m going to open up list view. Click and drag the header up to the top of the template page. And now let’s preview. You can now add that template part header to any templates throughout your entire site.

Styling Your Site With Global Styles

After you’ve selected a theme, you’ll want to create your own unique look to your site. In Block Themes, you can customize the Styles to reflect your preferred typography, colors, and more for your entire site, or to override just a few blocks.

Learning outcomes

  1. You will be able to design your site with typography, colors, layout, as well as set styles for specific blocks by using global Styles.
  2. You will be able to change the default settings to reflect your own brand using Global Styles.
  3. You will be able to change the styles of the quote block so that it matches your branding across your entire website.

Comprehension questions

  1. Have you ever found a WordPress theme that you really like, but wanted to change the theme colors or fonts?
  2. Are you ready to customize specific blocks, such as the quote block, throughout your site?

Transcript

After you’ve selected a theme, you’ll want to create your own unique look to your site. In block themes, you can customize the styles to reflect your preferred typography, colors and more for your entire site, or to just override a few blocks.

To use this feature, you’ll need to be using a block theme and WordPress 5.9 or higher.

You could find this by viewing the themes directory and feature filter set to Full Site Editing. Install your theme by going to Appearance, Themes, add new, and search for a theme such as 2022. Then go to Appearance Editor and view your site in the editor. In the upper navigation area, near the right hand side, we see this circle that has half of the circle filled in. This is the styles panel.

And when we select it, we will get a preview of what our current style looks like. Beneath it, you could find a way to access typography, colors, layout, and additionally, individual blocks.

Let’s select the typography that we would like to use. For our text, I’m going to switch it to a serif font. And under the size, you’ll notice that I can expand the size. Or I can use more specific controls, such as pixels, ems and rems, I could change the line height and select my font weight here as well. I’ll save and you’ll notice that it’s asking me several options of what I would like to save that looks great. I’m saving my custom styles. I’ll go back.

And now select the links. And with the links, I may want to change the appearance slightly, maybe I could make those bold and I could allow the font to be system font instead of saref. And change the line height if you’d like. I’ll go back again, and back out of typography.

And now in the colors area. You’ll see that our theme comes with default colors in the palette. When I select it, it shows me here are the colors that come with the theme. Here are default colors that WordPress has identified. And then I can additionally create custom colors. So I would not encourage people to just click and drag wherever to find a pretty color. There are a number of color palette generator tools. If you would like one for free to use, I suggest just heading to your nearest search engine and looking for a color palette generator. There you’ll get the hexadecimal values most likely. And you can select the little detailed inputs area on the side and change the specific hexadecimal value that you would like to use. This then allows you to specify the colors and you’ll want to rename those. So if I, for the sake of demonstration, select this color. And then I might wish to name that color such as Maroon. Great.

Now I can go over to the gradients area and see the different gradients that are provided. Here you’ll see the ones that come with the theme as well as default ones that come with WordPress below, you can create some custom gradients. And also you can control your duotone filters here. Let’s go back out of palette and select our text and background elements. For the background. Maybe I’m ready to take my theme a little bit dark. And then I want to jump back to text and obviously need to lighten that text up. And then for our links I might want to go with like this peach color. And so you’ll start seeing the changes apply readily right while you’re editing these things that looks great and are back out of colors as well.

Finally, under layout, you can additionally change things like your padding. And here again, you can set it to pixels, M’s rams as well as percentage viewport width and viewport height if you’d like to set those things. And finally blocks in the blocks area you can choose to modify how a specific block appears. So right now you’re taking a preview of the query Loop block. Maybe I want to modify how that query loop blocks colors appear in the background, perhaps I want to go with something more like let’s go with this and then in that area, lighten it up just a bit to be a little bit different than before.

And for the sake of changing a few other things, the text in there, we’ll just make bright orange. And so you can see that you can start styling things. Depending upon which block you select, you will have different options available.

So the quote block gives you access to the typography. If you were looking at a cover block, there would be some different settings there such as the layout, each block will have its own unique styles available to it. So you’ll want to take note that this is where to go to change all blocks that contain that particular item.

So if I change the cover block here, it’s going to change it across my entire site. If I change the ListView here, it will change it everywhere. So keep that in mind before you start making your changes anywhere inside of the styles editor.

And then I’ll hit Save, and my styles have been saved. But let’s pretend I want to undo something I can go up to the top and say reset to defaults or walkthrough the welcome guide again, within that kebab men menu. That’s how you can get started with styles. I hope this helps you