Creating a Shortcode for a Custom Post Type in WordPress

WordPress shortcodes are a powerful tool that allows you to add custom functionality to your site with ease. In this post, we’ll explore a PHP snippet that creates a shortcode for displaying a list of portfolio items, a custom post type. This is particularly useful for showcasing your work in a visually appealing and organized manner.WordPress shortcodes are a powerful tool that allows you to add custom functionality to your site with ease. In this post, we’ll explore a PHP snippet that creates a shortcode for displaying a list of portfolio items, a custom post type. This is particularly useful for showcasing your work in a visually appealing and organized manner.

The Code

<?php

add_shortcode( 'portfolio', 'wpe_portfolio_list' );

function wpe_portfolio_list() {
    $args = array(
        'post_type' => 'portfolio',
    );

    $query = new WP_Query($args);
    $output = '';

    if ($query->have_posts()) {

        while ($query->have_posts()) {
            $query->the_post();
            $permalink = get_permalink();
            $output .= "<li><a href='" . esc_url($permalink) . "'><div class='portfolio_bg_box' style='background-image: url(" . get_field('portfolio_thumbnail') . ");background-color:".get_field('background_color')."'>" . "<div class='logo-box'><div class='logo'><img src='" . get_field('client_logo') . "'alt=''></div></div></div>";
            $output .= "<h3>" . get_the_title() . "</h3>";
            $output .= "<p>" . get_the_content() . "</p></a></li>";
        }

        wp_reset_postdata();
    }

    return "<div class='portfolio_list'><ul>" . $output . "</ul></div>";
}

How It Works

Shortcode Registration: The add_shortcode function registers a new shortcode [portfolio] that calls the wpe_portfolio_list function when used.
Custom Query: Inside the wpe_portfolio_list function, a new WP_Query is created to fetch posts of type ‘portfolio’. This is done using the post_type argument.
Building the Output: The function then checks if there are any portfolio posts. If there are, it loops through each post, retrieves the necessary fields (like the portfolio thumbnail, background color, and client logo), and constructs HTML output for each item.
Resetting Post Data: After the loop, wp_reset_postdata is called to restore the original post data. This is important to prevent conflicts with other queries on the page.
Returning the Output: The final HTML output is wrapped in a div and returned to be displayed wherever the shortcode is used.

Using the Shortcode

To use this shortcode on any page or post, simply add [portfolio] to the content area. This will automatically generate and display a list of portfolio items styled with the provided HTML structure and CSS classes.

Conclusion

This shortcode provides a simple yet effective way to display your portfolio items on your WordPress site. By leveraging custom fields and the power of WP_Query, you can create a dynamic and visually appealing portfolio section with minimal effort. Whether you’re a designer, developer, or creative professional, this shortcode can help showcase your work beautifully.