Today , we are going to create custom shortcode in WordPress. Basically, an effective technique to alter your posts and pages in WordPress is to develop shortcodes. However, you can find it difficult to use such a function on your site if you’re unfamiliar with the procedure.
We’ve created a guide to assist you in getting started because of this. Without the need of additional plugins, you can start modifying your content by looking at how shortcodes operate and how to use them effectively.
We’ll talk about WordPress shortcodes in this post and why you might use them. Then we’ll demonstrate how to create custom shortcode in WordPress. Let’s get going!
What Are WordPress Shortcodes?
WordPress shortcodes function as shortcuts that make it simple to swiftly embed components into a post or page. Typically, they are composed of one line of code enclosed in square brackets, such as [exampleshortcode], for reference. The front end of your website will show a preset feature thanks to this code.
Shortcodes were originally made available by WordPress with the Shortcode API’s introduction. This makes it simple for users to include interesting items on their posts and sites, like Facebook’s “Like” button or Google Maps.
WordPress comes with some standard shortcodes, some of them are:
- caption: displays image galleries with captions wrapped around the content.
- Audio: files can be embedded and played.
- video: plays and embeds videos
- playlist: a collection of music or video assets that can be viewed covers embedded objects
Some of the top WordPress plugins provide their own shortcodes. For example, WP Forms and Contact Form 7 both include shortcodes that make it simple to rapidly insert a WordPress contact form into a post or page. Additionally, you may add a WordPress button shortcode anywhere you want on your website by using a plugin like MaxButtons.
What is Shortcode Api ?
The WordPress shortcode API is a simply collection of functions for adding shortcodes to posts and pages. For instance, including the following shortcode into a post’s or page’s body would add a photo gallery of the associated images:
[gallery]Why Custom Shortcodes in WordPress Are Essential ?
Custom Shortcodes in WordPress provide an essential toolkit for enhancing your website’s functionality and user experience. These shortcodes allow you to encapsulate intricate functionalities within intuitive tags, revolutionizing the way you manage and present content.
Streamlining Code Maintenance
A pivotal reason for integrating Custom Shortcodes in WordPress is streamlined code maintenance. By centralizing the code responsible for specific functionalities, you gain the power to effortlessly maintain and update your website. Any necessary changes can be implemented within the shortcode’s core, eliminating the need to modify every instance within your content.
Enabling User-Friendly Content Management
The value of Custom Shortcodes is also evident in their user-friendly nature. Particularly for non-technical users, these shortcodes offer a simple yet effective method to incorporate advanced features. This accessibility makes WordPress more inclusive, catering to a diverse range of users with varying technical expertise.
Optimizing Performance
Performance optimization is a key benefit of Custom Shortcodes. Developers can optimize these shortcodes to ensure efficient and lightweight code, resulting in faster page loading times. This optimization contributes to an overall seamless and swift user experience.
Unleashing Customization and Flexibility
The potential for customization and flexibility is another hallmark of Custom Shortcodes. Tailoring the shortcode’s output to match your website’s style and needs is made possible by controlling aspects like HTML, CSS, and presentation elements. This customization ensures a consistent brand experience for your audience.
Simplifying Complex Functionality
The ability to simplify complex functionality is at the core of Custom Shortcodes. By encapsulating intricate PHP functions into concise tags, these shortcodes provide an approachable way to manage advanced features on your WordPress site. This streamlining of complexity enhances both your efficiency and the user experience.
Promoting Separation of Concerns
Custom Shortcodes also promote a separation of concerns, benefitting both developers and content creators. Content creators can focus on crafting engaging content, while developers handle the technical implementation of features. This clear distinction simplifies workflows and ensures a collaborative yet efficient approach.
Its time to create your Own Custom Shortcode in WordPress
Let’s learn how to install a WordPress shortcode to your own theme or plugin now that you know how shortcodes function. Of course, you will decide what your shortcode does. To get you started in this example, we’ll apply a basic function.
1.Write Shortcode Function:
First, you will open up your theme’s function.php file. Next, Now we will write a php code that we will use to create our own custom shortcode.
function testshortcode_callback(){
return “text”;
}
add_shortcode(“testshortcode” , ”testshortcode_callback”);
You will echo the content that you want to display when you use your shortcode.
This php code has two parameters:
- $tag
- $Callback
$tag:
Shortcode tag to be searched in post content. its usually the name of the shortcode.
$Callback:
The callback procedure or function is to execute after the shortcode has been located.
By default, each shortcode callback receives three parameters:
an array of attributes ($atts), the shortcode’s content ($content), or null if it is not set ($content), and finally the shortcode tag ($shortcode tag)
.Enter your shortcode:
Now just write your shortcode name in square brackets.The shortcode’s content will be displayed on your website’s page.The shortcode be written by using classic editor.
In this article, we’ll walk you through the process of converting a PHP function into a custom shortcode in WordPress, along with two practical examples.
Example 1: Displaying Family Names and Birth Years
Let’s start with a simple PHP function that displays family names and birth years:
function familyName($fname, $year) {
echo "$fname Refsnes. Born in $year <br>";
}
familyName("Hege", "1975");
familyName("Stale", "1978");
familyName("Kai Jim", "1983");
To achieve the same result using a WordPress shortcode, follow these steps:
Step 1: Open Your Theme’s functions.php File Navigate to your WordPress theme’s folder and locate the functions.php file.
Step 2: Define the Custom Shortcode Function Insert the following code in your functions.php file to define the custom shortcode function:
function family_name_shortcode($atts) {
$atts = shortcode_atts(array(
'fname' => '',
'year' => ''
), $atts);
return "{$atts['fname']} Refsnes. Born in {$atts['year']}<br>";
}
add_shortcode('family_name', 'family_name_shortcode');
Step 3: Using the Custom Shortcode With the custom shortcode function in place, you can now use it in your WordPress content. For example:
[family_name fname="Hege" year="1975"]
[family_name fname="Stale" year="1978"]
[family_name fname="Kai Jim" year="1983"]
Example 2: Highlighting Important Text
Consider a scenario where you want to highlight certain text within your WordPress content. You can create a custom shortcode for this purpose.
Step 1: Define the Custom Shortcode Function Add the following code to your functions.php file:
function highlight_text_shortcode($atts, $content = null) {
return '<span class="highlighted">' . $content . '</span>';
}
add_shortcode('highlight', 'highlight_text_shortcode');
Step 2: Using the Custom Shortcode Now, you can use the [highlight] shortcode to highlight text within your content:
This is a [highlight]highlighted text[/highlight] in the article.
You will echo the content that you want to display when you use your shortcode.
We at it doctorz, also created a video version of this article for you
Conclusion:
Previously we learned how to fix maintance mode error in wordpress and today we learned how to create custom shortcodes in wordpress.
Shortcodes make it simple to add complex functionality to WordPress posts and pages. They are simple to create and improve your current project by adding dynamic functionality to simple content.
In this article, you have learnt how to create your own custom shortcode in just 2 simple steps.
- Write a php function that executes custom shortcode
- How to write and where to write your shortcode.
If you liked this article please make sure to follow us on social media and youtube.