Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Shortcode in WordPress (Beginner’s Guide)

Imagine being able to add new things to your WordPress website, like slideshows, contact forms, or even special lists, just by typing a simple code. That’s the power of shortcodes.

You’ll find that lots of WordPress plugins and themes can use shortcodes to add extra features to your site. Many of our readers ask us the best way to add them to their posts, pages, and sidebar.

In this article, we’ll show you how to use shortcodes on your WordPress website, step by step. We’ll even show you how to create custom shortcodes if you want to get really creative.

How to add a shortcode in WordPress

What Are Shortcodes?

Shortcodes in WordPress are code shortcuts that help you add dynamic content to WordPress posts, pages, and sidebar widgets. They are displayed inside square brackets like this:

[myshortcode]

To better understand shortcodes, let’s take a look at the background of why they were added in the first place.

WordPress filters all content to make sure that no one uses posts and page content to insert malicious code into the database. This means that you can write basic HTML in your posts, but you cannot write PHP code.

But what if you wanted to run some custom code inside your posts to display related posts, banner ads, contact forms, galleries, or something else?

This is where the Shortcode API comes in.

Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.

When WordPress finds the shortcode, it will automatically run the code associated with it.

Let’s see how to easily add shortcodes to your WordPress posts and pages. You can use the links below to jump to your preferred method.

Adding a Shortcode in WordPress Posts and Pages

First, you need to edit the post and page where you want to add the shortcode.

After that, you need to click on the add block button ‘+’ to insert a Shortcode block.

Add a shortcode block

After adding the Shortcode block, you can simply enter your shortcode in the block settings.

The shortcode will be provided by various WordPress plugins that you might be using, such as WPForms for contact forms or OptinMonster for email marketing.

Enter your shortcode

To learn more about using blocks, see our Gutenberg tutorial for more details.

You can now save your post or page and preview your changes to see the shortcode in action.

Adding a Shortcode in WordPress Sidebar Widgets

You can also use shortcodes in WordPress sidebar widgets.

Simply visit the Appearance » Widgets page and add a ‘Shortcode’ widget block to a sidebar.

Add a shortcode widget block

Now, you can paste your shortcode inside the text area of the widget.

Don’t forget to click on the ‘Update’ button to store your widget settings.

Enter shortcode in widget block

After that, you can visit your WordPress website to see the live preview of the shortcode in the sidebar widget.

Adding a Shortcode in Old WordPress Classic Editor

If you are still using the old classic editor in WordPress, then here is how you can add shortcodes to your WordPress posts and pages.

Simply edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to be displayed. Just make sure the shortcode is in its own line.

Add shortcode to classic editor

Don’t forget to save your changes. After that, you can preview your post and page to see the shortcode in action.

Adding a Shortcode in WordPress Theme Files

Shortcodes are meant to be used inside WordPress posts, pages, and widgets. However, sometimes, you may want to use a shortcode inside a WordPress theme file.

WordPress makes it easy to do that, but you will need to edit your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Basically, you can add a shortcode to any WordPress theme template by simply adding the following code:

<?php echo do_shortcode('[your_shortcode]'); ?>

WordPress will now look for the shortcode and display its output in your theme template.

Adding a Shortcode in Block Theme Files With the Full-Site Editor

If you are using a block theme, then you’ll find it easier to add shortcodes in your WordPress theme files using the full site editor.

You can access this tool by selecting Appearance » Editor from the WordPress dashboard.

You will be shown your theme’s home template by default, and you can switch to other templates by selecting the ‘Templates’ option.

Choosing a Template to Edit in the Full Site Editor

Once you have chosen a template, you can begin to edit it by clicking in the right pane of the editor. The editor will now fill the screen.

Now you can click the ‘+’ block inserter icon and search for the shortcode block. After that, simply drag it onto the template and type the shortcode you wish to use.

Adding a Shortcode Block in the Full Site Editor

Don’t forget to click the ‘Save’ button at the top of the screen to store your changes.

Creating Your Own Custom Shortcode in WordPress

Shortcodes can be really useful when you want to add dynamic content or custom code inside the WordPress post and pages. However, if you want to create a custom shortcode, then it requires some coding experience.

If you are comfortable with writing PHP code, then here is a sample code that you can use as a template:

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

In this code, we first created a function that runs some code and returns the output. After that, we created a new shortcode called ‘greeting’ and told WordPress to run the function we created.

You can add this code to your theme’s functions.php file manually or use a code snippet plugin like WPCode.

Adding Code to WPCode

For more details, you can see our guide to adding custom code in WordPress without breaking anything.

Once you have done that, you can add this shortcode to your posts, pages, and widgets using the following code:

[greeting]

It will run the function you created and show the desired output.

Now, let’s take a look at a more practical usage of a shortcode.

In this example, we will display a Google AdSense banner inside a shortcode:

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Don’t forget to replace the ad code with your own advertisement code.

You can now use the [my_ad_code] shortcode inside your WordPress posts, pages, and sidebar widgets. WordPress will automatically run the function associated with the shortcode and display the advertisement code.

Shortcodes vs. Gutenberg Blocks

We are often asked by users about the differences between shortcodes vs. Gutenberg blocks.

Basically, blocks allow you to do the same thing as shortcodes but in a more user-friendly way.

Instead of requiring users to add a shortcode for displaying dynamic content, blocks allow users to add dynamic content inside posts/pages with a more intuitive user interface. A lot of popular WordPress plugins have switched to using blocks instead of shortcodes because they are more beginner-friendly.

We have put together a list of the most useful Gutenberg block plugins for WordPress that you may want to try.

If you want to create your own custom Gutenberg blocks, you can follow our step-by-step tutorial on how to create custom Gutenberg blocks in WordPress.

We hope this article helped you learn how to add a shortcode in WordPress. You may also want to see our guide on how to create a custom WordPress theme without writing any code and our expert pick of the best drag-and-drop WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

104 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez

    Thanks, the guide you share helped to create my own shortcode using the format you shared in the post. That means I can add any code to the part where you said “things you want to do”. Is it compulsory I add only PHP code, can I add a working HTML code there ?

    • WPBeginner Support

      With how the code is currently set up you would need to add PHP and if you wanted a different language like HTML you would need to make some tweaks.

      Admin

  3. Andrew Wilson

    Hi Guys,

    Is it possible with this plugin to create a unique QR Code for users that sign up to your website?

    i.e. a person registers on the website, and as part of that process the back-end creates a unique QR Code for that user which if scanned by a third party takes them to their profile on the website?

  4. Moinuddin Waheed

    This is very helpful for making our own custom short codes.
    I have been using short codes for a while and have thought of making my own short codes to use but was not aware about the process.
    I have a bit of coding knowledge and can easily make shortcodes through php functions.
    Thanks for the guide.

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Admin

  5. Jiří Vaněk

    Thank you for the detailed instructions. I was able to add the shortcode to Gutenberg but could not use it as a php code. At the same time, it is evidently that simple. A bit smarter again thanks to wpbeginner.

  6. Mohammed

    In Example2 How did you define this shortcode ‘my_ad_code’ thought you didn’t define it as a function?

    • WPBeginner Support

      That is added with the code add_shortcode at the bottom of the example :)

      Admin

      • Mohammed

        ❤️❤️
        Appreciate for the best Article

  7. Josh

    One picture says “greatings” instead of “greetings” ;)

    • WPBeginner Support

      Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly :)

      Admin

  8. Maya

    Thanks for sharing such a detailed article keep up the good work!

    • WPBeginner Support

      You’re welcome, glad you found our guide helpful!

      Admin

  9. abuzar

    your guidence is very easy to learn. thanks you

    • WPBeginner Support

      You’re welcome!

      Admin

  10. Hugh

    Thanks for the great article. Works like a charm. However, although it is explained on the page link provided in the article, it may have been helpful to many readers if you had reiterated that to create shortcodes yourself (‘How to Create Your Own Custom Shortcode’ section of the article), you simply add the example code provided or your own code to the theme’s (or child theme’s) ‘functions.php’ file. Thanks again! :)

    • WPBeginner Support

      Thank you for that feedback! :)

      Admin

  11. Hafed benchellali

    Thank you for this great article!

    • WPBeginner Support

      You’re welcome!

      Admin

  12. Susan Benfatto

    Thank you for your tutorial, it was very useful

    • WPBeginner Support

      Glad it was helpful :)

      Admin

  13. Rohmah Azim

    Hi
    Can you tell me how I can add shortcode to my header?

    • WPBeginner Support

      You would need to use the method for the theme files from this article and add it to your theme’s header file.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.