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.
- Download the plugin from the bottom of the page
- Log into WordPress as admin, go to Plugins > Add New > Upload Plugin and browse for the file you’ve just downloaded
- Make sure you Activate the plugin — THAT’S IT 😀
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.
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.
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 UnwrapThe 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 MethodThe 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.
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.