Shortcodes are a WordPress feature you can use to add new elements and functionality to your website. For example, a plugin may enable you to create advanced contact forms and provide you with a shortcode to help you add them to your site. The problem is, your options when it comes to shortcode placement are limited to the body of your pages and widgets.
If you want more flexibility when it comes to the location of your new elements, WordPress can help you. There’s a function called do_shortcode, which you can use to add shortcodes to any part of your site. The only caveat is you’ll need to edit a few WordPress files to use it.
In this tutorial, we’re going to talk more about what WordPress shortcodes are and how they work. Then we’ll discuss when to use WordPress do_shortcode function and teach you how to do it. Let’s get to work!
Table of Contents
- What WordPress Shortcodes Are (And How They Work)
- An Introduction to the PHP do_shortcode Function
- 2 Elements You’ll Need Before Getting Started
- How to Use the WordPress do_shortcode Function (In 3 Steps)
What WordPress Shortcodes Are (And How They Work)
Shortcodes are brief code snippets you can add through your WordPress editor or its widgets. Each shortcode corresponds to a specific element or feature that shows up on the front end when someone views the page it’s used on.
For example, the Contact Form 7 plugin enables you to create advanced contact forms you can place anywhere on your site. To do this, the plugin generates a unique shortcode for each of your contact forms, such as this one:
When your contact form is ready to see the light of day, simply place the shortcode on any of your pages and posts using the WordPress editor:
You’ll only see the snippet of code on your end. However, when someone accesses the page, they’ll be able to see and interact with your new contact form:
This is just a single example of what you can do using shortcodes. Plenty of WordPress plugins use them liberally, since they provide you with a simple way to place new elements on your website.
You can even create your own shortcodes by playing around with WordPress functions.php file. This file enables you to add new functionality to your themes using PHP. You’ll need to know your way around the language if you want to add complex features, but creating basic shortcodes is simpler than you might imagine. In any case, that’s a topic for another article, so let’s get back to talking about the do_shortcode function.
An Introduction to the PHP do_shortcode Function
By default, you can only use shortcodes within the WordPress editor or your page’s widgets. For example. if you want to place a shortcode within your header or another section of your theme, you’re out of luck.
At least, that’s the case if you’re averse to tweaking a file or two by adding codes to them. Otherwise, you can use the do_shortcode function to call up any shortcode you want – and its corresponding features – on almost any of your theme’s files. Here’s what a do_shortcode function looks like:
<?php echo do_shortcode( '[your shortcode]' ); ?>
Basically, it’s just a wrapper for the shortcode you want to use. It executes the shortcode you tell it to, wherever you decide to place it. In other words, you get full control over its placement, but the downside is that you may also break important elements of your theme if you’re not sure where to put it. Given this, there are two elements of preparation we should talk about before you get to work.
2 Elements You’ll Need Before Getting Started
Since we’re going to be editing essential WordPress files, we’ll need to talk about how to access them, which we’ll do in a minute. For now, let’s discuss safety and how to create a backup for your website so you have a restore point in case anything goes wrong.
1. A Full, Recent Backup Of Your Website
When using do_shortcode function (or otherwise poking around within your theme’s core files), there’s a small chance you may cause errors on your website. It might be that your shortcode conflicts with other important functionality, or displaces an element of your theme’s design. In any case, having a recent backup can save you a lot of headaches if something goes wrong that you can’t fix.
Fortunately, 000Webhost users have access to the All-In-One WP Migration plugin out of the box. With this plugin, you can create as many backups as you need for your WordPress website. Within your dashboard, navigate to the All-In-One WP Migration > Backups tab and click on the CREATE BACKUP button:
On the next page, click on the Export to button and choose the File to save your backup as a local file. Now, the plugin will package your entire website into a single file, which you can restore by going to the plugin’s Import tab and uploading it:
You can also access your most recent backups without having to re-upload them. Just navigate to the All-In-One WP Migration > Backups tab and find the backup you’re looking for in the list within:
The plugin enables you to restore, download, and delete backups directly to save you time. We recommend backing up at least once a week to be on the safe side. However, if you’re going to be making any significant changes to your website’s functionality – as we will be in a couple of minutes – an extra backup can’t hurt.
2. Access to Your Server Via File Transfer Protocol (FTP)
There are several ways you can access your website’s files if you need to edit them. For example, 000Webhost users have access to a file manager tool within their hosting dashboard.
However, in most cases, we recommend using File Transfer Protocol (FTP) since it provides you with many more options to edit and interact with your files. To access your website via FTP, you’ll need a client. We recommend using FileZilla since it’s a powerful open-source tool that includes all of the features we need.
Once you download, install, and run FileZilla, you’ll see several empty fields at the top of the screen corresponding to the FTP credentials you need to connect to your website. These aren’t the same as your WordPress admin credentials, and to find them, you’ll need to log into your 000Webhost account. Here, jump to the Settings > General tab and look for the FTP Details section at the top of the screen:
FTP should be turned on by default, so all you need to do is copy your Host Name and Username details. Then, enter them into FileZilla alongside your 000Webhost password. As for which port to set, leave this field empty and the client will default to the most common option. When you’re ready, click on the Quickconnect button to the right:
Now, FileZilla will establish a connection to your website. When it does, two folders will show up on the lower-right corner of your screen, called public_html and temp:
The first folder is also known as WordPress’ root directory, and it contains all of the platform’s files. Leave this window open for now, since we’ll need to delve deeper into WordPress’ files for the next part of this guide.
How to Use the WordPress do_shortcode Function (In 3 Steps)
As we mentioned earlier, you can add the do_shortcode anywhere you want within your theme’s template files. Where to place it is up to you. For this tutorial, we’re going to use Twenty Seventeen’s header.php file to showcase the process.
Step #1: Find the Shortcode You Want to Add to Your Theme
It stands to reason that to use the do_shortcode function, you’ll need a shortcode you want to add to your theme. You can choose any shortcode you want, be it from a plugin or a function you registered manually. However, there are a few considerations to keep in mind before you make a decision:
- Make sure the element you want to add to your theme fits into the section you have in mind. To that end, we recommend testing the shortcode on a regular page beforehand to see how it works and how much space it takes up.
- Consider if the placement you have in mind is logical. For example, it wouldn’t make sense to add a full-fledged contact form your theme’s header. However, a one-line signup form wouldn’t look out of place within a secondary menu.
In any case, the shortcode you use and where to place it is up to you. When you’re ready, move on to step number two.
Step #2: Find Your Theme’s header.php File
If you kept FileZilla open, you should still be in the WordPress root folder. From here, navigate to the wp-content/themes/twentyseventeen folder and find the header.php file:
Each WordPress theme has its own header.php file, and editing one of them won’t add the do_shortcode function to the others in case you decide to switch active themes. This also means you can disable the theme for troubleshooting purposes if you run into an issue while implementing the function.
Secondly, each WordPress theme also comes with its own directory, located within wp-content/themes. In most cases, it’ll be easy enough to recognize which folder corresponds to which theme. For now, let’s return our focus to the header.php file. In the next section, we’ll talk about how to edit it and add the do_shortcode function.
Step #3: Add the do_shortcode Function to Your Theme’s header.php File
To edit your theme’s header.php file, right-click on it and choose the View/Edit option. This will open a copy of the file using your default local text editor, like so:
How your header.php file looks will depend on the theme you’re using. In most cases, you should find several div sections within, which are the sections that make up your header. Your do_shortcode function should go within the div that corresponds to your desired location. Here’s another example of a do_shortcode in action, using a Contact Form 7 shortcode:
<?php echo do_shortcode(“[contact-form-7 id="7" title="My Contact Form"]”); ?>
Remember you need to replace the content here with your own shortcode and any additional parameters you want to add to it. When the do_shortcode is in place, save the changes to the header.php file and close it. FileZilla will ask you if you want to replace the existing version of the file with the one you just edited, to which you should answer “Yes”. Now, go ahead and check out how your website looks to see if your shortcode is working as intended.
Ideally, your shortcode shouldn’t break the section where you add it to or interfere with any of its other elements, as in the example above. It may require a bit of trial and error to get it right, but you won’t cause any lasting damage to your website in the process, so don’t be shy about it!
WordPress shortcodes are a powerful feature that enables you to add new functionality and elements to your website. The only downside to using shortcodes is that you don’t have a lot of control over where to place them.
However, WordPress offers a solution to this problem through coding. There’s a function called do_shortcode, which enables you to add shortcodes to any part of your theme. It gives you practically full control over their placement. Let’s recap how to use it quickly:
- Choose the shortcode you want to add to your theme.
- Find your theme’s header.php file.
- Add the do_shortcode function to your theme’s header.php file.
Do you have any questions about how to use the do_shortcode function in WordPress? Let’s talk about them in the comments section below!