Create single large 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 Single Large Featured Post.


Single Large Featured Post

For Single Large Featured post we have to pass 3 area

  • Create a custom widget

  • Create sidebar for display the post

  • Configure post widget from back-end


Create a custom widget

  • Create file called featured-large-post.php under the directory template-parts

  • Now add the below codes

<?php

class Featured_Large_Post extends WP_Widget {


    public function __construct() {
        parent::__construct(
            'featured_large_post',
            'Featured Large Post',
            array( 'description' => __( 'Featured Large Post Widget', 'h2wp' ), )
        );

        add_action( 'widgets_init', function() {
            register_widget( 'Featured_Large_Post' );
        });
    }

    public function widget( $args, $instance ) {
        $post = get_post($instance['postId']);
        if (empty($post) ) {
            echo "<h1>Sorry, post not available.</h1>";
            return;
        }
        ?>
        <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
            <div class="col-12 px-0">
                <h1 class="display-4 font-italic"><?php  echo $post->post_title; ?></h1>
                <?php echo wp_trim_words($post->post_content, 60, '<a href="' . get_permalink($post->ID) . '"> Read more...</a>') ; ?>
            </div>
        </div>
        <?php
    }

    public function form($instance){
        $postId = !empty($instance['postId']) ? $instance['postId'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'postId' ) ); ?>">
                <?php echo esc_html__( 'Post ID:', 'h2wp' ); ?>
            </label>
            <input
                class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'postId' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'postId' ) ); ?>"
                type="text"
                value="<?php echo esc_attr( $postId ); ?>"
            >
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = [];
        $instance['postId'] = ( !empty( $new_instance['postId'] ) ) ? strip_tags( $new_instance['postId'] ) : 0;
        return $instance;
    }

}

$featuredLargePost = new Featured_Large_Post();

  • Open the functions.php and add below code, top of the file & under the <?php tag

require get_template_directory() . "/inc/featured-large-post.php";


Create sidebar for display the post

  • Open functions.php and add below codes

function h2wp_right_sidebar() {
    register_sidebar(
        array(
            'id'            => 'h2wp-large-featured-post',
            'name'          => __( 'Large Featured Post' ),
            'description'   => __( 'Single Large Featured Post' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action('widgets_init', 'h2wp_right_sidebar');

  • Again open the index.php

Remove

<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
        <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
        <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
        <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
    </div>
</div>

Add

<?php dynamic_sidebar( 'h2wp-large-featured-post' ); ?>

  • All done about sidebar


Create sidebar for display the post

  • Login to WordPress admin

  • Appearance > Widget, there should be a section called Large Featured Post

  • Expand the Large Featured Post

  • From top section beside Widget label, you will find an add icon. Click on it, there will be lots of widget.

  • Search widget called Featured Large Post, drag the widget and drop it to Large Featured Post section.

  • It will ask you for post id, please enter a post id.

  • Go to front-end & reload

Share