Adding Shortcodes with add_shortcode() and Practical Examples

WebninjaWordpressAdding Shortcodes with add_shortcode() and Practical Examples

The add_shortcode function in WordPress is a crucial feature for integrating Custom Shortcodes into your website, enabling you to enhance content presentation and add dynamic elements effortlessly.

Capabilities of add_shortcode()

By using add_shortcode, WordPress developers can define their own Shortcodes and associate them with callback functions responsible for generating the content to be displayed when the shortcode is utilized. This function simplifies the process of incorporating specialized functionalities into your WordPress site without the need for extensive coding knowledge.

Here are some practical examples of using the add_shortcode() function:

Example of add_shortcode() Use with Attributes

Suppose you want to create a shortcode that accepts multiple arguments that accepts multiple arguments. Here’s an example of how you could use add_shortcode() to do this:

// Define the shortcode function
function custom_shortcode_with_attributes($atts) {
    $atts = shortcode_atts(
        array(
            'attr1' => 'default_value1',
            'attr2' => 'default_value2'
        ),
        $atts,
        'custom_shortcode'
    );

    // Access the attributes
    $attr1_value = $atts['attr1'];
    $attr2_value = $atts['attr2'];

    // Output content based on attributes
    $output = "Attribute 1: $attr1_value, Attribute 2: $attr2_value";

    return $output;
}
add_shortcode('custom_shortcode', 'custom_shortcode_with_attributes');
  1. Function Definition: The function custom_shortcode_with_attributes is created to handle a custom shortcode with attributes.
  2. Attribute Assignment: The shortcode_atts function sets default values (‘default_value1’ and ‘default_value2’) for the attributes ‘attr1’ and ‘attr2’ respectively, using the provided attributes $atts.
  3. Attribute Access: The values of ‘attr1’ and ‘attr2’ attributes are accessed from the modified $atts array and stored in variables $attr1_value and $attr2_value.
  4. Output Generation: The function constructs the output string based on the values of the ‘attr1’ and ‘attr2’ attributes.
  5. Return Output: The generated output containing the values of the attributes is stored in the variable $output and returned by the function.
  6. Shortcode Registration: The shortcode [custom_shortcode] is registered with the function custom_shortcode_with_attributes using add_shortcode.

To use this shortcode in your WordPress content, you can add the following shortcode:

[custom_shortcode attr1="value1" attr2="value2"]

Make sure to replace “value1” and “value2” with the actual values you want to pass to the attributes when using the shortcode.

Example a simple shortcode

Suppose you want to create a shortcode that displays a message on the front end of your site. Here’s an example of how you could use add_shortcode() to do this:

function simple_custom_shortcode() {
    return "Simple content without attributes";
}
add_shortcode('simple_shortcode', 'simple_custom_shortcode');

In this example, we’ve added a new shortcode called “simple_shortcode” that displays the message “Simple content without attributes” on the front end of the site.

To use this simple shortcode, you can add the following shortcode:

[simple_shortcode]

Example with Attributes (Post Display by Category ID):

This is an example of practical application of the add_shortcode function to display posts using WP_Query from a specific category and a specified number of posts.

function posts_by_category_shortcode($atts) {
    $atts = shortcode_atts( array(
        'category_id' => '0',
        'posts_per_page' => '5',
    ), $atts, 'posts_by_category' );

    $args = array(
        'cat' => $atts['category_id'],
        'posts_per_page' => $atts['posts_per_page'],
    );

    $posts_query = new WP_Query($args);
    $output = '<ul>';
    
    while ($posts_query->have_posts()) {
        $posts_query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }

    $output .= '</ul>';
    wp_reset_postdata();
    
    return $output;
}
add_shortcode('posts_by_category', 'posts_by_category_shortcode');

To display Posts from a Specific Category using the posts_by_category shortcode in a WordPress post or page, insert within the editor.

The shortcode

retrieves 5 posts per page from the category with the ID of 3.

Mastering the add_shortcode function empowers you to customize your WordPress site, enhance user engagement, and streamline content creation efficiently. By leveraging custom shortcodes, you can create unique and interactive elements that enrich the overall user experience on your website.