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

7 Essential Tips for Using Shortcodes in WordPress

Whether you are a seasoned WordPress user or a complete beginner, mastering shortcodes can unlock new ways to customize your site without any coding knowledge.

Shortcodes allow you to add various functions to posts, pages, and widgets without actually writing any code. Many WordPress plugins and themes also use shortcodes to add different elements, like pricing grids and event calendars.

We’ve used shortcodes and shortcode plugins when building WordPress sites for our clients or testing them for our readers. Along the way, we’ve learned some ways to make using shortcodes easier and more effective.

In this article, we will share some essential tips for using shortcodes in WordPress.

Essential Tips for Using Shortcodes in WordPress

What Are Shortcodes in WordPress?

When you add content to a WordPress website, it automatically goes through security checks and filters to ensure no harmful code makes its way into posts, pages, or comments. This means you can’t directly write code in these areas.

However, there are times when you might need to add specific code to these sections. Shortcodes provide a way to do that.

In WordPress, they are small pieces of code enclosed in square brackets that allow you to add dynamic content or functionality to your posts, pages, or widgets.

Here’s an example:

[example_shortcode]

They act as shortcuts for adding advanced features, such as beautiful responsive sliders, contact forms, image galleries, or embedded videos, in a simple and user-friendly way.

For instance, instead of manually embedding a complex HTML or JavaScript snippet, you can use a shortcode to get the same result with just one line of text. This makes shortcodes incredibly useful for beginners and experts alike.

However, while shortcodes are easy to use, knowing the best ways to add and manage them can save you time, improve your workflow, and prevent issues.

Having said that, let’s take a look at some tips for using shortcodes in WordPress. You can click the links below to jump ahead to any tip:

Tip 1: Know When Not to Use Shortcodes

Shortcodes can be super useful, but relying on them for every post or page isn’t always the best idea. Many WordPress themes claim to have 200+ shortcodes, but using too many of them can create problems down the line.

For instance, if you use a theme’s shortcode to create call-to-action (CTA) buttons in your posts, then you are tying yourself to that theme. If you ever switch themes, those shortcodes may stop working, leaving behind broken or unreadable content.

If you happen to be looking for a way to add CTA buttons to your posts, you should read our guide on adding CSS buttons in WordPress without using shortcodes.

Similarly, if you are using shortcodes for repetitive elements like banner ads or signature text at the end of your posts, then we recommend considering a different approach. You could use a WordPress plugin or work with a developer to add these elements to your blog.

This method ensures consistent styling and makes it easier to update or remove elements in the future.

Finally, remember that shortcodes scattered across posts can be a hassle to remove if you decide to stop using them. Editing every post manually is time-consuming.

That is why it is important to be careful with how and where you use shortcodes. Stick to adding them only where they are necessary, as overusing them can create bigger problems later.

Tip 2: Future Proof Your Shortcodes

Shortcodes are great, but if your theme provides them, you may want to think twice before excessively using them. Why?

This is because if you ever switch themes, chances are your new theme won’t support the same shortcode, leaving you with broken content.

To avoid this issue, you can move to a site-specific plugin. This way, your shortcodes will remain independent and continue to work regardless of which theme you use.

To do this, you can simply locate the shortcode snippet in your theme’s functions.php file and copy it. Then, paste it into a site-specific plugin to ensure it stays functional.

However, editing the functions.php file directly isn’t ideal, as one small error can crash your entire site.

This is where WPCode comes in. In our opinion, it offers the easiest way to add a shortcode snippet to your theme.

WPCode

It lets you add custom code with just a few clicks and even highlights errors in your code snippets.

We have thoroughly tested the plugin on our website and found it to be quite beginner-friendly. To learn more, see our WPCode review.

Add new snippet

Plus, it won’t crash your website if you accidentally add incorrect code, making it a reliable option for anyone.

For more information, see our guide on how to add custom code in WordPress.

Tip 3: How to Search for Shortcodes in Your WordPress Theme

To ensure your shortcodes remain functional, it’s important to know what they look like and how to find them in your theme.

First, you need to open your theme’s folder, which is usually found at /wp-content/themes/your-theme-name/.

You’ll want to look for it inside the functions.php file, or if the theme has an ‘includes’ folder, then inside there.

Once you locate the file, open it and search for the term ‘add_shortcode.’ This will help you locate all the shortcodes that are currently being used by your WordPress theme.

Here’s an example of what a shortcode snippet looks like:

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

This code creates a shortcode ‘my-shortcode,’ which returns a simple text greeting and can be embedded into a WordPress post or page like this:

[my-shortcode]

For more details, you can see our guide on how to add a shortcode in WordPress.

Tip 4: Using Shortcodes in Widgets

Many users think shortcodes are only for posts and pages, but that is not the case.

You can also use them inside WordPress widgets, which gives you even more flexibility for adding dynamic content to sidebars, footers, and other widget-ready areas.

To do this, visit the Appearance » Widgets page from the WordPress dashboard and click the ‘Add Block’ (+) button. This will open the block menu, from where you’ll need to add the ‘Shortcode’ block.

Add shortcode to a widget area

Keep in mind that the above method will only work if you are using a classic theme like Hestia.

However, if you use a block theme, then you can add a shortcode to any widget area using the full site editor.

Adding the shortcode block to a sidebar in Full Site Editor

For more details, see our tutorial on how to use shortcodes in your WordPress sidebar widgets.

Tip 5: Add Shortcode in Theme Files

Need to add a shortcode outside of posts, pages, or widgets?

If you want to add a shortcode to a custom theme file or a specific section of your theme, then you can easily do so by adding the shortcode directly to your theme’s code.

For example, let’s say you have created a custom page template and want to include a responsive slider using a shortcode.

Instead of manually inserting the shortcode in the content area, you can output it directly in the theme. Simply add your shortcode like this:

<?php echo do_shortcode("[example_shortcode]"); ?>

This technique is useful when you want to embed shortcodes in areas like custom pages, headers, footers, or other parts of your theme that aren’t tied to the typical content editor.

🚨 Warning: Be careful when editing theme files, as the smallest error can result in a broken site. We recommend using a child theme and making backups to avoid any errors.

If you need help, then please see our guide on pasting snippets from the web into WordPress.

Tip 6: Hiding a Broken Shortcode

Often, users change their themes without realizing that their old shortcodes will not work. Sometimes, they find out after months when a user visits their old post to find odd text there.

Well, you have two ways to fix it. You can either manually remove the broken shortcode from every post or hide it. We recommend hiding it because it is a quicker fix.

To do this, you will need to install and activate the WPCode plugin. Upon activation, visit the Code Snippets » + Add Snippet page and choose the ‘Add New Custom Code (New Snippet)’ option

This will take you to the ‘Create Custom Snippet’ page, where you have to choose the ‘PHP Snippet’ option from the dropdown menu.

Choose PHP Snippet for hiding broken shortcode

Then, add the following code into the ‘Code Preview’ box and toggle the ‘Inactive’ switch to ‘Active.’

add_shortcode( 'shortcodetag', '__return_false' );

Don’t forget to replace shortcodetag with your shortcode name. Finally, click the ‘Save Snippet’ button to store your settings.

This code will now add back the orphan shortcode with no output.

Tip 7: Finding Shortcodes Used in Posts

If you don’t want to use the hack in Tip 6 and want to remove all shortcodes manually, then the first step is to find all the posts using the shortcode.

To do this, add the following code in your theme’s functions.php file or WPCode:

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

This code simply creates a shortcode called shortcodefinder. It runs a WordPress query and lists posts with a given shortcode tag.

For example, if you wanted to find all posts containing shortcode [contact-form], then you would simply enter [shortcodefinder find=’contact-form’] in a WordPress page and save it. Now, if you preview the page, you will be able to see all the posts containing the shortcode.

For more detailed instructions, check out our guide on how to find and hide unused shortcodes in WordPress.

Bonus: Common Shortcode Mistakes to Avoid

While shortcodes are useful and necessary for many sites, users often make some common mistakes when working with them.

These errors can lead to broken functionality, messy code, or poor site performance. Here are five key mistakes to watch out for and how to avoid them:

  • Overloading Pages with Too Many Shortcodes: Using too many shortcodes on a single page can lead to slow load times and a cluttered design. That is why we recommend limiting the use of shortcodes to essential elements.
  • Nesting Shortcodes Incorrectly: Nested shortcodes (using one shortcode inside another) can be tricky and can cause issues like one shortcode not working or a page displaying incorrect content. If you must nest shortcodes, test them first to make sure they display as expected.
  • Forgetting to Close Shortcodes Properly: Sometimes, users forget to close shortcodes, which can break the layout of a post or page. That is why you must always make sure that your shortcode is properly opened and closed with brackets. For single-use shortcodes, make sure you don’t leave any extra spaces or symbols.
  • Using Shortcodes in Non-Supported Areas: Certain areas of WordPress may not support shortcodes by default. Trying to use a shortcode there can result in broken or invisible content. Before inserting shortcodes into widgets or custom fields, check whether the area supports them. You can often use a plugin to enable shortcodes in unsupported areas.
  • Not Testing Shortcodes on Mobile Devices: Many users forget to check how elements made with shortcodes look on mobile devices. What looks great on a desktop might break or appear poorly on mobile screens. Always preview your pages and posts on various devices to ensure the shortcode’s output is responsive.

By avoiding these common mistakes and following these tips, you can have a smoother experience when using shortcodes on your WordPress site.

We hope these tips helped you learn how to use shortcodes and make the most of them in WordPress. You may also want to see our beginner’s guide on how to copy and paste in WordPress without formatting issues and our expert tips for mastering the WordPress content editor.

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

19 CommentsLeave a Reply

  1. Justin

    Hi I’m using Short-codes for layouts in my blog posts (image right, text left, with a lot more responsive styling than Gutenberg can do), but wondering, does this effect the onsite SEO? Are my layouts still rendered as HTML and readable by bots? – Thanks!

    • WPBeginner Support

      Your content should be rendered as HTML on the front end of the site. The shortcode is for the backend of your site so WordPress knows what content to place there.

      Admin

  2. Alexandre ..

    the social icons in this article, at the end of the post, are they added by a plugin (what plugin) or hard coded? how can i add them to my own posts?

  3. Seamate

    I have been trying to use shortcodes, particularly Latex shortcodes in the quiz section of the LMS I am using, all to no avail. The shortcodes are not passed. I have contacted the LMS providers but they are not coming up with any solution, at least, not yet. Is there anything I can do?

  4. Mohammed Azharuddin

    Thanks… Very helpfull

  5. malina

    when I use shortcode , the shortcode always show at the top

  6. Devid

    Is it safe to apply multiple shortcodes to the same page in the same section?

  7. Md Abu Selim

    I wish to learn WordPress Theme Development , So I think that the site is very helpful for me.

  8. akki

    hi nice post! how can i make a custom code for slider and make dynamic.i upload images from back end,

  9. Minhaj

    Hi,
    I want to put my shortcode in html hyper link in button or something.
    like my shortcode is [shortcode]
    and my html code is Dummy

    Then how will I put [shortcode] in html code and my html code is Dummy

  10. marie

    I have a problem with my short codes in that the text within the buttons does not look very professional as the first letter is only showing half. This is not with every one, just some of them. I would be most grateful for a suggestion

  11. Praveen

    Hello, I have a question about shortcodes. As I am running a WordPress website that is based on Online Practice Test / Quizzes. To provide these quizzes I am using a plugin and in that plugin I have to add the questions and answers for a quiz. After that I have to put that shortcode in the post.

    My Post Structure
    Title
    [Shortcode]

    then in SEO Title and Description by All in One SEO plugin.

    So my question is, using the only shortcode in all post is safe from the SEO and Google webmasters Guideline point of view ?

    • WPBeginner Support

      Yes, it is totally safe. The shortcode never appears in the HTML of your website. Like any other PHP funtion, your shortcode is processed by the server and returns the HTML output which is then displayed on your post/page.

      Admin

  12. Giochi MMO

    There is a way to delete a specific shortcode, maintaining the text inside?

    For example: in this case [dropcap]A[/dropcap] I would like to eliminate the shortcode maintaining the “A”, or any other letter inside.

    Thanks!

  13. Kate Ford

    I am locked into using a specific theme for business reasons, and it
    lacks some bells and whistles that are necessary and must be used with
    short codes. While the short codes get the job done, there is is one
    element we have to keep in mind:

    Don’t overuse short codes for important text elements if it compromises search engine returns.

    We
    have two plug ins for short codes — one of these keeps the text
    elements right in the post, but the other generates the content in the
    plug in, and only the code is inserted into the post — so there is no
    actual TEXT associated with that post.

    For instance, we created
    some grid like photo galleries using a plug in that relies on short
    codes. The galleries and their captions are created inside the plug-in,
    but only the short code linking to it is published in the post. While
    the post itself has SEO fields to complete, the text (and links) from
    the photo captions actually doesn’t exist IN the post — it exists in
    the output created by the plug-in, which does NOT have SEO fields. When
    I need to edit the gallery, I don’t edit the post, because all it says
    is [Grid 123]. I edit the gallery in the plug-in setting.

    So,
    while it “looks great” on the post, we have to weigh what is most
    important: Does this post need a great looking gallery which may not
    give me any search engine returns, or is the TEXT for gallery more
    important and I need it to be crawled?

    We have a page with FAQ
    and used short codes to make an accordion style display. Toggling a
    question reveals the answer, and then it closes again. On this page, we
    used short codes, but we relied on a different plug in which keeps the
    text IN the post, and simply styles it the way we need. In that manner,
    the text remains part of the post, the word count is accurate, and it
    is crawled by search engines. The short codes merely provide the
    requested style.

    So bottom line, if you have content
    that’s important and should be crawled, avoid short codes if they store
    the information apart or separate from your post.

  14. Tony Franco

    Hi! Nice post! Please how can i make a shortcode to print an image?

    Thanks!

    • Gyan

      Hii Tony Franco.

      this is incomplete question. please specify where and which image you want to use. what context you are talking about . ?

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.