WordPress shortcode

What is WordPress shortcode?

WP shortcode is what you put in [] in your post. For example, if you write [dateoftoday] in your post, the dateoftoday is a shortcode.

Why to use WordPress shortcode?

WP shortcode is used to display dynamic content. You may ask: isn’t the content of wordpress site generated dynamically? Yes, wp sites are dynamic sites compared to static html sites, in that the content of wp pages are dynamically generated by php code running on server side. But the content of the posts does not change once composed, i.e., after you publish a post, the visitors will see the same content of the post every time they visit the url of the post. What if I want to show some changing content when a visitor opens my post? For example, I want to show the current date to the visitor, then the date will change when the visitor opens my post on another day. This can be implemented using wordpress shortcode. We can write [dateoftoday] in a post, the shortcode will be replaced with the actual date when visitors open the post. But I only see [dateoftoday], not the actual date, why? This is because you have not implemented the shortcode yet.

How to make WordPress shortcode?

To write a WordPress shortcode, you need to add some php code in the functions.php file of your current theme. We will create the dateoftoday shortcode, which shows today’s date:

//append to function.php

function dateoftoday()
{
  return date('F d, Y');
}

add_shortcode( 'dateoftoday', 'dateoftoday');

The WordPress function add_shortcode adds a shortcode “dateoftoday”(can be inserted in your post) as specified by its first parameter. The shortcode is implemented by the function dateoftoday(specified as the second parameter) as you define in the php file functions.php. The php function returns a string, which is used to replace the [dateoftoday] in the post on the fly. The shortcode string can be the same as or different from the name of the implementation function. Notice the date format ‘F d, Y’ as specified as the parameter of the php date function. It will tell the date function to return a string like “March 13, 2021”. Properly using the date format, you can create a wordpress date and time shortcode, wordpress current date shortcode, wordpress date publish shortcode, wordpress last modified date shortcode, wordpress post date shortcode, etc.

Also note that some documents add the shortcode in an action.

//append to function.php

function dateoftoday()
{
  return date('F d, Y');
}

function dateoftoday_shortcodes_init() {
    add_shortcode( 'dateoftoday', 'dateoftoday' );
}
 
add_action( 'init', 'dateoftoday_shortcodes_init' );

This adds some flexibility of the creating time for the shortcode, i.e., the shortcode is not always created, but created in the init event. However, since the init event is triggered every time a visitor browses our website, the shortcode is almost always created.

WordPress shortcode parameters

WP shortcode can be more powerful by passing parameters. Suppose you want to show today’s date, yesterday’s date, the date of the day before yesterday, etc. Sure, you can write a different shortcode for each. A more convenient way is to use shortcode parameters like [dateof day=”yesterday”], [dateof day=”today”]. The parameters are also called shortcode attributes, which are passed to shortcode function as argument $atts. A shortcode function can have 3 args:

function dateof($atts = [], $content = null, $tag = '')
{
    $t=time();
    if($atts["day"]=="yesterday")
        $t=$t-24*60*60;
    else if ($atts["day"]=="thedaybeforeyesterday")
        $t=$t-2*24*60*60;
    return date('F d, Y',$t);
}

add_shortcode( 'dateof', 'dateof');

The $atts argument is used to receive the parameters. You can pass multiple parameters to the shortcode like [dateof day=”today” anotheratt=”anotherval”], so $atts is an array, each item of which stores a parameter as “attribute name=>attribute value”. In the above example, we use the shortcode params, we use $atts[“day”] to get which day to show, and we use php date and time functions to return different dates for different days. You can research this wordpress date and time plugin to understand wordpress shortcode better.

Note that when passing parameters to a shortcode function, you can enclose the attribute value with single quotes, double quotes, or nothing. They have the same effect. In all cases, the attribute value is passed as a string in $atts array. Even the shortcode is of the form [dateof day=123], the shortcode function gets atts[“day”] as a string, not an integer.

You can refer to my another article about wordpress shortcode if you are interested in the implementation details.

Did you like this?
Tip admin with Cryptocurrency