Recently a client project required that we create a solution for the following problem — we needed a way to create reusable “live templates” that could be included across our Cornerstone posts and pages, and that could be updated from a single location. This is essentially what the Cornerstone Live Templates plugin is attempting to solve in straightforward way, yet totally congruent with the way WordPress and Cornerstone work.

Since the original version, we’ve made a few improvements and added more features so the end result is actually fairly intelligent and adds some flexibility. In theory the integration with Cornerstone can be much tighter as Themeco opens up more APIs to the Cornerstone builder (e.g. ability to interface with the existing templating system based on pages and blocks). Otherwise you’re looking at “hacking” their otherwise brilliant interface — something they understandably frown upon.

Quick Navigation

Installation

  1. Download the plugin from the bottom of the page
  2. Log in to WordPress as admin, go to Plugins > Add New > Upload Plugin and browse for the ps-clt.zip file you’ve just downloaded
  3. Make sure you Activate the plugin
  4. ImportantAfter the plugin is activated go to Cornerstone > Settings and type “Live Templates” in the Allowed Post Types area, then Update

Usage

The plugin adds an entry named “Live Plugins” right under the Cornerstone menu item.

The “Live Templates” section allows you to add, remove and modify Live Templates — just like you would any other WordPress Post or Page.

For best results, when creating a Live Template it’s recommended you use Cornerstone, and only include 1 Section (with unlimited Rows, Columns and Elements). This is only a suggestion, you can try multiple sections and also use plain HTML and/or shortcodes in your Live Templates.

Once your template is saved, go to your Post or Page and edit with Cornerstone. Go to the Elements tab, and search for “Live Element” — this new element will allow you to add live templates.

Element Usage


Choose a Live Template

Here you can choose from a list of published Live Templates. Once you select a template, the element will be updated on the fly just like any other Cornerstone element.

Section Unwrapping

If your Live Template contains only plain HTML and/or shortcodes, you don’t need to bother with Section unwrapping. However, if your Live Template was built with Cornerstone, the end result after placing a Live Template on your Cornerstone page — will be a Section within a Section. Depending on your preference, you may want to get rid of the parent Section. There are two ways to accomplish parent Section unwrapping:

  • 1. JS Section Unwrap
    The first method is the quickest and it uses JS to unwrap the parent Section. Cornerstone won’t display the unwrap live, however if you check the post or page itself after save, the parent section will be unwrapped.
  • 2. Zero Method
    The second method is manual, and requires you disable the Column Container on the parent row, and zeroing out the margin and padding on the parent Section. The benefit is that this method will work on all devices.

Debug Mode

The debug mode feature can be useful when you are trying to identify formatting or styling issues. When debug is on, the shortcodes or source of your Live Template will be displayed, including the additional ID, Class and Style attributes you’ve added to the Live Template element itself.

ID, Class and Style

The ID, Class and Style attributes add an extra layer of flexibility to your original Live Template. The attributes get applied to the Live Template depending on its content. If the Live Template includes only plain HTML and/or shortcodes, the containing div will get the ID, Class and Style attributes. If the Live Template was built with Cornerstone, the attributes will be applied containing Section of your Live Template. Also, if the Section already contains Class and Style attributes, the new attributes will be merged (just like in CSS). The only distinction is the ID attribute which replaces the original’s ID.

Video

Note
The video covers everything from a demo, installation and usage. The video is also pretty unorganized and unedited so you may hear a few “ah and uh”`s :).
Download v1.1

Cornerstone Live Templates

This is the full plugin without restrictions or upsells.
DOWNLOAD NOW
Upgrade Instructions
  1. Deactivate AND Delete the old plugin – don’t worry your Live Templates will be safe
  2. Upload the new ZIP and Activate
404 errors
  • Yoast: If you have Yoast SEO installed and you are getting 404 errors when attempting to edit a Live Template please disable Yoast SEO and re-enable it. There is a lingering permalinks issue that may have been fixed with this update, but at the same time we need further testing — the workaround is easy however
  • Permalinks: Similar to the above issue, take a look at your permalinks settings and save them again
Changelog v1.1
  • Added new Cornerstone Live Element icon
  • Fixed (most) scenarios where the Live Templates are unavailable to the Cornerstone element
  • Fixed WordPress Multisite compatibility
  • Added restrictions on publicly querying the CLT custom post type as well as restrictions on accessing the template on the front-end (if you’re not an admin it will redirect to the homepage)