Got bored of the traditional method of executing functionalities? Let’s use shortcodes to speed up your editing progress. Shortcodes can help you quickly create complex functionalities like buttons and sliders or add WordPress surveys.
Among multiple ways we have listed some methods to add shortcode in your WordPress site. Below we will explain,
- What are shortcodes?
- 5 Ways to Add ShortCodes in WordPress
- Parameters in Shortcodes (Make Your Shortcodes More Effective)
What are Shortcodes?
A shortcode is a small piece of code in WordPress that allows users to add complex functionality to their website without writing any code.
Shortcodes are a shortcut for inserting predefined code into a post, page, or widget. When a shortcode is added to a page or post, it is replaced with a specific function or content, depending on what the shortcode is designed to do.
It could be used to display a contact form, a video gallery, or custom search bar. Shortcodes are often enclosed in square brackets, with the name of the shortcode inside, such as [contact_form].
Like, the shortcode for adding a button is,
button url="http://example.com" style="default" size="medium"]Button Text[/button5 Ways to Add ShortCodes in WordPress
You can use different methods to add shortcodes to your site. All these methods work perfectly fine.
#1 Using the Built-in WordPress Shortcode Function
WordPress includes a built-in function called add_shortcode() that allows you to register a new shortcode and define its functionality. Here’s an example of how to use this function to create a simple shortcode that will display the current year:
function current_year_shortcode() {
$year = date('Y');
return $year;
}
add_shortcode('current_year', 'current_year_shortcode');In this example, we define a function called current_year_shortcode() that returns the current year using the PHP date() function. We then use the add_shortcode() function to register the shortcode with the name current_year and assign it to the current_year_shortcode() function we just defined.
To use this shortcode on a post or page, insert [current_year] where you want the current year to appear. When the page is rendered, WordPress will replace the shortcode with the output of the current_year_shortcode() function, which is the current year.
#2 Adding a Shortcode to A Post or Page
Next will be adding a shortcode to your page that requires a few steps to complete,
- Decide on the shortcode you want to use.
- Go to your WordPress dashboard, click on “Posts” or “Pages” from the left-hand menu, and then click on the post or page you want to edit.
- Place your cursor in the text editor where you want the shortcode to appear.
- Insert the shortcode into the text editor by typing it in manually or by using the shortcode button in the editor toolbar.
- Preview it to make sure it’s working as expected.
- If everything looks good, publish your post or page.
One thing you need to keep in mind is to always define in your theme’s functions.php file or in a plugin, otherwise, the shortcode won’t work.
#3 Adding a Shortcode to a Widget
Some WordPress widgets allow you to use shortcodes within the widget settings, making adding custom functionality to your website’s sidebar or footer easy.
It’s a pretty similar process to a post or page that requires some steps to be followed,
- Go to the Appearance > Widgets screen in your WordPress dashboard.
- Find the widget area where you want to add the shortcode and click the “Add Widget” button.
- Scroll through the list of available widgets until you find the “Text” widget, and drag it to the widget area you want to use.
- Click on the “Text” widget to open its settings.
- Type or paste your shortcode into the “Content” field.
- Click “Save” to save your changes.
#4 Using a Shortcode Plugin
You can use many plugins to add shortcodes to your website, like Shortcodes Ultimate, Elementor, Shortcoder, and Shortcoder. Among these plugins, Shortcodes Ultimate can help you create the best experience for creating shortcodes.
It comes with over 50 predefined shortcodes, including buttons, tabs, sliders, and more. You can also create your own custom shortcodes using the plugin’s built-in shortcode generator.
#5 Adding a Shortcode to a Theme File
Adding shortcodes using the theme file is tricky and requires beginner-level programming knowledge.
First, you have to access your WordPress theme files. You can do this by logging into your WordPress dashboard and navigating to Appearance > Theme Editor. From there, select the “functions.php” file from the list of files on the right-hand side of the screen.
Then create a new function that defines your shortcode. This can be done using the “add_shortcode()” function.
Finally, save your changes to the functions.php file and ensure your shortcode is properly registered.
Read More: Most Prominent WordPress Page Builders
Parameters in Shortcodes (Make Your Shortcodes More Effective)
Adding parameters to shortcodes is a powerful way to customize their functionality and behavior. It allows you to pass values to your shortcode functions and modify the output based on user input.
1. Define Your Shortcode Function
The first step to adding parameters to your shortcode is to define the function that will handle the shortcode’s output. This function will receive the parameters passed to the shortcode and use them to generate its output.
For example, let’s say you want to create a shortcode that displays a message with a custom color. Here’s how you could define the function:
function my_custom_message_shortcode( $atts ) {
$atts = shortcode_atts( array(
'color' => '#000000',
'message' => 'Hello, World!'
), $atts );
return '<p style="color:' . $atts['color'] . ';">' . $atts['message'] . '</p>';
}
add_shortcode( 'custom_message', 'my_custom_message_shortcode' );This code creates a shortcode called “[custom_message]” that accepts two parameters: “color” and “message”. The shortcode function uses the “shortcode_atts()” function to set default values for each parameter in case the user does not provide them. It then generates an HTML paragraph with the user-provided “message” and “color” values.
2. Add Parameters
To use your new shortcode with parameters, add the shortcode tag to your content, like this:
custom_message color="#FF0000" message="Hello, World!"When you publish the post or page, the shortcode will be replaced with the output of your function, which in this case will be a red paragraph with the text “Hello, World!”.
Depending on your needs, you can customize the shortcode parameters to display any color and message you like.
Finalizing on How to Add Shortcode WordPress
Shortcodes are a quick and effective way to add complex functionality to your WordPress website without writing code.
In this article, we’ve explored eight ways to add shortcodes in WordPress, including using the built-in WordPress shortcode function, adding a shortcode to a post or page, adding a shortcode to a widget, using a shortcode plugin, and adding a shortcode to a theme file.
By implementing these techniques, you can improve your website’s user experience and save time on editing.