beginner-wordpress-user/platform/Using template parts/youtube/Using template parts.en.srt

1
00:00:00,000 --> 00:00:05,000
In this lesson, we will take a closer look at using template parts.

2
00:00:05,000 --> 00:00:17,000
By the end of this tutorial, you'll be able to describe what template parts are, and how they work, edit a template part, and replace a template part on a template.

3
00:00:17,000 --> 00:00:24,000
If you visit a well-designed website, you'll notice that one of its strengths is its consistency.

4
00:00:24,000 --> 00:00:33,000
Its headers, footers, and sidebars often have the same or very similar content to make it easy for viewers to find the information they are looking for,

5
00:00:33,000 --> 00:00:37,000
no matter where they are on a website.

6
00:00:37,000 --> 00:00:45,000
To get this effect, do web designers have to build their headers, footers, and sidebars from scratch on every page in their website?

7
00:00:45,000 --> 00:00:53,000
The short answer is no. With WordPress block themes, you will use a feature known as template parts.

8
00:00:53,000 --> 00:00:56,000
Firstly, what are template parts?

9
00:00:56,000 --> 00:01:06,000
Template parts are groups of blocks that you can use to create repeated parts of your template, like the header, footer, and a sidebar.

10
00:01:06,000 --> 00:01:14,000
Let's see this in action when you're in your WordPress dashboard, make your way to appearance, and then click on editor.

11
00:01:14,000 --> 00:01:22,000
This will take us to the site editor, and then we'll open up one of our templates, in this case the blog home template.

12
00:01:22,000 --> 00:01:29,000
And within a template, we create and modify our header and footer template parts.

13
00:01:29,000 --> 00:01:41,000
Some block themes provide more or fewer options, but almost all come pre-packaged with the header and footer like you see here as part of the 2024 theme.

14
00:01:41,000 --> 00:01:48,000
WordPress has made it even more simple by providing header and footer patterns that are ready to be used and modified.

15
00:01:48,000 --> 00:01:59,000
So when you click on the three vertical dots of the header template part and select replace header, you will notice at the top existing template parts.

16
00:01:59,000 --> 00:02:03,000
And these are template parts that I've already created.

17
00:02:03,000 --> 00:02:08,000
And then below that, we will find header template part patterns.

18
00:02:08,000 --> 00:02:14,000
And now of course, you will be able to select any of these patterns that come with your theme.

19
00:02:14,000 --> 00:02:19,000
And as mentioned, some themes might provide more, some less.

20
00:02:19,000 --> 00:02:24,000
And this works exactly the same for footers.

21
00:02:24,000 --> 00:02:27,000
Let's start by editing a header template part.

22
00:02:27,000 --> 00:02:36,000
When you click on edit in the blog toolbar, you can work on your header template part in editing mode without any other distractions.

23
00:02:36,000 --> 00:02:39,000
Firstly, let's open our list view.

24
00:02:39,000 --> 00:02:45,000
And then I'll go ahead and add my site logo to my header template part.

25
00:02:45,000 --> 00:02:54,000
So once I select the site logo block, I can upload an image from my media library or from my computer.

26
00:02:54,000 --> 00:03:02,000
Next, I'll select the site title block and add the site title for this website.

27
00:03:02,000 --> 00:03:09,000
Then I will save my header template part and return to my blog home template.

28
00:03:09,000 --> 00:03:16,000
Just a reminder, template parts are synced and will update everywhere it has been used.

29
00:03:16,000 --> 00:03:22,000
You will notice that the color purple indicates when a pattern is synced.

30
00:03:22,000 --> 00:03:26,000
Let's go to one of our other templates to see this in practice.

31
00:03:26,000 --> 00:03:32,000
So when we open our page template for example, we'll see the header is exactly the same.

32
00:03:32,000 --> 00:03:42,000
Or when we open up our 404 template, we'll see that the changes have also applied here because template parts are synced.

33
00:03:42,000 --> 00:03:50,000
What if you wanted a different header on say your home page for example, but you would like the rest of your website to have a standard header.

34
00:03:50,000 --> 00:03:59,000
In this case, you would want to create a new header template part or replace the header with a pattern and add it to your blog home template

35
00:03:59,000 --> 00:04:01,000
or your front page template.

36
00:04:01,000 --> 00:04:09,000
I'm going to modify my blog home template as I've selected my posts page as my home page display.

37
00:04:09,000 --> 00:04:15,000
So I will make sure I select my header, click on the three vertical dots and then select replace header.

38
00:04:15,000 --> 00:04:21,000
And now you can replace your home page header by using a pattern or an existing template part.

39
00:04:21,000 --> 00:04:30,000
I will replace the header with an existing header template part which I've already created called banner header.

40
00:04:30,000 --> 00:04:35,000
And now my home page will have its own unique header.

41
00:04:35,000 --> 00:04:50,000
And once I've saved, we can view our other templates to double check that they still have the standard header in place.

42
00:04:50,000 --> 00:04:55,000
Lastly, let's talk about creating a template part from scratch.

43
00:04:55,000 --> 00:05:03,000
Make your way to patterns and then scroll down to template parts.

44
00:05:03,000 --> 00:05:11,000
Here you can view all your existing headers, footers and general template parts.

45
00:05:11,000 --> 00:05:21,000
To create a new template part, click on the plus icon next to patterns and then select create template part.

46
00:05:21,000 --> 00:05:31,000
And from here, you can select a general template part which is not tied to any particular area, a header template part or a footer template part.

47
00:05:31,000 --> 00:05:35,000
In this case, we are going to create a footer template part.

48
00:05:35,000 --> 00:05:46,000
So firstly, we need to name it appropriately, in this case, a four column footer and then we can click create and this will take us into focus mode again

49
00:05:46,000 --> 00:05:49,000
and from here, we can start building from scratch.

50
00:05:49,000 --> 00:05:54,000
I'm going to take a shortcut and actually grab a pattern from the patterns directory.

51
00:05:54,000 --> 00:06:06,000
So make your way to WordPress.org, click on extend and select patterns and from here, you can select from thousands of patterns.

52
00:06:06,000 --> 00:06:16,000
I will select community contributions, click on footers and then you can search for the right pattern.

53
00:06:16,000 --> 00:06:27,000
Once you find a pattern that appeals to you, you can copy the pattern, return to your website and paste

54
00:06:27,000 --> 00:06:31,000
and now you can start modifying it to meet your needs.

55
00:06:31,000 --> 00:06:41,000
And once updated, we can return to the patterns area and you will notice that your new footer is part of your existing template parts

56
00:06:41,000 --> 00:06:44,000
and you can add it to any template.

57
00:06:44,000 --> 00:06:59,000
When you select manage all template parts, you will be able to rename and delete custom template parts or clear the customizations of template parts that were provided by your theme.

58
00:06:59,000 --> 00:07:06,000
I trust you now feel comfortable editing your templates and creating a header and footer for your site.