Use shortcodes in your layouts
WordPress shortcodes are macros that can create markup dynamically. For an introduction to WordPress shortcodes, see the WordPress codex.
This article refers to shortcodes from three sources:
- Shortcodes that come from outside Beaver 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 Beaver Builder layouts or into WordPress pages that don't use Beaver 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.
- There is a
[fl_year]shortcode that you can use to insert the current date into your Beaver Builder layouts or in text areas of the Beaver Builder Theme, such as the footer. For more information, see the article on the Beaver Builder Theme date shortcode.
Here are some examples of ways you can use shortcodes and how to create Beaver Builder shortcodes.
Use any WordPress shortcode in your Beaver Builder layout
You can embed WordPress or plugin shortcodes in your Beaver Builder layouts.
Generally, shortcodes can be used in any field that accepts text. Here are some examples of text fields in Beaver 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 Beaver Builder shortcodes
You can create shortcodes for the following types of Beaver Builder content:
- 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 Beaver Builder. Or you could use the shortcode for one module in another Beaver Builder row or module, such as a Tabs module. See the Advanced Ideas section below to see how some of our community have used Beaver Builder shortcodes.
Here are some of the properties of Beaver 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 Beaver 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 Beaver Builder shortcode:
- 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.
- Create the shortcode using the following format, depending on whether it's the slug or the ID:
See the Shortcodes reference in the Related Articles below for more advanced options.
- If you add the shortcode to a Beaver 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 Beaver Builder shortcodes.
Embed Beaver 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.
You can then add your shortcode to a WordPress text widget.
Advanced ideas for using Beaver Builder shortcode
Here are some examples of how the Beaver Builder community have used Beaver 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 Beaver 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 Beaver 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.