How to Use Shortcodes in WordPress

Add shortcodes to WordPress pages, posts, widgets, theme files and the Block Editor — manually or with Shortcodes Ultimate.

WordPress shortcodes are small pieces of code wrapped in square brackets, such as [gallery] or [su_button]. They let you insert dynamic content, buttons, tabs, accordions, galleries, videos, boxes and other content elements without writing full HTML, CSS or PHP.

With Shortcodes Ultimate, you can generate and insert ready-made shortcodes visually, preview them before publishing, and use them in the Block Editor, Classic Editor, widgets and theme template files.

Install Shortcodes Ultimate for Free


Quick Answer: How Do You Use a Shortcode in WordPress?

To use a shortcode in WordPress, copy the shortcode provided by WordPress, your theme, or a plugin, then paste it into a place where WordPress processes shortcodes.

Where you want to add itBest method
Page or post in the Block EditorAdd a Shortcode block and paste the shortcode
Classic EditorPaste the shortcode directly into the content
Widget area or sidebarAdd a Shortcode block or compatible widget
Theme fileUse do_shortcode() in PHP
Page builderUse a shortcode widget or module if your builder supports it

Example:

[su_button url="https://example.com"]Download Now[/su_button]

When the page is viewed on the front end, WordPress replaces the shortcode with the actual button, gallery, tab, accordion or other content element.

Get 50+ Ready-Made Shortcodes


What Is a WordPress Shortcode?

A WordPress shortcode is a shortcut that tells WordPress to output something more complex than plain text. Instead of writing full code, you place a small tag inside square brackets.

For example:

[gallery ids="12,34,56"]

A shortcode can also include attributes:

[su_button url="https://example.com" target="blank" style="flat"]Visit Website[/su_button]

In this example:

Shortcodes are useful when you want reusable elements that can work across different parts of a WordPress site.


How to Use a Shortcode in the WordPress Block Editor

The easiest manual method is to use the built-in Shortcode block.

Step 1: Open the page or post

Go to Pages or Posts, then open the content where you want to add the shortcode.

Step 2: Add a Shortcode block

Click the + button and search for Shortcode. You can also type:

/shortcode

Then press Enter.

Step 3: Paste your shortcode

Paste your shortcode into the block:

[su_spoiler title="Read more"]Hidden content goes here[/su_spoiler]

Step 4: Preview or publish

In the editor, you may still see the shortcode text. On the front end, WordPress will render the shortcode output.

Insert Shortcodes Faster with Shortcodes Ultimate


How Shortcodes Ultimate Makes This Easier

Manual shortcodes work, but writing shortcode syntax by hand can be slow. You need to remember the shortcode name, available attributes, formatting rules and correct closing tags.

Shortcodes Ultimate simplifies the process:

  1. Install the free plugin from WordPress.org.
  2. Open a page, post or supported editor area.
  3. Choose a shortcode from the plugin’s library.
  4. Configure options visually.
  5. Preview the result.
  6. Insert the generated shortcode into your content.

Instead of memorizing shortcode syntax, you can build elements like buttons, spoilers, tabs, accordions, boxes, columns, sliders, carousels and media embeds through a visual workflow.

Install Shortcodes Ultimate Free

Free plugin. Works with modern and classic WordPress workflows.


Where Can You Add WordPress Shortcodes?

Shortcodes are flexible because they can be used in multiple areas of a WordPress site.

1. Pages and Posts

Use a Shortcode block in the Block Editor, or paste the shortcode directly into the Classic Editor.

Example:

[su_tabs]
  [su_tab title="Overview"]Product overview text[/su_tab]
  [su_tab title="Details"]Product details text[/su_tab]
[/su_tabs]

This is useful for landing pages, documentation, product pages, affiliate content and long-form posts.

2. WordPress Widgets and Sidebars

To add a shortcode to a widget area:

  1. Go to Appearance → Widgets.
  2. Choose the widget area, such as Sidebar or Footer.
  3. Add a Shortcode block.
  4. Paste your shortcode.
  5. Save and check the front end.

Example:

[su_button url="/contact"]Contact Us[/su_button]

This is useful for sidebar CTAs, footer buttons, promo boxes, contact forms and reusable content blocks.

If a shortcode appears as plain text instead of rendering, the widget area, theme or plugin may not be processing shortcodes in that location. In that case, use a Shortcode block, a plugin-supported widget, or ask a developer to enable shortcode processing safely.

3. Theme Template Files

Developers can output shortcodes inside PHP theme files using do_shortcode().

Example:

<?php echo do_shortcode('[su_button url="https://example.com"]Click me[/su_button]'); ?>

You might use this in files such as:

single.php
page.php
header.php
footer.php
sidebar.php
template-parts/content.php

Use this carefully. Only place shortcode strings you control inside template files, and avoid processing untrusted user input.

4. Custom Page Templates

If your landing page has a custom PHP template, you can add a shortcode directly to the template:

<section class="landing-cta">
  <?php echo do_shortcode('[su_button url="/pricing" style="flat"]View Pricing[/su_button]'); ?>
</section>

This is useful when you want a shortcode-powered section to appear automatically across specific templates.

5. Page Builders and Other Editors

Many WordPress page builders include a shortcode widget or shortcode module. In that case, copy the shortcode generated by Shortcodes Ultimate and paste it into the builder’s shortcode element.

This is useful when you are building a page visually but still want reusable shortcode-powered components.


Manual Shortcode Examples

Here are common shortcode patterns you may see in WordPress.

Simple shortcode

[gallery]

Shortcode with attributes

[gallery columns="3" size="medium"]

Opening and closing shortcode

[su_box title="Important Note"]
Your content goes here.
[/su_box]

Nested shortcode example

[su_tabs]
  [su_tab title="First tab"]First tab content[/su_tab]
  [su_tab title="Second tab"]Second tab content[/su_tab]
[/su_tabs]

PHP template example

<?php echo do_shortcode('[su_spoiler title="FAQ"]Answer text goes here[/su_spoiler]'); ?>

Why Use a Shortcode Plugin Instead of Writing Everything Manually?

You can use WordPress shortcodes manually, but a shortcode plugin saves time when you need polished content elements without custom development.

With Shortcodes Ultimate, you can:

Install Shortcodes Ultimate for Free


Accordions and FAQ sections

Use expandable sections to make long content easier to scan.

[su_spoiler title="Can I use shortcodes in widgets?"]
Yes, you can use shortcodes in supported widget areas.
[/su_spoiler]

Buttons and calls to action

Add buttons without writing CSS.

[su_button url="/download"]Download Now[/su_button]

Tabs

Organize long content into compact sections.

[su_tabs]
  [su_tab title="Features"]Feature list[/su_tab]
  [su_tab title="FAQ"]FAQ content[/su_tab]
[/su_tabs]

Boxes and notes

Highlight important messages.

[su_note]This is an important note for readers.[/su_note]

Responsive media and galleries

Insert media-focused elements without building everything from scratch.


How to Install Shortcodes Ultimate for Free

  1. Log in to your WordPress dashboard.
  2. Go to Plugins → Add New.
  3. Search for Shortcodes Ultimate.
  4. Click Install Now.
  5. Click Activate.
  6. Open a page or post and start inserting shortcodes.

Install Shortcodes Ultimate Free from WordPress.org

No coding required for common content elements.


Troubleshooting: Why Is My WordPress Shortcode Not Working?

The shortcode appears as plain text

This usually means WordPress is not processing shortcodes in that location. Try using a Shortcode block or placing the shortcode inside the main page/post content.

The plugin that provides the shortcode is inactive

If a plugin is disabled, WordPress may show the shortcode text instead of the output. Make sure the plugin that created the shortcode is installed and active.

The shortcode syntax is incorrect

Check for missing brackets, misspelled attributes or missing closing tags.

Incorrect:

[su_button url="/contact"Contact[/su_button]

Correct:

[su_button url="/contact"]Contact[/su_button]

You pasted PHP into the editor

Do not paste this into the WordPress editor:

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

Use PHP only in theme or plugin files. In the editor, paste only the shortcode:

[your_shortcode]

The shortcode depends on scripts or styles

Some shortcode outputs require CSS or JavaScript. If the output looks broken, check plugin settings, theme compatibility and whether scripts are loading correctly.


Best Practices for Using Shortcodes in WordPress

Use shortcodes for reusable, structured content elements, but keep your pages clean and maintainable.

Recommended practices:


Start Using WordPress Shortcodes Today

Shortcodes are one of the easiest ways to add reusable content elements to WordPress. You can paste them into pages, posts, widgets and supported page builders, or output them in theme files with PHP.

If you want to create buttons, tabs, accordions, boxes, spoilers, columns, sliders, media elements and other content blocks faster, install Shortcodes Ultimate and use its visual shortcode generator instead of writing shortcode syntax by hand.

Install Shortcodes Ultimate for Free


Frequently Asked Questions

How do I use a shortcode in WordPress?

Add a Shortcode block in the WordPress editor, paste the shortcode into the block, then preview or publish the page. In the Classic Editor, you can usually paste the shortcode directly into the content.

Can I use shortcodes in the WordPress Block Editor?

Yes. WordPress includes a Shortcode block. Add the block, paste the shortcode and view the page on the front end to see the rendered result.

Can I use shortcodes in WordPress widgets?

Yes, in supported widget areas. Go to Appearance → Widgets, add a Shortcode block, paste your shortcode and save. If it appears as plain text, that widget area may not be processing shortcodes.

How do I use a shortcode in a WordPress theme file?

Use the do_shortcode() function in a PHP template file:

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

Only use this with shortcode strings you control.

What is the easiest way to add shortcodes in WordPress?

The easiest manual way is the Shortcode block. The easiest plugin-assisted way is to use Shortcodes Ultimate, choose a shortcode visually, configure it, preview it and insert the generated shortcode.

Is Shortcodes Ultimate free?

Yes. The free version of Shortcodes Ultimate is available from the WordPress.org plugin repository.

Do shortcodes work if I change my theme?

Usually, plugin shortcodes continue to work if the plugin remains active. However, styling may change because the new theme can affect spacing, typography and CSS.

Why is my shortcode showing as text?

The shortcode may be in an area that does not process shortcodes, the shortcode provider plugin may be inactive, or the shortcode syntax may be incorrect.

Helpful?
🤝 Thank you!