WordPress Add A Shortcode Example

How do I create shortcodes that support attributes under wordpress CMS? How do I add shortcodes to my theme?

Tutorial details
Difficulty level Easy
Root privileges No
Requirements Wordpress v2.5+
Est. reading time N/A
A shorcode is nothing but a simple set of function for creating macro code for use in post content. You need to add the shortcode to your functions.php file. In this example, you are going to create a shortcode called [foo] that will add a text “This is a test”.

functions.php

You need to use functions.php a functions file, which resides in the theme subdirectory. This file acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization.

Create wordpress function

Edit functions.php, enter:
$ vi functions.php
Create a function called demo and append:

//[foo]
function foo_demo( $atts ){
 return "This is a demo.";
}
add_shortcode( 'foo', 'foo_demo' );

Save and close the file.

Test it

Edit or create a new post and add the following shortcode (in the post/page content):

[foo]

Save/publish post. Click on preview button to see your shotcode in action.

How do I pass parameter or attribute to shortcode?

The Shortcode API makes it easy to create shortcodes that support parameters like this:

[movie genre="animation" rating="PG"]
[movie genre="comedy" rating="G"]

Add the following to your functions.php:

// shortcode [movie]
function show_movie( $atts ){
   $movie_details="";
   // get attibutes and set defaults
        extract(shortcode_atts(array(
                'gener' => 'Sci-Fi',
                'rating' => 'G',
                'date' => 0
       ), $atts));
    // Display info 
    $movie_details = '<div class="quickinfo"><ul>';
    $movie_details .= '<li>Genre: ' .$gener. '</li>';
    $movie_details .= '<li>Rating: ' .$rating. '</li>';
    $movie_details .= '<li>Release date: ' .$date. '</li>';
    $movie_details .= '</ul></div>';
    return $movie_details;
}
//add our shortcode movie
add_shortcode('movie', 'show_movie');
add_action( 'init', 'register_shortcodes');

You can now insert it as follows in your post:

[movie genre="Animation" rating="PG" date="2012"]

The output would be:

<div class="quickinfo"><ul><li>Genre: Sci-Fi</li><li>Rating: PG</li><li>Release date: 1920</li></ul></div>
References:

🐧 Get the latest tutorials on Linux, Open Source & DevOps via RSS feed or Weekly email newsletter.

🐧 2 comments so far... add one


CategoryList of Unix and Linux commands
Disk space analyzersdf duf ncdu pydf
File Managementcat cp mkdir tree
FirewallAlpine Awall CentOS 8 OpenSUSE RHEL 8 Ubuntu 16.04 Ubuntu 18.04 Ubuntu 20.04
Modern utilitiesbat exa
Network UtilitiesNetHogs dig host ip nmap
OpenVPNCentOS 7 CentOS 8 Debian 10 Debian 8/9 Ubuntu 18.04 Ubuntu 20.04
Package Managerapk apt
Processes Managementbg chroot cron disown fg glances gtop jobs killall kill pidof pstree pwdx time vtop
Searchingag grep whereis which
User Informationgroups id lastcomm last lid/libuser-lid logname members users whoami who w
WireGuard VPNAlpine CentOS 8 Debian 10 Firewall Ubuntu 20.04
2 comments… add one
  • Max Jun 27, 2013 @ 13:47

    Useful guide! small spelling mistake :

  • Genre: ' .$gener. '
  • '; and 'gener' => 'Sci-Fi', gener => genre
  • Anirudh Jul 8, 2013 @ 16:40

    Hi, I have been trying to find a good shortcode example from the last 48 hours and i wasn’t able to find a example with styling.

    Yes i am thick in coding, but i wasn’t able to stylize my shortcode.

    Thanks buddy !! promote your blog, people need you

  • Leave a Reply

    Your email address will not be published.

    Use HTML <pre>...</pre> for code samples. Still have questions? Post it on our forum