Quick tips

Using Live Reload with Phpstorm remote project

Published by on March 19, 2016

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

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

Published by on March 19, 2016

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.