Learning how to add shortcode in WordPress Elementor can unlock powerful features and integrations on your website. Shortcodes allow you to insert dynamic content from plugins or custom functions directly into Elementor pages without any coding. With just a few steps, you can add forms, sliders, pricing tables, and more to your layouts.
Understanding Shortcodes in Elementor
Shortcodes are small snippets wrapped in square brackets, like [example], that execute specific functions defined by plugins or themes. Elementor supports shortcodes, letting you enhance your pages with plugin content, dynamic elements, and even third-party services. This enables deeper customization without needing to edit theme files or use custom code blocks.
Using the Shortcode Widget
Elementor offers a native Shortcode widget that makes it easy to embed any shortcode into your design. This widget is ideal for clean, standalone content like contact forms or image galleries that don’t need extra formatting around them.
- Open the Elementor editor on your desired page or post.
- Search for the Shortcode widget in the Elementor panel on the left.
- Drag and drop it onto the section where you want to insert content.
- Paste your shortcode (e.g.,
[contact-form-7 id="123"]) into the input field. - Click Update to save your changes and preview the page.
The widget executes the shortcode in real-time and displays the final output on the front end after the page loads.
Using the Text Editor Widget
If you need more formatting flexibility or want to add text around your shortcode, use the Text Editor widget. This widget allows a mix of regular text, HTML, and shortcodes, making it great for blog-style content or inline embeds.
- Add the Text Editor widget to your layout from the Elementor panel.
- Switch to the Text tab (not Visual) to ensure proper shortcode parsing.
- Paste your shortcode wherever needed within your HTML or text content.
- Combine with heading tags, paragraphs, or custom formatting for richer layouts.
This method is useful when you want to present the shortcode output alongside supporting text or explanations.
Working with Dynamic Shortcode Content
Want to show content that changes automatically? You can create dynamic content with shortcode using advanced plugins or your own custom code snippets. This is particularly useful for membership websites, course platforms, and eCommerce stores that rely on user-specific data.
Popular uses include:
- Displaying logged-in user info (e.g., [username])
- Embedding calendar or event feeds that update automatically
- Showing personalized WooCommerce products or recommendations
- Creating real-time countdowns, stats, or pricing tables
Many plugins offer dynamic shortcodes that adapt based on user roles, time, or content conditions.
Adding Plugin Shortcodes in Elementor
Many WordPress plugins generate shortcodes, which you can easily add in Elementor to extend the page's functionality. You don’t need to manually write these—just copy them from the plugin’s settings and paste them in.
| Plugin | Example Shortcode |
|---|---|
| Contact Form 7 | [contact-form-7 id="123"] |
| WPForms | [wpforms id="456"] |
| TablePress | [table id=3 /] |
| Elementor Addons | [eael-login-form] or others provided |
Always refer to the documentation of the plugin to ensure you’re copying the shortcode correctly and including necessary parameters.
Elementor Custom Shortcode Integration
You can create your own shortcode using WordPress functions and then use them inside Elementor. This allows for complete control over the content and logic behind the shortcode output.
Register the shortcode
function custom_message_shortcode() {
return "<p>Hello from custom shortcode!</p>";
}
add_shortcode('custom_msg', 'custom_message_shortcode');Use in Elementor
Just paste [custom_msg] into the Shortcode widget or Text Editor widget. Elementor will render the output wherever the shortcode is placed.
This method is ideal for developers and power users who need repeated content blocks or logic-driven displays without using global widgets.
Shortcode Not Working in Elementor?
If your shortcode does not display correctly, consider these steps:
- Make sure you pasted it correctly with square brackets and the right shortcode name.
- Use the Text tab, not Visual, when using the Text Editor to avoid formatting conflicts.
- Ensure that the plugin or function providing the shortcode is installed and activated.
- Check that the shortcode itself returns output (some require parameters).
- Clear cache (both browser and plugin cache) if changes aren’t showing up immediately.
Useful Links
How to Use the Elementor Shortcode Widget – This guide explains how to embed shortcodes using Elementor's dedicated Shortcode widget, allowing dynamic content integration.
How to Use the Text Editor Widget in Elementor – Learn how to insert and style text, HTML, and shortcodes within the Text Editor widget for flexible content layouts.
add_shortcode() – Function | Developer.WordPress.org – Official WordPress documentation on creating custom shortcodes using the add_shortcode() function.
Having Problems Using Elementor? Read This Guide – Troubleshooting common issues in Elementor, including shortcode rendering problems.
90+ Top Widgets to Achieve Your Goals with Elementor!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Mastering how to add shortcode in WordPress Elementor allows you to extend your website’s capabilities with ease. Whether you're integrating plugin features, custom content, or dynamic displays, shortcodes give you the flexibility to build richer pages with minimal effort. With the right tools and understanding, shortcodes can significantly enhance the usability and interactivity of your Elementor-based layouts.
