WordPress is quite popular due to numerous built in tools but this makes it hard to customize. Here’s when shortcodes play a big role, once you get used to creating shortcode, creating custom functionality can be done in a matter of minutes.
Here’s a brief version of what we will be talking about today:
- Create your code
- Save the code in wp-content folder
- Include the new file in the funtions.php file
- Use add_shortcode
- Place it wherever you want
Why do you need Shortcode?
As a WordPress developer, you might have many run-ins with sticky situations where custom functionality is needed. The HTML tags and the PHP codes can be stripped out of the posts and the pages by WordPress. This can be puzzling when you want a simple design modification.
Shortcodes can be a great help here. You can easily inject PHP or any other code where you want. Once you get a hang of shortcode markup, you don’t want to go back.
STEP 1: Create the Code
Here you’ll need to create all your functionalities. This depends on what’s needed to be executed. For example- The following shortcode can help you inject any custom message you want.
Note- This is just a demonstration but will give you a clear idea about the shortcode.
function my_hello_world_shortcode() {
return 'Hello world!';
}
Or
If You Have to pass Attributes it will be as follows:
function my_hello_world_shortcode( $atts ) {
$a = shortcode_atts( array(
'name' => 'world'
), $atts );
return 'Hello ' . $a['name'] . !';
}
[helloworld]
// Outputs "Hello world!"
[helloworld name="My Name"]
// Outputs "Hello My Name!"
This is a basic PHP function, here you can add anything that you want to execute on your site.
STEP 2: Save your code
Remember the above code SHOULD NOT be added to functions.php file. Create a separate file for these shortcodes and store it in the wp-content folder or create a plugin.
Create a file named “shortcode-function-hello-world.php” and save it in the wp-content folder. This will be safe from any kind of upgrades as well as any updates that can overwrite your functions.php file.
To save your files, you can recreate the next few steps too.
STEP 3: Custom PHP file
Now we need to command WordPress to find the custom shortcode file. If this is saved in the wp-content folder, you’ll add this to the functions.php file:
include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );
Or
For Plugin
include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );
This makes WordPress aware of the location of your content and helps integrate it in the functionality.
STEP 4: Define Your Shortcode
Before you start using shortcodes, the first thing you must to is to inform WordPress about what will be our shortcode. Add this in the code provided in Step 3 within your functions.php file.
add_shortcode( 'helloworld', 'my_hello_world_shortcode' );
After adding these two lines of code, this is how your functions.php file looks like:
STEP 5: Add your Shortcode
Once you have done this, all you need to do now is add your shortcode. For this, create a page or a post and add the shortcode to it.
You can see the code output on the published page/post:
And it’s done! Shortcodes can help you in quickly creating custom functionality and further integrate the same quickly into your website.
