GuidesHow To

How To Use Shortcodes In WordPress In 2024

If you want to add some dynamic functionality to your WordPress page or posts and you do not know how to do it. Don’t worry, shortcodes are there to make your task easier without adding complex code.

Shortcodes provide a convenient way to extend the functionality of your WordPress site without needing to write complex code. Many WordPress plugins and themes also come with their own shortcodes, allowing you to add their features to your site easily.

What Are Shortcodes?

In WordPress, shortcodes are unique tags that allow you to add dynamic content or functionality to your posts, pages, or widgets without needing to write custom code.

Shortcodes, like [shortcode], are enclosed in square brackets and replaced by the corresponding content or functionality when the WordPress page is rendered.

Why Short Codes Were Introduced?

As no code can be inserted into the WordPress content. WordPress does not allow any code in the posts and content to secure the database from malicious codes. Only HTML can be inserted into the content.

But sometimes the publisher wants to add some code to display a contact form, gallery or banner ads, etc What should he do? For this purpose, shortcodes are introduced to perform some specific task.

It allows you to add some code in a function and register that function as a shortcode in WordPress. It can be added by any publisher, even those with no coding knowledge.

Different Ways To Provide WordPress Shortcodes:

When it comes to providing WordPress codes you can do it in several ways.

1. Built-In Shortcodes:

Built-in or inbuilt shorts are included in WordPress templates under the content editor option.

That includes:” caption, gallery, video, etc.” 

A thing to remember here is when you change the WordPress template, these codes stop working as well.

2. Shortcode Ultimate Plugin:

If you are lacking features in the WordPress editor then Shortcode Ultimate will be a great solution for you. This plugin gives a free pack of handy sort codes.

With this shortcode plugin, you can add the following features to your website: 

  1. Gallery
  2. Sliders
  3. QR code generator
  4. Responsive videos
  5. Icon Buttons
  6. Macro tables
  7. Audio
  8. Tabs and boxes
  9. Google maps

Using this single plugin solely, you can avoid the hustle of installing multiple plugins.

How To Use The Shortcode Ultimate Plugin?

Install the plugin on your WordPress site and activate it. So after installation:

  1. Login to the WordPress dashboard
  2. Click the Insert shortcode button
  3. Chose the shortcode of your choice

And you are done in three simple steps.

How To Do The Short Codes Work And Its Uses:

You are required to understand many WordPress tenures before you start a website building. Shortcodes are one of the WordPress tenures. Short codes are known as text tags that is followed by a square bracket, and it is used to be put instantly somewhere in your post for the execution of a specific function.

The major use of shortcodes is affiliated with the layout of your page contents of sites. If you don’t have any knowledge about coding, shortcodes make it easy for you by suggesting certain methods for the modification of your sites.

It can be used to create columns, insert images, videos and change the style of headings, and add features like galleries, etc. to your sites.

As shortcode is not considered to be a part of the plugin in WordPress that’s why it used to be put directly into any post of your WordPress text editor in either visual or text mode. 

Even inside WordPress, there are a number of shortcodes that exist. Content from external sources is also embedded into the WordPress site by using shortcodes.

For example, sites like Twitter, Pinterest, Amazon Bookshelf, and many others supply shortcodes that can be used to embed in the text editor of  WordPress for show-related content such as users’ feeds on Twitter.

Shortcodes can work with plugins to add as many features as you want to your WordPress site and to customize your WordPress site.

Why Do We Use Short Codes?

Short codes are considered to be helpful because they provide a method to make specific customization and modifications for your site in WordPress. Shortcodes make complicated features easily by using single-line code. It is used to add functionality to posts and widgets without writing code and to show how the feature or the functionality should be presented. 

Where And How To Insert Short Codes In WordPress?

If you are wondering where you can use these shortcodes then use shortcodes in WordPress that includes

  • WordPress posts
  • WordPress widgets
  • WordPress themes
  • WordPress Pages

Some plugins work when we paste them into the content through shortcodes. We have to put the shortcode in the body of the post or page, and it will perform the function.

1. Insert The Shortcodes In The WordPress Post:

There are several steps to insert shortcodes into a WordPress post.

  • With your login details, login to WordPress Dashboard
  • Click post in the navigation menu
  • Select the post you want to edit
  • Select text
  • And insert shortcode
  • Update the post to save the changes

Quick Tip:

Avoid using double brackets to use the text of a short code in WordPress. Or, if you want the text of the video shortcode to display rather than the actual video, you can add:

2. Insert Short Code In WordPress Pages:

You’ll need to add the text widget first if you want to use the shortcodes in place other than the content.

Plus, insert the shortcode into a word press widget’s sidebar or word press template.

3. Insert Short Codes In WordPress Widgets:

Follow the following simple steps to use shortcodes inside your Widget sidebar:

There are several steps to insert shortcodes into a WordPress post.

  • With your login details, log in to the WordPress Dashboard
  • Click “Pages” in the navigation menu
  • Select the pages you want to edit
  • Click “text
  • Add the shortcode
  • And update to save the changes

And when you are done, you can insert shortcodes into a text widget as well.

Quick Tip:

Keep in mind that this feature won’t automatically enable or by default. If the shortcode is not visible in widgets, then you will add the above code to your theme’s functions.php file.

4. Insert Shortcode In WordPress Templates:

  • With your login details, log in to the WordPress Dashboard
  • You drag and drop to add a text widget to your sidebar
  • Make a little alteration in the function.php file.
  • Paste Add_filter (“widget_text”,”do_shortcode”); at the end of the file
  • Add your desired shortcode inside of it.
  • Save the changes.
  • Open the themes folder and go:

“/wp-content/themes/you theme name/”

  • Open the function.php file, or if the theme has an included folder, inside that folder
  • Inside the “files,” search for the term add_shortcode

function my_shortcode_function() { $i = ‘

Hello World!

‘; return $i; } add_shortcode(‘my-shortcode’, ‘my_shortcode_function’);

How To Create An Advanced Macro Table:

  • Open the themes table and go to

 “/wp-content/themes/your-theme-name/”

  • In the plugin settings, generate a new HTML table
  • Assign a unique shortcode to the table: [supsystic-tables id = 10]
  • Select the post where you want to insert the table 
  • Parse the shortcode
  • And finally, save the changes

Also, using the shortcode in a non-widget area of the theme is possible. You need to add the PHP function where you want to display the code.

[example_shortcode]
OF
Echo do_shortcode (“[select_shortcode]”);

Quick Tip: 

The added code in the text box is displayed in the WordPress editor.

Users will be able to see the code, not the table. But your web user will see the graphical table.

Shortcodes Finder:

If you want to remove or update shortcodes, plugins are of great importance for keeping track of shortcodes. A plugin named “Shortcodes Finder” is used to find all the shortcodes used anywhere on the WordPress site.

It works best for you to track them and apply any changes to them or delete them if necessary.

How To Develop Your Own Shortcodes:

If you have little familiarity with coding, you can develop your own shortcodes. Through this, you have full control over the layout and functionalities of your sites. Now let’s discuss some steps that are necessary for creating shortcodes.

1. Create A New Theme File:

Before taking off, make sure that you have backed up your WordPress site. Outside the functions.Php file, you should make a particular file for your shortcode. You must access your site’s files using the File Transfer Protocol client. After you connect with your site, navigate to wp-content>themes and save the folder for your theme.

Now in your theme folder, press the right button and click on create new file option. Give the name to your file own-shortcodes.php and click OK. Through a right click on it and selecting the view/edit option, you can make changes to it. The file will be opened in the text editor.

After you are done with your editing, save your file and close the file. Make sure that your file is updated on the server. In the same folder, open the functions.php file, and at the end of the documents, add the following code:

Include(‘own-shortcodes.php’);

The system allows you to keep them separate and also enables the system to include all changes you made using functions.php in own-shortcodes.php. Now save your changes and close them.

2. Create The Shortcodes Function:

Now the next step is to create a function for shortcodes. For your own-shortcodes.php file select the edit/view option again. The next step is to execute code to initiate the shortcode for which you have to write a function with a particular name.

function subscribe_link()

{

return ‘Follow us on <a rel=”nofollow” href=”https://Instagram.com/RankingGrow?s=20″>Instagram</a>’;

}

Now you add a callback function, and it will be executed when the hook action is activated. The following code will explain to WordPress that the function you call is the shortcode

    add_shortcode(’subscribe’,

‘subscribe_link’)

If the tag of the shortcode is ‘subscribe,’ it provides the link directly to the visitors pinned with the ‘subscribe link.’

  • Add The Shelf Closing Shortcode To The Website:

You can review your code as a self-closing shortcode on the WordPress site. You can add the ‘subscribe’ tag directly into the post by using the block editor. If this is your desired shortcode, you have to finish here, but if you want other modifications, you continue with the next step.

  • Add Parameters To The Shortcode:

You need the ‘subscribe’ shortcode for additional functionality to display other social platform links. To change the URL, you need to insert the parameter 

function subscribe_link_att($atts)

Now open the own-shortcode.php file and add it to the following code

 {

    $default = array(

        ‘link’ => ‘#’,

    );

    $a = shortcode_atts($default, $atts);

    return ‘Follow us on ‘.$a[‘link’];

}

add_shortcode(‘subscribe’, ‘subscribe_link_att’);

This will add your shortcode tag to the Gutenberg editor and allow you to modify the links in your shortcodes. The function shortcode_atts will integrate user attributes with other known attributes. When you have done with your customizations, save, and close your file.

Test The Parameter

In the WordPress block editor, you can review your updated shortcode. Here we are checking Twitter and Facebook links by using the shortcodes.

[subscribe link=’https://www.facebook.com/blog/’]

[subscribe link=’https://facebook.com/blog?s=20/

For social profiles to visitors, the self-closing shortcode shows the direct URLs.

3. Create An Enclosing Shortcode:

The enclosing shortcode contains one extra parameter for the function. You should insert $content=null, which shows that this function is an enclosing shortcode. In order to search content for shortcodes, you can add WordPress do_shortcode. In your PHP file, add the following code

function subscribe_link_att($atts, $content = null) 

{

    $default = array(

        ‘link’ => ‘#’,

    );

    $a = shortcode_atts($default, $atts);

    $content = do_shortcode($content);

    return ‘Follow us on <a href=”‘.($a[‘link’]).'” style=”color: blue”>’.$content.'</a>’;

}

add_shortcode(‘subscribe’, ‘subscribe_link_att’);

 When you are done save the changes that you made.

  • Add An Enclosing Shortcode To The Website:

In order to see the final result, you should add your enclosing shortcode in the WordPress block editor. By using this enclosing shortcode, you can easily change the URLs of social platform pages and text that you want to show to the visitors.

Just like self-closing shortcodes, you will follow the same procedure in enclosing shortcodes. In enclosing shortcodes, you can use just a piece of code and do much.

What Are The Shortcodes Plugins? 

There are different plugins used for shortcodes in WordPress that are best for modifying your site even if you switch the themes and you don’t need to rewrite everything again. Here I will discuss some plugins in detail, so look at each one.

1. Ultimate Shortcodes:

Ultimate Shortcodes is one of the free WordPress shortcode plugins. It is one of the most popular plugins. It provides useful shortcodes for boxes, buttons, media, data, etc. Just click “insert shortcode” from a page where you want to add it.

Shortcodes Ultimate is Gutenberg-friendly and also works with a classic editor. It has a built-in CSS editor, a custom widget, and a fully responsive design that fits your needs when creating site content. Whenever you want a specific button, lightbox, video, etc., would be available in seconds.

2. Meka Flexible Shortcodes:

This plugin provides nice and useful features that everyone can use at any time on your site, from columns, buttons, and tabs to highlights, toggles, and many more.

You can insert shortcodes through your WordPress editor because this plugin creates a shortcode panel for your interface. It has a simple and friendly user interface. Each shortcode tag provides you with a styling option.

3. Shortcode Addons:

This plugin comes up with 100+ shortcode components. If you don’t use a page builder on your WordPress site, you can still insert shortcodes using this plugin.

It also includes a set of functionalities and features for your post like templates, predesign, and blocks. This plugin does not offer a lot of shortcode options; it provides limited but best customization options. Also, it has a user-friendly visual interface.

4. Wp Shortcode By Mytheme Shop:

The plugin provides only a few shortcode options, and it seems to fit where users don’t need advanced shortcodes for their page or post.

WP Shortcode comes up with some basic customization and adds simple shortcodes. It includes easy-to-use buttons, columns, video links, Google Maps, and some others that by default can be utilized.

It is simple, easy to set up, and lightweight. This plugin is also useful in case you want to add simple components to your site.

5. Event Shortcodes And Templates Pro Addon:

Event shortcodes and templates Pro Addon is one of the best premium WordPress shortcode plugins. It provides a group of shortcodes for the Events Calendar plugin. The Event shortcodes and Templates Addon will allow you to create the site according to your needs and keep the users involved with your events.

To display the event shortcodes on the WordPress site you should install The Events Calendar plugin so in turn you could be able to use the shortcodes provided by the addon.

Final Words:

Shortcodes are an easy and simple way to add different site features. But the best practice is to avoid their overuse of them. As a large number of shortcodes were added, it will take more time to track and update them. But if adding similar shortcodes is necessary, try using the Plugins that work sitewide.

Hope the article is helpful for you as we tried to explain everything in the simplest way possible. If you have any queries about the Shortcodes, you can ask them in the comments. Thank you for visiting.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button