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.

Quick Navigation

Installation

  1. Download the plugin from the bottom of the page
  2. Log into WordPress as admin, go to Plugins > Add New > Upload Plugin and browse for the file you’ve just downloaded
  3. Make sure you Activate the plugin — THAT’S IT 😀

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.2

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 / not found errors
Permalinks: Seems like a lot of plugins that add Custom Post Types, also implement a “Reset Permalinks” option, because these things can cause problems. The fix is simple, go to Settings / Permalinks and Save them again. If you have Yoast SEO installed you may also want to disable and re-enable that plugin. These actions fixed 100% of these issues thus far, but we’re taking other bug reports on the page.
Changelog

V1.2
  • Removed the need to add “Live Templates” under Cornerstone Settings upon installation. By default all “Live Templates” will be editable with Cornerstone.
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)