How To Create Shortcodes In WordPress

Hello there, Shortcode is one of the powerful feature of WordPress.In this tutorial we will learn about how easily we can create our custom shortcode in WordPress.

I create a function my_awesome_shortcode() and output Hello World by it. Now I want to create a shortcode [awesome]. And when I add this shortcode to any WordPress page or post, then it will return the value of my_awesome_shortcode() function. Simple Yeah ?

Well, take a look on the code.

function my_awesome_shortcode(){ 
echo "Hello World"; 

Add this code to functions.php then add this shortcode [awesome] to any of your page or post.

add_shortcode() is an action hook that used to create shortcode. First parameter is the shortcode name that we use between a square brackets [awesome] . Second parameter is the function name that will return a value when we use this shortcode.



Create your first WordPress plugin

Well you are a WordPress developer but never create any WordPress plugin before. Ok great !! . This is the perfect place for you. Lets start to create your very first WordPress plugin with me.

Step 1 : Plugin Comment

Plugin comment define the introduction of the plugin. This is exactly same comment system that we used to make a WordPress theme. When we upload and activate a plugin, it shows plugin name, author name, author website links there. These information comes from the plugin comment. Here is the plugin comment sample.

Plugin Name: My First Plugin
Plugin URI:
Description: This is my first plugin ever.
Version: 1.0
Author: Shakil Zaman
Author URI:
License: GPLv2 or later
Text Domain: myfirstplugin

In this plugin we will make a simple custom post type and show those post data in our website by use a shortcode.

Step 2 : Create a Custom Post

Use this code for create a custom post type Person.  

// Custom Post Person
function create_person() { 
register_post_type( 'person', array( 
'labels' => array(  
'name' => __( 'Person' ),  
'singular_name' => __( 'Person' ),  
'add_new_item' => __( 'Add New Person', 'text_domain' ) ),  

'public' => true, 
'has_archive' => true,  
'supports' => array('title','editor') ) ); 
add_action( 'init', 'create_person' );

After adding this custom post you can activate your plugin and check the Person menu on the left side of your admin dashboard.

Add some demo data in your person post. That will show in the website later.

Step 3 : Create Shortcode

If you don’t know how to create a Shortcode then please check this tutorial.  Create a function show_person_table(). In between this function create a HTML table and use WP_Query() to get all data from Person custom post.

// Show Person Table Shortcode
function show_person_table(){

<table class="table">
<?php $args = array( 'post_type'=>'person' );
$query = new WP_Query( $args );
while ($query->have_posts()){$query->the_post(); } ?>
<td><?php the_title(); ?></td>
<td><?php the_content(); ?></td>

By using this action hook add_shortcode()  we made a shortcode [person] . If we add this shortcode to any WordPress pages or posts. It will show the output that comes from  show_person_table() function.

This is all our first WordPress plugin. Thanks for reading this tutorial. Hope it helps to start your Plugin journey.

Add menu and submenu in WordPress admin panel

When we add a new plugin we see a new menu item added on the WordPress admin panel. In this tutorial we will learn how easily we can add admin menu and submenus on WordPress.

Here is the thing we will make.

Members is the main menu and on mouse over it will show Members with a submenu Add Members.

WordPress have 2 cool functions for this.



add_menu_page() create main menu like Members and add_submenu_page() create submenu like Add Members.

Here is the code.

function mysite_admin_menu(){
add_menu_page('Members', 'Members', 'manage_options', 'members-slug', 'members_function');
add_submenu_page( 'members-slug', 'Add Members', 'Add Members', 'manage_options', 'add-members-slug', 'add_members_function');

add_action('admin_menu', 'mysite_admin_menu');

Here is some details about the parameters

‘Members’ = Page Title

‘Members’ = Menu Title

‘manage-options’ = Capabilities required for this menu

‘members-slug’ = Menu slug shows on the url

‘members_function’ = Output of this function will show on the menu page.

In add_submenu_page() function we see everything is same except ‘members-slug’ on the first parameter. This slug refers the dropdown menu under the main menu.

Well if you want to show something when click the menu or submenu then use the function that used on functions parameter. Here is an example.

function add_members_function(){
 echo "Add New Members";


So when you  click on Add Members menu, you will see the output Add New Members  on top of the page

Hope this tutorials helps.


How to display code on WordPress website

If you want to make any tutorial website with WordPress and display your code ( HTML, CSS, PHP) for the tutorial like this.


echo "Hello World";


Then here is a cool solution for you.

  • Download this plugin Syntax Highlighter Evolved and activate on your WordPress website.
  • Then use shortcodes for show your codes like this

Check all the other shortcodes for show CSS, JS or HTML code.

Sometime developers don’t want to use any plugins. Here is another solution for that. You can show your code by Encode and Decode them and write on Text option of your WordPress text editor.

&lt;?php echo &quot;hello world&quot;; ?&gt;

It might be difficult to encode and decode all your codes. Here is a solution for that. You can copy all your codes Here and get all the code in encoded format.

Hope these will works.