When running WordPress websites, you will always use shortcodes to fulfill many tasks relating to add website functionality, improve SEO, and more. Also, WordPress themes and plugins often add more elements like event calendar, pricing grid and more by using shortcodes. In this tutorial, we are to talk about 7 premium tips about how to use shortcodes in WordPress for beginners.
What Are Shortcodes in WordPress
In short, shortcodes are those special tags which you can use into posts to get replaced with various content when you are actually viewing these posts on site. You may have seen the built in the shortcode when you are embedding WordPress galleries on site.
Once you have loaded the blog posts with [galleries] shortcode, WordPress will replace the [galleries] shortcode with the code that currently displays galleries of your images. We can find that shortcodes is very similar to HTML tags, but differently, shortcodes are enclosed with those square brackets rather than angle brackets. When your page is loaded in web browsers, this code will get replaced with other code.
Even better, WordPress is user friendly allowing you to make your own custom shortcodes so as to display beautiful things on your site. Each time when you add any content into your WordPress websites, there must be some security filters and checks to ensure zero malicious code get into your WordPress pages, posts, comments and so on. It also means you cannot directly write codes in these parts.
However, you sometimes just have to add codes in these places. In these cases, shortcodes can offer you an easy way. For instance, you can add simple shortcodes to include more beautiful slider on site; you can also create complicated survey forms in your WordPress website without writing new code lines.
How to Create Shortcodes in WordPress?
Using shortcodes is an easy way to enhance your WordPress website, and WordPress also makes its easy tp create your own shortcodes. It is one of reasons that WordPress is so popular now. To illustrate how to create one shortcode in your WordPress website, we will take adding AdSense as our example.
First, you just need to define a function to output the real AdSense code. All the codes in below will be save in your theme’s functions.php file or an independent plugin file. Now, let’s have a look at the function.
It is very straightforward, which returns your Google AdSense code just as a string. No matter what the function returns, your shortcode will get replaced with that. Thus you could have returned the HTML code for a child posts list, a Facebook widget or others.
At present, you have a function returning what you want, and then how to hook it up to your shortcode? Now it is where WordPress API joins in. In below, it is an order to set up AdSense shortcode.
In the case above, the first parameter of the code should be ‘adsense’ as the shorcode’s name, telling WordPress to create [adsense] shortcode. Well, the second parameter is to designate the function called when your new shortcode is encountered. Here it is ‘get_adsense’ to tell WordPress to use the results of your get_adsense way to replace [adsense].
The instance is just very simple one, and WordPress allows more to do with shortcodes. Let’s have a look at how to use shortcodes in WordPress.
How to Use Shortcodes in WordPress?
Using shortcodes is a good way to improve and enhance your WordPress, so to get more knowledge of better using shortcodes in WordPress is conducive to maintaining a good WordPress. Let’s learn several useful tips for better using shortcodes in WordPress together!
1. Understand When Not to Use Shortcodes
We know shortcodes are easy-to-use, while it doesn’t mean you should use it in all posts or pages. It’s not wise. We have known that many WordPress themes claiming having more than 200 shortcodes, but if you add shortcodes in each post, then you will be tied to the certain theme offering these shortcodes forever. For long-term development, it is not good to your WordPress website. Therefore, even though shortcodes are good tools, you still need to understand when to use shortcodes is good and when is not.
For example, when you need create CTA buttons within your pages or posts, then you should use CSS buttons instead of shortcodes. When you need add same elements like signature text in the end of your posts or a banner on your pages, you’d better to employ a developer or install a related plugin to code it into your WordPress theme directly.
It will be easier for you to style these elements and remove them, because if you directly add shortcodes in all post or pages, then you will have to manually remove them when you want to do that.
2. Future Proof Your Shortcodes
Shortcodes are easy to use, but when they are offered by your WordPress theme, then you should think twice about using it excessively. That will be easier for you to make any change on your theme.
It will be very possible that you need to change your WordPress them for better website performance. At that time, the right theme may not come with the same shortcodes, meaning a complex and time-consuming task will be in front of you – to change your theme and manually keep those premium changes previously made with old theme’s shortcodes.
We recommend you the best way is to copy your shortcode snippets from the functions.php of your old them and paste them into your site-specific plugin.
3. How to Find Shortcodes in WordPress Themes
Future proofing your shortcodes need you understand what your shortcode functions look like as well as how to find them in your WordPress theme. For this, you firstly need open your WordPress theme folder that is normally located in /wp-content/themes/your-theme-name/.
You can check out your shortcode function from your theme’s functions.php file or the theme has one single folder. Open this file and then search for “add_shortcode”. Here we offered a shortcode snippet example:
The code above creates a shortcode named “my-shortcode” that returns a text greeting. The shortcode can be added in WordPress pages or post just like: [my-shortcode].
4. Use Shortcodes in Widgets
Many users, especially beginners think that shortcodes can only be used to posts and pages. They misunderstand. In WordPress widgets, shortcodes can also be used.
How? You can just drag and drop any text widget into your sidebars and then add shortcodes inside of them. Note: it isn’t enabled in WordPress by default. So, if you cannot find your shortcodes in widgets, then you have add it into your site-specific plugin or theme’s functions.php file.
5. Add Shortcodes in Your Theme Files
Sometimes, you may need to output your shortcode included in a non-widget part of your WordPress theme, and here you can use shortcode.
Supposed that you have built up a custom page template in which you need to display a contact form with shortcode and you can just add the shortcode as following:
6. Hide Broken Shortcodes
It is common to see that some users made changes to their themes but they didn’t notice that those old shortcodes don’t work. Often they realize the issue several months as an audience visit their previous posts but receive odd text.
We recommend you two methods to cope with the issue. One is to manually remove your old shortcode from your old posts, and the other is to hide these broken shortcodes. For the second one, you can simply add the code in below into your functins.php file or the site-specific plugin.
The function of above code is to make the code return with no output. Besides, you should remember to use your shortcode name to replace the ‘shortcodetag’.
7. Find Shortcodes Used in Your Posts
If you are not willing to apply tip 6 but plan to remove all your shortcodes manually, you need firstly find out all the shortcodes in your posts. For this, you just need to add the following code into a site-specific plugin or the theme’s functions.php files to complete the task.
The code is to create a ‘shortcodefinder’ for you. Once you add the code in right place, then it will perform a WordPress query and then list out all the posts using shortcode tags.
There is an example to help you understand the tip: if you are planning to search for all the posts including shortcode named [contact-form], you can just add [shortcodefinder find =’contact-form’] into one of your WordPress pages and save the setting. After that, you can find all the posts with this shortcode in the preview page.
We have explained what a shortcode is and how to use it in WordPress in detail, and we hope you can have a more specific understanding about shortcode and better practice these tips in your WordPress website. One thing we have to mention in the end is that even though shortcodes are easy and useful methods to complete various tasks in WordPress, you should always remember they are not always universe. Use them carefully and make your WordPress website better than ever!