Getting Foundation 6 to work with WordPress without plugins

Now relax. If you’ve been pulling your hair out trying to get Foundation 6 to work on your WordPress theme then I have a little present for you ????

Zero. Plugins. Ahhhh yeaaaah!

There are a few steps, so from the top they are:

1. Don’t forget to back up your site first ????
2. Download Foundation
3. Upload Foundation to your website via (S)FTP
4. Enqueue in the WordPress functions.php file

Download Foundation

Ok, head over to Foundation and go to Foundation for Sites. Here you can select from a selection of pre-packaged folder: Complete, Essential, Custom, and SASS.

Best to start with Complete for now. Which contains everything including the kitchen sink (but personally, I use a Custom build as I prefer the Float Grid).

Upload Foundation via (S)FTP

First let’s unzip the Foundation folder and then let’s upload that bad boy to your theme folder. I tend to create a folder within my theme folder called ‘Vendor’ then I’ll upload it there.

FYI. Keep the Foundation file name the same. In this case, the version of Foundation I’m using is v6.4.2 and the preset filename for the folder is ‘foundation-6.4.2-complete‘. This will save you a lot of time later on trying to figure out what version of Foundation you’re working with.

Edit Foundation’s app.js file

Before we enqueue the Foundation files, you need to add some code to the app.js file in the Foundation files you downloaded. In the Foundation folder, go to path /foundation-6.4.2-complete/js/app.js and enter the following code. This code converts the $ symbol into jQuery and then readys Foundation for use.

var $ = jQuery;
$(document).ready(function(){
	$(document).foundation();
});

Enqueue Foundation in your WordPress theme’s functions.php file

Now let’s get Foundation enqueued in your WordPress theme (the right way).

function custom_enqueue_styles_scripts() { l
	wp_enqueue_style('foundation', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/css/foundation.min.css' );
	wp_enqueue_style('app', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/css/app.css' );
	wp_enqueue_script('app-js', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/js/app.js', array('jquery', 'jquery-js', 'foundation-js'), true );
	wp_enqueue_script('foundation-js', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/js/vendor/foundation.min.js', array('jquery', 'jquery-js'), true );
	wp_enqueue_script('jquery-js', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/js/vendor/jquery.js' );
	wp_enqueue_script('what-input-js', get_template_directory_uri() . '/vendor/foundation-6.4.2-complete/js/vendor/what-input.js' );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_styles_scripts');