Template Parts

Description

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.

Objectives

After completing this lesson, participants will be able to:

  • Define the purpose of a template part.
  • Add an existing template part to your site.
  • Edit an existing template part.
  • Create a new template part.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

  • Activating a block theme
  • Using Appearance > Editor

Readiness Questions

  • 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?
  • Are you interested in personalizing a header or footer that can be used throughout your site?

Materials Needed

Notes for the Presenter

  • Be comfortable with the difference between the Template Editor and Site Editor.  This lesson plan utilizes the Site Editor (or simply the Editor).
  • Ask participants to either complete the exercise independently, or guide you through how to complete the exercise.
    • If not all participants have a computer, having them guide you through the exercise is a great way to ensure everyone understands the steps.

Lesson Outline

  • Review the function of a template part
  • Add an existing template part
  • Create a new template part
  • Customize a template part
  • Leveraging the template part focus mode

Exercises

Edit the Footer Template Part

Use your test/sandbox website to edit the Footer template part. Follow these steps in the video below or create your own example:

  1. Navigate to template parts and click on the footer.
  2. You will be directed to the Template Parts Focus Mode. Here you are able to only focus on the footer and also use the handlebars to shrink and enlarge the footer area to see what it will look like on other devices. 
  3. Clear your footer area and remove all the block.
  4. Add a three part Columns block.
  5. Left column: Add a heading which says Navigation and the Page List block.
  6. Middle column: Add a Spacer block and a Site Logo block. Center the site logo.
  7. Right column: Add heading which says Get in touch and three social icons. Change the alignment accordingly.
  8. Remember to save changes.

Assessment

Which of the following elements is NOT commonly used as a template part block?

  1. Header
  2. Most recent posts feed
  3. Footer
  4. Sidebar

Answer: 2, Most recent posts feed. Most recent posts feed is often found as the content of the site, which would not typically be managed by a template part block.

Existing template parts can be accessed from only the Template Editor.

  1. True
  2. False

Answer: 2, False.  Template parts can be accessed through the Template Editor or the Site Editor.

Template parts will be identified as such in the List View.

  1. True
  2. False

Answer: 1. True. Use List View when you’re editing a template to quickly identify the Headers and Footers in your content to edit.

Additional Resources

Example Lesson

The Template Part block is an advanced block and is used to organize and display your site structure. You can use them while creating and editing templates to manage blocks in areas repeated across the website. For context, this block is best used to create areas like your header, footer, and sidebar.

The purpose of template parts is to offer users the ability to add reusable sections of design or content anywhere they want. As with templates, your theme dictates which type of pre-installed template parts are available, but you merely have to click on Add New to create your own.

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 updates the blocks on every block template that includes the template part. So, if you change a template part in one place, it will change everywhere it has been used.

Accessing template parts

You can access template parts via the Site Editor, the same as templates. Make your way to the Dashboard > Appearance > Editor > Template Parts:

Accessing Template Parts via the Site Editor.  A red box around Template Parts in the Template List View.
Existing template parts that come with the TT1 Blocks theme. A red box around the header and footer template parts.

How to edit an existing template part via the Site Editor

  • Existing template parts will look different, depending on the theme you have chosen. 
  • Click on the WordPress icon at the top left of the Editor and make your way down to template parts.  
  • Select the existing template part you wish to edit.
  • Make the necessary changes and click Save at the top right once completed.
Editing the Footer template part via the Site Editor in the Template Part Focus Mode.

How to create a new template part via the Site Editor

  • If you prefer you could create your own template part from scratch.
  • Go to Appearance > Editor > Template Parts.
  • Click on the Add New button at the top right of your screen.
  • Name your template part appropriately and select the area where you want your template part to be displayed, and click Create. If you select General, it is not tied to any particular area.
  • Customize your template part and click ‘Save’ at the top right once completed.
Adding a new template part. A red box around the Add New button at the top right of the page.
The three options when creating a new template parts. You can create a General template part that is not tied to any particular area or other header and footer template parts.

Adding template parts to a template via the Site Editor or Template Editor

In order to add a Template Part block to a template via the Site Editor or Template Editor, click on the Add block button and select the Template Part block. You can also type / template part and hit Enter in a new paragraph block to add one quickly. In many cases, you’ll also see options to select types of Template Part blocks, like header and footer when searching for this block. You can search for the header or footer in the block inserter to insert the blocks or use the shortcuts /header and /footer.

After adding a template part, you can choose from existing parts or create a new template part.

Adding a template part via the Template Editor or the Site Editor.
Choosing an existing or new template part via the Template Editor or the Site Editor.

Choose an existing template part

Selecting the button ‘Choose existing’ opens a modal where you can search, preview, and select existing parts. These parts will depend on what your theme has provided and will also include template parts you have already created.

Choosing an existing template part using the Twenty Twenty-Two theme.

Creating a new template part

Selecting the button ‘New template part’ you will be required to name and create your new template part. Once you click on ‘Create’, you will be able to create your template part within the template you are editing.

Selecting a new template part. A red box around New template part on the right.
A red square around the popup box which requests you to the name the template part.

Managing template parts via the Template Editor

As mentioned, adding an existing or creating a new template part within a template, works the same via Site Editor and Template Editor. Remember, the Template Editor allows block editor users to edit and create templates that a page or post uses.

  • Select or add a post or page.
  • Open the block settings sidebar and navigate to the Page or Post Settings tab.
  • Under the “Template” section, select ‘Edit’ or ‘New.’
  • From there, you’ll be taken into template editing mode where you could add the Template Part block.
  • Select ‘Choose existing’ or ‘New template part.’
  • When you are finished editing, click ‘Save.’

Customizing template parts

After adding or selecting a Template Part block, you can customize it in various ways by adding additional blocks within it. To make it easier to find current template parts to edit, it’s recommended that you use one of the following options:

  • Use List View when you’re editing a template to quickly identify the headers and footers in your content to edit.
  • Use the template part focus mode described below.

Template part focus mode

To make it easier to focus specifically on editing a single template part, like a header or footer, you can use a dedicated mode that only shows an individual template part. There are a few ways to access this mode:

  • Select the template part in the Site editor > Click on the three dot menu > Select “Edit Header” or the respective template part name. 
  • Select the template part in List View > Click on the three dot menu > Select “Edit Header” or the respective template part name. 
  • From the Browsing sidebar > Navigate to template parts > Select the template part you want to customize.
  • From the Top Toolbar > Click on the three dot menu under “Areas” next to the template part you want to customize.

Replacing one template part with another

If the theme has more than one template part for the same area, you can use the Replace option in the block toolbar to replace the current template part with another. If you don’t see this option, this is because the theme hasn’t provided multiple template parts for the same area. You will also see any template parts that you have created yourself.

Lesson Wrap Up

Tip: 💡 Follow with the Exercises and Assessment outlined above.