Having a unique appearance is the goal of most website owners on the Internet. While plugins can provide some of that appearance, more can be done to make your site literally one-in-a-million. The customization for WordPress can be taken further with the use of shortcodes.
Today, we will examine what a shortcode can do and how to use it.
What is a Shortcode? #
Shortcodes are small segments of code that tell the system how to display certain components on your website. For the most part, these snippets of text can be copy-and-pasted into any section of your content whether it’s a static page or a post. It takes the place of actual HTML or PHP coding and condenses it to be used in the WordPress content editing system.
As a result, using a shortcode can save developers a lot of time, especially when they want to add it to multiple posts or pages.
How Do Shortcodes Work? #
Shortcodes can be created for a wide range of purposes. Displaying information, controlling how the pages look, and even importing content from social sites are only some of the things you can do with these short lines of text.
Typically shortcodes are most commonly used by plugins.
Plugins that use shortcodes for WordPress will often come with mini-tutorials about where to place them. These places typically include a shortcode block if in the Gutenberg editor, or within the text editor in the Classic format.
They are automatically generated by the plugin, which allows you to simply copy the line and place it where you wish. You can also create your own shortcodes by either coding them into the backend of your website or by using a plugin.
Shortcodes can be created to do virtually anything in WordPress. They can be developed by other plugins or created by yourself to make shortcuts on your pages and posts. For example, you can create a shortcode for your Adsense coding by modifying the function file in WordPress.
This could turn a long, advanced code into a simple word to be placed on a post. However, the vast majority of users will simply copy and paste shortcodes to keep it simple.
How to Use Shortcodes in WordPress #
There are multiple ways to add shortcodes in WordPress. They can be added directly within a page or post, or alternatively, they can be added to a text widget. Once you know what you are doing, adding a shortcode will only take a few seconds.
Note: The Gutenberg editor has been around for quite some time now and many plugins are beginning to add custom blocks that contain the shortcode within the. Thus, you may need to use the specific custom block to add a particular feature.
Let’s begin by examining how to add shortcodes within the Gutenberg editor.
Step 1: Add A Shortcode Block #
Gutenberg is a block-based editor and as you might expect, there is a dedicated block for adding shortcodes.
Note: Some shortcodes work when pasted within a regular text block, but there are a good number of them that do not. Thus, It is always recommended to use a shortcode block to avoid situations when they do not work.
Go into any post or page on your website and click on the “+” button.
This allows you to select any block available in your editor. Use the search box to search for the Shortcode block and click on it.
The shortcode block will allow you to add one shortcode within it. If you have multiple shortcodes, you will need multiple shortcode blocks.
Simply enter the shortcode into the block and you can see the effects in the page preview. Keep in mind you will not see what a shortcode can do within the editor.
Note: Remember to keep in mind the location of the shortcode block. This is where the shortcode will appear on the page. Thus if the shortcode added a gallery and you wanted it to appear at the bottom, the shortcode block should be at the bottom.
Step 2: Add Shortcodes to the Widget Area #
You can also add shortcodes to your widget area in WordPress. This can be done by using a text widget. Unlike the actual editor, the text widget does not utilize blocks. Thus it is as simple as copying and pasting code.
Click on Appearance and select the Widgets option.
The widget section of WordPress utilizes a drag and drop interface to make it easy to add widgets to particular sections. All of the widgets are on the left side of the page and the widget areas are on the right side of the page.
Locate the Text widget and drag it to the appropriate widget area (sidebar, header, footer).
The text widget should resemble the Classic editor (if you remember that), it consists of a visual and text editor that you can switch between by clicking on the appropriate tab. You can place a shortcode into either editor.
Note: Keep in mind the size of the widget area when adding a shortcode. While all shortcodes will work in a text widget, they are not automatically resized to fit in it. This can cause images to be cut off or to look very bad. Ensure image dimensions are the correct size.
Simply paste the shortcode within the text widget.
Similar to the regular editor, you cannot view what the shortcode looks like and you cannot preview it either. Instead, it must be viewed on a live website.
Note: One workaround is to create a subdomain, clone your website, and view the changes there. This can allow you to test the appearance before putting it on a live website.
This is how you can add shortcodes within WordPress, congratulations.
Can I Create My Own Shortcodes? #
Absolutely!
There are two ways to create shortcodes in WordPress: adding them via code and using a plugin.
Using code to add shortcodes is rather complicated and not something for beginners. However, it is worth mentioning that there are some guides out there for very basic custom shortcodes that can be done by copying and pasting code snippets.
However, if you really want to create custom shortcodes, you are going to need to learn some coding basics.
The other way to add simple custom shortcodes is to use a plugin. There are a variety of plugins that will allow you to create very simple custom shortcodes. A great plugin to consider is the Shortcoder plugin.
It allows you to easily create shortcodes within WordPress, but keep in mind that the possibilities are somewhat limited.
For very complicated shortcodes, coding is the only option.
Master Shortcodes #
Shortcodes are utilized by a lot of plugins and understanding how to add them is essential to running a website today.
They can be used to embed galleries onto your pages, show Twitter account feeds, or even display a stock ticker with the right available API. These remove the extensive HTML programming from your posts while still providing the desired outcome.
While creating your own may take a bit of practice, choosing the right plugin can vastly cut down your workload for design.
What kinds of shortcodes would you like to use on your website? Are you comfortable creating your own, or do you have favorite plugins?
