WordPress Tablesorter Zebra stripe plug-in for beginner

I’m trying to add the zebra-stripe plugin to a wordpress page.

I am not sure where to place the following code in order to make the zebra striping work.

Read More

Can anyone point me in the right direction? Thank you!

$(function() {

  // call the tablesorter plugin
  $("table").tablesorter({
    theme: 'blue',
    // initialize zebra striping of the table
    widgets: ["zebra"],
    // change the default striping class names
    // updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
    // widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
    widgetOptions : {
      zebra : [ "normal-row", "alt-row" ]
    }
  });

});

Related posts

1 comment

  1. It looks like the WordPress table-sorter plugin is using the original tablesorter (v2.0.5) so the theme and widgetOptions settings do not do anything.

    If you’re not using that plugin, but you are using my fork of tablesorter, then you need to load the /css/theme.blue.css file and not change the default zebra class names:

    $(function() {
      $("table").tablesorter({
        theme: 'blue',
        widgets: ["zebra"]
      });
    });
    

    If you are using the original tablesorter without the WordPress plugin, use the same code above, except for the theme setting; the blue style that needs to be loaded will be in the following location /themes/blue/style.css.

Comments are closed.