this content was originally posted here.

wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file

here is the full one from HTML5 Blank

// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

    	wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!

        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!

        wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('html5blankscripts'); // Enqueue it!

        wp_register_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('slick'); // Enqueue it!
       wp_register_script('slicknav', 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('slicknav'); // Enqueue it!
    }
}

Here is the bits to register and enqueue slicknav and slider

wp_register_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('slick'); // Enqueue it!
wp_register_script('slicknav', 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('slicknav'); // Enqueue it!

you will also need to add the css links to the header manually.

CSS for the header.php file

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css"/>

initilizing the scripts

once the scripts and css have been added, you will also need to load them, usually your theme will include a script file so you can add the following in there. if not you will have to enqueue your own script to initialize with the following.

js/scripts.js

(function ($, root, undefined) {
	
	$(function () {
		
		'use strict';
		
		// DOM ready, take it away

			if($("#slider").length) {
				$("#slider").slick();
			}

			$('.nav').slicknav();
		
	});
	
})(jQuery, this);

then add the register for custom scripts.js

wp_register_script('custom_scripts',get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0');
wp_enqueue_script('custom_scripts');

now you can view the page and check the scripts are loading correctly. Also check that the slicknav it attaching to the correct div id for your wordpress menu, otherwise it wont show anything.

slick nav

in the theme im currently working on it has to attach to $('#primary-menu').slicknav(); rather than $('.nav').slicknav();

this process was more involved than i thought! :P in a 'normal' page, all you would do is add the css and js and done, but wordpress...

then show and hide the main menu using media queries like the following. find your breakpoint on the screen where the navigation looks broken, and then use that pixel width to show the slicknav and hide the default nav.

css

.slicknav_menu {
	display:none;
}
@media(max-width:1225px) {
	.menu-bar-wrap {
		display:none;
	}
	.slicknav_menu {
		display:block;
	}
}

Slick Slider

Here is how you can get the slider working now that its all included in the page. Slick Carousel

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:gqX1f
$p4:wordpress-enqueue-slicknav-and-slick-slider
$p5:
$p6:
$p:/view/code/gqX1f/wordpress-enqueue-slicknav-and-slick-slider/
Using Template: view-code.html