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. frankspin
    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. Gary A
    Permalink to comment#

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

  3. 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. bmacadam
    Permalink to comment#

    You are the master

  5. 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.