Today we’ll take an in-depth look the template system found within Conductor. You’ll learn how to create your own Conductor templates, modify Conductor templates safely, and how to use Conductor template hooks.
It is important to note that the following code snippets will function if placed in a child theme, however they are only presented as examples and may not be ready for production environments. If you’re planning on using these examples in a plugin or theme, you’ll want to make the necessary modifications (i.e. prefixing functions and variables, optimizing code snippets, etc…).
The Conductor Template System
The Conductor template system has been around since Conductor’s initial release. We wanted to have an easy way for theme developers and users alike to create their own, or modify, Conductor templates as necessary.
Conductor templates reside in the /templates directory within the Conductor plugin folder. However, Conductor will check if the current theme or child theme contains the templates first. If Conductor finds a template inside of the current theme, that template will be loaded in place of the default Conductor template.
By default Conductor will look inside of the /conductor directory of the current theme for templates. At any time, you can copy a template from from Conductor into that directory, modify it as necessary, and Conductor will load that template. You can also create your own templates in this directory and include them as necessary.
Our template system starts with the template_include filter. We hook into this filter in order to load conductor.php, the main Conductor template file. This happens on content that has been “conducted”. This file contains all of the logic necessary to output the built-in Conductor content layouts.
The conductor.php template contains actions which we hook into to output the different content layout/template parts.
Each of those actions have hooks attached to them (which can easily be removed if necessary) to load the Conductor template parts.
Conductor Template Parts
The second part to the Conductor template system is the conductor_get_template_part() function. This function is a pretty robust function and not only contains logic to load the required templates, but also has the capability to pass data/variables to the requested template. Consider the following code snippet:
This line of code will attempt to load the content.php Conductor template, first looking in the current theme’s /conductor directory, and then looking in /templates inside of the Conductor plugin folder. If the function finds that the template exists, it will include(), require(), or require_once() it depending on the parameters passed. Here’s a more in-depth explanation of the parameters that can be used in this function:
Conductor Note Widget Templates
Conductor Note Widgets utilize the Conductor template system, so you’re able to create your own Conductor Note Widget templates, or modify existing templates by copying them into your theme’s /conductor/widgets/note directory.
Conductor Flexbox
Conductor Note Widget templates utilize the Conductor flexbox layout system. Conductor provides support for up to 6 columns within a “row”. Here’s an example of how our flexbox layout system works:
A Real World Example
You might be thinking, “why would I want or need to create my own Conductor templates?”. Well, as a developer, you probably already know that there are certainly cases where custom theme templates are necessary to achieve project goals. Let’s take a look at a real world example where custom Condutor templates helped us add filtering options to Conductor content layouts.
In August of 2014, Slocum Studio launched the new GuideRI website. GuideRI is known as the insider’s guide to Rhode Island. GuideRI utilizes Conductor content layouts for the “Explore” pages. These pages allow users to explore the surrounding area and narrow down their results by filtering content based on categories (taxonomies). We created a custom Conductor template for the filtering section on the top of those pages. Here’s how we did it.
First we needed to register the Filtering Area sidebars. The following code can be placed in the functions.php file inside of your theme:
We make use of the Conductor::get_conductor_content_layout_sidebar_id() function which generates a sidebar ID for a Conductor content layout.
A specific Conductor content layout can be passed as the second parameter, otherwise, the function will reference the current content layout when creating the sidebar ID.
Next we created the content-filtering-area.php template in the /conductor directory of the GuideRI theme:
Finally we loaded our filtering area template after the opening content wrapper element. We did this by hooking into the conductor_content_wrapper_before action found in the default conductor.php template. The following code can be placed in the functions.php file inside of your theme:
Our actual implementation on GuideRI differs only slightly from the code above. For instance, we have logic in place to only register the filtering area sidebars on the “Explore” Conductor content layouts.
We also take the OOP (Object Oriented Programming) approach and have all of our actions/filters inside of a PHP class file (we’ve also used this approach in Conductor).
However, the fundamentals of replacing or creating a new Conductor template remain the same.
Using Hooks Instead of Templates
The filtering area sidebar in the GuideRI example could have easily been output by using one of the Conductor template actions instead of creating a template. As always, there are many ways to go about solving this.
Bonus Templates
Oh by the way, Conductor also allows you to create a custom header or footer templates for use on conducted pages.
In your theme’s directory, you can create a header-conductor.php, footer-conductor.php, or both. These templates will be loaded on conducted pages only.
Wrapping Up
We hope that you have a better understanding of our template system after reading this article. Have you implemented custom Conductor templates or modified existing templates in the past? Let us know in the comments!