Posted in wordpress
7
6:20 am, August 31, 2018

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

View Statistics
This Week
127
This Month
629
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in wordpress
using wp_nav_menu to show a custom menu in wordpress get and show the featured image on a wordpress page template link to a custom style sheet in your theme directory wordpress wordpress show page content on template file show post content on template wordpress wordpress add a template file to your theme fix for wordpress requesting ftp login details installing plugins wordpress category list sorting custom adding pagination to custom wp_query add paging to wp list query list items from blog and filter by category name match a category id in wordpress and then add styles just for that id get the current post id from content.php wordpress get the current category id name and slug get the wordpress category name from a category id wordpress adding post custom field meta and displaying it on you template getting the site title vs the page name wordpress get home url add a tag to wordpress header from a plugin list items matching a category title wp register plugin settings admin Create a admin main wordpress custom menu item wordpress show the parent page title with fallback to title Add a post date to your custom wordpress post listing wordpress get page content to display on template page get the stylesheet directory in wordpress theme wordpress register enqueue javascript require jquery wordpress show the post content for use in a template wordpress show posts loop with feature image thumbnail wordpress get site url wordpress advanced custom fields replace shortcode for site url with blog url wordpress check home and not home for banners and things wordpress use a shortcode in php gravity forms wordpress include jquery in theme functions wordpress enqueue slicknav and slick slider wordpress show the page content for use in a template wordpress change domain in config, wordpress domain config wordpress get template directory
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk