WordPress Posts Widget

WordPress Posts Widget

-- Functions.php

    // http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/
    // Creating the widget 
    class meor_widget_posts extends WP_Widget {

        function __construct() {
            parent::__construct(
                // Base ID of your widget
                'meor_widget_posts', 

                // Widget name will appear in UI
                __('Meor Posts Widget', 'aqua-skin-care'), 

                // Widget description
                array( 'description' => __( 'Widget to allow simple posts display', 'aqua-skin-care' ), ) 
            );
        }

        // Creating widget front-end
        // This is where the action happens
        public function widget( $args, $instance ) {
            $title      = apply_filters( 'widget_title', $instance['title'] );
            $number     = apply_filters( 'widget_number', $instance['number'] );
           
            // before and after widget arguments are defined by themes
            echo $args['before_widget'];
            

            if ( ! empty( $title ) )
                echo $args['before_title'] . $title . $args['after_title'];

    
                $query_args = array(
                    'post_type'                 => 'post',
                    'post_status'               => 'publish',
                    'posts_per_page'            => $number
                );

                // The query
                $child_query = new WP_Query($query_args);

                // The loop
                if( $child_query->have_posts() ) : while ( $child_query->have_posts() ) : $child_query->the_post(); ?>

                    <!-- article -->
                    <article id="post-<?php the_ID(); ?>" <?php post_class('clear'); ?>>

                        <?php
                            echo "<div class='clear'>";
                                if ( has_post_thumbnail()) : ?>
                                    <div class="thumbnail">
                                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                            <?php the_post_thumbnail('thumbnail'); ?>
                                        </a>
                                    </div>
                                    <div class="content part">
                                <?php 
                                else : ?>
                                    <div class="content full">
                                <?php endif;
                                    echo "<h4>
                                            <a href='".get_the_permalink()."' title='".get_the_title()."'>";
                                                    the_title();
                                    echo "  </a>
                                        </h4>";

                                        echo "<span class='date'>";
                                            the_time('jS F Y');
                                        echo "</span>";

                                echo "</div>";
                            echo "</div>";

                            echo "<div class='excerpt'>";

                                    html5wp_excerpt('html5wp_index');

                            echo "</div>";

                        ?>

                    </article>
                    <!-- /article -->

                <?php endwhile; endif;
                 wp_reset_postdata();


            echo $args['after_widget'];
        }

        // Widget Backend 
        public function form( $instance ) {
           
            if ( isset( $instance[ 'title' ] ) ) {
                $title = $instance[ 'title' ];
            } else {
                $title = __( 'New title', 'aqua-skin-care' );
            }
           
            if ( isset( $instance[ 'number' ] ) ) {
                $number = $instance[ 'number' ];
            } else {
                $number = __( '', 'aqua-skin-care' );
            }

            // Widget admin form
            ?>
            <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Posts Count:' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo esc_attr( $number ); ?>" />
            </p>

            <?php 
        }
        
        // Updating widget replacing old instances with new
        public function update( $new_instance, $old_instance ) {
            $instance = array();
            $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
            $instance['number'] = ( ! empty( $new_instance['number'] ) ) ? strip_tags( $new_instance['number'] ) : '';
            return $instance;
        }
    } // Class meor_widget_posts ends here

    // Register and load the widget
    function wpb_load_widget() {
        register_widget( 'meor_widget_posts' );
    }
    add_action( 'widgets_init', 'wpb_load_widget' );
    
    
    
    

-- CSS
.widget_meor_widget_posts {margin-bottom: 20px; background: #c3c7ca; padding: 16px; max-width: 320px;}
.widget_meor_widget_posts h3 {border-bottom: 1px solid #000000;font-size: 2.2rem;margin: 0 0 20px;padding: 0 0 10px;text-transform: uppercase;}
.widget_meor_widget_posts article {margin-bottom: 20px !important;border-bottom: 1px solid #a7adb1;}
.widget_meor_widget_posts article:last-child {border-bottom: 0;margin-bottom: 0 !important;}
.widget_meor_widget_posts .thumbnail {width: 100%;margin-bottom: 10px;}
.widget_meor_widget_posts .thumbnail img {width: 100%;}
.widget_meor_widget_posts h4 {text-transform: uppercase;font-size: 1.6rem;margin: 0 0 4px;line-height: normal;}
.widget_meor_widget_posts .date {font-size: 1.4rem;}
.widget_meor_widget_posts .content {width: 100%;}
.widget_meor_widget_posts .content.part {}
.widget_meor_widget_posts .excerpt {margin-top: 10px;}
.widget_meor_widget_posts .excerpt .view-article {display: none;}