Customize WordPress widget - Product Category

Question

I want to add some custom bullets next to my categories in my Category Widget so I created a new widget and added in my new html and classes so I can change how it all looks. Unfortunately for some reason my widget is adding a link to one of my last categories all over the store pages as well as where it needs to be (in the category list/sidebar). While everything seems to work the empty a tags all over the place are messing up styling of other elements, adding extra space and making things sit off.

Here is my full widget code:

class mdk_wpcat_widget extends WP_Widget {
// Set up the widget name and description.
public function __construct() {
    $widget_options = array( 
        'classname' => 'mdk_wpcat_widget', 
        'description' => 'Custom MDK Woocommerce Category Widget' 
        );
    parent::__construct( 'mdk_wpcat_widget', 'Woo Cat Widget', $widget_options );
}

// Create the widget output.
public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance[ 'title' ] );

    // before and after widget arguments are defined by themes
    //$blog_title = get_bloginfo( 'name' );
    //$tagline = get_bloginfo( 'description' );
    echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; 

    // Custom Woo Category Output
    $args = array(
        'number'     => $number,
        'orderby'    => 'menu_order',
        'order'      => 'ASC',
        'hide_empty' => $hide_empty,
        'include'    => $ids
    );
    //Hides "film" category by ID
    $args['exclude'] = '72';

    $product_categories = get_terms( 'product_cat', $args );

    $count = count($product_categories);
     if ( $count > 0 ){
         echo '<ul class="shop-categories">';
         foreach ( $product_categories as $product_category ) {
            echo '<li class="shop-category ' . (( $product_category->name == single_cat_title('', false) )?"active-cat":"") . '"><a href="' . get_term_link( $product_category ) . '"><span class="bulletpoint"></span><span class="category-title">' . $product_category->name . '</span></li>';

         }
         echo '</ul>';
     }

    echo $args['after_widget'];
}

// Create the admin area widget settings form.
public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?>    
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
      <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
    </p><?php
}

// Apply settings to the widget instance.
public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
    return $instance;
  }
}

// Register the widget.
function mdk_wpcat_load_widget() { 
register_widget( 'mdk_wpcat_widget' );
}
add_action( 'widgets_init', 'mdk_wpcat_load_widget' );

I know it is the widget causing the issue because i can remove it from my functions.php file and everything looks right again. I am running the latest version of wp and woocommerce as of 7/5/2017 and i also tried in Twenty Seventeen theme to make sure it was not my current theme.

Thanks for the help!

Answer 1

Taking a look at the output rendered by the widget shows that the markup is missing a closing <a> tag for the term links and the widget instance does not have the closing </li>.

Viewing the page source and formatting the output makes it easier to identify these issues:

<li id="mdk_wpcat_widget-2" class="widget-container mdk_wpcat_widget">
  <h3 class="widget-title">Wooooo!</h3>

  <ul class="shop-categories">
    <li class="shop-category ">
      <a href="http://example.com/product-category/test-category-1/">
        <span class="bulletpoint"></span>
        <span class="category-title">Test Category 1</span>

    </li>

    <li class="shop-category ">
      <a href="http://example.com/product-category/test-category-1/test-subcategory-1/">
        <span class="bulletpoint"></span>
        <span class="category-title">Test Subcategory 1</span>

    </li>
  </ul>

Here's a an updated version of the code that outputs the HTML. The formatting has been improved and the missing closing anchor tag has been fixed. Keeping things nicely formatted helps to identify errors.

$count = count( $product_categories );
if ( $count > 0 ) {
  echo '<ul class="shop-categories">';

  foreach ( $product_categories as $product_category ) {
    $active_cat = $product_category->name == single_cat_title( '', false ) ? ' active-cat' : '';
    echo '
      <li class="shop-category' . $active_cat . '">' .
        '<a href="' . esc_url( get_term_link( $product_category ) ) . '">' .
          '<span class="bulletpoint"></span>' .
          '<span class="category-title">' . esc_html( $product_category->name ) . '</span>' .
        '</a>' .
      '</li>';
  }

  echo '</ul>';
}

The missing closing </li> tag for the widget instance is caused from overwriting the $args array with the arguments passed to get_terms(). This causes echo $args['after_widget']; to throw a warning. Always turn on error reporting when developing.

Create a separate array for the arguments passed to get_terms():

// Custom Woo Category Output
$get_terms_args = array(
    'number'     => $number,
    'orderby'    => 'menu_order',
    'order'      => 'ASC',
    'hide_empty' => $hide_empty,
    'include'    => $ids,
    'exclude'    => '72', //Hides "film" category by ID
);

$product_categories = get_terms( 'product_cat', $get_terms_args );

Note that $number, $hide_empty, and $ids are all undefined too, so those variables should be properly initialized.