Display Custom Post Types on the WordPress Frontend

Solution to Display Custom Post Types on Frontend

Custom Code Solution

Here's a function to query and display custom post types on your homepage using WordPress hooks:

Add this code to your theme's functions.php file:

function display_custom_post_types($content) {
    // Only modify the main query on home page
    if (!is_home() && !is_front_page()) {
        return $content;
    }

    // Your custom post type query
    $custom_posts = new WP_Query(array(
        'post_type' => 'your_post_type', // Change to your CPT name
        'posts_per_page' => 5,           // Adjust number of posts
        'orderby' => 'date',
        'order' => 'DESC'
    ));

    // Start output buffering
    ob_start();

    if ($custom_posts->have_posts()) :
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_excerpt(); ?>
                </div>
            </article>
            <?php
        endwhile;
        wp_reset_postdata();
    endif;

    // Get buffer contents and append to content
    return $content . ob_get_clean();
}
add_filter('the_content', 'display_custom_post_types');

Alternative method using template modification. Add this to your front-page.php or home.php:

$custom_posts = new WP_Query(array(
    'post_type' => 'your_post_type', // Change to your CPT name
    'posts_per_page' => -1,          // -1 shows all posts
    'orderby' => 'date',
    'order' => 'DESC'
));

if ($custom_posts->have_posts()) :
    while ($custom_posts->have_posts()) : $custom_posts->the_post();
        get_template_part('template-parts/content', 'custom');
    endwhile;
    wp_reset_postdata();
endif;

Plugin Solutions

If you prefer using plugins, here are reliable options:

1. Pods - Powerful custom post type manager with frontend display options
2. Custom Post Type UI + Elementor - Create CPTs and display them using Elementor's widgets
3. JetEngine - Advanced custom post type management and display options

Best Practices

• Always use wp_reset_postdata() after custom queries
• Consider pagination for large numbers of posts
• Use template parts for consistent styling
• Cache queries if possible for better performance
• Add proper conditionals to ensure code runs only where needed

Notes

• Replace your_post_type with your actual custom post type slug
• Adjust posts_per_page based on your needs
• Modify the HTML structure in the code to match your theme's design
• Add CSS classes as needed for styling

The code provided can be customized further with additional parameters like taxonomies, meta queries, or custom fields.