Conditional Logic in a widget

QUESTION#1

There comes a situation many times where we have to display the same widget in the vertical sidebar as well as a Horizontal sidebar. To make this happen flawlessly we have to tweak the CSS for one sidebar. Either we do it through some javascript or by some drop down/CHECKBOX arrangement in the widget form that can inscribe additional CSS for the horizontal or vertical sidebar. It is also advised that one should not pollify too much code with Javascript.

Let me explain one step further →

public function widget($args, $instance) {
    extract( $args );
    $title = apply_filters( 'widget_title', $instance['title'] );

/* Display the markup before the widget. */
echo $before_widget;
if ( $title ) {
    echo $before_title . $title . $after_title;
}
/* Create a custom query and get the most recent 4 projects. */
$queryArgs = array(
    /* Do not get posts from the Uncategorized category. */
    'cat' => '-1',
    /* Order by date. */
    'orderby' => 'date',
    /* Show all posts. */
    'posts_per_page' => '4'
);
$query = new WP_Query( $queryArgs );
if ( $query->have_posts() ) : ?>
    <ul class="unbullet">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <li class="snippet-box">
            <div>
                <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                <?php the_post_thumbnail( 'medium', array( 'class' => 'hundred' ) ); ?>
                <div class="snippet-text">
                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
            <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?></a> -->
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif;
/* Display the markup after the widget. */
echo $after_widget;

}`

The above is a code that works successfully on the Horizontal sidebar, but if we wish to display this in the vertical sidebar then we have to add just two more classes namely →

  1. vertical

  2. unbullet-v

That means this
<ul class="unbullet"> has to change to →

<ul class="unbullet unbullet-v">

and

this
<li class="snippet-box"> has to change to this one

<li class="snippet-box vertical">

With the Help of this post I am able to create a checkbox in the backend form.

  1. I have successfully added this form in the widget form method →

<p> <input class="checkbox" type="checkbox" <?php checked( $instance[ 'vertical_sidebar_check' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'vertical_sidebar_check' ); ?>" name="<?php echo $this->get_field_name( 'vertical_sidebar_check' ); ?>" /> <label for="<?php echo $this->get_field_id( 'vertical_sidebar_check' ); ?>"><?php _e('Select for Vertical Sidebar', 'text-domain'); ?></label> </p>

This in the widget update method →

$instance[ 'vertical_sidebar_check' ] = $new_instance[ 'vertical_sidebar_check' ];

but although I understand the logic, but don’t know how to apply that in terms of PHP code.

And the logic in English is like this →

    <ul class="unbullet <?php If the check box is ticked then echo this class: unbullet-v ?> ">
        <li class="snippet-box ?php If the check box is ticked then echo this class:vertical ?> ">

BUT I HAVE NO CLUE HOW TO IMPLEMENT THE ABOVE LOGIC IN TERMS OF PURE
PHP CODE.

LAST QUESTION:
I also want to give an option in the backend for the posts to be displayed by the category filter that means a backend form method for category selection then widget update method and widget front end method will display posts based on the category selected.


Full Source Code of the Widget →

<?php
ini_set('display_errors',0);
error_reporting(E_ALL|E_STRICT);
class chimp_post_widget extends WP_Widget {
    function __construct() {
        //Create Widget
        parent::__construct(
            'post_display_widget',
            esc_html__('The Post Widget','text_domain'),
            array(
                'classname'       =>    'post-widget',
                'description'     =>    esc_html__('A Post Thumbnail Widget', 'text_domain' )
            )
        );
    }

    public function form( $instance ) {
       $title = isset( $instance['title'] ) ? $instance['title'] : '';
       $number_of_posts = isset( $instance['number_of_posts'] ) ? absint( $instance['number_of_posts'] ) : 5;
       $number_of_words = isset( $instance['number_of_words'] ) ? absint( $instance['number_of_words'] ) : 20;
       ?>
       <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'text_domain' ); ?></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_of_posts' ); ?>"><?php _e( 'Number of projects to show:', 'text_domain' ); ?></label>
       <input class="tiny-text" id="<?php echo $this->get_field_id( 'number_of_posts' ); ?>" name="<?php echo $this->get_field_name( 'number_of_posts' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_posts; ?>" size="3" /></p>

       <p><label for="<?php echo $this->get_field_id( 'number_of_words' ); ?>"><?php _e( 'Set the word limit for project descriptions:', 'text_domain' ); ?></label>
       <input class="tiny-text" id="<?php echo $this->get_field_id( 'number_of_words' ); ?>" name="<?php echo $this->get_field_name( 'number_of_words' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_words; ?>" size="4" /></p>

       <p>
        <input class="checkbox" type="checkbox" <?php checked( $instance[ 'vertical_sidebar_check' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'vertical_sidebar_check' ); ?>" name="<?php echo $this->get_field_name( 'vertical_sidebar_check' ); ?>" />
        <label for="<?php echo $this->get_field_id( 'vertical_sidebar_check' ); ?>"><?php _e('Select for Vertical Sidebar', 'text-domain'); ?></label>
      </p>


       <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title']           = sanitize_text_field( $new_instance['title'] );
        $instance['number_of_posts'] = absint( $new_instance['number_of_posts'] );
        $instance['number_of_words'] = absint( $new_instance['number_of_words'] );
        $instance[ 'vertical_sidebar_check' ] = $new_instance[ 'vertical_sidebar_check' ];
        return $instance;
    }

    public function widget($args, $instance) {
        extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );

		/* Display the markup before the widget. */
        echo $args['before_widget'];
       if ( ! empty( $instance['title'] ) ) {
           echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
       }

       $number_of_posts = ( ! empty( $instance['number_of_posts'] ) ) ? absint( $instance['number_of_posts'] ) : 5;
       if ( ! $number_of_posts ) {
           $number_of_posts = 5;
       }

       $number_of_words = ( ! empty( $instance['number_of_words'] ) ) ? absint( $instance['number_of_words'] ) : 20;
       if ( ! $number_of_words ) {
           $number_of_words = 20;
       }
        /* Create a custom query and get the most recent 4 projects. */
        $queryArgs = array(
            /* Do not get posts from the Uncategorized category. */
            'cat' => '-1',
            /* Order by date. */
            'orderby' => 'date',
            /* Show all posts. */
            'posts_per_page' => $number_of_posts,
        );
        $query = new WP_Query( $queryArgs );
        if ( $query->have_posts() ) : ?>
            <ul class="unbullet unbullet-v">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <li class="snippet-box vertical">
                    <div>
                        <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                        <?php the_post_thumbnail( 'medium', array( 'class' => 'hundred' ) ); ?>
                        <div class="snippet-text">
                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <p><?php echo wp_trim_words( get_the_excerpt(), $number_of_words , __( '&hellip;', 'text_domain' ) ); ?>
                                    </p>
                        </div>
                    </div>
                    <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?></a> -->
                </li>
            <?php endwhile; ?>
            </ul>
        <?php endif;
		/* Display the markup after the widget. */
		echo $after_widget;
    }
}

add_action('widgets_init', function(){
    register_widget('chimp_post_widget');
})
?>

we have to print or make these classes applicable only when the checkbox is ticked →

 1. unbullet-v 
 2. vertical

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.