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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//Shortcode to create a content block which we can re-use throughout the site. //Code from https://pagecrafter.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:
1 |
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:
1 |
[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!
28 Comments on “How to Add Reusable Content Block in X Theme & Cornerstone”
Hello Brian
I’ve tried to make this work, but my site just shows “[content_block id=”350″]” without showing the content of that page.
I’ve added the code to my theme’s functions.php;
I’m using the X theme and designing a front page with Cornerstone;
Am sure that the page id is 350.
Added the shortcode inside of a text-element.
Any idea as to what might be wrong?
Hard to say without seeing your specific site. make sure you’ve added the function in to your file I suppose. Otherwise I’m not sure!
Hi Brian, by using above method I had created a page, but indeed my page doesn’t got indexed from Google. So what will be the issue can you please let me know
Those types of things take time, and whether or not Google Indexes something is really related to a host of other issues.
Hi Brain
Thank you for this wonderful post. Can I put Global Blocks shortcode in such a way so that all posts (not pages) show the content just above the comment box (or, you can say just below the content).
Thanking you
SL.
Hi Brian,
I’ve been trying to find a way to incorperate the content of a latest blog-post on a certain page (both build with cornerstone/ pro theme) using a custom shortcode. I can’t get it to work, it just outputs {{base64content “” }}. If I write the content of the post with the classic WP editor it does work using get_the_content();
I’ve contacted support, but they say it’s not possible due to the way cornerstone wraps content in all sorts of divs.
Then I found your article doing almost the same thing (I don’t know if you are using xtheme or pro?), so I tried your method with a simple new page created in cornerstone and added your shortcode to a text element on another page. It also just outputs {{base64content “” }}.
Could it be that this only works in the old xtheme with cornerstone as a plugin?
Here’s the code for my custom shortcode:
function latest_post_content_shortcode_handler( $atts, $content = null ) {
$args = array( ‘posts_per_page’ => 1 );
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
$output = get_the_content();
// tried $output = the_content(); does the same …
// tried $output = x_get_view( ‘global’, ‘_content’ ); does the same …
$output = get_the_content();
return $output;
endwhile;
endif;
wp_reset_postdata();
}
add_shortcode(‘latest_post_content’, ‘latest_post_content_shortcode_handler’);
If you know a way to make this work, I would be most interested!
regards,
Richard
So easy. This will be a favorite. Thank you!
i created a form with visual form composer and i want to add the code to my cornerstone plugin but i have tried several ways and it dont work. i was searching for a solution and i found this post. can you kindly help me on how to make that work in my cornerstone plugin?
\
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
instead of “post_id” you may want to try “p”. According to the WP_Query codex page, that’s how you specify a post ID! You MAY have to specify the custom post type as well, but I’m not really sure.
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
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();
}
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.
Is the page you have with the footer you created private? Because that would do it.
You, sire, are amazing. I indeed made this mistake. Thanks a lot !!!
Thanks Brian, Love your work!
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
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!
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?
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!
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 !! 🙂
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.
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?
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.
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 🙂
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!
HI Brian, I assume that the page you created will show up in search results. Have you thought about this?
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!