Make WordPress User-Friendly with Shortcodes

banner2
If you aren’t sure why WordPress together with it’s tools is the best choice, you should read this article showing the power of WordPress when building a website.
So by this time, if you use the [advertisement_1] shortcode the 743 X 82 px banner ads will display anywhere according to the placement of the shortcode either in post or page.


The primary handler function will handle all the details and content of the Shortcode. Open up your functions.php file and create the primary function.

  • Audio
  • Video
  • Embed
  • Gallery
  • Caption

Although there are five of them already, the need for more shortcodes still continues as more and more plugin and additions of features are being developed. By that, this article is about how to create custom WordPress shortcode.

Understanding How To Use Shortcodes in WordPress

It’s actually easy to apply all of these steps on the 2nd banner, which is the 268 X 268 px banner ad. Check out the code below.
Let’s take a look how we can create a custom shortcode for the advertisement theme options created from a previous tutorial about how you can create a theme options.
[advertisement height=”100” width=”100”] This is an Add [/advertisement]

Two Steps Involved in Creating a Shortcode

  1. Building the Primary Handler Function
  2. WordPress Hook for the Handler Function

There are two advertisements here, the 743 X 82 px and 268 X 268 px banner ads.
For this tutorial, you’re going to display the content of the theme option advertisement area from this previous tutorial.
banner1

STEP 1 – Building the Primary Handler Function

Looking into to the process of calling these theme options to the template files, you’ve got the following codes.
Here you will learn how to use shortcodes in WordPress.
Congratulations! You just learned how to create a custom shortcode using the theme options elements. I hope you found this tutorial helpful.
function advertisement_1($atts){ // Do something here }

function advertisement_1(){ // Do something here }

STEP 2 – Adding the Attributes

<?php $options = get_option( ‘theme_settings’ ); ?> <?php echo $options[‘banner1’]; ?>

If you have any questions or comments or you have other ideas on this topic, feel free to drop a line in the comment section.
function advertisement_1($atts){ $options = get_option( ‘theme_settings’ ); $output = ‘<div>’ . $options[‘banner1’] . ‘</div>’; return $output; }

There are two more parameters that can be passed to the Shortcode callback function:
Next, you need to hook the primary function into the WordPress to associate the shortcode of your theme options. This can be done using the add_shortcode function. Check out the code below.

STEP 4 – WordPress Hook for the Primary Function

Shortcodes allow users to add particular styles or features to a site without going to the codes. WordPress have five default shortcodes within the WordPress core, namely:
function advertisement_2($atts){ $options = get_option( ‘theme_settings’ ); $output = ‘<div>’ . $options[‘banner2’] . ‘</div>’; return $output; } add_shortcode(‘advertisement_2’, ‘advertisement_2’ );

As WordPress introduced the Shortcode API in Version 2.5, a significant number of plugins were released to help users add content to posts and pages in a user-friendly way.
add_shortcode(‘advertisement_1’, ‘advertisement_1’ );

Shortcode API is a simple set of functions for creating macro codes for use in post content. It helps developers to create special kind of content such as forms and content generators, which users can use to attach to a certain post or page.
Shortcode usually comes with this simplest version:
It usually comes together with themes or plugins. By just inserting something inside square brackets, it will replace that content with some other kind of content, usually being driven by a series of PHP functions.

Wrapping Up

[advertisement]

For instance, when you distribute your theme, and another developer tries to customize or call it back via a child theme or plugin, it can’t be done. Changes made by an anonymous function is permanent and can’t be revised.

Posted by WordPress Guru