WordPress Shortcode Complete Tutorial: Creating, Using & Customizing (with button and gallery examples)

Using short codes(Shortcode), you can easily embed complex functionality such as forms, galleries, buttons, and dynamic content without having to write tons of HTML,CSS maybe PHP Code. That's why short codes have become a powerful tool that is easy to use even for beginners.

This article will detail how to create, use andCustomize WordPress Short codes that help you streamline your workflow and improve the interactivity and functionality of your website.

What is a WordPress shortcode?

short codeis a square bracketed ([ ]The short code snippet that surrounds the WordPress content that is used toInsertion of specific functions. Example:

[gallery ids="1,2,3"]

This shortcode tells WordPress to display a gallery on the front end containing images with IDs 1, 2, and 3. The shortcode makes a complex task simple and intuitive by simplifying the code insertion process.

Short codes have many advantages, including:

• simplicity: No need to write complex HTML, CSS, or JavaScript, and the short code is clean and easy to understand.
• dexterity: Shortcodes can be used on pages, posts, widgets, and even custom post types.
• Reusable: After creating a shortcode once, it can be used multiple times in different locations on the site.
• Easy to manage: Using shortcodes keeps pages and posts neat and tidy, without the need to embed complex code directly.

How to Create Short Codes in WordPress

Step 1: Access the functions.php file

The first step in creating a shortcode is to open the theme's functions.php File. This file is where youAdd customization and code to the themeplace, when you wish to add custom functionality to your website, such as creating a custom shortcode to display specific content or functionality, the functions.php file to add the code.

Follow the steps below:

1. Log in to the WordPress dashboard.
2. switch to Appearance > Theme EditorThe
3. On the right hand side find and open the functions.php Documentation.

Step 2: Define Short Code Functions

At the heart of the shortcode are the PHP functions you create. Below is a simple example of a shortcode that will display a message, "Hello, World!" on a page:

function hello_world_shortcode() {
    return 'Hello, World!
}

This code defines a simple PHP function hello_world_shortcode, which will return a string: "Hello, World!".

Step 3: Registering a Short Code

After creating the shortcode function, the next step is to register it with WordPress. This can be done using the add_shortcode() function to register the short code and specify a name and corresponding function. Example:

add_shortcode('hello_world', 'hello_world_shortcode');

This line of code registers a short code [hello_world]When it is inserted in a page or post, WordPress calls the hello_world_shortcode() function and displays what the function returns.

Step 4: Test the Short Code

After you finish creating and registering the shortcode, you can test it.

Below is the complete code that brings the whole process together:

// Define the shortcode function
function hello_world_shortcode() {
    return 'Hello, World!
}

// Register the shortcode
add_shortcode('hello_world', 'hello_world_shortcode');

Inserted in a page or post [hello_world]Then look at the front-end page. It should show "Hello, World!".

If you are not in functions.php file is added, and on the front-end page it should display the[hello_world]

Create more customized short codes

Example 1: Creating a Button Short Code

buttonsis a key part of website interaction and can be used for call to action (CTA) and navigation. We can create a simple custom button with short code:

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#'.
        ), $atts
    );

    return '' . esc_html($atts['text']) . '';
}

add_shortcode('custom_button', 'custom_button_shortcode');

In this example, a short code is defined [custom_button], which takes two arguments:text(button text) and url(link address).

For example, you can use it like this:

[custom_button text="Learn More" url="https://example.com"]

This generates ablue (color)button, which, when clicked, jumps to the specified URL.

Example 2: Creating a Gallery Short Code

Create aGallery ShortcodesIt is also very simple. By specifying the image IDWordPress automatically generates a gallery:

function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']);
    $output = '
';

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium');
        $output . = '' ;
    }

    $output . = '
';
    return $output.
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode');

Create a [custom_gallery] short code which accepts the ids parameter, you can pass in multiple image IDs to generate the gallery. For example:

[custom_gallery ids="1,2,3"]

This will display images with IDs 1, 2, and 3 on the page.

How to Use Short Codes in WordPress Pages and Posts

Method 1: Using the Classic Editor

If you are using WordPress Classic EditorSimply insert the short code directly into the text box in the editor.

Example:

[custom_button text="Buy Now" url="https://yourlink.com"]

After updating or publishing a page, the shortcode is processed on the front-end to display the appropriate content.

Method 2: Using the Gutenberg Block Editor

exist Gutenberg EditorYou can use the specialized "short code" block to insert the short code. The procedure is as follows:

1. Open the page or post editor.
2. strike (on the keyboard) + button to add a new block.
3. Search and select Shortcode Blocks.

4. Enter your short code in the short code block, for example:

[custom_button text="Sign Up" url="https://yourlink.com"]

Then save or update the content and the shortcode will show the output on the front end.

Method 3: Using the Page Editor

Many popular page editors such as Elementor respond in singing WPBakery, provides widgets or modules for inserting short codes. Simply paste the shortcode into the appropriate widget and the builder will show its effect in real time.

How to Use Shortcodes in WordPress Widgets

You can also use the shortcode forWidget area(e.g.a side-bar (in software),footers(etc.). Here are the steps:

1. In the dashboard, go to Appearance > WidgetsThe
2. commander-in-chief (military) Text Widget Drag and drop to the area of the widget where you want the shortcode to be displayed.

3. Enter a short code in the text area, for example:

[custom_button text="Contact Us" url="https://yourlink.com"]

Save and view the site and the short code will show up as a button in the widget area.

Simplify the process with a short code generator

For users unfamiliar with writing code, theShort code generatorIt is a very useful tool. With these tools, it is simple to generate short codes using forms without having to write the code manually. Popular short code generator plugins include:

• Shortcodes Ultimate: Provides a comprehensive library of short codes that support sliders, accordions, and many other features.
• MyThemeShop WP Shortcode: Provides easy-to-use shortcode generators for buttons, tabs, columns, and more.
• Shortcoder: Custom short codes can be created using more advanced users.

Using these plugins, you can quickly generate short codes and insert them into WordPress content, saving you the trouble of writing complex code.

Summary:

Shortcodes in WordPress help you easily insert complex features like buttons, galleries, and dynamic content into your pages, posts, or widgets without writing tons of code. With a simple [shortcode] syntax, you can reuse these features in different locations to improve the efficiency and maintainability of your website. This article explains in detail how you can reuse these functions in WordPress' functions.php Creating and registering shortcodes in files and providing real-world examples of button and gallery shortcodes. Ways to use shortcodes in the Classic Editor, Gutenberg Block Editor, and widgets are also described to help you streamline your workflow.