How to Add Reusable Content Block in X Theme & Cornerstone

Working every day with X Theme and Cornerstone, I frequently find myself needing to re-use sections of my content on different parts of my website. While I know that I could save a block of Cornerstone content as a template and re-use it, the problem is that it wouldn’t update whenever I redid the master template.

So how do we solve this problem? With a custom shortcode, of course! Basically you will just be saving some basic code into your functions that will allow you to use a custom shortcode that will output the contents of an existing page. This page is where we’ll add all the content we need to re-use. This solution is extremely simple and light-weight.

Let’s get started! First, you’ll need to add the following code into your child theme’s functions.php file, right at the end:

Tired of dealing with your slow WordPress website? Email me at brian@pagecrafter.com and mention the code #FreeHosting10 for two free months of lightning-fast WordPress hosting. We will even migrate you for free!

Easy!

Now, just set up a new page on your website. It shouldn’t matter too much what you specify as the template, because only the content will be reused. I recommend setting it to the template of all the pages you’re going to add this to, so that it’s easier to visualize. Add all of the content you’re going to want repeated directly to this page. For our purposes we’re using Cornerstone, though there’s actually no reason this shouldn’t work for regular content as well.

Once it’s ready and published, from the backend edit screen, take note of the page ID. Usually the address will be something like:

You want that number, in this case ‘1234’.

Now all we have to do is add our shortcode to the page we want this to appear! I’ve found that you want to put this in a “Text” element by itself. A raw HTML element will not render the Cornerstone code! In my example, the shortcode would be:

Voila! That block will now appear on that page no problem, and all Cornerstone elements will even be rendered properly. Every time you update the page with the content block, it will be updated on all pages using this shortcode. Pretty nifty, huh?

What if my content is supposed to be full-width?

Great question! If you have sections and content that need to be full width, all you need to do is go to the “ROW” settings for the row that contains your text element, and for “Column Container” choose “OFF” and for “Marginless Columns” ensure “Off” is selected as well. Make sure you save!

I’ve found that sometimes this setting doesn’t take effect properly, so you may want to toggle it on and off a few times and save between each.

Also note, that the page clearly needs to be set to one of the templates with “No Container” otherwise none of your content will be full-width. That applies to all pages though and is not unique to what we’re doing here.

Let me know if this works for you in the comments!

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.