WordPress Add A Shortcode Example

Cpanel/Whm License $3/mo Plesk License $10/mo Cloudlinux License $5/mo

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

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:

Posted by: SXI ADMIN

The author is the creator of SXI LLC and a seasoned sysadmin, DevOps engineer, and a trainer for the Linux operating system/Unix shell scripting. Get the latest tutorials on SysAdmin, Linux/Unix and open source topics via RSS/XML feed or weekly email newsletter.

Related posts

Zuckerberg to Study Crypto in Quest to Fix Facebook

SXI ADMIN

Zooko Wilcox Envisions ‘Ambitious’ Changes for Zcash Cryptocurrency

SXI ADMIN

ZombieChain Comes Alive: Can Ethereum Sidechains Save the Dapps?

SXI ADMIN

ZoKrates Seeks to Bring Best of Zcash to Ethereum with Devcon Debut

SXI ADMIN

Zk-Starks? New Take on Zcash Tech Could Power Truly Private Blockchains

SXI ADMIN

Zk-Snarks Everywhere: Ethereum Privacy Tech Hits Tipping Point

SXI ADMIN

ZipZap to Offer Cash-for-Bitcoin Service at 28,000 UK Locations

SXI ADMIN

ZipZap Resumes Cash-to-Bitcoin Services for UK Shoppers

SXI ADMIN

ZipZap Raises $1.1 Million to Grow Global Bitcoin Payments Network

SXI ADMIN

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More