WordPress Shortcode Tutorial – A Beginner Introduction

WordPress supports shortcode, we can use shortcode to improve the function of our theme. In this tutorial, we will introduce how to use shortcode in wordpress.

The type of wordpress shortcode

There are some types of shortcode in wordpress, they are:

[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a href="https://www.tutorialexample.com/">HTML Content</a<>/p>[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo="bar" id="123"]Some Content[/mycode]

Where mycode is the name of a wordpress shortcode.

How to create a shortcode in wordpress?

We can use add_shortcode() function to create a wordpress shortcode.

add_shortcode('shortcode_name','shortcode_function')

where shortcode_name is the name of your created shortcode in wordpress, for example mycode.

shortcode_function is the name of function implemented by shortcode.

The shortcode_function can be defined as:

function shortcode_function($attr, $content) {
    // $attr $key=>$value array
    // $content the content in shortcode
    // return a string value
}

The relation of shortcode type and add_shortcode()

There are some types of shortcode types in wordpress. The relation between shortcode types and add_shortcode() can be viewed as:

How to use shortcode in wordpress?

We will use an example to show you how to use. In this example, we will create a shortcode called meta, this shortcode will display a table in wordpress content.

We will create a meta shortcode first.

add_shortcode('meta','pk_meta');

meta shortcode will bind a function called pk_meta. pk_meta function will be defined as:

function pk_meta($attr, $content = null){
    $author = isset($attr['author']) ? $attr['author'] : '';
    $home_url = isset($attr['office_home']) ? $attr['office_home'] : '#';
    $language = isset($attr['language']) ? $attr['language'] : '#';
    global $post;
    return "<div class=\"ui_meta\">
        <table>
					<tr class=\"meta_head\"><td>Author</td><td>Links</td><td>Made with</td><td>Last update</td></tr>
					<tr><td>".$author."</td><td><a rel=\"nofollow\" href=\"".$home_url."\" target=\"_blank\">Office Home</a></td><td>".$language."</td><td>".get_post_modified_time('M d, Y', true,$post)."</td></tr>
				</table>
    </div>";
}

Then you can use this meta shortcode when writing post in wordpress.

[meta author="lluxui" office_home="https://www.tutorialexample.com" language="CSS"][/meta]

or

[meta author="lluxui" office_home="https://www.tutorialexample.com" language="CSS"]

Then this meta will be displayed as:

The html <p> or <br /> in wordpress shortcode

WordPress may add html p or br tag in wordpress shortcode automatically, in order to fix this problem, you can use code below:

function p_wpautop($content){
    return wpautop($content, false);
}
remove_filter('the_content', 'wpautop');
add_filter('the_content', 'p_wpautop',11);