Paul de Wouters


Download the new Spine theme

I’ve just updated the Spine theme to use Foundation 4.

You can download it by clicking the button below

Download Spine 2

View Demo

The big change is that everything can be customized with Sass. Foundation now uses mixins for everything from grids to buttons.
It also means less unnecessary classes and divs.

I also added a contact form template.

The menus are a bit special: the primary location uses the Foundation top bar, which is the most flexible, allows for 3 levels of dropdowns…

The secondary menu uses the Foundation sections menu, which replaces the navbar menu.

This requires you to wrap the top level menu items with a custom menu link item with a # URL, so basically it’s good for sites that has different sections. It supports one level of dropdowns.

 

I always welcome feedback, so if you find a bug, let me know.


Using Live Reload with Phpstorm remote project

I recently set up an old machine to run a LAMP stack on Ubuntu for my WordPress development.
As mentioned before, I use Phpstorm for development with xdebug. This works fine for remote debugging, so I can set up my local dev sites on my Ubuntu machine and still develop on my more powerful Windows 8 PC.

One thing I couldn’t figure out was how to get Live Edit to work with remote projects. This is a feature of the Phpstorm IDE which works a lot like Live Reload by adding an extension to Chrome and monitoring file changes. Unfortunately, it doesn’t seem to be supported for remote projects.
I finally found a workaround to this issue and not having to refresh my browser window every time I make a Sass change is a great productivity boost.

First, here’s my config.rb file, which is inpsired by Chris Coyier’s in that it moves the style.css after compilation.
Mine copies it to my local WordPress theme root and then moves it to the remote server via a mapped drive.

On my local machine, I installed Ruby and Sass/Compass gems and just ‘compass watch’ with the command line tool. I used to use Fire.app but found out it didn’t find all compilation errors.
So, when I save a Sass file, it compiles and moves the style.css to the required locations.

On my Ubuntu machine, to which I connect with Teamviewer (I installed the desktop version of Ubuntu because it’s easier for me to manage), I installed Guard and Guard Livereload and the Chrome LiveReload extension.
https://github.com/guard/guard-livereload
https://github.com/guard/guard

If you need to install Guard LiveReload on Ubuntu, I suggest following the steps described in this issue

https://github.com/guard/guard-livereload/issues/62

namely:
sudo apt-get install rubygems ruby-dev
sudo gem install guard-livereload

I then just changed the Guardfile configuration to watch CSS files and presto, Live reloading!

I suggest checking out this video by Jeffrey Way


how to change the sidebar headings in the Spine theme

I had a question via email asking how to make the sidebar headings smaller, and I thought it was worth posting for everyone who might have the same question. So here’s how.
I think the best way would be to create a child theme and add the following code to the functions.php file

How to create a child theme

You could also possible use CSS, again in a child theme or with the custom CSS Jetpack feature


Music to get in the coding zone

Inspired by this post, I wanted to share with you a list of albums that get me into the mood for some serious, distraction free, productive coding. Most of these are “ambient” from the nineties. They were designed to be listened in their entirety, so you can just switch on and tune in.

The Irresistible ForceFlying High

irresistibleforce-300x300


The Future Sound of LondonLifeForms

fsol-300x300


The OrbAdventures Beyond the Ultraworld

orb-300x300


Miles DavisKind of Blue

kindblue-300x297


John ColtraneGiant Steps

giantsteps-300x225


Happy coding!

Let me know what your favorite music to code to is in the comments.


book review: Mastering Object Oriented PHP

cover-227x300I bought this eBook after seeing it mentioned in a tweet along with an online course.

First of all, I wasn’t familiar with the author Brandon Savage at all, and it’s self published, so there was no real guarantee of quality. But I just went ahead and bought it anyway.

With such a title, I was expecting something a little meatier, and I certainly don’t feel like I master PHP OOP after reading this book. I count 80 pages in my PDF reader. For the price tag of $39, it is quite expensive if you compare it to other programming eBooks out there. I did get a 10% discount though.

Brandon is an experienced developer, and that transpires throughout the book. And for me the real value in reading this book is to get an overview of the different current best practices in OOP PHP, and pitfalls to avoid.

I enjoyed the explanation of the interface pattern most and it’s something I hope I can apply in my future projects.

It would have been nice to have some extra material to accompany the book such as a fully functional sample program, or some video screencasts. Just a suggestion to make the offer more attractive.

If you do purchase the book, it will give you a discount on the upcoming online course that Brandon will be giving. Enrollment opens on March 5th.
 
Enroll in online class


My first theme to be hosted on WordPress.org

I’m really happy to announce that my Spine theme was added to the WordPress.org theme repository today!

Spine is a responsive theme, built with Hybrid Core and Zurb Foundation.
It was a lot of fun to develop this theme, and I’m pleased with the result.

Here’s a list of features:

2 different mobile ready navigation menus (3 menu locations)
Theme settings are integrated with the new customizer
4 color pickers to change text color
custom backgrounds
custom header images
4 different layouts (global and per page)
Translation ready (French translation available)

You can use the Foundation tabs, buttons and form styles although you’ll need to refer to the Foundation documentation for the class names. Here’s an example:

Download the Spine theme from WordPress.org

View a demo


Add Google Analytics Event Tracking to your WordPress nav menus

I built a little plugin that adds the ability to track Events with Google Analytics.
If you’re not familiar with Event Tracking, I suggest reading this documentation
Basically, it adds 3 fields to each nav menu items in your custom menus: category, action and label.
ga-tracking
Download the plugin here

Props to helggatheviking for her plugin Nav menu roles which provided the basis for this plugin


Display most recent post, fall back to content limit if no excerpt

Let’s say you want to display you most recent post in a custom template, maybe the front page. You want to display the post title and an excerpt. But what if there is no manual excerpt? Well then we’ll fall back to using the_content with a limit on the number of characters and suppress the display of any shortcodes.
Here’s the code:

Notice we’re using wp_trim_words() and strip_shortcodes functions to achieve an automatic excerpt with only text.