Need help adding additional controls to a custom widget Part 2


This thread is an extension of what has been discussed here, but since there the answer has been accepted so I am creating a new thread.

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">
                <!-- <img src="" 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>
            <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?></a> -->
    <?php endwhile; ?>
<?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

    has to change to →

    <ul class="unbullet unbullet-v">



  • 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 →

    <input class="checkbox" type="checkbox" id="get_field_id( 'vertical_sidebar_check' ); ?>" name="get_field_name( 'vertical_sidebar_check' ); ?>" />
    <label for="get_field_id( 'vertical_sidebar_check' ); ?>">

    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 ticket then echo this class: unbullet-v ?> ">
            <li class="snippet-box ?php If the check box is ticket then echo this class:vertical ?> ">


    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.

    Read more here: Need help adding additional controls to a custom widget Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *