Integrate a jQuery plugin into a WordPress theme

Navigation
2

I'm using Nivo Slider on my site from the basic example offered by the plugin. In the file header.php of theme I put the scripts and <div> with the images pointing to a theme directory. And in%% of slider initialization.

But how can I do this jQuery plugin integration by following WordPress standards and passing information dynamically? In the case of the slider, images.

footer.php 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><scripttype='text/javascript'src='<?phpechoget_template_directory_uri();?>/nivo/jquery.nivo.slider.pack.js'></script><linkrel='stylesheet'href='<?phpechoget_template_directory_uri();?>/nivo/nivo-slider.css'type='text/css'media='all'/><!--maiscódigo--></head><body<?phpbody_class();?>><divid="slider" class="nivoSlider">
    <img src="<?php echo get_template_directory_uri(); ?>/nivo/nemo.jpg" alt="" />
    <a href="http://example.com"><img src="<?php echo get_template_directory_uri(); ?>/nivo/toystory.jpg" alt="" title="#htmlcaption" /></a>
    <img src="<?php echo get_template_directory_uri(); ?>/nivo/up.jpg" alt="" title="This is an example of a caption" />
    <img src="<?php echo get_template_directory_uri(); ?>/nivo/walle.jpg" alt="" />
</div>

header.php 

<script type="text/javascript">
    jQuery(window).load(function() {
        // nivoslider init
        jQuery('#slider').nivoSlider({
            effect: 'boxRainReverse',
            slices:15,
            boxCols:8,
            boxRows:8,
            animSpeed:500,
            pauseTime:5000,
            directionNav:false,
            directionNavHide:false,
            controlNav:true,
            captionOpacity:1
        });
    });
</script>
Question and answers inspired by Q & A jQuery (...) .nivoSlider is not a function

in Wordpress .     
asked by anonymous 17.03.2014 / 15:33

2 answers

6

The first observation is that it is more appropriate to create a plugin (en) and make this functionality is independent of the theme , so changing the theme makes it much easier to migrate Slider.

The second is that we should only use other versions of jQuery (instead of the one built into WordPress) if we know what we are doing >. This prevents conflicts with other plugins and themes. The lack of care when using jQuery correctly in WP is responsible for numerous problems and bugs .

The plugin that follows is the adaptation of the question code, noting the following:

17.03.2014 / 15:33
1

Brasofilo's answer is surely the most professional way to do this, so just to integrate nivoslider into the theme, you should load the necessary files through the wp functions.

In function.php do insert the following. 

add_action( 'wp_enqueue_scripts', 'os_meus_scripts' );

function os_meus_scripts() {
    wp_register_script( 'jquery.nivo.slider.pack', get_template_directory_uri() . '/js/nivo/jquery.nivo.slider.pack.js', true );
    wp_register_script( 'nivo-js', get_template_directory_uri() . '/js/nivo/nivo.js', true ); // esse é o arquivo com a chamada.

    wp_enqueue_script('jquery'); // carrega o jquery nativo do wp
    wp_enqueue_script('jquery.nivo.slider.pack');
    wp_enqueue_script('nivo-js');

    // carrega o css do nivo
    wp_register_style( 'nivo-css', get_template_directory_uri() . '/css/nivo/nivo-slider.css');

    wp_enqueue_style( 'nivo-css' );
}

Note that this is the way you should load any script or style into your theme. We also use: 

wp_enqueue_script('jquery');

to load native wordpress jquery and thus avoid conflict.

Inside js / nivo / nivo-js.js goes the following content. 

$(function(){ // chamada short-hand para o ready();
    var options = {
        effect: 'boxRainReverse',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:5000,
        directionNav:false,
        directionNavHide:false,
        controlNav:true,
        captionOpacity:1
    };

    $('#slider').nivoSlider(options);
});
    
20.03.2014 / 14:35
Hide Div after x seconds after performing action Problems trying to save to "POST"="no-such-table" database Django / Python