Display Shortcodes for Templates

Why Display the Shortcode?

As of Beaver Builder version 1.7, we are able to display templates anywhere in a site using the new shortcode feature.

There are a couple of ways to use the shortcode feature, and you can see this article here for more info, I find the ID more reliable than using the slug.

So what does the shortcode look like?

[fl_builder_insert_layout id="123"]

So to use that, all we need to do is create a template, and then replace the ID of 123 with our desired templates ID.

Default Admin Layout

Default Admin View

When we look at the default admin view of looking at the templates (you may need to go into Beaver Builder to enable) you can see we cannot see the slug or ID, we would need to edit the template, and then pull the ID from the web browsers URL field. Not the best practice, especially for non-savvy WP users.

The PHP

Lets add the PHP to our theme, if you do not know PHP, don't panic as all you need to do is cut and paste the code.

So what does the PHP look like?


function fl_templates_columns_id($defaults){
    $defaults['wps_post_id'] = __('Shortcode');
    return $defaults;
}
function fl_templates_columns_id_columns($column_name, $id){
        if($column_name === 'wps_post_id'){
                echo '[fl_builder_insert_layout id="'.$id.'"]';
    }
}
add_filter('manage_edit-fl-builder-template_columns', 'fl_templates_columns_id', 5);
add_action('manage_posts_custom_column', 'fl_templates_columns_id_columns', 5, 2);

What the code is doing is creating a column labelled 'Shortcode', it is then retrieving all the post ID's and then displaying it wrapped in the shortcode function.

From there it is filtering out all posts to find the post type 'fl-builder-template' which is the official name of the Template field, and displaying the column

Where do We Add the PHP?

Now that we have our PHP, where do we add it?

Hopefully you are using a child theme, and all you need to do is paste the code into your themes functions.php.

Why use a child theme?

Well, you can add this snippet directly into your themes core functions.php, however if you update the theme, you will lose the code, plus it is considered best practice to never edit core files.

The Finished View

** BONUS **

Ok, so always trying to achieve the best I can I have extended this snippet of code even further.

I have added a button to post editor that will allow you to insert a template simply by clicking the button and then entering the template ID.

Rather than try to share all the JS and PHP functions, I have bundled the entire lot, including the code above, into a nice neat plugin.

Post Button View
Template ID Popup

3 Comments

  1. Gerard on January 29, 2016 at 10:57 am

    This is great. Thank you so much for sharing this!

  2. Mark Eustace on January 30, 2016 at 2:04 am

    You are a legend Jon – fantastic work!

  3. Mark Eustace on March 14, 2016 at 4:32 pm

    Done it again Jon – fantastic work as always

Leave a Comment

You must be logged in to post a comment.