Sidr Jquery Plugin & wordpress

  • Resolved artlover578

    (@artlover578)


    10 years, 7 months ago

    Hello All,

    I am new to this so please bare with me, I want to create a slide out Navigation using the primary menu. I would like to use the Sidr jquery plugin. I have attached all the necessary code including a init.js script to initialize the Sidr Plugin and the necessary .css for the template. below you will find the code that I am using in my functions.php file:

    //* Enqueue Sidr and Touchwipe jQuery plugins
add_action( 'wp_enqueue_scripts', 'enqueue_sidr_touchwipe' );
function enqueue_sidr_touchwipe() {

	wp_enqueue_script( 'sidr',  get_stylesheet_directory_uri() . '/js/jquery.sidr.min.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'sidr-init',  get_stylesheet_directory_uri() . '/js/jquery.sidr.min.init.js', array( 'sidr' ), '1.0.0', true );
	wp_enqueue_style( 'sidr-css', get_stylesheet_directory_uri() . '/css/jquery.sidr.dark.css' );

	// to make the right/left swipe touch event open or close the responsive menu
	wp_enqueue_script( 'touchwipe',  get_stylesheet_directory_uri() . '/js/jquery.touchwipe.min.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'touchwipe-init',  get_stylesheet_directory_uri() . '/js/jquery.touchwipe.min.init.js', array( 'touchwipe' ), '1.0.0', true );

}

    the files include on my server are:

    jquery.sidr.min.js
    jquery.sidr.min.init.js :

    jQuery(document).ready(function($) {

	$('#primary-nav-link').sidr({
		name: 'sidr-primary-nav',
		source: '#primary-nav-container'
	});

});

    jquery.touchwipe.min.js
    jquery.touchwipe.min.init.js
    jquery.sidr.dark.css

    is there anyone that could help me out on this issue, it would be highly appreciated.

    thanks:)

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter artlover578

    (@artlover578)

    if anyone could help I would really appreciate it.

    I’m not really sure what your question was here. From what it looks like, you enqueueing your scripts and style sheet. You just need to put the files you have listed in the proper directory within your theme so that the parameters of your enqueue actions are valid. So in other words, just put the js files in a folder called ‘js’ in your child theme. Put the css file in a folder called ‘css’ in your childtheme. Once you have done this, wordpress should automatically link the files to your document footer (since you are using the boolean ‘true’ in your enqueue actions; last parameter.)

    The way I would do it is to register your scripts first, then instead of having all of those separate enqueues, you put the dependencies in the array as your third parameter in the enqueue. see here: https://codex.www.ads-software.com/Function_Reference/wp_register_script

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sidr Jquery Plugin & wordpress’ is closed to new replies.