1

I've been struggling with trying to set a jquery list file on a wordpress site. This is the script and html in a codepen: http://codepen.io/javve/pen/bBfgD

My question is. The examples has html with scripts linked in. Can I copy the html to a custom page or do I need to set them in the header/footer, or enque them? Second question is regarding the jquery:

var monkeyList = new List('test-list', {
valueNames: ['name'],
page: 5,
plugins: [ ListPagination({}) ] 
});

How do I adapt that to Wordpress? Tried to set it in scripttags in the header, but no luck.

1 Answer 1

2

Its pretty simple.

First you have to add a function in your child theme's functions.php file to register and enqueue your scripts in head using wp_enqueue_scripts hook.

// Register and enqueue all scripts in head
    function custom_scripts() {

        wp_register_script( 'script_googleapis', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, false, false );
        wp_enqueue_script( 'script_googleapis' );

        wp_register_script( 'script_listjs', 'http://listjs.com/no-cdn/list.js', false, false, false );
        wp_enqueue_script( 'script_listjs' );

        wp_register_script( 'script_pagination', 'http://listjs.com/no-cdn/list.pagination.js', false, false, false );
        wp_enqueue_script( 'script_pagination' );

    }

    // Hook into the 'wp_enqueue_scripts' action
    add_action( 'wp_enqueue_scripts', 'custom_scripts' );  

Then you can call your function to initiate your script in footer using wp_footer hook as following;

// Add this in function.php as well

    function call_script_in_footer(){
    ?>
    <script>
    var monkeyList = new List('test-list', {
      valueNames: ['name'],
      page: 3,
      plugins: [ ListPagination({}) ] 
    });
    </script>
    <?php
    }

    add_action( 'wp_footer', 'call_script_in_footer' );

And thats it. Now you can use your HTML and CSS in what ever template you want.

1
  • Thats brilliant. I was pretty close, but keept fiddling around it. Tat gave me some more understanding of the process! Thanks amillion Dec 23, 2014 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.