Replacing Slider with Accordian Slider

Hi @jodierd, I would desactivate the default slider on home (through the customizer options screen) and then hook a new action that would include your new slider :
Use the ‘__after_header hook’ (the one used by the slider) to do so, like this for example :

add_action ('__after_header', 'my_accordion_slider');
function my_accordion_slider() {
//checks that we display the home page
if ( !tc__f('__is_home') )
return;

//renders the new slider
YOUR_SLIDER_RENDERING_FUNCTION()//if it is a shortcode, then use the do_shortcode() function
}

Note : make sure that the slider javascript is loaded
Hope this will help

Thanks Nikeo,

I have deactivated the original slider and added the suggested code to the child theme’s functions php as below. Note that I changed the name to accordian_slider since that’s the file in the child theme. (Correct?) I included the accordian code too following your code below, as this is working on the other page on my site. What have I missed?
Thanks!
Jodie

add_action ('__after_header', 'accordion_slider');
function accordion_slider() {
//checks that we display the home page
if ( !tc__f('__is_home') )
return;

//renders the new slider
YOUR_SLIDER_RENDERING_FUNCTION()//if it is a shortcode, then use the do_shortcode() function
}

/**
 * Accordian Slider addition
 *
 * /

<?php
add_action('wp_enqueue_scripts', 'load_accordion_slider_scripts');
add_action('wp_footer', 'instantiate_accordion_slider');

function load_accordion_slider_scripts() {
    wp_enqueue_style('accordion-slider-css', get_bloginfo('template_directory') . '/accordion-slider/css/accordion-slider.min.css');

    wp_enqueue_script('jquery');
    wp_enqueue_script('accordion-slider-js', get_bloginfo('template_directory') . '/accordion-slider/js/jquery.accordionSlider.min.js');
}

function instantiate_accordion_slider() {
?>
    <script>
        jQuery(document).ready(function($){
            $('.accordion-slider').accordionSlider({
                width:960,
                height:400
            });
        });
    </script>
<?php
}
?>

For future reference, please note:

https://codex.www.ads-software.com/Forum_Welcome#Posting_Code

Hi,
you miss the slider rendering function: replace YOUR_SLIDER_RENDERING_FUNCTION()
by the function that will actually display your slider.

There must be some sort of shortcode I guess. Check here to see how to embed a shortcode in your code with do_shortcode().

Other than that, the script and instanciations look correctly hooked.

Thanks for hooking me up with the rules for the forum WPyogi.

Nikeo, I dug and dug (figure it’s the best way to learn) but can’t find anything that looks like the rendering function so have asked the slider developer for it. I so appreciate your help!

Jodie

Hi Nikeo,

It worked! (With one tweak left to do, see below.)

Previously, I had tested the slider by creating a page in WordPress and adding the html. He told me I had to do the same to get it on the front page. Hummm… I made a copy of header.php in my child theme and added the code. First above <header>. You know what that did. Then below <header>. And it appeared right where I wanted it, above the circle images.

Now I just need to get it from appearing on all my other pages???????

Baaaaby steps!

Jodie

where exactly should i put the code? i can’t get it done

i’ve tried:

<?php add_action (‘__after_header’, ‘my_new_slider’);
function my_new_slider() {
//checks that we display the home page
if ( !tc__f(‘__is_home’) )
return;
//renders the new slider
echo do_shortcode(“[shs_slider_show]”);
//if(function_exists(‘shs_slider_view’)){ shs_slider_view(); }
}
?>

both in header.php and index.php with no luck

thanks

Hi @jodierd, perfect if you managed to do it that way. I recommend the use of action hooks for your future developments (to display the sliders on others pages for example). This is a much safer and easier way to do it. (cf my previous code).
I would be happy to read your feedback on this implementation once done! (and share a link)

@gomez.sebastian your code looks fine to me. If you have created a slider a slider with your plugin, then you should see it on frontpage with this code.

Hope this helps guys