Categories
OSX Web Development

Install ext-intl on Mac OSX using homebrew and XAMPP

This was a painful process for me, it took quite a while to figure out why such a simple implementation when using ubuntu, can be so much work in a Mac.

We can’t just install the extension with apt-get like ubuntu, and its not already waiting to be uncommented like in windows, we have to install the the shared object intl.so our selves.  and the easiest way of doing this is by using homebrew and pecl.

Step 1 – Install Homebrew

Homebrew Website: http://brew.sh

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2 – Install Install icu4c

ICU4C Website: http://site.icu-project.org

brew install icu4c

Step 3 – Install Autoconf

More about Autoconf: http://brewformulas.org/Autoconf

brew install autoconf

Step 4 – Install Intl via PECL

PECL Website: https://pecl.php.net

sudo pecl update-channels
sudo pecl install intl

Step 5 – Enable intl.so in php.ini

Go to your php.ini file and at the end, add the following line:

extension=intl.so

This will enable the extension that we have just installed.

Step 6 – Restart your server

Use XAMPP to restart your server, this will reload the php.ini file with the new configuration.

Step 7 – Check it worked!

You can check if Intl was installed successfully by using the following command to list the loaded php modules.  If ‘intl‘ it is listed then it has been successfully loaded.

php -m

I am running php via Terminal and it didn’t work?

One common problem is that terminal is using the the wrong version of php, sometimes a system default is loaded rather than the php version you are using in XAMPP.  First lets check what version we are using:

which php

If you are using XAMPP correctly it should return:

  • /Applications/XAMPP/xamppfiles/bin/php 

If not and it loads from:

  • /usr/bin/php

Then we can temporarily change the path of the default php version to the XAMPP version by running the following in terminal:

PATH="/Applications/XAMPP/xamppfiles/bin:${PATH}"

Now if you run “which php” in terminal again you should get the correct path.

 

 

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));
}
Categories
Web Development

WordPress: Multiple layouts in single.php, depending on post category

This snippet allows you to server different views depending on post category.

if($wp_query->query['category_name'] == 'categoryname1') {
	include_once( 'template1.php' );
} else if($wp_query->query['category_name'] == 'categoryname2') {
	include_once( 'template2.php' );
} else {
	include_once( 'template3.php' );
}