We decide to go with the RoyalSlider for the slider on the homepage. I've long been a fan of the AnythingSlider, because I was part of it's creation and I think it's very powerful. However, I think it's a bit long in the tooth these days not supporting touch events or fluid width environments very well. The RoyalSlider is nearly as powerful (API wise) and also supports touch and fluid-ness.

We have a bunch of photos from Jeff as his work, which is all we need content-wise for the slider.

We go through the process of downloading it and implementing the CSS and JS needed to make it work on our page.


  1. User Avatar
    Permalink to comment#

    To register stylesheets and javascript files in WordPress i use the following snippet. You can copy and paste it in your functions.php and edit it to fit your needs.

        // Enqueue scripts and styles
        // load the styles and scripts
        function scripts_important() {
        wp_register_script( ‘modernizr’, get_template_directory_uri() . ‘/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js’, ’20121015′, false );
        wp_enqueue_script( ‘modernizr’ );
        function enqueue_custom_script($form) {
        wp_register_script( ‘forms’, get_template_directory_uri() . ‘/js/forms.min.js’, array( ‘jquery’ ), ’20121015′, true );
        wp_enqueue_script( ‘forms’ );
        function scripts_normal() {
        global $post_type;
        // remove default jQuery includes
        wp_deregister_script( 'jquery' );
        // register javascript files
        // get jQuery from Google CDN  
        wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js", false, null);
        wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.min.js', array( 'jquery' ), '20120206', true );
        wp_register_script( 'lightbox', get_template_directory_uri() . '/js/jquery.fancybox.pack.js', array( 'jquery' ), '20120206', false );
        wp_register_script( 'plugins', get_template_directory_uri() . '/js/plugins.min.js', array( 'jquery' ),'20120206', true );
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'bootstrap' );
        // load javascript file only on a specific post type
        if( 'activiteiten' == $post_type ) { wp_enqueue_script( 'lightbox' );};
        wp_enqueue_script( 'plugins' );
        function theme_styles() {
        global $post_type;
        wp_register_style( ‘fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic’, ’20120208′, ‘all’ );
        wp_register_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.min.css’, array(), ’20120208′, ‘all’ );
        wp_register_style( ‘lightbox’, get_template_directory_uri() . ‘/css/jquery.fancybox.min.css’, array(), ’20120208′, ‘all’ );
        wp_register_style( ‘main’, get_template_directory_uri() . ‘/css/main.min.css’, array(‘bootstrap’, ‘fonts’), ’20120208′, ‘all’ );
        wp_enqueue_style( 'fonts' );
        wp_enqueue_style( 'bootstrap' );
        wp_enqueue_style( 'main' );
        if( 'activiteiten' == $post_type ) { wp_enqueue_style( 'lightbox' );};
        add_action( ‘wp_enqueue_scripts’, ‘scripts_important’, 5 );
        add_action(“gform_enqueue_scripts”, “enqueue_custom_script”, 10, 2);
        add_action( ‘wp_enqueue_scripts’, ‘scripts_normal’ );
        add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );
  2. User Avatar
    Gary A
    Permalink to comment#

    What’s the best way to attach jQuery to the end of the body element?

  3. User Avatar
    kayla thompson

    I am a total newbie at js, and I am not using codekit for this project. At the point where you talk about prepending the document using codekit… what am I supposed to do if I’m not using codekit? can I just copy and paste the code from the royalslider.min.js file to the global.js file? Cause that didn’t work, I have done everything else correctly (or so I think) and it’s not looking the same at this point… HELP

  4. User Avatar
    Permalink to comment#

    You are the master

  5. User Avatar
    Jesse Graupmann
    Permalink to comment#

    It’s worth noting that the advertised price of Royal Slider has increased to $14 & $22 for the WordPress version. If you use PayPal you’ll pay an extra $2 handling fee whereas if you don’t use PayPal you have to use their in-store credit which only comes in $20 & $30 chunks – forcing you to waste money.

    Essentially, if this is the only thing you’ll purchase, then Royal Slider will cost you $16/$20 or $24/$30 (WordPress version).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.