Creating a custom shortcode in WordPress is a valuable skill for any website owner. Shortcodes allow you to embed dynamic content into posts, pages, and widgets easily. This guide will walk you through the process of creating a custom shortcode and provide insights into using WordPress shortcodes effectively without needing a shortcode plugin.
A WordPress shortcode is a simple code enclosed in square brackets [ ] that performs a specific function. For instance, the default WordPress shortcodes like
display image galleries, while the shortcode is used for image captions. You can insert shortcodes in any WordPress post or page you want.
Using shortcodes in your WordPress site allows you to add complex features with minimal effort. They simplify the embedding of dynamic content such as image galleries, video files, and other multimedia. Shortcodes can also be used to insert custom forms, buttons, and various types of content without writing extensive HTML or PHP code.
To create a custom shortcode, you need to add some PHP code to your WordPress theme files. Follow these steps:
First, create a function that outputs the content you want. This function will handle the processing of your shortcode.
function custom_shortcode_handler() {
return '<p>This is my custom shortcode output!</p>';
}
add_shortcode('custom_shortcode', 'custom_shortcode_handler');
Now, you can use [custom_shortcode] in your posts, pages, or widgets to display the content defined in the handler function.
You would then insert a shortcode block into your page and enter the shortcode like this:
Not all themes and page builders will require you do insert the shortcode in the shortcode block. However this is the most secure way of ensuring, that the shortcode will show the desired content on your users screen. How and where you can use your shortcode depends on your WordPress site. However most pagebuilders and themes allow you to insert a shortcode widget into your WordPress pages or posts via the WordPress classic editor.
You can enhance your WordPress shortcodes by adding attributes. For example, let’s create a shortcode that takes a color attribute:
function colored_text_shortcode($atts) {
$atts = shortcode_atts(array(
'color' => 'black',
), $atts, 'colored_text');
return '<p style="color:' . esc_attr($atts['color']) . ';">This is colored text!</p>';
}
add_shortcode('colored_text', 'colored_text_shortcode');
Now, you can use [colored_text color=”red”] to output red text.
Enclosing shortcodes allow you to wrap content. For example:
function wrap_shortcode($atts, $content = null) {
return '<div class="wrap">' . $content . '</div>';
}
add_shortcode('wrap', 'wrap_shortcode');
You can use it as [wrap]Your content here[/wrap].
To enable shortcodes in widgets, you need to add this line of code to your theme’s functions.php file:
add_filter('widget_text', 'do_shortcode');
This will allow you to use shortcodes within text widgets.
To add a shortcode to your WordPress sidebar widgets, follow these steps:
Go to Appearance > Widgets: In your WordPress dashboard, navigate to the “Appearance” menu and select “Widgets.”
Add a Text Widget: Drag and drop a “Text” widget into your desired sidebar or widget area.
Insert the Shortcode: In the Text widget, simply enter the shortcode like [custom_shortcode] or any other shortcode you have created or are using.
Save the Widget: Click the “Save” button to apply the changes. Your shortcode will now execute within the sidebar widget, displaying the output as intended.
This method allows you to easily incorporate dynamic content or custom features into your sidebar, enhancing the functionality and appearance of your WordPress site.
WordPress comes with several built-in shortcodes, such as gallery, caption, and embed. These can be used to easily insert image galleries, captions, and embedded content into your posts and pages.
Many WordPress plugins provide additional shortcodes for various functionalities. For example, you can use a shortcode plugin to add forms, sliders, or social media buttons to your site.
To give you some real-life examples of when to use a shortcode, we’ve created some practical scenarios for you. All of these examples don’t require any additional plugins so you can keep your WordPress website clean.
In the first example, you’ll learn how to create a shortcode to display your business’s opening hours across multiple pages on your website, all managed through a custom settings page in your WordPress dashboard. This step-by-step guide is perfect for those who want full control without relying on plugins.
Another practical example is creating a shortcode to display a service pricing table across your website. This guide shows you how to set up a custom post type for managing your services and prices, and how to generate a dynamic pricing table that can be placed on any page with a shortcode.
Experiment with different shortcodes and see how they can simplify your content management. The flexibility of WordPress shortcodes makes them an essential tool for any site owner looking to add interactive features without diving deep into HTML or PHP code.
About the Author:
Jonas is the Co-Founder of LPagery, a yearlong WordPress enthusiast and expert with over 8 years of WordPress experience.
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.