Post Details or Single Post creation

So far we created various section, such as Large Feature Post, Features Post, Recent posts, now we will create the details of those posts. Lets began.

  • Create directory called template-parts if not exist & then create file content.php. Paste the below codes

<header class="content-header">
    <div class="meta mb-3">
        <span class="date"><?php the_time('F j, Y'); ?></span>
        <?php the_tags(' <span class="tag"><i class="fa fa-tag"></i> ', '</span> <span class="tag"><i class="fa fa-tag"></i> ', '</span>'); ?>
        <span class="comment">
            <i class='fa fa-comment'></i> <?php echo get_comments_number() ?>
        </span>
    </div>
</header>
<div class="content-body">
    <?php if (get_the_post_thumbnail_url()) : ?>
        <figure class="blog-banner text-center" >
            <img class="img-fluid"  src="<?php echo get_the_post_thumbnail_url(); ?>" alt="image">
        </figure>
    <?php endif; ?>
    <h3 class="mt-5 mb-3"><?php the_title() ?></h3>
    <div class="content">
        <?php the_content(); ?>
    </div>

    <div class="comments">
        <?php comments_template(); ?>
    </div>
</div>

  • Here

    • Display tags, featured image if exists, comment count, details content and comments section

    • Here we used html-template > post-details.html files

  • Now create file called single.php and add the below codes

<?php get_header() ?>
<main class="container">
    <div class="row">
        <div class="col-md-10">
            <?php
            if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    get_template_part("template-parts/content");
                endwhile;
            endif;
            ?>
        </div>
        <div class="col-md-2">
            <div id="right-sidebar" class="sidebar">
                <?php dynamic_sidebar( 'h2wp-right-sidebar' ); ?>
            </div>
        </div>
    </div>
</main>
<?php get_footer() ?>

  • All set, now when anyone click on read more it will bring them here single.php and show the details post

Share