Categories
Web Development

Integrating Zurb Foundation with Sass into WordPress

1. Installing WordPress locally with a Child Theme.

The first step is to install WordPress locally and setup a child theme. For more information on how to install and setup WordPress check out This Post. Both the style.css and functions.php files should look like the following:

style.css

/*
 Theme Name: Twenty Sixteen Child
 Author: Mammoth
 Author URI: http://www.elegantthemes.com
 Template: twentysixteen
 Version: 1.0.0
*/

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
 //wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

As you can see in functions.php the get parent-style has been commented out as we don’t want to inherit any styling.

2. Copy over the ZURB template into WordPress.

Copy all of the root files and drop them into the themes folder. This may take a while dependant on how large the ZURB build is. Once copied the next stage is to move over the dist folder into the child theme you created in step 1, during this stage you can rename the folder to whatever you like in our example we we renamed the dist folder to zurb as you can see in the screenshot below:

screen-shot-2016-09-21-at-15-39-28

To ensure ZURB compiles the project we need to edit the config.yml dist path. In this case we have changed the dist path to the following:

# Gulp will reference these paths when it copies files
PATHS:
 # Path to dist folder
 dist: "twentysixteenchild/zurb"

Now if you run foundation watch within the themes root folder you will see the the project compile.

3. Getting WordPress to load our Zurb files.

The first file we would like to load is our app.css file. To do this navigate to header.php within your child theme and add the following link:

<link rel='stylesheet' href="/wp-content/themes/twentysixteenchild/zurb/assets/css/app.css">

Carry out this process for both your .js files and img files. Now if you open the link for you WordPress build your zurb project should be loaded.

4. Additional Thoughts

Once the process is complete the editing of the design can be carried out by editing the src files located in the root of your themes folder, this would then require you to copy across any html changes within the dist folder to the corresponding .php files.

In addition if you would like to compile just the .css .js and img files and not compile pages or html files, navigate to the gulpfile.babel.js and remove pages from the following:

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

In addition to this deletion you also need to comment out the following located at the bottom of the gulpfile.babel.js:

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
 gulp.watch(PATHS.assets, copy);
 //gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
 //gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
}

Leave a Reply