How to Create Custom Shortcode in WordPress?
Hello Learners! Have you read my previous tutorial? If you did, there we discussed how to create custom post type in WordPress right? Progressively, today we’ll learn how to create a custom shortcode in WordPress and how to use it as well.
From definition to creation to display the result of the shortcode, we’ll be discussing as a whole. So guys! What are you waiting for? Just turn on your laptop and keep your eyes wide.
First of all, let’s learn some basics. What do we mean by shortcode? It might be a new term for you. So, let’s discuss shortcodes in WordPress in brief. However, you can still skip this and jump directly to the steps. Also, you can get the link to the git repository of this tutorial at the end of this article.
What is a custom shortcode in WordPress?
Shortcode is kind of a shortcut to add extra features to your website. Instead of requiring bunches of complicated codes, shortcode makes it easier to add functionalities. WordPress already has listed out some default shortcodes that you can use directly without requiring to create it. However, you will need to create a custom shortcode in WordPress when you want to use your customizable shortcode.
Built-in shortcode in WordPress:
Wordpress provides us a list of built-in shortcodes to add some features such as uploading a gallery, video, audio and so on. Let’s see an example by using the gallery shortcode. Firstly, go to wp-admin panel -> Posts-> Add New
Secondly, add a title and the shortcode as shown in the figure below. The shortcode for uploading a list of images in the form of a gallery is [gallery]. The title can be anything though.
Thirdly, you have to publish the post and then you can see a place to edit the gallery and upload images.
Similarly, you can edit the gallery by clicking on the pencil icon. Now, upload some images to the gallery. You can reverse the order of images as well by clicking on the button ‘Reverse order’. After all the edits are done click on the ‘Update gallery’.
This is what change you will be able to see in your post.
Lastly, click on ‘Update’ and then ‘View post’. Hurray! Our gallery is ready.
Custom Shortcode in WordPress
As we are about to create our custom shortcode, let’s know why we need to create it. Whenever we need to add a new dynamic functionality other than default to our site, themes, or plugins, we use the help of shortcodes. It is even easier to work with a shortcode because once you create it you can use it anywhere inside your site anytime.
Steps to create a custom shortcode in WordPress
Now let’s see an example of how we can create a custom shortcode in WordPress. We’ll start with a simple example followed by the complex one. No worries! The complex one is also not that complex.
Simple Example of custom shortcode in WordPress
Let’s see a simple example of how to create a custom shortcode in Wordpress. Generally, whatever theme you are using in your site there is a function.php file inside the theme’s folder.
Firstly, open the function.php file in a code editor and go to the bottom. Then, create a function my_shortcode there and inside the function just write anything you want to display. Like:
function my_shortcode(){
echo 'Hello! How are you?';
}Secondly, after this function is closed add an extra line of code.
add_shortcode('say_hello','my_shortcode');
Now, go back to your wp-admin panel and create a page or a post or you can edit any existing page or post as well.
Lastly, click on ‘Update’ and the page’s permalink. You’ll now be redirected to the ‘Shortcode tests’ page and can see the result there.
Practical Example of custom shortcode in WordPress
As you successfully created the simple shortcode, you are now ready to move further towards the complex one. Let’s see a practical example of how to create a custom shortcode in Wordpress.
For this, you need to refer to my last tutorial. In the previous tutorial, we created a plugin ‘todoApp’ and a custom post type ‘todos’. Additionally, here we will create some posts of type todos and display them on our website using the custom shortcode we are going to create.
Step 1:
First of all, let’s create some todos from our admin panel. Go to the wp-admin panel of your site. Then, click on “My Todo List” from the navigation menus and click on ‘Add New’. A page to create a new post of type ‘todos’ should appear on your screen. Add a title and some description to the post and publish it.
Note: Make sure your plugin folder is uploaded to your site and is activated. If you have already followed my previous article then there should not be any problem creating some todos. Also, you can download the previous project repository from GitHub.
Step 2:
Repeat step 1 for at least 2 times and you have your todo list ready.
Step 3:
Moving to the PHPStrom (or any code editor )we now will start coding. Open the todoApp plugin folder on your editor. Inside index.php, right after the closing bracket of add action, write new codes to create custom a shortcode in WordPress. Now we’ll create a function that will display the list of todos.
Step 4:
Create a function shortcode_todo_list(). Inside the function, start a div with class todo-list-wrapper and then put a heading. Right after the heading, we start another div classed as todo-list.
Step 5:
Now inside <?php ?> tags, we will create an array ‘args’ where we store some arguments like post type, posts per page, post status and other required arguments in the array. We need this array later on while querying the post data to be displayed.
Step 6:
After that, create a variable $query that holds the resulting value of WP_Query($args). Now if $query is not empty, we start a while loop. The loop will parse through each post and store the id of the post in $postId.
Step 7:
Now with the help of the post id, we’ll get the permalink of the respective posts. After that, let’s display the title of each post of type ‘todos’ inside <a></a> tag with a link pointing to the post itself.
function shortcode_todo_list() {
ob_start();
?>
<div class="todo-list-wrapper">
<h2> My Todo Lists</h2>
<div class="todo-list">
<?php
$args=array(
'post_type' => 'todos',
'posts_per_page' => -1,
'post_status' => 'publish',
);
$query = new WP_Query($args);
if ($query->have_posts()) :
echo '<p>';while ( $query->have_posts() ) : $query->the_post();
$postId=get_the_ID();echo '<a href="'.get_permalink($postId).'"> '. get_the_title() . '</a></br>';
endwhile;
echo '</p>';
wp_reset_postdata();
endif;?>
</div>
</div>
<?php
$content = ob_get_contents();
ob_end_clean();return $content;
}add_shortcode('todo_list','shortcode_todo_list' );
Here you can see some extra lines of codes that we haven’t discussed yet. The ob_start() function starts the output buffering.
$content = ob_get_contents();
ob_end_clean();return $content;
And this part of code returns the output buffered by ob_starts function. This is mandatory to use whenever we output HTML content from inside the PHP function. You can read about output buffering in detail here.
Step 8:
The code above is all that we summarized in step 4. Now it’s time to add a shortcode tag for the shortcode function. We do so by adding a line of code soon after the function’s closing bracket.
add_shortcode('todo_list','shortcode_todo_list' );Congrats! You successfully created a shortcode. Tag for your newly created shortcode is [todo_list].
Step 9:
Now move ahead to create a new WordPress page from the wp-admin panel -> Pages -> Add New. Add a title, and choose paragraph field and write the shortcode there.
[todo_list]
Step 10:
Now visit the page and you must see the list of todos that you created in step 1.
While clicking on each todo title you must be directed to the respective post.
Okay! This much we learned today. Now you can download this GitHub repository of the tutorial. I hope this article helped you to create your custom shortcode and understand it better as well. If something else happens, don’t hesitate to comment it on for help. Thank you for your time dudes!
