WordPress shortcodes provide you extra functionality and allow you to embed content into pages, posts, and sidebars. Many plugins and themes use shortcodes and empower users to dynamically add content to their blogs. To better illustrate how shortcodes work, let’s take Contact Form 7 shortcode as an example:
[contact-form-7 id="12" title="hostinger-tutorials.com Contact Form"]
As you can see it’s pretty simple. We have Contact Form 7 macro in the square brackets. Macro is generated by Contact From 7 plugin. WordPress replaces the macro with content which is produced by a PHP function. If we add this shortcode to post, page or sidebar, WordPress would show our contact form.
But what if you you want to use WordPress shortcodes in theme files? Well, you can do this using WordPress do_shortcode function.
Let’s delve deeper and see how to use WordPress do_shortcode function.
What you’ll need
Before starting this tutorial you’ll need the following:
- Access to your WordPress admin area
Using WordPress do_shortcode
Now, that you have a basic idea of what shortcodes in WordPress are, let’s move ahead see how can you use WordPress shortcodes to boost your website’s functionality.
For instance, let’s assume that you want to include Contact Form 7 WordPress plugin somewhere in your theme header. But the problem is that you do not have any widgets there.
First of all, you would need to get the shortcode of the plugin you want to use. As an example, we will use the same Contact Form 7 shortcode:
- Access WordPress dashboard and click on Contact -> Contact Forms.
- You will find the shortcode for your form on the right side, near form title:1[contact-form-7 id="12" title="hostinger-tutorials.com Contact Form"]
- Double click on the shortcode and copy it.
Since our theme does not have widgets in header and we cannot simply copy and paste the shortcode, we will need to use WordPress do_shortcode function. It looks like this:
<?php echo do_shortcode( '[your shortcode goes here]' ); ?>
Now to add Contact From 7 to our header, we will have to edit header.php file. As mentioned before, it’s strongly recommended to backup your WordPress before altering any WordPress core files and use WordPress child theme.
- Access Hostinger control panel and click on File Manager
- Next, locate the WordPress installation folder (usually, it’s public_html) and navigate to wp-contents -> themes folder.
- Find your currently active theme folder, and open it.
- Since we want to add contact form into the header, open header.php.
- Scroll down the page and select the exact location and div wherein you want to add the form. Our WordPress shortcode with do_shortcode function will look like this:1<?php echo do_shortcode(“[contact-form-7 id="12" title="hostinger-tutorials.com Contact Form"]”); ?>
- Save the file and check how your website looks.
Note: In most cases, editing theme core files will break your WordPress template. Most likely you will have to alter CSS to make WordPress look good. Be sure to check our tutorials on how to inspect CSS styles with browser and download CSS cheatsheet.
We hope, by now you understood the sheer usefulness of shortcodes and their ability to boost the look and functionality of your website. We hope that the above tutorial was easy to follow and you now know how to use WordPress do_shortcode function. Still, if you have queries, do let us know in the comments section below.