**Shortcode in** [**WordPress**]) is a key to add dynamic codes to your page and is used to reduce the amount of code you need to write. You can’t add executable [PHP]) codes in your post or page content. To insert executable code in your content you have to create or use WordPress Shortcodes. In this post you will learn how to create and add shortcode or even custom WordPress shortcode with parameters in your theme with shortcode example, step by step.
## What is Shortcode in WordPress?
WordPress filters all content to make sure that no one uses posts and page content to insert malicious code in 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.
The [**Shortcode API**]) is a simple set of functions for creating WordPress shortcodes for use in posts and pages. WordPress introduced shortcode in version 2.5. For instance, the following shortcode (in the body of a post or page) would add a photo gallery of images attached to that post or page.
**They are displayed inside square brackets.** Many WordPress plugins and themes use shortcodes to add specialized content like contact forms, image galleries, sliders, and more.
Such dynamic content would need writing a lot of code. Short codes simplify this process of adding features to a WordPress website. They add HTML and other dynamic markup languages. Into the post, page, widget or comment
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.
If you only create one feature on a specific post or page you don’t need use shortcode. But, if you will use that shortcode in many different posts or pages, you may want to use a plugin to add a shortcode.
## How to Add Shortcode in WordPress?
You can insert shortcodes in WordPress on:
* **Posts**
* **Pages**
* **Widgets**
* **Themes**
To adding a shortcode in your page or post content, simply you can add it with shortcode block.
Edit the page you want to add shortcode.
You need to click on the add block button to insert a shortcode block.
Find shortcode block in Gutenberg blocks list and add it.
Paste the shortcut of your shortcode inside the block like the example above.
If you don’t have access to shorcode block like in sidebar, you can add with WordPress build-in Text widget.
If you are still using the old classic editor in WordPress, simply edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to display.
## How to Add a Shortcode in WordPress PHP Files
Sometimes you may want to use a shortcode inside a PHP file. Basically, you can add a shortcode to any WordPress theme template by simply adding the following code. Here is the adding shortcode example, programmatically.
<?php echo do_shortcode(“[your_shortcode]”); ?>
## Support Shortcodes in Widgets
If WordPress doesn’t support your shortcodes in widgets, add the following codes in your **functions.php** file.
add_filter( ‘widget_text’, ‘shortcode_unautop’ );
add_filter( ‘widget_text’, ‘do_shortcode’ );
## How to Create Your Own Custom Shortcode in WordPress?
To create your custom shortcode in WordPress, open **functions.php** file and add your custom function in it.
function hs_custom_shortcode(){
return ‘<p>Hello World!</p>’;
}
add_shortcode( ‘hs_shortcode’, ‘hs_custom_shortcode’ );
As you see there is a function that prints “Hello World!”. You can create your shortcode in WordPress by **add\_shortcode** action.
The first argument is the name of the shortcode to use everywhere and the second argument is the function name.
Shortcode names should be all lowercase and use all letters, but numbers and underscores should work fine too.
Shortcode callback function can have three parameters. You can choose to use any number of them including none of them.
* **$atts** – an associative array of attributes, or an empty string if no attributes are given
* **$content** – the enclosed content (if the shortcode is used in its enclosing form)
* **$tag** – the shortcode tag, useful for shared callback functions
Any string *returned* (not echoed) by the shortcode handler will be inserted into the post body in place of the shortcode itself.
### Example of Create WordPress Shortcode With Parameters and Attributes
In the previous example, there is a WordPress shortcode that doesn’t accept the parameters. If you need to pass a parameter to your shortcode function, you have to change your code like below.
function hs_custom_shortcode($atts){
$a=shortcode_atts(array(
‘first_name’ => ”,
‘last_name’ => ”,
), $atts);
return ‘<p>Welcome ‘.$a[‘first_name’].’ ‘.$a[‘last_name’].'</p>’;
}
add_shortcode( ‘hs_shortcode’, ‘hs_custom_shortcode’ );
In this code, function accepts two argument and displays them. Both attributes are optional.
In the page you can change your brackets like below.
[hs_shortcode first_name=”John” last_name=”Doe”]
Don’t use camelCase or UPPER-CASE for your $atts attribute names.
## Enclosing Shortcode in WordPress
The examples above show self-closing shortcode. If a shortcode macro is used to enclose content, its handler function will receive a second parameter containing that content.
function hs_custom_shortcode($atts, $content = null) {
$a = shortcode_atts(array(
‘first_name’ => ”,
‘last_name’ => ”,
), $atts);
return ‘<p>Welcome ‘ . $a[‘first_name’] . ‘ ‘ . $a[‘last_name’] . ‘ | ‘.$content.'</p>’;
}
add_shortcode(‘hs_shortcode’, ‘hs_custom_shortcode’);
And in your page edit:
[hs_shortcode first_name=”John” last_name=”Doe”]Honar Systems[/hs_shortcode]
When content is enclosed, the complete shortcode macro including its content will be replaced with the function output. It is the responsibility of the handler function to provide any necessary escaping or encoding of the raw content string, and include it in the output.
## Nested Shortcodes
If you want to add shortcode inside the shortcode like following code
Caption: [myshortcode]You have to change your first shortcode’s function.
function caption_shortcode( $atts, $content = null ) {
return ‘<span class=”caption”>’ . do_shortcode($content) . ‘</span>’;
}
The second shortcode added by **do\_shortcode** action.
## Remove Shortcode
To remove a shortcode, you can do it simply like below code:
remove_shortcode(‘hs_shortcode’);
More: [https://honarsystems.com/wordpress-development-shortcode/])