Do you want to add shortcodes in WordPress but don’t know how to get started?
Shortcodes are an easy way to add dynamic content to your WordPress posts, pages, and sidebars. Many WordPress plugins and themes use shortcodes to add specialized content like contact forms, image galleries, sliders, and more.
In this article, we will show you how to easily add a shortcode in WordPress. We will also show you how to create your own custom shortcodes in WordPress.
What are Shortcodes?
Shortcodes in WordPress are code shortcuts that help you add dynamic content to WordPress posts, pages, and sidebar widgets. They are displayed inside square brackets like this
[myshortcode]
To better understand shortcodes, let’s take a look at the background of why they were added in the first place.
WordPress filters all content to make sure that no one uses posts and page content to insert malicious code into the database. This means that you can write basic HTML in your posts, but you cannot write PHP code.
But what if you wanted to run some custom code inside your posts to display related posts, banner ads, contact forms, galleries, etc?
This is where Shortcode API comes in.
Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.
When WordPress finds the shortcode it will automatically run the code associated with it.
Let’s see how to easily add shortcodes to your WordPress posts and pages.
How to Add a Shortcode in WordPress Theme Files
Shortcodes are meant to be used inside WordPress posts, pages, and widgets. However, sometimes you may want to use a shortcode inside a WordPress theme file.
WordPress makes it easy to do that, but you will need to edit your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.
Basically, you can add a shortcode to any WordPress theme template by simply adding the following code.
<?php echo do_shortcode(“[your_shortcode]”); ?>
WordPress will now look for the shortcode and display its output in your theme template.
How to Create Your Own Custom Shortcode in WordPress
Shortcodes can be really useful when you want to add dynamic content or custom code inside the WordPress post and pages. However, if you want to create a custom shortcode, then it requires some coding experience.
// function that runs when shortcode is calledfunction wpb_demo_shortcode() { // Things that you want to do.$message = 'My First Shortcode!'; // Output needs to be returnreturn $message;}// register shortcodeadd_shortcode('greeting', 'wpb_demo_shortcode');
In this code, we first created a function that runs some code and returns the output. After that, we created a new shortcode called ‘greeting’ and told WordPress to run the function we created.You can now use add this shortcode to your posts, pages, and widgets using the following code
[greeting]
it will run the function you created and show the desired output.
How to Create Your Own Custom Shortcode with parameters in WordPress
add_shortcode( ‘bartag’, ‘wpdocs_bartag_func’ );
function wpdocs_bartag_func( $atts ) {
$atts = shortcode_atts( array(
‘foo’ => ‘no foo’,
‘baz’ => ‘default baz’
), $atts, ‘bartag’ );
return “foo = {$atts[‘foo’]}“;
}
Example with enclosed content: [baztag]content[/baztag]
function button_callback( $atts, $content ) {
// It's a default value.
$default = array(
'url' => '',
);
// You will pass default value after that user define values.
$button_attrs = shortcode_atts( $default, $atts );
return sprintf( ‘<a href=”%s”>%s</a>’, $button_attrs[‘url’], do_shortcode( $content ) );
}
add_shortcode( 'test-button', 'button_callback' );
Example [test-button url=”https://google.com”]
We hope this article helped you learn how to add a shortcode in WordPress.