There are some nifty features that WordPress comes with, and you are strongly recommended to explore and use as many as is applicable. One of them is shortcodes. Shortcodes can be thought of as a shortened code string. They allow you to perform the same function repeatedly without having to create or enter the entire string each time. More importantly, they allow anyone to do this.
Why is this important? WordPress was designed for almost anyone to successfully build a functional website. For more unique and dynamic websites however, you may think having some coding knowledge may be a plus. Not necessarily. The less tech-savvy have access to a plethora of resources.
Table of Contents
Today you will learn about shortcodes and how they can help transform your website from average to superior. In the process, you will come across other terms and phrases that it would be helpful to have prior knowledge of. Here is a short dictionary of such associated terms:
- Shortcode: a very short piece of code that carries out a specific function on a WordPress hosted website
- Shortcode block: the designated area within WordPress for you to input your shortcode; sometimes referred to as a Gutenberg block
- Attribute: information within a shortcode that provides instructions on how the plugin should function
- Function: what the shortcode will display/do when used; this part is usually buried in the PHP code and is not visible within the actual shortcode
- WordPress Plugin: additional software designed to increase the features of WordPress hosted websites
Breaking Down a Shortcode
WordPress is designed for even the most technology-challenged user to create unique and memorable websites filled with dynamic and interactive content. Equally, there are very advanced users who know a lot about WordPress’ infrastructure and about coding. These persons will be able to add original shortcodes without much, if any, help.
If this is not you however, the following section aims to provide very basic introduction to some of the most commonly used characters in a shortcode. Why: because one way to add shortcodes in WordPress is through user-generated code.
Since you never usually need to edit generic shortcodes, your knowledge may remain limited. It is therefore helpful to know a little bit about the symbols used.
Square Brackets: [ ]
Square brackets house the shortcode/plugin and any attributes; they scream “This is a shortcode”.
Examples: [scribd]; [youtube]; [contact-form id=“345”]
Equal Signs: =
Equal signs are needed in order for an attribute’s specific instructions to be carried out.
Example: [contact-form id=“345”]
The shortcode recognises that there are more than one contact forms that can be used.
Double quotation marks: “ ”
Double quotation marks provide further instructions for attributes in a shortcode.
Example: [contact-form id=“345”]
The shortcode identifies which contact form is to be inserted.
If your appetite has been wetted, access this more extensive coding guide. By familiarising yourself with coding, you are better able to create even more dynamic websites. Who wouldn’t want that?
Adding Shortcodes within WordPress
Shortcodes exist for every imaginable function. If you defy the odds and create a situation where none currently exist, just create it. Let’s say you create a custom permalink, you can even create a custom shortcode for it.
There are three sources of shortcodes: those built into WordPress; those acquired through plugins; and personally generated shortcodes.
1. Adding WordPress Built-In Shortcodes
WordPress has an extensive list of shortcodes from which both website developers and plugin creators may dip into. This quasi shortcode ‘library’ (or API) comes with instructions on how each can be used. Above all, it also helps you apply your imagination to each basic shortcode by providing the code needed to create specific shortcodes.
To use, you merely need to follow the guide provided by WordPress. This is important as not every generic shortcode is added the same way. For example, adding a YouTube video requires pretty much only the URL. Adding a portfolio however requires additional steps before you can use the shortcode.
2. Adding Shortcodes using Plugins
Some plugins are designed for one specific function, so they create shortcodes for you. A popular example is WPForms.
- After creating a form, click ‘WPForms’ (or the plugin of choice) on your ‘Dashboard’
- Copy the provided shortcode (found in the ‘Shortcode’ column)
- Paste it into your editor (black ‘+’ signs create new blocks)
- Click ‘Update’ and the form should be immediately added to your website
3. Adding Original Shortcodes
As stated above, WordPress allows you to use personally created shortcodes. Creating customised shortcodes is solely dependent on your creativity and website needs. As such, there are no ‘steps’ per se outside those of the rules of coding.
Beginner Level Shortcode User
Eventually you may want to up your shortcode creating game. By visiting the WordPress Shortcode API page, you will have access to extensive support, including definitions, step-by-step coding guides to creating your shortcode, and other bits of information you never realised you did not know.
In the meantime, plugins are here to save the day. A web search will return myriad plugins that will help you create and add shortcodes in WordPress. The most basic information needed from you is the function and the name of your shortcode. All you are required to do is click ‘save’ or ‘create’ and you are done. To see the result, insert the shortcode and publish. The end!
This type of plugin is not to be confused with the previous type. The former usually has the shortcode ready for you to use on your website, such as shortcodes for forms or images. The latter helps you create personalised shortcodes so you can add unique/personalised touches to your website.
Expert Level WordPress User
These instructions assume that you have sufficient knowledge of coding. Still, caution is advised. Take every precaution to ensure you protect your website when attempting to insert any code. It is best practice to use ‘Child Theme’ when adding personal shortcodes.
To create and use personal shortcodes:
- Go to your WordPress ‘Dashboard’ (admin area)
- From the list of options available at ‘Appearance’, select ‘Theme Editor’
- Click on ‘Theme Functions/functions.php’
- Write and save the code (creating the function and naming the shortcode)
- Return to your home page and click ‘Edit Page’
- Enter the shortcode you just created in the space provided
- Click ‘Preview Changes’ to see how the shortcode performs on your website
Note: if you make changes to the code after this step (such as adding attributes or lines of code), you need to click ‘Save’ and reload the page after each change to see the results.
You cannot know too much about WordPress’ features and plugins. Remaining relevant in today’s society means utilising the latest technology to keep our website user-friendly. Gone are the days when you would be expected to be locked up trudging away on codes. Use shortcodes!