Developing your website with WordPress is fun because it provides a lot of features in-built. It requires very little or in many common cases zero technical knowledge. This is the beauty of WordPress. Along with the in-built features it’s functionality can be enhanced with the use of thousands of plugins available. These plugins are built by many developers around the globe. These plugins provide shortcodes as well to add dynamic content to pages and in between posts. This post is going to give you a way to build custom shortcode.
Sometimes these plugins are not enough to provide the functionality you need. But if you have the basic knowledge of Frontend (HTML, CSS) and PHP then there is not need to worry. You can easily create your own custom shortcode which you can add anywhere in your website. For example, you may need a special kind of button or form to put at several places in your website. You can do that easily with the help of your custom shortcode.
Lets get to the main part where how you can achieve this. There are some prerequisites you need to have to make the custom shortcode work. These are following:
- Basic Knowledge of Frontend. (HTML, CSS, JavaScript)
- Basic Knowledge of Programming languages specially PHP. (conditionals, loops etc)
- Basic Knowledge of WordPress.
You can easily learn these from W3schools where many languages and platforms tutorials are available. They are very beautifully designed and easy to learns.
If you are covered with these the next steps wouldn’t put much burden on you. There are basically two major ways to achieve this. One of them is through functions.php of your theme. And second is by creating a plugin for it. Plugin is helpful when you need the same functionality for multiple sites or probably intended to sell it.
For this tutorial we are going to use the first method to develop our custom shortcode, which is through functions.php file. The important thing is to make sure that you are making the changes into the functions.php of the child theme. This is because child themes are designed to make changes into the original theme. I will write about child themes soon.
Custom Shortcode Function
First we are going to create a normal php function with a return string. This string is what is going to be displayed on the frontend. For example we want to display the current date in a particular format, so the function will look something like below.
function custom_display_current_date_html() {
$mydate = date("l jS \of F Y h:i:s A");
return $mydate;
}You can add this function at the end of the functions.php file of your child theme. This function returns the current date in the defined format. Now to associate this function to a shortcode we will add the following code below the above code in functions.php.
add_shortcode('custom_date','custom_display_current_date_html');As you can see that we have called a function “add_shortcode”. The first argument here is the name of shortcode we are going to use. The second argument is the name of the function we just created. This basically tells WordPress to call this function if a shortcode named with the first argument is present.
Test Post
Now to test our shortcode add it anywhere in a post or a page something like below.
[custom_date]Make sure to add it in gutenberg block shortcode if you are using gutenberg. If you are using the other page builders like elementer, divi etc. there are options available for shortcode. Make sure to put it in the right place to make it work.
There is one more thing in wordpress custom shortcode and that is the arguments. We will be discussing this in our upcoming advanced post for shortcodes. Checkout more wordpress tutorials here.