Setting up WordPress environment on vagrant

It has been a while away from WordPress development.

First, my previous works normally have used other backend frameworks or languages. Second, my role of front-end development has been always for big products. I haven’t worked from scratch last 2 years. Now my current job will end soon – it was a very great environment to work there- and WordPress seems to have a rising curve again.

I wasn’t really trying to recover my memory on WordPress. There were no work or developer friends who mention how WordPress workflow has been changed. Furthermore, many of developers developing WordPress using old passion way to develop. I didn’t want to mess up my user library on my Mac – I have a horrible experience while I tried to learn Ruby on Rails. I am also not a big fan of MAMP either along with PHP admin stuff.

The thing is, even though everybody hates PHP, it will survive for a quite long time. You cannot really be out of scope in this industry. Perhaps PHP is not so great for enterprise or government campaign but PHP has absolutely great CMS frameworks. WordPress is top of them, I reckon.

I still hesitated to set-up WordPress development environment. The main reason is due to my laziness, but what sort of developer would love repetitive and patient (&tedious) works? I haven’t written plain CSS since I started using SCSS and Compas. Even I haven’t write plain javascript and HTML on one single file since I have used task runner. Yeah. Task runners and processing compilers ruined me. I cannot write long and tedious codes. I will hurt my eyes to read them. Yeah..I am not that hard working type or patient. I am not a superman-developer either. I am just an average level front-end developer, and I have worked fine for projects. (Cheers to Australian IT economic woohoo!)

Good thing is, there are tons of lovely developers in the world who share their intelligence and leave their codes open on GitHub. And I highly benefit from those. hehe. I googled some open stacks for WordPress and found two containers for WordPress. and

First I tried along with

It was not WORKING. When I installed the scotch box first, it successfully loaded up index.php. It seems like developing pure PHP or Laravel project looks fine. But I want my FREAKING WORDPRESS happen on this container and the connection has failed.

This is what the initial page looks like when you load up scotch box.


and once you rolled up wp distillery, it just fucked up everything. I thought I did something wrong in the vagrant box bash. I tried to successfully install WordPress in the scotch box by command line what WP distillery says but no. It didn’t happen.

So I move back to vccw. When I firstly loaded the vagrant up, it took ages. Once you’ve set-up everything, it looks alright. All pre-setup just beautifully showed up without any hassle.

The image below is from a vccw review blog (Japanese My environment looks same.


Alright. Let’s install some base WordPress theme boilerplate. I need gulp, foundation6, bower, and so on. I am so excited to use these foundation theme structures


Oh..wait. What is the version of NPM?

Screen Shot 2016-08-26 at 1.48.05 PM

..Are you fxxxing kidding me? The node is now v5 out..and this still uses v.10.36..?

No fucking way to use this box. I gotta find another way to work on WordPress. Since the Scotch box is fully for LAMP stack..there must be a way to install WordPress in the VM box. AND I FOUND THIS BLOG. THIS IS WHY I LOVE INTERNET!!! SHARE AND LOVE!

Following the instruction on the blog post, it was very simple Tick-and-go.

I downloaded WordPress zip file(v4.6) and paste into the public folder.

Screen Shot 2016-08-26 at 1.56.10 PM.png

Heck ya! It is working! 🙂 Scotch box was much faster than VCCW when booting up and now also I can install WordPress too! Awesome! Now I guess it is development time.

Also look at the node and npm version. Perfect!

Screen Shot 2016-08-26 at 2.24.13 PM.png

I will review the new theme development base themes in next post.

If you want to upgrade php5 to php7, please go to this page

These are the base theme that I am going to review next time.

and thanks for the inspiration

Reference site while I tried to develop WordPress again.












Quick View: AMPScript and Marketing Cloud

(This post is a draft. The content will keep being updated)

It was very long time ago to use Salesforce cloud service. At that time the exact code was a tool only a few agencies chose. Now they changed their name from exact code to Marketing cloud.

I, unfortunately, missed the chance to register developer edition.Which is the shame? If the developer needs to study to work on the automate task projects such as matching landing pages and EDM, how a developer or producer practice before they mess up with clients receiving all unrefined craps :/ Luckily, I still have for practicing subscription detects.

While I developed the XML form which is associated with Salesforce APEX environment with angular directive markup, I tested the value detects from user’s subscriber request. So I guess the marketing cloud is very customised and personalized environment for all the marketing activities.

For mapping all essential user data dynamically injected to the EDM and Landing page,  Marketing cloud recommends highly to use AMPscript. (well they also say developer can use server js but they don’t provide any document or tutorial based on the task stories)

It seems like they’ve done a great job of documenting. Their document is quite explaining that how a developer can code AMPscript based on the task stories. So it won’t just kick you off to the limbo of unfinished learning curves. (I hate the high learning curves when I jump to the new products or new task frameworks)

Framework Review: Zurb Foundation INKY2

(This post is not done yet. I will keep updating my draft.)

While I work as a freelancer, I often used to have EDM development tasks. The tasks required sometimes just one day to build whole a landing page or EDM. And of course, Whatever I build, The page should be responsive as well.

Quite crazy huh? That could be a month long project if the project codes are quite spaghetti within a big code container. For example, the main campaign landing page on sep. 2014 – so the new campaign landing page is no longer took a month to finish it. Of course, It was based on the Drupal CMS and all menu, theme style guide, API protocol surely have to work perfectly so it is a bit different story..but still one day of landing page completion or EDM sounds crazy.

Only good thing is, those types of works do not require clean codes or designs. The agencies requiring those tasks just want to get stuff done. Afterwards is not my(or their) business.

To make the things easy, I started to gather the code and design patterns. Furthermore, I started to look up some frameworks. There were a couple of frameworks and design patterns. While I work on a couple of responsive EDM development task from media agencies, I started to apply to them. The result was quite good. The development working hours got more shorten.

People are so awesome. Especially, the developer working in marketing process share a lot of know-hows.

This is the site I used to refer a lot. Pretty much covers what I need to develop from PSD slices.

and I sometimes used Inky ver.1 of foundation czurb email template (

The thing is, I want to dynamically test on the each of small steps. Yes, I can test the codes on litmus but it is still annoying to make sure all your inline CSS codes are laid on each of markups and you gotta make your template up to a certain degree to paste your code into their test builder. Plus, uploading to cloud space is not waste your every single minute..or minutes until it compiles. I wanted to have such an automation task tool. I mean, everybody on product development uses the auto task tool like gulp or grunt. Even I have used gulp for my prototyping designs. (I make prototyping and UI animation via framer studio and the framer.js library can be used in gulp.)

And..voila! The zurb foundation made the ultimate task runner template! Woohoo!

The stacks required for this ultimate template is “Gulp”, “Handlebar”, “SASS”, and “NPM”.

Okay. Not a problem. I know a little bit of Gulp. I often used handlebar(panini) template while I am working in Tourism Australia project. SASS? Phssess…Most of my CSS development is done by SASS and Compass. NPM?  I already installed the ruby gem “Homebrew” and installed Node and NPM via homebrew. Everything is pretty much already setup.

So I went to the getting-started page (I choose the SASS version)

and just follow their baby step guide.

I won’t explain how I installed the template since the guide covers everything.

This is what my current template base looks like. The layout/default.html is the main layout. Under the centre table, you will see “{{> body}}”

This body mustache is bringing all the body(the greatest outer container page..I would say) pages under the pages. Once you run your localhost, the default template is index.html. If you parallelly develop another page, simply go to http://localhost:3000/the new page name.html.

Screen Shot 2016-08-05 at 1.54.27 PM

I will show you how it turns out. Once you type “npm start” It will initially install all related node package modules. If you built something and have watcher mode, you can type “npm run build”

Screen Shot 2016-08-05 at 2.05.29 PM

On the terminal, you see that Gulp is doing his job quite fast.

And, if you go to localhost, you will see the default index page. That was a bit ugly but it was tjust simple test..hehe. I also consolated the inky sample snippets for different EDM marketing template like a grid catalogue. I made this catalogue page separately at pages/inkBoilate.html. You don’t need to change any path variable.

Screen Shot 2016-08-05 at 2.02.58 PM

Just type the page name at the end of localhost port number.

Screen Shot 2016-08-05 at 2.04.43 PM


Another awesome feature of this ultimate template is that you can develop all the template as module object oriented style by using panini layout (Handlebar or called as a mustache) I will show you what I mean. The inkBoilate.html page above is just one module compiled the page. I want to see another module continuously landing out.

I built new partial components “hero” and “drip” under partials/inkBoilerate/hero.html and  partials/inkBoilerate/drip.html  (Others for my convenience. You will see the full code on my bitbucket at the end.) After that, I injected these two components into inkBoilate.html like this

Screen Shot 2016-08-05 at 2.13.22 PM

Tada~~! Now you can see the new modules are compiled and landed at the localhost:3000/inkBoilate.html. It is quite awesome.

Screen Shot 2016-08-05 at 2.14.14 PM

You can test your development directly via using Chrome inspector tool. I, however, recommend you experience the browsersync. It is a really useful tool for grid testing.

The testing server is set-up at localhost:3001

and I will turn the CSS outlining option.
Screen Shot 2016-08-05 at 2.21.10 PM

And now you will see the grid outlines on your template.

Screen Shot 2016-08-05 at 2.21.19 PM

Okay Okay, all sounds good. I cannot be still sure to use this ultimate task. The email is very fiddly development and you have to entirely make sure all grids are remained firmly even in outlook. So far the I didn’t use any of super loooooooong table tags and I didn’t write inline CSS code either. How the heck then I can use this template to test in litmus?

Ah..wait a minute. After I type “npm run build” on my terminal, the gulp task runner generated another folder and files. Haha. Look at this. They compiled all the codes into minified version. The CSS code written in SASS file or separately in the block <style></style> is all injected into markups.

Screen Shot 2016-08-05 at 2.31.27 PM

I am still very negative that the compiled code is still working. I cannot be sure until I test the code on litmus. So I decided to make a sample e-mail template and test in litmus.

Here is my new code for order-shipment confirmation. I grab the reference from send with us but the HTML file was just manually written with all inline CSS. I have to re-write them in the Inky 2 format.

The additional positive feature of inky2 is shortening your code much more. I like this feature a lot. Normally when I write the EDM manually without any supported library or tools, it is always over 200 lines and so hard to read them. It also affected to de-bugging when the e-mail template is not laid precisely. Look at the screen shot below. The total code lines that I wrote is just 77. Much shorter than before.

Screen Shot 2016-08-05 at 2.34.57 PM.png

This is the result of the default size.

Screen Shot 2016-08-05 at 2.32.22 PM

and this is mobile view. My code seems okay both on the localhost.

Screen Shot 2016-08-05 at 2.32.43 PM

I grabbed the minified code into litmus checklist section. Since I am a free user, I can only test Gmail, Outlook 2013, and Iphone6. As long as it is not breaking in Outlook 2013.I think It is good to go.

Screen Shot 2016-08-05 at 2.43.17 PM

Oh wow. The minified code works. Through the thumbnail, the grid looks good.

Screen Shot 2016-08-05 at 2.45.33 PM.png

First, Outlook 2013

Screen Shot 2016-08-05 at 2.47.42 PM

Second, G-mail

Screen Shot 2016-08-05 at 2.48.00 PM

Last, Iphone6

Screen Shot 2016-08-05 at 2.48.17 PM

Seems like there is no breaks on the grid. I wonder why only the background value is not injected as inline CSS…Well, I guess that is the debugging part that I need to do next.


PS. I am continuously updating my e-mail template pattern into INKY2. Come and see my bitbucket repository.