How To Add A Shortcode Print

  • 0

Shortcodes are a highly powerful feature of WordPress that enables you to substitute text on the website with anything else. As the processing for the shortcode occurs in the background during runtime, the outcome might vary. You may want to retrieve a value from a database. In this step-by-step article with images, we will demonstrate how to install a shortcode and how to make it more helpful.

 

Step 1: Adding a Basic Shortcode to WordPress

First, you will need to know how to add code to your WordPress installation using functions.php or a custom plugin. Once you are familiar with adding code, copy and paste the following into functions.php or your chosen location:

 

function basic_function( $atts, $content = null) {

    return 'Hello World';
    
}
add_shortcode( 'sample_shortcode', 'basic_function' );

 

Save your changes. Now open up a new test post and type the following:

 

[sample_shortcode]

 

Like this:

 

 

In the text editor, it shows up as a shortcode. But if you now preview the post, you will see this:

 

 

We've replaced [sample shortcode] with "Hello World". The "add shortcode" method receives the name of our custom shortcode as well as the name of the function that handles it. In this instance, the function is called "basic function" and it simply returns "Hello, World!". This is an example of a shortcode that closes itself. There is just one segment. However, shortcodes may include beginnings and ends.

 

Step 2: Creating Enclosing Shortcodes

Occasionally, you need the shortcode to handle some content. In this situation, the text may be included in the shortcode as follows:

 

[sample_shortcode]This is the content[/sample_shortcode]

 

Note the concluding shortcode element, [/sample shortcode]. Text sent to the function will be saved in the $content variable. For instance, consider this code:

 

function basic_function( $atts, $content = null) {

    return $content;
    
}
add_shortcode( 'sample_shortcode', 'basic_function' );

 

Will just print whatever's inside the shortcode. Like this:

 

 

Again, this is of little value to us. However, we may alter the wording before to printing. Which leads us to characteristics.

 

Step 3: Using Attributes with Shortcodes

Shortcode attributes enable the author to incorporate certain adjustments. For instance, we will add the following two characteristics with our shortcode:

  1. "bold" - if 'yes, we want the text to be bold
  2. "italics" - if 'yes', the text will be italicized as well

So, for example, this is the shortcode we will use with the two arguments in the text editor:

 

[sample_shortcode bold='yes' italics='yes']This is the content[/sample_shortcode]

 

We've utilised two characteristics and assigned "yes" to each of them. This is the code:

 

function basic_function( $atts, $content = null) {

    if ($atts['bold'] == 'yes')
        $content = '<strong>'.$content.'</strong>';

    if ($atts['italics'] == 'yes')
        $content = '<em>'.$content.'</em>';
	
	return $content;
    
}

 

Using the $atts array, attributes are available. Therefore, "bold" and "italics" values may be retrieved via:

  1. $atts['italics']
  2. $atts['bold']

Here, we just test if any of these is true, and if it is, we append HTML and return the value of $content. The result of using the shortcode:

 

 

As can be seen, the text has both bold and italic formatting. Within the shortcode, we may use whatever PHP we choose. Therefore, if we need to get data from a table, we may define the keys in the attributes and use them in the database query. There is almost no limit to the number of possible applications. Shortcodes in WordPress distinguish it from other platforms. We are able to design websites that would be hard to construct with conventional CMS systems. This is another another reason why WordPress runs so much of the Internet!


Was this answer helpful?

« Back