Child Theme Authoring: Adding Custom Templates

Child Theming

Last Updated: for: 1.5 Time to Read: 6 minutes

Custom page templates are any special layout you wish to add to the template options in the Page editor.  Custom templates might include various static archive layouts,  custom widget areas, or  support for a special post type introduced in a plugin, such as custom WooCommerce shop layouts.

In this section we will cover adding of custom templates, versus overriding templates that already exist in Layers or a Layers plugin.

  1. First, determine which core template you want to base your layout from. In most cases, the page.php or archive.php is used depending on if the content is singular or a list of posts, but you might choose archive-product.php or single.php to add a custom widget area below the title on specific views, for example.
  2. Copy the content of your chosen template into a new PHP file.
  3. Replace the heading on your copied template with your custom header, or ensure the Template Name:  attribute is added before get_header()
    • Each new page template Must start with a header identifying the page template name. This name appears in the drop-down on the page editor.

From here, the markup should follow the original template in terms of core structure and CSS classes, hooks etc. You may add custom HTML in addition to this structure, or insert custom classes, though it is best to see if it can be done using hooks or filters instead.

Reference: page.php, archive.php

Example of a customization added to the default markup borrowed from archive.php:

 Line 6-10:  Page Title

Rather than add the page-title  partial to this template to display the Page Title banner, we want to set an H1 heading tag and not output any breadcrumbs or excerpt. See Setting Static Page Titles for more examples.

 

Line 11: Custom container class

A custom class of dynamic-portfolio  is added to the main container wrapper that allows us to add a background color and margins without affecting the framework classes. This could also be done by selecting .page-template-your-template-name-php .container  but this method is far cleaner and more semantic.

Line 12: The Grid

Reference Layers Grids

We want to display our portfolio archive in a grid format, so we need to wrap the loop in

Line 13-21: The Loop

Each template must contain a loop if it intends to output the content of a post or a feed of posts. You can skip the loop if your template does other things like output widget areas exclusively.

In our portfolio example,  we need to show a custom post type, requiring the custom query on line 19. We use wp_query and a set of arguments to grab things like the post type and an infinite number (vs pagination).

The custom query variable is used to modify the loop

Line 22: Article Markup

You can place the markup that defines each individual portfolio post in your list directly inside the loop, or you can place it into a partial and call that partial with get_template_part()

In this example, our partial is inside the theme folder under partials/dynamic-portfolio.php

The following demonstrates how you can adapt an overlay grid style from the Framework pattern page to a post list:

Line 1: Wrap single posts in an article tag and include the WordPress core post ID  and post_class()  handlers so they get their auto-generated classes. You can insert your own classes into post_class() as shown here to set acolumn  width of span-4  from the Layers Grid framework, which sets up a 3 column grid (or 4/12).

Line 2: Link the whole thing to the post it represents. Using $portfolio  here on the_permalink() ensures we grab the permalink for this specific post in the query. The rest comes from the framework pattern we copied in to get the overlay grid style thanks to thumbnail  and with-overlay  classes.

Line 3-16: The rest is the overlay grid style from the framework, using WordPress templating functions to pull in the link, title and excerpt.

Refer to the Framework Grids Reference for examples of span and grid classes

Finishing up

The remainder of your template is closing off your queries and HTML. At the very end, you must call the site footer:

If you wanted to create a page template that included widget areas or sidebars, you may include them using any of the Layers Sidebar functions or you would register a custom sidebar and output it using a core function like dynamic_sidebar() .

Our portfolio example is full-width by default. Here is how the content markup would look with a sidebar:

Reference: archive.php

We insert the left sidebar on line 3, then wrap the loop in a div that sets the layers_center_column_class(). This ensures we get a blog-style layout before the post grid is output so the sidebar can sit in the right place.

See How to Add Custom Widget Areas to Layers for a detailed walkthrough on setting up custom widget areas.

 

 

Again, hooking should be used wherever possible to modify existing templates in Layers. There are some cases where you just need to change the template itself, which requires an override. Reasons you might do this are needing to add or remove HTML in a location that is not hooked, adding or changing classes or functions where they can’t be changed through filtering, or adding widget areas.

All you need to do to override a template is to copy it to your child theme directory using the same file structure as the parent. For example, main template files found in the layerswp theme root folder go into the root of your child theme, and those found in the partials sub-folder can go into a partials sub-folder of your child theme. You do not need to add or change template titles, only add your custom code or changes.

There are a few things you should NOT modify in an existing Layers template:

  • Do not change heading types. Layers works extensively with SEO experts to determine the most effective heading and element structure, and headings are directly connected with framework typography styles. (ie don’t override templates to change all  H3  to H1  )
  • Do not change HTML elements/break away from the Layers framework structure (ie don’t override templates to change all <sections>  to <div>  etc )
  • Adding HTML elements is OK.
  • Do not remove default classes or function calls inside the element wrappers or you risk breaking the framework functionality or settings. Adding classes or functions is OK.
  • Do not use query_posts() to modify the default query.

As mentioned in the best practices section of this guide, Custom Post Types are considered back-end functionality and should not be introduced through a child theme. Add them to a Layers Extension plugin instead, and package the plugin with your Child Theme, or offer it separately as an add-on.

See Create an Extension: Adding Custom Post Types & Page Templates