• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Add A Shortcode In WordPress

Bhagwad Park

Published on: August 8, 2018

Categories: WordPress 1

Shortcodes are a very powerful feature in WordPress that allows you to replace some text with something else when the page is displayed. Since the processing for the shortcode happens in the background at runtime, the result can be different. Perhaps you want to pull a value from a database. In this step by step tutorial with screenshots, I’ll show you how to add a shortcode, and how we can make it progressively more useful.

Step 1: Adding a Basic Shortcode to WordPress

To start with, you’ll need to know how to add code to your WordPress installation either through functions.php, or via a custom plugin. I suggest the latter, and show you how to do this in an earlier tutorial. Once you know how to add code like this, copy and paste the following into either functions.php or your custom location:

function basic_function( $atts, $content = null) {

    return 'Hello World';
    
}
add_shortcode( 'sample_shortcode', 'basic_function' );

Save your changes. Now open up a new test post and type the following:

[sample_shortcode]

Like this:

Using the shortcode in WordPress

In the text editor, it shows up as a shortcode. But if you now preview the post, you will see this:

Hello World Output

We’ve replaced [sample_shortcode] with “Hello World”. The function “add_shortcode” accepts the name of our custom shortcode, and the name of the function that handles it. In this case, the function name is “basic_function” and it just returns “Hello World”.

This is an example of a self-closing shortcode. It has just one section. But shortcodes can have beginnings and endings.

Step 2: Creating Enclosing Shortcodes

Sometimes you want the shortcode to process a bit of text. In that case, we can enclose the text in the shortcode like this:

[sample_shortcode]This is the content[/sample_shortcode]

Note how we’ve included a closing shortcode tag with [/sample_shortcode]. When sent to the function, the text will be stored in the $content variable. For example, this code:

function basic_function( $atts, $content = null) {

    return $content;
    
}
add_shortcode( 'sample_shortcode', 'basic_function' );

Will just print whatever’s inside the shortcode. Like this:

Output of Content

Again, not much use to us. But we can manipulate the text before printing it. Which brings us to attributes.

Step 3: Using Attributes with Shortcodes

Attributes in shortcodes allow the writer to include some customizations. For example, I’m going to include two attributes with our shortcode:

  1. “bold” – if ‘yes, we want the text to be bold
  2. “italics” – if ‘yes’, the text will be italicized as well

So for example, here is the shortcode I’ll use in the text editor with the two parameters:

[sample_shortcode bold='yes' italics='yes']This is the content[/sample_shortcode]

I’ve used two attributes and given them both the value of “yes”. Here is the code:

function basic_function( $atts, $content = null) {

    if ($atts['bold'] == 'yes')
        $content = '<strong>'.$content.'</strong>';

    if ($atts['italics'] == 'yes')
        $content = '<em>'.$content.'</em>';
	
	return $content;
    
}

Attributes are accessible using the $atts array. So the values of “bold” and “italics” can be accessed via:

  1. $atts[‘italics’]
  2. $atts[‘bold’]

Here we just check if either of these is “yes”, and if so, we just add the HTML and return the value of $content. The output of the shortcode:

Bold and Italicized Content

As you can see, the text is both bold and italicized. Within the shortcode, we can use any kind of PHP we want. So if we want to pull data from a table, we can specify the keys in the attributes and use them for the database query. There’s really no limit to the uses we can find.

Shortcodes in WordPress make it unique. We can create websites that would otherwise be impossible with traditional CMS platforms. It’s just another reason why WordPress powers so much of the web!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA