WordPress Templates 101

WordPress themes and templates are on the frontlines of frontend development. Why? Because every theme contains 12+ key  templates and style codes that determine the layout and design of a WordPress website. Here is the diagram of some of the key templates that shape the look and feel of a WordPress website:
There are 6 things to note about a theme and its standard templates as shown above:

  1. This is the Classic Template layout undergoing profound change with  Gutenberg Full Site Editing just added to WordPress 5.9 as Core routines;
  2. Each shown template is for now part of FSE and is driven by  PHP and/or Gutenberg Block template code;
  3. The relative positioning of the code templates has been a standard but is currently subject to change;
  4. Users of the Classic Template  can customize some of the templates [Header layout and colors, sidebar position and width, content area width, etc] through the Theme – Customizer command plus new 3rd party Theme Builder tools
  5. Traditionally the content area has been where the Classic Visual Editor , PageBuilders, and the Gutenberg editor add UI components and functional features to posts and pages. This is also changing as PageBuilders and the Gutenberg editor now have access to the content of headers footers, sidebars and popups appearing on a website;
  6. Traditionally the size, relative positioning,3D layout status/visibility, and responsive breakpoints of all the templates areas have been locked into control by PHP code or specialized coding.. This is also undergoing rapid change.

With Gutenberg 5.9 FSE versus competitive ThemeBuilding tools from Beaver, Divi, Elementor, Kadence and other popular PageBuilders, the scramble for template leadership and management has dictated rapid change. This review will look at the evolving role of  templates in WordPress.

Gutenberg: The Temple of Templates

Gutenberg has spawned the most new templates in the past 2-3 years. – 5 overlapping  template types.But  all the popular PageBuilders/Themebuilders like Beaver, Divi, Elementor have had templates for more than 5 years sporting  sophisticated features for local and cross website usage. Finally there is a group of devoted template providers that offer the same template designs for use with different Pagebuilder and/or Gutenberg code.

However, Gutenberg Block  templates have two key advantages. First, with FSE-Full Site Editing, Gutenberg Templates have become part of the WordPressCore, so all WordPress users will have immediate access to the Gutenberg Templates. Second, any Gutenberg Block can be used in Gutenberg Templates but there are limitations on  Beaver, Divi or Elementor Templates use in GutenbergBlocks. Also it is dificult/impossible to use Beaver, Divi, Elementor and otherPageBuilder components and code interchangeably.

This is the basis for the Gutenberg Block Advantage. The downside is that 3 years after its intro the Gutenberg Block Editor cannot match any of the top PageBuilders  for speed and ease of  page design, stylng, and  layout. Worse, in quick simple posts, the Gutenberg Block Editor is a poor second to the Classic Editor[keep it around for quickposts and pages: PS: Gutenberg advocates say the Classic Editor is available as a Gutenberg Block but then cripple its styling options]. So this review of templates will start with the Gutenberg templates

Reusable Blocks –  is easiest way to create a Gutenberg template from one or more adjacent blocks on a post/page/custompost type. Once created the reusable block can be used again  anywhere on the website and exported to external websites for reuse. Also, the reusable block can be edited centrally from a list of active reusable blocks or can be edited live where used on a page/post/CPT. But be careful – any change to a live Reusable Block on a page/post/CPT will be duplicated in everyuse of the Reusable Block on the website.

Reusable Blocks How to
Hidden content
The Reusable Block in WordPress Block editor is a content block that you create, save and reuse later as per your need. It allows you to save a block or group of blocks, which you can use later on any post or page on your website. And you can even export reusable blocks and import them to another website. If you often use the same content on your website, the reusable blocks will save you a ton of time and effort.

When should I use a Reusable Block?

Here is a look at how to create Reusable Blocks. Click on the Group block [i also t could be a Cover, Columns, Section or manually selected set of adjacent blocks] which you want to copy and make into a  Reusable Block . To start the process  click on the three-dot menu (kebab menu) and select the “Add to Reusable Blocks” option.

Shows a post with text highlighted, and in the kebab menu, Add to Reusable Blocks has an arrow pointing to it.

Create another post/page where you want to insert it. Click on the plus icon in the top-left toolbar, visit the “Reusable” tab and insert a required Reusable Block here (what you have created earlier).

Block inserter > Reusable > Call to action reusable block displayed

Get more detailed info about the Reusable Block lesson plan and Workshop.

Pin It on Pinterest