Create featured post on home page

Our HTML template home page has 3 types of posts

  • Single Large Featured Post

  • Featured Posts

  • Recent Posts

This section will cover Featured Posts.


Featured Posts

For Featured post we have to pass 2 area

  • Create Featured Post

  • Display Featured Post


Create Featured Post section

  • Open the functions.php and add the below codes bottom of the file

function h2wp_featured_post_type() {
    register_post_type('h2wp-featured-post',
        array(
            'labels'      => array(
                'name'          => __( 'Featured Post', 'h2wp' ),
                'singular_name' => __( 'Featured Posts', 'h2wp' ),
            ),
            'public'      => true,
            'has_archive' => true,
            'rewrite'     => array( 'slug' => 'featured-post' ),
            'show_in_rest' => true,
        )
    );
}
add_action('init', 'h2wp_featured_post_type');
add_post_type_support( 'h2wp-featured-post', 'thumbnail' );
Here

  • register_post_type() : Responsible for create post type definition.

  • add_action() : Register the post type to system.


Add Featured Post

  • Login to WordPress back-end, on left navigation you should get navigation called Featured Post, click on it.

  • Add 3/2 post there, so that we can show them in front end.


Show Featured Post in front end

  • Open the index.php then remove the below codes

<div class="row mb-2">
        <div class="col-md-6">
            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                <div class="col p-4 d-flex flex-column position-static">
                    <h3 class="mb-0">Featured post</h3>
                    <div class="mb-1 text-muted">Nov 12</div>
                    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="stretched-link">Continue reading</a>
                </div>
                <div class="col-auto d-none d-lg-block">
                    <svg
                            class="bd-placeholder-img"
                            width="200" height="250"
                            xmlns="http://www.w3.org/2000/svg"
                            role="img" aria-label="Placeholder: Thumbnail"
                            preserveAspectRatio="xMidYMid slice" focusable="false">
                        <title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                    </svg>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                <div class="col p-4 d-flex flex-column position-static">
                    <h3 class="mb-0">Post title</h3>
                    <div class="mb-1 text-muted">Nov 11</div>
                    <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="stretched-link">Continue reading</a>
                </div>
                <div class="col-auto d-none d-lg-block">
                    <svg
                            class="bd-placeholder-img"
                            width="200" height="250"
                            xmlns="http://www.w3.org/2000/svg"
                            role="img" aria-label="Placeholder: Thumbnail"
                            preserveAspectRatio="xMidYMid slice" focusable="false">
                        <title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"/>
                        <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                    </svg>
                </div>
            </div>
        </div>
    </div>

  • Add the below codes

<div class="row mb-2">
        <?php
            $args = array('post_type' => 'h2wp-featured-post', 'posts_per_page' => 2);
            $the_query = new WP_Query($args);
            if ($the_query->have_posts()) :
                while ($the_query->have_posts()) : $the_query->the_post(); ?>
                    <div class="col-md-6">
                        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-251 position-relative">
                            <div class="col p-4 d-flex flex-column position-static">
                                <h3 class="mb-0"><?php the_title() ?></h3>
                                <div class="mb-1 text-muted"><?php the_time('F j, Y'); ?></div>
                                <div class="text-justify">
                                    <?php the_excerpt() ?>
                                </div>
                            </div>
                            <div class="col-auto d-none d-lg-block">
                                <?php if (!get_the_post_thumbnail_url()) : ?>
                                <svg class="bd-placeholder-img" width="200" height="295"
                                     xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
                                     preserveAspectRatio="xMidYMid slice" focusable="false">
                                    <rect width="100%" height="100%" fill="#55595c"/>
                                </svg>
                                <?php else: ?>
                                    <img width="200" height="295" alt="<?php the_title() ?>" src="<?php echo get_the_post_thumbnail_url(); ?>"/>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php
                endwhile;
            endif;
        ?>
</div>

  • Go to front end then reload

Share