How to create a custom shortcode in WordPress

Have you ever wanted a snippet of code to fire in a specific spot on a page or post, but don’t want to create a whole new template file to make it happen? Then you need a custom shortcode!

A shortcode is a feature within WordPress that allows you to run a function on a page or post, but only when a specific line of text is used in the editor. You’ve likely used shortcodes before without thinking much about it. Popular plugins like GravityForms use shortcodes to allow you to insert a form anywhere on your site. For example, just type [form] and (if that was the correct shortcode for that plugin) a form would appear when the page is published.

So, let’s make one! The basic skeleton of a shortcode looks like this…

//Create Shortcode
function newshortcodeFunction() {

return '<strong>display this text</strong>';
}
add_shortcode('newshortcodetext', 'newshortcodeFunction');

What does that code mean? First, we told WordPress that we want to create a new function called “newshortcodeFunction.” Next, we told WordPress what we want to happen whenever that function is called. In this case, we just want WordPress to return a chunk of HTML that will display the words “display this text” in bold. Finally, we told WordPress to add a shortcode called “newshortcodetext” that will load the function “newshortcodeFunction.”

NOTE: Echo vs Return? If you use “echo” while writing a function, WordPress will display the results of your code at the top of the page. If you use “return,” it will display the results at whichever point in the page’s text it was called. Shortcodes are typically used because you want to fire off some code in a page in a very specific spot (like displaying a form or a gallery), so you will want to always use “return” while creating shortcodes. Check out this StackOverflow conversation to learn more about the “why” behind this.

Paste that code snippet at the bottom of your functions.php file. (in a Child Theme of course!) To test it out, type [newshortcodetext] into a new post or page in the WordPress editor and see if your text displays correctly when published or previewed.

Voila! You have just created your first shortcode! Now, let’s create something you might actually need. How about displaying a different bit of content depending on whether or not your website visitor is logged into your WordPress site?

//Create Shortcode for Logged in vs Logged Out Content
function databasebuttonText() {

if( is_user_logged_in() ) {
return '<center><a class="button" title="Link to the resume database" href="http://mysite.com/search/">Search the Database</a></center>';
} else {
return '<center><a class="button" title="Link to login screen" href="http://mysite.com/wp-login.php">Login to Access the Database</a></center>';
}
}
add_shortcode('databasebutton', 'databasebuttonText');

Now you can use [databasebutton] to display a button whose content and link will change automatically depending on whether or not your user is logged in. You can style the button using CSS. In the code example above we told the browser to use the class “button” for our link. You can define that class in your CSS style sheet to make it look however you please. This button was created using this style:

Big Button

.button {
    border-color: #f15d22;
    background-color: #f15d22;
    color: #fff;
    border-style: solid;
    border-width: 5px;
    border-radius: 15px;
    padding: 10px;
    margin: 15px;
    font-size: xx-large;
    max-width: 100px;
    text-decoration: none;
}

As with everything on WordPress and in the world of web development, you can take and expand this as far as your imagination will allow. What are some ways you’ve used custom shortcodes? Do you have a situation that you think could be solved with a shortcode but aren’t sure how to execute it? Drop a comment below and let’s chat about it!