WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to implement list.js (http://listjs.com/) inside my WordPress widget, so far with no success.

At first I have tried it in a simple index.html file outside the WordPress environment just to see if I did things right - it worked.
But when I put the code inside my widget it didn't anymore.

This is the code of my working index.php:

<script type="text/javascript" src="https://raw.github.com/javve/list/master/list.min.js"></script>

<div id="hacker-list">

    <input class="search" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="city">Sort by city</span>

    <ul class="list">
            <h3 class="name">Jonny</h3>
            <p class="city">Stockholm</p>
            <h3 class="name">Jonas</h3>
            <p class="city">Berlin</p>

<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'city' ]

    var hackerList = new List('hacker-list', options);

If you click on "name" or "city" you will see the list getting ordered.

Edit - code of the widget:

    Plugin Name: pageLoopWidget
    Plugin URI: ******
    Description: pageLoopWidget
    Author: ******
    Version: 1.0
    Author URI: ******
    class pageLoopWidget extends WP_Widget {
      function pageLoopWidget() {
        $widget_ops = array('classname' => 'pageLoopWidget', 'description' => 'Displays the pageLoopWidget.' );
        $this->WP_Widget('pageLoopWidget', 'pageLoopWidget Widget', $widget_ops);

    function form($instance) {
      $instance = wp_parse_args( (array) $instance, array(
          'title' => '',
          'listPages' => '',
          'pageLoopWords' => '',
          'pageLoopColor' => '',
          'CustomCSS' => ''
      $title = $instance['title'];
      $listPages = $instance['listPages'];
      $pageLoopWords = $instance['pageLoopWords'];
      $pageLoopColor = $instance['pageLoopColor'];
      $CustomCSS = $instance['CustomCSS'];

    <p><?php include 'codeBackend.php'; ?></p> <?php /* this contains the exact code pasted upside */ ?>


    function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = $new_instance['title'];
      $instance['listPages'] = $new_instance['listPages'];
      $instance['pageLoopWords'] = $new_instance['pageLoopWords'];
      $instance['pageLoopColor'] = strip_tags($new_instance['pageLoopColor']);
      $instance['CustomCSS'] = $new_instance['CustomCSS'];
      return $instance;

    function widget($args, $instance) {
      extract($args, EXTR_SKIP);

      echo $before_widget;
      $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

      if (!empty($title))
        echo $before_title . $title . $after_title;


    <?php include 'codeFrontend.php'; ?>

      echo $after_widget;
    add_action( 'widgets_init', create_function('', 'return register_widget("pageLoopWidget");') );
share|improve this question
And where is your widget code? – Ralf912 Apr 20 '13 at 14:45
That aside, it is generally recommendable to add your code inline in the question rather than linking to a third-party code sharing site. This being your second question, I took the liberty to put it in there. – Johannes Pille Apr 20 '13 at 15:45
thanks Johannes, funny thing is i thought one of this site rules was not to bloat the questions with code os i was even quite proud of making my homework but now the question is absolutely more readable so thanks you. Going to add the widget code now. – Nicola Apr 20 '13 at 18:10

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.