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:

//Shortcode to create a content block which we can re-use throughout the site.
//Code from http://brianjohnsondesign.com

function bjd_content_block ( $atts ) {

$custom_query = new WP_Query(array(
   'page_id' => $atts['id']
));
while($custom_query->have_posts()) : $custom_query->the_post(); 
	 $content = get_the_content(); 
	 return $content;
 endwhile; 
wp_reset_postdata(); // reset the query 

} //bjd_content_block

add_shortcode( 'content_block', 'bjd_content_block' );

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:

example.com/wp-admin/post.php?post=1234&action=edit

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:

[content_block id="1234"]

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 Lakeville, 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.

20 Comments on “How to Add Reusable Content Block in X Theme & Cornerstone”

  1. Hi there, is it possible to include the content of a custom post type (which supports cornerstone)? Because now I believe it’s only possible to include from other pages. It would be nice to have a separate post type for creating blocks and then include them into the pages. I tried changing ‘page_id’ => $atts[‘id’] to ‘post_id’ => $atts[‘id’] but no luck.

    Thanks

      1. Thanks, i tried replacing it with “post_id” by “p”. No luck so far. Where can I specify the custom post type?
        My code looks like this now:

        function bjd_content_block ( $atts ) {
        $custom_query = new WP_Query(array(
        ‘p’ => $atts[‘id’]
        ));
        while($custom_query->have_posts()) : $custom_query->the_post();
        $content = get_the_content();
        return $content;
        endwhile;
        wp_reset_postdata();
        }

        Thanks

        1. It would just go in your arguments array. So in the case of your code, it might look like:

          function bjd_content_block ( $atts ) {
          $custom_query = new WP_Query(array(
          'p' => $atts['id'],
          'post_type' => 'custom_post_type_name'
          ));
          while($custom_query->have_posts()) : $custom_query->the_post();
          $content = get_the_content();
          return $content;
          endwhile;
          wp_reset_postdata();
          }

  2. Hi Brian.

    Thanks a lot for this piece of code. Unfortunately, it only works for me when I’m in Admin Mode. Once I log out, the footer I created doesn’t display anymore. An idea to solve this ?

    Anyway, thanks a lot.

  3. Hey Brian,

    This is brilliant. Thankyou.

    Do you know how to make this work feeding a page constructed with cornerstone back into a cornerstone raw content element on another page?

    I tried changing get_the_content for the_content as the shortcodes were all showing as text on the page. It worked on an non-cornerstone page. but when added back to a cornerstone page I get a memory error as below?

    Fatal error: Allowed memory size of 94371840 bytes exhausted (tried to allocate 65552 bytes) in /home/oicu812/silverski.2thepixel.com.au/wp-includes/shortcodes.php on line 378

    Any advice on this would be awesome.
    Thanks
    Kyle

    1. Hi Kyle,

      I found that it doesn’t work in a “Raw HTML” element, you’ll need to put it in a text element!

      I couldn’t tell you what the fatal error was… Might be a different issue!

  4. Hey Brian, I made a nice “footer” which I saved as a block template in Cornerstone, so I can slap that into any page I want it to appear, but my site is a WooCommerce site and I wanted this same block to appear below every single product page as well, I got so far as to using your above technique to insert the code for the block template inserted below every product page. by using your function to create a shortcode and inserting the shortcode directly at the bottom of content-single-product.php of WooCommerce file. But alas, the code appears raw and does not render in Cornerstone, can you throw some ideas how to get it to render?

    1. I believe you’re going to need to look into how WordPress displays content versus raw HTML. Are you using the_content()? I think there are filters associated with that which will properly render using cornerstone. Otherwise, you may need to look at other ways to make sure it gets filtered as regular content!

      1. Hey Brian, it turns out nothing else needed to be done except manage the nesting of quotes. It turns out my code had 4 levels of quotes, all using standard ”

        Just as soon as that was rectified, everything was awesome…thanks to your little piece of powerful code up there.

        Thanks a million !! 🙂

  5. As an addition to my last comment: Using the adaptive block as a footer also introduces a second scrollbar throughout the entire page. There really isnt much to scroll with this bar, but obviously its far from ideal. Any suggestions on how to remove this would be more than welcome.

  6. Hey Brian,

    It works! However, it introduces quite a bit of white space above and below the new adaptive block. The whitespace above is fixed by editing the margin of the row to a minus value, but i cannot get rid of the bottom whitespace. Note that we are trying to use it as a footer, so ideally the page ends right after the new block.

    Any ideas?

    1. Do you have a location I can take a look at where you are seeing this? I’d like to troubleshoot it a bit! My guess is that a CSS rule targeting just that content would do the trick, but I’d have to see what you have going on to be sure! It would be good to add that to the tutorial as well.

      1. Sure thing! Its only active on one page now, for debugging: https://storymail.nl/customer-journey/
        The dynamic block starts from the gray area in the bottom, just above contact all the way down to the end.
        As you can see it introduces a bit of white space at the bottom, but more importantly it introduces a second slider bar on the right of the entire page. I can live with the white space, but sadly the extra slider bar makes me not use it in its current state. I really hope we can find a solution 🙂

        1. Ah, I found the issue regarding the 2nd scrollbar. If I disable the minus margin on the bottom (which I added to try and eliminate the white area at the bottom) the slider dissapears. Thats one issue solved!

  7. HI Brian, I assume that the page you created will show up in search results. Have you thought about this?

    1. It could, yeah. Depending on what you have on that page, though, it could be more or less of a problem. One solution could be to simply set up a redirect on that page to the most logical other location. Easy!

Leave a Reply

Your email address will not be published. Required fields are marked *