Use shortcodes in your layouts

WordPress shortcodes are macros that can create markup dynamically. For an introduction to WordPress shortcodes, see https://codex.wordpress.org/Shortcode.

This article refers to shortcodes from two sources:

• Shortcodes that come from outside Page Builder
  Examples are shortcodes that are provided by other plugins to accomplish some action.
• Shortcodes that you create for any WordPress object that has a slug or post ID and insert into Page Builder layouts or into WordPress pages that don't use Page Builder.
  For example, the following screenshot shows text and the shortcode for a saved Photo module in the first feature field in a Pricing Table module. 
  

Here are some other examples of ways you can use shortcodes in Page Builder and how to create Page Builder shortcodes.

Use any WordPress shortcode in your Page Builder layout

You can embed WordPress or plugin shortcodes in your Page Builder layouts.

Generally, shortcodes can be used in any field that accepts text. Here are some examples of text fields in Page Builder modules where you can use shortcodes:

• HTML module
• Text editor module
• Heading field of the Heading module
• Label field or text editor area of a Tabs module
• Text editor area in an Icon module
• Heading field or text editor area of a Callout module

Create Page Builder shortcodes

You can create shortcodes for the following types of Page Builder content:

• Posts
• Pages
• Custom post types
• Saved layout templates
• Saved rows or modules

You can use this shortcode in any text field where WordPress shortcodes can be used.

For example, you could create a Subscribe form, save it as a row or module, create the shortcode for it, and add it to a blog post that doesn't use Page Builder. Or you could use the shortcode for one module in another Page Builder row or module, such as a Tabs module. See the Advanced Ideas section below to see how some of our community have used Page Builder shortcodes.

Here are some of the properties of Page Builder shortcode:

• When you update the source content, the shortcode content is automatically updated.
• You can insert shortcodes for content on other sites on a multisite installation. See the Shortcodes Reference in the Related Articles.

The following procedure shows how to create Page Builder shortcodes.

Prerequisite: If you plan to use a row, module, or template in your shortcode, it must be saved first. See the Related Article on saving rows and modules.

To create Page Builder shortcode:

1. Get the ID or slug of the content you want to embed with a shortcode. See the Related Article below for info on how to do this.
2. Create the shortcode using the following format, depending on whether it's the slug or the ID:
   [fl_builder_insert_layout slug="my-post-slug"]
[fl_builder_insert_layout id="123"]
   See the Shortcodes reference in the Related Articles below for more advanced options.

Tips:

• If you add the shortcode to a Page Builder layout and it isn't rendered properly, try putting the shortcode into an HTML module.
• See the Related Articles for why there can be a performance hit with the use of too many Page Builder shortcodes.

Embed Page Builder shortcode into a text widget

By default, you cannot add any WordPress shortcode to WordPress text widgets. You can add this ability by adding the following code to the functions.php file in your child theme.

add_filter('widget_text', 'do_shortcode');

You can then add your shortcode to a WordPress text widget.

Advanced ideas for using Page Builder shortcode

Here are some examples of how the Beaver Builder community have used Page Builder shortcodes in unconventional ways. Note that most of these ideas require PHP coding or CSS to make them work, and you should ask the community for help if you need it. If you implement shortcodes in a novel way, make sure you check the results extensively in various browsers on various devices.

• Create a row or module, save it, and embed the shortcode into Post content that doesn't use Page Builder.
• Insert a saved row or module into a tab in the Tabs module to get a richer layout within the tabs.
• Embed a contact form from Page Builder or another plugin into a tab in the Tabs module.
• Add a button to a cell in a Pricing module.
• Create a Subscribe Form module and turn it into a Subscribe widget.
• Use saved modules as widgets in Post and Post Archive sidebars.
• Use shortcode in the text option in the top bar and footer layout in Beaver Builder Theme. For example, create two columns of links to fill one of the footer columns in Beaver Builder Theme.
• Create a custom area for clients to send feedback and watch video tutorials in the WordPress admin area.