Loading RS scripts and styles for Wordpress PHP template only slider

pauljlawrence1's Avatar

pauljlawrence1

01 Aug, 2019 02:35 PM

Hi Dmitri, starting a new thread bc I never heard back from you in old one...

Basically I have a home page template with 2 different style royalsliders (a customized basic one and a "nearby" style one). The sliders are not created in the WP backend but by HTML within post loops in the template so this obviates the use of shortcodes (therefore "register_new_royalslider_files(123);" won't work because the sliders don't have ID's).

The sliders are not working because the slider files are not being loaded.

Basically my question is: what (in addition to checking "home page" in the royalslider settings in the WP backend) must I do to preload the necessary files to only the homepage?

Thanks in advance,

P

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Aug, 2019 04:57 PM

    Dmitry Semenov's Avatar

    Basically my question is: what (in addition to checking "home page" in the royalslider settings in the WP backend) must I do to preload the necessary files to only the homepage?

    You can create a "fake" custom slider that uses a skin that you want to include and call register_new_royalslider_files for it.

  2. 2 Posted by pauljlawrence1 on 01 Aug, 2019 05:08 PM

    pauljlawrence1's Avatar

    Ok so basically an “empty” slider in the WP backend that serves as a
    stand-in for the slider objects being pulled in the PHP template loop?

    P

  3. Support Staff 3 Posted by Dmitry Semenov on 01 Aug, 2019 05:57 PM

    Dmitry Semenov's Avatar

    Yes, empty slider.

    But register_new_royalslider_files should be called not inside the loop, but before the head is printed (as CSS files are printed there and slider needs to decide which to include depending on skin).

  4. 4 Posted by pauljlawrence1 on 01 Aug, 2019 08:25 PM

    pauljlawrence1's Avatar

    Ok so I am calling the "fake" custom slider in my template but I'm getting: "[RoyalSlider Error] Slides are missing." on the front end... Please tell me what I'm doing wrong. Any help would be appreciated. I purchased this plugin for client btw.

    functions.php

    function new_royalslider_add_custom_skin($skins) {
          $skins['hhHeroSlider'] = array(
               'label' => 'Hero slider',
               'path' => get_stylesheet_directory_uri() . '/template-parts/royalslider-custom/hero-slider-skin/hero-slider.css'  
          );
          return $skins;
    }
    add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);
    

    front-page.php

    <div class="royalSlider hhHeroSlider">
            <?php echo do_shortcode('[new_royalslider id="2"]');?>
            <?php if ( $custom_query->have_posts() ) : ?>
            <!-- the loop -->
            <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?> 
                <div class="rs-object">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>                
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'news-grid-image' ); ?>
                    <img class="rsImg" src="<?php echo $image[0]; ?>">
                    <?php endif; ?>
                </div>
            <?php endwhile; ?><!-- end of the loop -->
    </div>
    

    in the backend I have an empty custom slider with the ID of "2"

  5. Support Staff 5 Posted by Dmitry Semenov on 01 Aug, 2019 08:38 PM

    Dmitry Semenov's Avatar

    You don't need to embed the slider, it serves only as a source of JS and CSS files.

    If you're manually building HTML, don't forget to actually initialize the slider (step 3 - https://dimsemenov.com/plugins/royal-slider/documentation/#basic-usage )

  6. 6 Posted by pauljlawrence1 on 01 Aug, 2019 08:44 PM

    pauljlawrence1's Avatar

    Ok so to clarify, you're saying I do not need the

    register_new_royalslider_files
    

    method... I simply need to initialize the slider js in my code?

  7. Support Staff 7 Posted by Dmitry Semenov on 02 Aug, 2019 04:40 AM

    Dmitry Semenov's Avatar

    You need 3 things:

    1. Include JS and CSS files (the easy way is checkbox in RoyalSlider Settings page, the hard way is calling register_new_royalslider_files as described here http://help.dimsemenov.com/kb/wordpress-royalslider-tutorials/wp-in...)
    2. Print HTML code for the slider.
    3. Initialize the slider via JavaScript (either from another JS file or from inline <script> tag).

    Hope it helps.

  8. 8 Posted by pauljlawrence1 on 02 Aug, 2019 04:27 PM

    pauljlawrence1's Avatar

    Thanks. The minified royalslider and my initialization scripts are loading fine, I called them in my functions.php but the custom skin isn't loading...

    function new_royalslider_add_custom_skin($skins) {
          $skins['heroSlider'] = array(
               'label' => 'Hero Slider',
               'path' => get_stylesheet_directory_uri() . '/template-parts/royalslider-custom/css/hero-slider.css'
          );
          return $skins;
    }
    add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);
    

    the css file "hero-slider.css" is located in my child theme folder.

  9. 9 Posted by pauljlawrence1 on 02 Aug, 2019 05:24 PM

    pauljlawrence1's Avatar

    Ok got it. I had to select the custom skin in the backend, but now royalslider script doesn't seem to be running...

    PHP:

    <div id="upcoming-events-slider" class="container-fluid p-0">
        <div id="hero-slider" class="royalSlider heroSlider">
            <?php if ( $custom_query->have_posts() ) : ?>
            <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?> 
                <div class="rs-object">
                    <figure class="rsGCaption"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figure>               
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'news-grid-image' ); ?>
                    <img class="rsImg" src="<?php echo $image[0]; ?>">
                    <?php endif; ?>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
    

    initialization:

    (function($) {
       $('#hero-slider').royalSlider();
    });
    
  10. 10 Posted by pauljlawrence1 on 02 Aug, 2019 06:44 PM

    pauljlawrence1's Avatar

    Scripts are loaded but Royalslider still not working:

    <div id="hero-slider" class="royalSlider heroSlider">
            <?php if ( $custom_query->have_posts() ) : ?>
            <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?> 
                <div>
                    <figure class="rsGCaption"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figure>           
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'news-grid-image' ); ?>
                    <img class="rsImg" src="<?php echo $image[0]; ?>">
                    <?php endif; ?>
                </div>
            <?php endwhile; ?>
        </div>
    
  11. Support Staff 11 Posted by Dmitry Semenov on 02 Aug, 2019 08:01 PM

    Dmitry Semenov's Avatar

    You may call it within jQuery document.ready, as shown in docs:

         jQuery(document).ready(function($) {
            $(".royalSlider").royalSlider({
                // options go here
            });  
        });
    

    this way you only need to make sure that your script is included after jQuery.

  12. 12 Posted by pauljlawrence1 on 02 Aug, 2019 10:00 PM

    pauljlawrence1's Avatar

    I got the initialization script in the right place (just after royalslider script in the footer) but royalslider still isn't doing its thing (no console errors)... See above, is my markup correct? Thanks.

  13. 13 Posted by pauljlawrence1 on 02 Aug, 2019 10:43 PM

    pauljlawrence1's Avatar

    Got it working, my initialization script was wrong. Thanks.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac