Whether you’re just a novice or an experienced developer, developing a WordPress site oftentimes could be painfully time-consuming. Especially, building a large-size website or an online portal can eat up a lot of your time.
Possibly, you’ll search for hacks that could help save your development time. If that’s the case, then Shortcodes is considered to be one of the most useful WordPress time-consuming hacks worth a try.
In this post, I’ll be giving a brief introduction to WordPress Shortcodes, including their benefits. Additionally, I will use an example to demonstrate how you can create a simple Shortcode based on your needs and how it can be utilized.
Introduction to WordPress Shortcodes
Shortcodes are pieces of code that cuts down the need to write same code over and over again to implement specific functionality anywhere on the site. In short, “Shortcodes help do more with less code.” The format of Shortcode is, as follows:
[shortcode-name]
What’s more? Most of the pre-designed WordPress themes comes with built-in Shortcodes, so as to help you add extra functionality to your site. In case your theme does not have any extra Shortcodes, you can create your own custom Shortcodes as well. Now, before delving in-depth into creating a Shortcode and using it, let’s first discuss some major benefits of WordPress Shortcodes.
The 3 Major Benefits of WordPress Shortcodes
1. Shortcodes Helps in Improving Efficiency
The biggest benefit of Shortcodes is that it helps boost efficiency by enabling users to implement any particular functionality without having to write code repeatedly. Just think of WordPress Shortcodes like credit cards that lets you carry out several transactions, thereby saving you from keeping loads of cash.
2. Implements Complex Functional Feature With Little Input
Using Shortcodes in your pages or posts save you from the hassle of implementing complex features with little input. For example, you can embed a video on your website page or within a post using the video Shortcode only. Also, you can choose to display some text for representing a Shortcode in the page/post based on your preferences. To do so, you just need to write the Shortcode using two sets of brackets rather than just one:
[video]
3. Help Create Better (And Unique) Layouts
Most of the WordPress sites are built on a standard layout, which includes a header area, footer, a sidebar and the main content section. Thanks to Shortcodes, you can create almost any sort of layout for your site, comprising of your set of elements or components.
Step-by-Step Guide to Creating a Simple Custom Shortcode
Let’s now proceed with discussing the steps you need to follow for creating a Shortcode in WordPress. In our case, I’ll be creating a custom Shortcode that helps embed a call-to-action button into my post. The custom Shortcode will look something like:
[new_button]
Next, simply enter the following code in your theme’s functions.php file to insert the custom Shortcode into your post:
function my_custom_shortcode($atts){
$atts = shortcode_atts(
array(
‘text’ => ‘New button’,
‘color’ => ‘#FFFFFF’,
‘bg’ => ‘#05618b’
), $atts, ‘new_button’);
return ‘<button style=”color:’.$atts[‘color’].’; background: ‘.$atts[‘bg’].'”>’.$atts[‘text’].'</button>’;
}
add_shortcode( ‘new_button’, ‘my_custom_shortcode’ );
Probably, some of you might be having problem understanding the above code. So, let’s break the code to better understand how it works:
Step 1 – In the beginning, we’re creating a function that contains the code for our custom Shortcode named ‘new_button’. The function has been named as ‘my_custom_shortcode’ and will help in creating the output of the Shortcode. Besides this, we are passing a parameter ‘$atts’ for our custom function using the following line of code:
function my_custom_shortcode($atts){
Step 2 – Shortcodes even allows adding parameters for extending any specific functionality. In our case, as you can see in the code above three arguments have been passed to add text and apply color to the button. For this purpose, we have used the WordPress built-in function: shortcode_atts. This function helps define different parameters in our custom Shortcode. Thus, our [new_button] shortcode supports 3 parameters, including text, color and bg.
$atts = shortcode_atts(
array(
‘text’ => ‘New button’,
‘color’ => ‘#FFFFFF’,
‘bg’ => ‘#05618b’
), $atts, ‘new_button’);
Step 3 – Next, the “return” statement helps in making changes to the text and background color of the button:
return ‘<button style=”color:’.$atts[‘color’].’; background: ‘.$atts[‘bg’].'”>’.$atts[‘text’].'</button>’;
Step 4 – Here, we’ve just closed the function.
}
Step 5 – So far we have just created a function for creating the Shortcode, but it is also important to define the newly created Shortcode. To do so, we’re making use of the add_shortcode function. This function takes two arguments: ‘new_button’ and ‘my_custom_shortcode’. The first argument only specifies the shortcode that we have built, and the second one calls our function my_custom_shortcode($atts).
add_shortcode( ‘my_button’, ‘my_custom_shortcode’ );
Step 6 – Lastly, we just need to save functions.php file of our website theme. And then, we can call the custom shortcode using the [new_button] shortcode wherever we want.
How Can You Utilize Your Custom Shortcode?
Merely creating a Shortcode is not the end of your quest to embed additional functionality in your page or post. You must also be familiar with the correct way to utilize the Shortcode. Remember, you can use your custom Shortcode using two different options:
First off, add the below line of code into your theme files for using the Shortcode:
<?php echo do_shortcode( ‘ [new-button]’ ) ?>
Another option that helps utilize your newly created Shortcode requires inserting the Shortcode directly in your page/post editor screen:
[new_button]
How to Add Parameters to Custom Shortcode?
You can choose to create a Shortcode with or without any arguments. So, now I’ll be explaining how to make use of the custom Shortcode with arguments. For this purpose, you’ll again have to choose between any one of the above discussed options:
Add this line of code in your theme files:
<?php echo do_shortcode( ‘ [new_button color=”#FFFFFF” bg=”#966506″ text=”My Custom Button”]’ ) ?>
Or else, embed the custom Shortcode ‘[new_button]’ directly in the editor.
Here’s a screenshot that displays both of these options in the WordPress editor screen:
Next, you will be able to see your custom button in the front-end of your theme that looks something like:
There are two buttons on the front-end: first is the default Shortcode without any parameters, and the second one contains parameters as well as attributes.
Button 1 – “HI. MY BUTTON” is the one comprising of attributes that have been defined using Shortcode.
Button 2 – “MY CUSTOM BUTTON” is the default button without any arguments.
Conclusion
Hopefully, you would have come to know how incredibly useful Shortcodes are, especially when you have to recall the same elements over and over again. For example, you might need to embed buttons multiple times for each blog post category and so on. Thanks to our custom Shortcode, we don’t have to go through the hassle of writing a function repeatedly. Rather, we can insert the button by simply adding the Shortcode [new_button] into the post.
You can follow the same steps and process in this post for creating a custom Shortcode based on your preferences.
0 comments:
Post a Comment