aThemeArt

Wordpress Shortcode Fundamentals (Part 3)

In WordPress Shortcode Fundamentals (Part 2), we discussed the four types of shortcodes, “Basic Style, sans attribute”, “Basic Style, one or more attributes”, “BB Code Style, sans attribute”, and “BB Code Style, one or more attributes”.

We also created a simple basic style shortcode macro that didn’t require any parameters.

Let’s Create a Single-Parameter Basic Style Shortcode

As mentioned earlier, I created a simple shortcode that has a syntax like this [php_lookup echo()]. This macro expands to a link that opens the PHP site on that specific keyword’s description … echo(). Here’s the code for this little gem.

add_shortcode('php_lookup', 'php_lookup_shortcode_handler');
 
function php_lookup_shortcode_handler($atts)
{
    $keyword = $atts['0'];
 
    $keyword_text = $keyword;
    $keyword = str_replace('(', '', $keyword);
    $keyword = str_replace(')', '', $keyword);
    return $output;
}

You can use it to automatically create a convenient PHP lookup link for your visitors. It works with any keyword in the language.

Notice that we’re only processing the single parameter. Because of this, you do not need to enter an attribute name when using the shortcode. In fact, there is deliberately no provision to handle an attribute name in this example. It makes using the macro quick and simple.

On line numbers 7-9, we filter out the () so that you can display them in your post and still have the lookup functional.

Here’s a very similar shortcode for looking up WordPress core functions.

Shortcode: wp_lookup

add_shortcode('wp_lookup', 'wp_lookup_shortcode_handler');
 
function wp_lookup_shortcode_handler($atts)
{
    $keyword = $atts[0];
 
    $keyword_text = $keyword;
    $keyword = str_replace('(', '', $keyword);
    $keyword = str_replace(')', '', $keyword);
 
    return $output;
}

Let’s Create a Multi-Parameter Basic Style Shortcode

ext, we’ll construct a shortcode with two (optional) attributes that displays a Log In / Log Out link … contingent upon the current status. You might want to use this in a sidebar text widget.

The full usage syntax is: [loginout login_msg=’Log In Now’ logout_msg=’Log Out Now’]. Because we set default values, you can simply use it like this: [loginout].

add_shortcode('loginout', 'loginout_shortcode_handler');
 
function loginout_shortcode_handler($atts)
{
    $parms = shortcode_atts(array('login_msg' => 'Log In', 'logout_msg' => 'Log Out',), $atts);
 
    $login_msg = $parms['login_msg'];
    $logout_msg = $parms['logout_msg'];
 
    // from includes/general-template.php, wp_loginout()
    if (!is_user_logged_in())
    {
        $output = '
<a href="https://athemeart.com/blog/shortcode-fundamentals-part-3/">
' . $login_msg . '</a>';
    }
    else
    {
        $output = '
<a href="https://athemeart.com/blog/shortcode-fundamentals-part-3/">
' . $login_msg . '</a>';
    }
 
    return ($output);
}

The code in this example is a little more complex. This is because it handles attributes and because it uses a conditional based on the WP function is_user_logged_in().

A key function here is line number 5 which uses the WP function shortcode_atts(). This one extracts parameters from attributes the end-user specified OR uses the defaults in our array. Notice how we not only indicate the attribute names, but we also include their default values.

Line numbers 7 and 8 set our local variables from the returned array. For the sake of simplicity, I prefer to name my variables the same as the attributes. You may want utilize this naming convention too.

Let’s Create a BB-Code-Style Shortcode

Now, we’ll construct a very basic shortcode that modifies the content between the tags of a bb-code-style shortcode. This one isn’t particularly useful, but it does demonstrate the feature. It simply outputs the original content as bold and blue in a large font size.

This usage syntax is: [big_bold_blue]This is big, bold, blue text.[/big_bold_blue].

add_shortcode('big_bold_blue', 'big_bold_blue_shortcode_handler');
 
function big_bold_blue_shortcode_handler($atts, $content=null)
{
    $output = '';
    $output .= $content;
    $output .= '';
 
    return $output;
}


That’s it for our fundamentals of shortcodes. In future articles, we’ll construct many shortcodes. Most of these will offer robust capabilities or you can learn at begin
Wordpress Shortcode Fundamentals (Part 1)

Inspire us with your love!

FacebookTwitterReddit
Editorial Staff

aThemeArt editorial staff provides and makes all the content that is published on athemeart.com. In addition, they are responsible for all web content types, including blogs, social posts, videos, documentation, etc.

You can check also