Although WordPress shortcodes haven’t disappointed website administrators in terms of rendering complete control over the site’s content and positioning, we have some unexplored options for pacing up their usability. This tutorial speaks about some easy-to-follow steps that can be implemented for making the most of shortcodes in WordPress. Here’s hoping by the end of this tutorial, you’d have unleashed the hidden potential of WP shortcodes.
Let’s take a quick look at WordPress shortcodes
Introduced in WordPress version 2.5, WordPress shortcode API is basically a simple set of functions that allows you to publish dynamic content with the help of macros. One of the greatest advantages of using shortcodes is that you can create exclusive content types including content generators, forms etc. without the need for any kind of programming skills. For example, below is the WordPress shortcode that can be used for adding a photo gallery into a web page:
In addition to above shortcode, there is also an API which handles all the confusing parsing, freeing you from the hassles of writing a bespoke regular expression for each individual WordPress shortcode. Rendering support for self-closing and enclosing shortcodes, this API also includes certain helper functions for moderating the settings and other default attributes.
A brief on working of WordPress shortcodes
Each time a specific shortcode is being inserted into a WordPress blog post/page, the same is replaced by a different piece of content. To put it simply, we are asking WordPress to detect the macro that is included within the square brackets([]) followed by replacing the same with a suitable dynamic content that has been generated by the PHP function. For instance, if you want to display the most recent blog posts, you can use the following shortcode:
[recent- posts]
As an extension to the above shortcode, you can even opt for displaying a specific number of recent blog posts by using the following shortcode:
[recent- posts posts=”10”]
Now, some simple tweaks that can improve WordPress shortcode usability
- Pay attention to usage of a flawless widget interface
One of the best approaches for enhancing the usability of WordPress shortcodes is having a perfect widget interface in place. By adding widgets into your web pages, you can conveniently split the content into several blocks and include individual functionality for each one of them. That means, the forms displayed after incorporation of widgets can be filled up with anything that you intend to add into the site’s content. You are free to use checkboxes, textboxes, dropdowns in your shortcode attributes.
- Use Filters for adding content to a shortcode
You can start off by using the pu_shortcode_button filter for adding dynamic content to the shortcode dropdown. This filter fetches a specific parameter of the array and works well on all the other shortcodes. Here, you need to ensure that the key of the array is exactly similar to the text that is displayed on the shortcode dropdown.
- Add buttons directly to the TinyMCE interface
If you are working with a couple of shortcodes, then it is easy for you to remember their names. But, if you’re working with several shortcodes, then remembering each one individually becomes a daunting task. In order to eliminate this, you can opt for adding buttons to the TinyMCE interface. As the first step in this process, you need to add the dropdown to TinyMCE content editor. Doing this will display a detailed list of shortcodes included within the post/page. You can use the mce_buttons filter for adding a new button to the TinyMCE editor. Further, to add multiple buttons, you can simply opt for adding new elements to the end of $buttons array. This will lead to returning of the entire array and you can simply click on the respective button(s) to get the job done. The code snippet involved with this process is shown below:
|
1 2 3 4 5 6 |
add_filter( 'mce_buttons', 'my_register_buttons' ); function my_register_buttons( $buttons ) { array_push( $buttons, 'separator', 'myshortcodes' ); return $buttons; } |
- Define new filters for including specific type of shortcodes
WordPress offers you the convenience of extending the existing code functionality via actions or filters. While actions allow you to add new code functions, filters enable you to pass in parameters, moderate the site’s content and a lot more. Although WordPress comes equipped with a wide range of actions and filters, you can opt for defining your own for use at specific locations within the WordPress website. Below is the code snippet that allows you to use a unique filter for adding new tags to the existing shortcode dropdown:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_action('admin_footer', 'my_get_shortcodes'); function my_get_shortcodes() { echo '<script type="text/javascript"> var shortcodes_button = new Object();'; $custom_shortcode_button = array(); $custom_shortcode_button = apply_filters('my_shortcode_button', $custom_shortcode_button); if(!empty($custom_shortcode_button)) { foreach($custom_shortcode_button as $tag => $code) { echo "shortcodes_button['{$tag}'] = '{$code}';"; } } echo '</script>'; } |
In the above code, the function apply_filters() instructs WordPress to run all the functions that already exist within the filter. This code allows you to add specific elements to the shortcode tags array which can further be utilized for building a new dropdown menu.
Conclusion
In a nutshell, I would like to say that adhering to the aforementioned tricks can definitely allow you to make the most of your WordPress shortcodes. Have you tried any other technique of boosting the usability of WP shortcodes? If yes, don’t forget to share its details using the comments section provided right under this post.