• Skip to main content
  • Skip to footer
HostingWiki

HostingWiki

  • Home
  • Guides
  • About

November 19, 2021 - WordPress

What is Shortcode in WordPress?

Maisha Rachmat

A shortcode is a string of code used to add various functions to a WordPress site. The code consists of a single line written in square brackets: 

[shortcode_name]

Understanding how to use shortcodes would be beneficial for building a website. Fortunately, you don’t need to have advanced technical skills to use these code lines. Read on as I will explore how shortcodes work on WordPress and how to properly use them.

How Shortcodes Work

As an open-source content management system, WordPress allows anyone to tinker with the source code to optimize their website. Despite so, modifying a website requires tons of coding, which could take a lot of time to complete.

Thus, enter shortcodes. By using these code snippets, you get to add specific functions to various posts or pages without having to write them repeatedly. The additional code won’t affect the system’s core as well, so you can perform as many tweaks as needed without putting the site at risk. 

You can use shortcodes to insert any simple modification on your page, post, widget, or theme file. WordPress shortcodes’ names are generally self-explanatory. For instance, the [ gallery ] shortcode function is responsible for displaying multiple photos simultaneously.

Every shortcode correlates with a specific set of pre-existing functions found within your website files. When adding a shortcode to a site element, WordPress will check if it refers to any script used to execute it. 

If it does, the platform will replace the shortcode with a feature or an element you assigned on the frontend. 

To get started, you can use the six built-in shortcodes WordPress provides — [ gallery ], [ caption ], [ video ], [ audio ], [ playlist ], and [ embed ]. Each code comes with parameters to accommodate attributes and a return value that display the result. 

Should you need more functions, some themes and plugins like Shortcode Ultimate can add extra shortcodes with various features to choose from. That said, disabling these plugins or themes will indispose the shortcodes as well. 

Alternatively, you can make your own custom codes by using the Shortcode API. It registers new shortcode handlers to the system, allowing you to recall them whenever needed without retyping blocks of code repeatedly.

How to Add a Shortcode in WordPress

The following are tutorials on how to insert a shortcode into a WordPress post, page, widget, and theme file.

In a Post or Page

If you’re using the Gutenberg editor, follow these steps:

  1. Go to Pages or Posts -> Add New from your WordPress dashboard.
  2. Click the + sign to add a new block. Scroll down to the Widgets category, then click on the Shortcode block.
WordPress add block function with shortcode widget highlighted
  1. Insert the desired shortcode to the appointed space.
WordPress shortcode example for embedded video
  1. To see whether or not the shortcode has been successfully added, select Save Draft -> Preview.

Users with the Classic editor can follow these steps:

  1. Go to Pages or Posts -> Add New from your WordPress dashboard.
  2. Switch to the Text tab, then type in the shortcode you want to use on the appointed space.
WordPress example of adding shortcode to classic editor
  1. Change back to the Visual tab. If you add the shortcode correctly, the feature in demand will appear there.
  2. Click Save Draft -> Preview to see its final look on the web page.

In a Widget-Ready Area

To add a shortcode in a widget area, you can do as follow:

  1. Go to Appearance -> Widgets. 
  2. Drag the Text widget to the desired location within your web page. 
  3. Click the downward arrow on the widget and insert the shortcode in the Text tab. Activate the Visual mode to see whether or not it functions properly. 
  4. Press Save to keep the changes made. 

In a Theme File

Inserting a shortcode to a theme file requires writing a longer code snippet, albeit a simple process. You need to include the following function for the code to work:

<?php echo do_shortcode('[shortcode_name]'); ?>

Additionally, you have to connect your website with FTP client software like FileZilla. Make sure to back up your website beforehand to prevent any loss data. 

Here are the steps to adding a shortcode in your theme file:

  1. Open your FTP client software and access the public_html directory.
  2. Go to wp-content -> themes and choose the folder of the theme you’re using.
  3. You’ll find several theme files to modify there. For this tutorial, I’ll be using the footer.php file as an example. Right-click on the file and choose View/Edit.
WordPress connected to FTP with theme files opened and footer.php file selected to view/edit
  1. Add the function along with the shortcode above the </footer> tag, then save the changes made.
WordPress footer.php file with shortcode added under footer tag
  1. If you use FileZilla, a popup will ask whether or not you want to upload the modified file into the server. When this happens, click Yes.
  2. Head back to your website to check if the process is successful or not. 

Wrapping Up

WordPress shortcodes are macro codes you can use to add various features and elements to a website. They allow you to make modifications in posts, pages, widgets, and theme files without altering the software’s core.

For shortcodes to work, your site needs to have the functionality required to run it. If WordPress doesn’t have the code you need, many plugins and themes are more than ready to provide other shortcodes with different functionalities. Alternatively, you can create your own code using the API.

I hope this article has helped you with using shortcodes on your WordPress site. Good luck!

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Footer

HostingWiki Logo

Site Links

  • Contact Us
  • About
  • Sitemap

Legal

  • Privacy Policy
  • Terms of Use
  • Cookie Policy
  • Contact Us
  • About
  • Sitemap

Additional menu

© 2022 HostingWiki is a Hostinger publication.