Tutorial - Template Parts

[wparasae]

Topic Description

The tutorial "Template Parts" (recorded with WordPRess 5.9) needs an update - upon review, the script needs a re-work.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• https://learn.wordpress.org/tutorial/template-parts/ (old tutorial)

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[wparasae]

Old Script:

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.

[wparasae]

Revised:

If you visit a well-designed website, you'll notice that one of its strengths is in its consistency: 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, no matter where they are on a website. To get this effect, do web designers they have to re-create their headers, footers, and sidebars on every page in their website? The short answer is: No! With WordPress block themes, web designers use a feature known as "template parts".

By the end of this tutorial, you'll be able to
-Describe what template parts are and how they work
-Edit a template part
-Remove and add a template part to a template

What are template parts?
Template parts are a point-and-click, no-code way to create, edit, and use the same headers and footers across a website automatically, applying them to any post or page template they choose. It allows you to design a header and footer ONCE, and gives you a single place to make future changes, such as if you add a new page, want to change the colors with a company rebrand, or completely overhaul the look and feel of your website.

Finding Your Template Parts
To begin, head to your WordPress dashboard, hover your mouse over "Appearance", then click "Editor." Note that this feature is only available with WordPress block themes. From here, click on "Template Parts". You will be taken to a list of a theme's existing template parts--some block themes provide more or fewer options, but almost all come pre-packaged with a header and footer like you see here in the Twenty Twenty-Three theme.

From this screen, you have the option to edit an existing template part by clicking the pencil icon next to an existing template part, or create a new one from scratch. Let's start by editing a header. Most headers provide at minimum the site title and navigation menus, to make it easy. From here, I can use the site editor to modify my header template: watch as I add a site logo and a site tagline to this header. Once I save it, this change will be applied to every template that uses this header.

I can see this if I click on the icon in the top left-hand corner, then select 'templates'. Let's look at the home page template; you can see here that the changes I made to my header have been automatically applied to this page template. I can see which template part is being used by using my list view.

I click the list view, and you can see the list of all the blocks that make up this existing page. How do you know what is a template part, and what's a standard theme block, only used on THIS template? Template parts have a slightly different icon than the theme blocks that make up this template, and will be highlighted in purple.

Caution! You also have the ability to edit a template part in any regular template. The changes you make to a template part will also be made across other templates that use this theme; to avoid this mistake, always use your list view and ensure you are not working within any purple-highlighted text.

What if you want a different header on, say, your home page, but you would like the rest of the website to have a standard header? In this case, you would want to make a new template part. I head back to the template parts dashboard by clicking the icon in the top left, template parts. From here, I can click the plus sign to create a new header--I name it, "Front Page Header", select the "Header" template part, and then create. This will not automatically take me to my new header, so I need to open up my menu again, select 'template parts' and then select the pencil button next to my new template part. I'm now ready to create my new header. While I can do this from scratch, I can also use patterns to help me design, which saves me time. Watch as I pick a pattern; I will then edit this so it looks the way that I want.

When I'm finished, I have [describe the header pattern I picked]. I save my work, then head back to 'templates'.

Removing and Adding Template Parts to Templates

Now, it's time to remove an old template part and add a new one.

I click on the 'Front Page' template part. Using my list view, I locate my header template part. I select the three dots next to it, and select 'remove'. I would like to add this above my content, so I select the three dots next to the top block in my list view, and select 'add before'. From here, I can either use the plus sign, or type "slash template" -- from here, I am presented with a list of available template parts. I select the one I want to create, and voila! My new header template part has been added.

You can use this process to create, edit, and use other template parts, such as for footers or general other templates, such as if you wanted to create a sidebar. Remember, the goal is to design once and edit once, and have your changes automatically apply elsewhere. It's a time saver!

[wparasae]

Resources for this tutorial: https://docs.google.com/presentation/d/1lNL4XsE9ddiDC0O6OyX1NRi_nRJ82k6ve9sK9nAHmI0/edit?usp=sharing

[wparasae]

Ready for review!

https://drive.google.com/file/d/1negPXsmydxQqTY4qI7qNiKiVSQkd3dVe/view?usp=sharing

Specific Feedback:

1. There are a few bird whistles I think? Please let me know if you hear any and where they are so I can remove them. Or any other sound quality issues!
2. I made the executive decision to embed a template part within another template part, since that is something that happens in the Twenty Twenty-Two theme that used to throw me off. Is that part clear? Should I include it or omit it? I think I need one more slide that perhaps shows this.
3. Any other suggests, comments, or concerns?

Thanks, ya'll!

[westnz]

Love the explanation of template parts and the graphics you used to help visualise what you are talking about. Very clever!

The sound quality is good!

The part where you were embedding a template part within another template part was a bit confusing at first, but it did click for me at the end. Clarifying this a bit more is a good idea.

One suggestion is to slow down some of the transitions.

Well done, Sarah

[jasonsnow12]

This was very instructive. I didn't have any problems following along, and learned about the nested template parts (such a cool feature!).

[westnz]

Recording: https://learn.wordpress.org/tutorial/using-template-parts/

[courtneyr-dev]

Update for 6.3 https://make.wordpress.org/core/2023/02/24/whats-new-in-gutenberg-15-2-22-february/#edit-templates-and-template-parts-fearlessly-with-revisions

https://make.wordpress.org/core/2023/03/22/whats-new-in-gutenberg-15-4-22-march/#updated-template-descriptions

[wparasae]

This tutorial needs to be updated for 6.3; I have removed myself from this issue to allow someone else to work on this. :) If I find time to work on this in the next two weeks, I will comment below and happily reassign myself to this issue.

[westnz]

LP.Template.parts.mp4

[digitalchild]

@westnz clear and concise as always. The only feedback I have is below.

• 0:54 Question mark screen, would be good to include "What are template parts" as part of the slide
• The video ends without an outro/conclusion, is this intended?

[westnz]

Thanks @digitalchild 👍

[quitevisible]

@westnz Nice coverage of Header & Footer template parts. No other issues noted, aside from the abrupt ending mentioned by @digitalchild

Feedback:

I am wondering if there's a tut or reference elsewhere (aside from docs) about the relationship/difference between templates, template parts, and patterns? That could be helpful to note.

Another good one!

[SierraTR]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [x ] Learning outcomes/objectives are clear.
• [] Technical concepts introduced in the content are accurate.
• [x ] The speed of demonstrations are easy to follow.
• [x ] The narration audio matches what is shown visually.
• [x ] Spelling and grammar are correct.
• [x ] Sound quality is consistent throughout the video.
• [x ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [x ] Media assets are all in the public domain (CC0).

Another good job, Wes. Only comment is that it ends a bit abruptly. Maybe add a last slide with sources of additional information about template parts?

From your video I learned that the purple color in the list view means the content is synced. I was under the impression that it meant you were working on a template part. Since template parts are always synced, they are always shown in purple. But, as you point out, a synced pattern also displays in purple. Thanks for pointing that out.

[westnz]

Thanks @quitevisible
This tutorial will flow from a tutorial about templates. There is also a tutorial about patterns. They all form part of the Beginner User Pathway, so hopefully, viewers will see the full picture as they progress.

[westnz]

Thank you for the feedback @SierraTR
Was this block meant to be without a tick? :"[] Technical concepts introduced in the content are accurate." Was that an accident or was there anything else you wanted to point out?

[westnz]

Updated and published on Sensei as part of the Beginner User learning pathway.