How To Add Shortcode In WordPress WPBakery Page Builder?

As a professional WordPress developer, I often come across clients who want to add complex functionality to their websites without having to write a single line of code. Luckily, WordPress has a solution for this – shortcodes.

In this tutorial, I will show you how to add a shortcode in WordPress using WPBakery Page Builder, a popular drag-and-drop page builder plugin.

5 Main Steps To Add Shortcode In WordPress WPBakery Page Builder

Step 1: Install and Activate WPBakery Page Builder

Install and Activate WPBakery Page Builder - InviTechs Official

The first step is to install and activate WPBakery Page Builder. This plugin is available in the WordPress repository or you can purchase the premium version from the developer’s website.

Once you have installed and activated the plugin, you can start using it to create beautiful pages on your WordPress site.

Step 2: Create a New Page or Edit an Existing One

Create a New Page or Edit an Existing One - InviTechs Official

Next, create a new page or edit an existing one using WPBakery Page Builder. You can access the page builder by clicking on the Backend Editor or Frontend Editor button, depending on your preference.

Once you are inside the page builder, you can start adding elements to your page.

Step 3: Add a Shortcode Element

Add a Shortcode Element - InviTechs Official

To add a shortcode element, simply drag and drop the Shortcode element from the Elements tab to the desired location on your page. This is where the real magic happens – you can add complex functionality to your website without writing any code.

Once you have added the shortcode element, a pop-up window will appear where you can enter your shortcode.

Step 4: Enter Your Shortcode

Enter Your Shortcode - InviTechs Official

In the pop-up window, enter your shortcode and click on the Save Changes button. Your shortcode will now be added to your page.

Step 5: Preview and Publish Your Page

Preview and Publish Your Page - InviTechs Official

Finally, preview and publish your page to see your shortcode in action. You can also customize the appearance of your shortcode by using the options available in the Shortcode element settings.

Also Read: How To Make Money With WordPress In 48 Hours?

FAQs about How To Add Shortcode In WordPress Wpbakery Page Builder:

How do I add a shortcode to my WordPress menu?

To add a shortcode to your WordPress menu, you can use the “Custom Links” option in the menu editor. Just add the shortcode to the URL field and add a label for the menu item.

How do you add text to the WPBakery page builder?

To add text in WPBakery Page Builder, you can simply drag and drop the “Text Block” element onto the page. Then, you can click on the element to start editing the text and customize the font, size, color, and other options as needed.

How do I create a custom shortcode in WordPress?

To create a custom shortcode in WordPress, you can add the following code to your theme’s functions.php file or in a custom plugin:
function custom_shortcode_function() {
    // Your shortcode logic goes here
}
add_shortcode(‘custom_shortcode’, ‘custom_shortcode_function’);
Replace custom_shortcode with the name of your shortcode and add your custom code inside the custom_shortcode_function() function. You can then use the shortcode in your posts and pages by adding [custom_shortcode].

How to add shortcodes in PHP in WordPress?

To add a shortcode in PHP in WordPress, you can use the do_shortcode() function. Here’s an example code snippet:
<?php
    $shortcode_output = do_shortcode(‘[your_shortcode]’);
    echo $shortcode_output;
?>
Replace [your_shortcode] with the name of your actual shortcode. You can then use this code snippet in your PHP files to output the shortcode’s content.

How do I justify text in the shortcode in WordPress?

To justify text in a shortcode in WordPress, you can add the style attribute to the shortcode and set its value to text-align: justify;

How do I add text to the menu in WordPress?

To add text to a menu in WordPress, you can use the “Custom Links” option in the menu editor. Here’s how:

1. Go to “Appearance” > “Menus” in the WordPress admin panel.
2. Click on the “Custom Links” tab.
3. In the “URL” field, add a “#” symbol to indicate a blank URL.
4. In the “Link Text” field, add the text you want to display in the menu.
5. Click the “Add to Menu” button to add the custom link to your menu.
6. Drag and drop the new menu item to the desired position in your menu.
7. Save your menu

Conclusion

Shortcodes are an incredibly powerful tool that can help you add complex functionality to your WordPress site with ease. By following the steps outlined in this tutorial, you can add a shortcode in WordPress using WPBakery Page Builder in just a few clicks.

With this knowledge, you can now create stunning pages that are both functional and visually appealing.

In addition, using a page builder like WPBakery Page Builder can save you time and effort while building your website. It allows you to create professional-looking pages without having to learn how to code. So go ahead and give it a try – you won’t be disappointed!

See our featured website design work

Check out some of the beautiful websites we’ve built for over 100+ clients.

We offer WordPress Website Design Services

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related Articles

Work with us

Do you have a WordPress project to discuss? Our team would love to help.

sigmund-zBfBXHCaLmk-unsplash