Graphic Design and Web Design


WordPress Development from Dropbox with MAMP, Git and git-ftp (on Mac)

by Elzette. 6 Comments

Working together with MAMP WordPress Dropbox Git

I work on 2 different computers almost on a daily basis. For me it makes sense, developing WordPress websites, taking a bit of pressure of my server, to have a local copy. When you are done with a section/function of the work, to deploy those changes to a remote copy, for it to update. With this, it also makes sense to have the local copy synced between the two computers I use. Thinking about it, I thought in that case, it can can work to have the local development, using MAMP, in my Dropbox rather. I decided to use Git as my (distributed) version control system, that track changes made to the source code. And git-ftp, to deploy all my work to a remote server.

In this blog post I run through the process I undertook (there are obviously more ways about it) and I will mention some hick-ups along the way and how I overcome it!

1. Setting up MAMP in Dropbox

To start off, I followed the first few steps of a post on WP Tuts Plus WordPress Development and  Deployment With MAMP, Git and Dropbox. Below are the steps I followed with a few of my comments:

Step 1: Create Directory Structure in Dropbox

Please note, the one folder’s name should change from ‘vhost’ to ‘vhosts’. You will see in a later step where it is important. This has not been updated in the post under this heading.

Step 2: Install and Configure MAMP

Step: Change MAMP – Apache Configuration
In this step, I personally find it easier to do this through Terminal. With the last step you should be in the Applications/MAMP folder from Terminal. With the following command, change directory to go where the httpd.conf file is:

$ cd /conf/apache/

Use the following command to add the two necessary lines (remember to update the YOURUSERNAME bit) to the file and save:

$ sudo nano httpd.conf

Step: Setup Apache Virtual Host on MAMP
With this step you actually need to create the local-development.conf file in your conf folder located in Dropbox/Development that was created earlier. You can do this by following the next few steps in Dropbox.

$ cd ~/
$ cd /Users/YOURUSERNAME/Dropbox/Development/conf/
$ touch local-development.conf

The touch command creates the new file. Then use the following to add the content as per the post:

$ nano local-development.conf

Step 3: Setup WordPress

This step shows where/how to add the new hostname to map to the localhost IP Address by adding it to /etc/hosts. This can be located in the private folder, which is a hidden folder. To locate the file, you can also use Go from the top Finder menu and search /etc/hosts. I would once again rather do this from Terminal by inputting the following:

$ cd ~/
$ cd ../../
$ cd private/etc
$ sudo nano hosts

There you can add under the other content of the file. Save and close. Follow the rest of the instructions of that section (end of ‘Setup WordPress’) in the blog post.

2. Xcode and Command Line Tools

With a few mysteries and hickups in my path of getting all of this working, including Git and git-ftp, I realised now is a good stage to make sure you have Xcode installed. This is to run the shell script mentioned later in #3 in my post. And also to install Command Line Tools from Xcode, which is necessary for the method I used to install git-ftp.

After installing Xcode from the App store, go to Xcode > Preferences > Downloads and select to install Command Line Tools. Doing this and installing Git and git-ftp, needs to be done on both (all) computers you are syncing to your Dropbox development area.

Screenshot of installing Command Line Tools in Xcode

3. Installing Git

To install Git, I used the Git OS X Installer. You can find it on the git-osx-installer page on Google Code, and click Download the packages here. Download the latest image; in my case, that was Git 1.8.1. Mount the image and install the package inside. You should also run the shell script in the Git image.

I got my hands on Getting Good with Git by Andrew Burgess. This little book gives a thorough explanation of different methods for installing Git (Mac and PC) and still serve as a good quick reference. It includes an intro to Terminal and Git commands and understanding Git. Below I will discuss just a few of the absolute basics from the book. You can find loads more at Git’s official website.

Configuring Git

First you need to configure Git with your own information. Execute the following in Terminal (replace name and email with your own…):

$ git config --global Semblance 
$ git config --global

There are quite a few other configuration settings that can be used. I have used this one: all the programming languages I use are whitespace independent, thus set it to:

$ git config --global apply.whitespace nowarn

Using Git

$ git innit
Run this command in the project directory and you’re ready to use Git to manage your project.

$ git status
This gives you important/useful information about your git status. The first line tells you on which branch you are on. The next line show a list of untracked files if they have not been committed. If you have nothing to commit it will tell you so.

$ git add .
This command tells Git to track the files and move it into the staging area.

$ git commit
This will basically make the snapshot of the project at the current stage. For every commit you make, you have to supply a description of the commit. This is handy for future reference, especially when you need to revert back to previous stages of the project.

In your project directory, you can create a file called .gitignore. This enable you to make a list of file names that we want Git to ignore for the next staging. Even if changes has been made to it. A good example is wp-config.php file. This will always be different to your remote copy and best not to overwrite!

4. Install and use git-ftp

I use Resmo’s git-ftp. From the installation page on github I followed the first option: installation for Linux/Unix based systems. This is where you need the Command Line Tools from Xcode installed, because it use the make command for the installation.

You can install git-ftp anywhere on your hard drive, but I preferred to change the directory to Applications using Terminal. The run the following commands:

$ git clone
$ cd git-ftp
$ git checkout master
$ sudo make install

With that installed you go to you project folder from Terminal. Here you should have your project’s Git repository already. Then you need to authorise the ftp push with some ftp credentials, that project is using. I use the following command:

$ git ftp init -u username -p -

This will prompt for the ftp password and then you can do the initial push. After that, when you have done a git commit, you simply need to use: git ftp push. This will deploy the changed and new files to the remote server. I have came to realise that there is a limit of 1700 files that can pushed/uploaded at a time. With the initial push of WordPress, I delete the theme files that comes with WordPress, that I know I will not be using for the project.

There are more usage options and more information about more commands at the man page.

5. Find out more

Last year at London WordPress MeetupRob Miller gave a great presentation on Developing with WordPress and Git. He is sharing his presentation online, make sure to view it on SlideShare (slide 107 has a useful list of resources…).


WordPress London October Meetup

by Elzette. 0 Comments

WordPress development for mobile#wplnd October 2012 Meetup was held at Google Campus in the heart of East London’s Tech City. The evening consisted of two talks.

Build a mobile theme to use with your existing WordPress site

The first talk was by Jack Barham, who worked throughout 2012 exclusively for Isobar Mobile, building mobile web apps for companies. He shared his mobile experience and knowledge he discovered working at Isobar Mobile. Having a vast collection of different mobile phones at his disposal to test with he developed his experience into a basic mobile template. The talk was about how to use this template and wrap it into a plug that can be dropped into a WordPress website. The presentation covered all the aspects of how he approach a mobile web build project, such as: Concepts, Wireframes, Prep your Current WP site for mobile, Design, Screen Resolutions, Development (Mobile CSS Reset, WP Code, Mobile jQuery, etc), Bug Testing.

View the presentation on Slideshare.

Getting started with WordPress web apps

The second talk was by Rachel McCollin, all the way from Birmingham. With her talk she focused and used the examples of her recently published book WordPress Mobile Web Development. The talk mainly focused on using WordPress to build web apps, starting off by discussing the difference between a web app and a responsive site. And how you can use your theme to create a web app from the same database as your main WordPress website.

Pub Time

As a freelance WordPress developer, going to the pub afterwards is another highlight of the evening. I always enjoy a bit of WordPress geek-off and bouncing off ideas with other WordPress lovers!

Use Mosaic jQuery plugin for your WordPress Sticky posts

by Elzette. 2 Comments

My website is developed using WordPress. On my website’s home page, I have a section ‘What’s New’ to show the latest two projects I have been working on. I do this by making the last two added portfolio posts sticky. To complete the design I’ve used the Mosaic jQuery plugin to display these two Sticky Posts. This blog post show a step-by-step how to integrate the Mosaic jQuery plugin with WordPress Sticky posts.

1. Add Mosaic jQuery plugin to your WordPress theme

Download the Mosaic jQuery plugin from Build Internet! by One Mighty Roar. WordPress is packaged with the jQuery library. You need to add jQuery with WordPress using your theme’s function.php file and register/enqueue any new scripts accordingly. Make sure to read Dear theme developers, this is how you add scripts in WordPress themes. This tutorial will show you how to load scripts in a WordPress  theme the right way!

2. Set up Thumbnail Image for the Featured Image

Part of the web design, I’ve decided beforehand about a specific size I want the images to be, that display in the Sticky Posts. This is different to the image size I use in the actual post. To accomplish this, I set up my own custom thumbnail size for the Sticky posts. The image for the Sticky post will be added by setting it as a Featured Image in the new post admin.

Open the function.php file in your WordPress theme and add the following.

// Feature Images (Post Thumbnails)
add_image_size('feature_thumb', 572, 260, true);

3. Add Custom Loop for the Sticky Post

In this example the custom loop for the sticky posts go in the custom home page template for my WordPress website. It can be used in any page template.

Custom loop for the posts:

<?php if(is_home() && !is_paged()) { ?>
/* Code for the Sticky Post will go in here */
<?php while (have_posts()) : the_post(); ?>
/* Mosaic plugin use following classes .mosaic-block .bar in the <div> */
 <div class="mosaic-block bar">
 <a href="<?php the_permalink() ?>" rel="bookmark">
/* Use the .details class to style the meta information */ 
 <div class="details">
/* Meta information for the title and short description that will be added by using Custom Fields */
 <h4><?php echo get_post_meta($post->ID, 'Feature Title', true); ?></h4>
 <p><?php echo get_post_meta($post->ID, 'Feature Teaser', true); ?></p>
 </div><!-- .details -->
/* The .mosaic-backdrop class is used by Mosaic plugin */
 <figure class="mosaic-backdrop">
 <?php the_post_thumbnail("ttrust_one_fourth_short", array('class' => 'thumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>

 <?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php } ?>

The bit to make your post sticky:

After creating the custom loop in the custom page template (in this case my home page), it is ready to add the following code after the first line of the loop.

<?php if(is_home() && !is_paged()) { ?>
/* Add sticky posts code after the above line */
<?php /* Get all sticky posts */ $sticky = get_option( 'sticky_posts' );
/* Sort the stickies with the newest ones at the top */ 
rsort( $sticky );
/* Get the 2 newest stickies (change 2 for a different number) */ 
$sticky = array_slice( $sticky, 0, 2 );
/* Query sticky posts */ 
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) ); ?>

4. Preparing the Sticky Post

After adding your new WordPress post, go to Featured Image, to set the image that will be used in the Sticky Post. This can be found in the right column towards the bottom of the post editor in your WordPress admin area.  Add the new image by setting an uploaded image as Featured Image.

Use Custom Fields for the Heading and Description displayed in the Sticky Post

To display Custom Fields in you WordPress admin area, click on the Screen Options tab at the top of the screen and tick Custom Fields. Add a heading and a short description for your Sticky Post via the Custom Fields that will now display underneath the new post text area.

WordPress development adding custom fields

how to make your WordPress post stickyAfter the initial set up of the Custom Fields in the custom loop, use the same names to add the new Custom Fields. In this case it is Feature Title for the heading and Feature Teaser for the description.

Last but not least, make the post sticky! This can be enabled and disabled on any posts any time after a new post has been published. You can find the tick box in the Publish panel on the right of the new post’s admin area under Visibility: Public. See image on the right.

WordPress London September Meetup

by Elzette. 0 Comments

#wplnd September 2012 Meetup was held at Skillsmatter, and once again an enjoyable collaboration of WordPress freelancers, workers and users. The evening consisted of two talks.

Practical tips for Captioning YouTube Videos

Web developer and accessibility guru, Graham Armfield show how to incorporate captions in your YouTube video. Something which would help those with hearing impairments and those viewing the videos in noisy or office environments. The presentation was a thorough step by step of all the settings and different ways to incorporate the captions. He also showed other tools available to use for videos and captions.

View the full presentation podcast on the Skillsmatter website.


Rapid WordPress theme development

The next talk was by Jonny Allbut, Head of Digital at Tanc Design. He is also the creator and lead developer on the Wonderflux theme framework, presents at various web development conferences and sits on the WPUK committee that coordinates the annual WordCamp in the UK.

He first start off with his typical ‘tool box’ and why. Followed by the different theme types available – WordPress theme frameworks, parent, child and starter themes. With his experience with Wonderflux, he shares how a framework can help you to build more flexible, sustainable custom themes. He also shared a few important lessons learned: Do things the WordPress way. Use the core filters, hooks and functions. Keep up with trunk development/Trac. Documentation.

View the full presentation podcast on the Skillsmatter website.

Ask the Experts

Turned out that there was a bit of time left for questions and answers from the attendees. I find this part exciting to hear different people’s view points and ideas about different issues. And also how eager people are to help.

#dConstruct 2012 Conference

by Elzette. 0 Comments

dConstruct 2012, held every first weekend in September in Brighton, had their 8th conference this year. It is presented by Clearleft, a user experience design consultancy based in Brighton, UK. This year was my first year to attend this conference. The theme of this year was ‘Playing with the Future’.

dConstruct 2012 Workshop/s

There were two workshops available to attend on Wednesday, 5 September 2012 and two Thursday, 6 September 2012.

Scalable and Modular Architecture for CSS book coverI attended Jonathan Snook’s workshop, Scalable and Modular Architecture for CSS, in short SMACSS (pronounced “smacks”). Jonathan came up with this new term and approach from his experience working with the team at Yahoo! Mail. By dividing your CSS into 5 sections: Base, Layout, Module, State and Theme you can write CSS in re-usable chunks of code. Also keeping in mind using classes for layout rather than ids will illuminate having to overwrite loads of CSS. Applying these approaches in the right way will result in smaller CSS file/s. He also motivate using child selectors and preprosessors. He prefers to rather add the class of the reusable CSS to an element in the HTML, than selecting HTML elements in a CSS file. There was also a talk about prototyping tools that can help with rapid development, especially on big projects.

Besides the free new SMACSS book, I definitely took a new approach to CSS with me.

sunset view in Brighton

Sunset from Terraces, Brighton (before party). Photo taken by me.

dConstruct 2012 Conference

To summarise the conference, it is what it says on the website’s home page:

dConstruct 2012 is a gathering of smart and entertaining people poking at the intersection of technology and culture.

The conference being moulded over the years to topics covering web technologies, design, culture and society, the theme ‘Playing with the Future’ just did that. With a collection of excellent speakers it is hard for me to say which one stood out.

Ben Hammersley started off the day with his talk The Flower, the Field, and the Stack. With all the beautiful things in the world and how the community in the world have taken code that was not too good looking twenty years ago and made it into something beautiful. In every layer we work in, from fiber optic cables, to binary, to unicode, to XML, HTML and CSS, to grids and design patterns… all of these thing in every level, we can find a beauty and elegance that has been hard fought for.

Jenn Lukas‘s vibrant talk, Cure for the Common Code, was about breaking down the barriers of web publishing by embracing the rise of code education. She teaches HTML and CSS for GirlDevelopIt. It was an inspirational talk of how we all would like to learn something new, but just need that little extra push on the backside. With GirlDevelopIt, she helped create an opportunity, for that push, for woman that would like to learn code.

Scott Jenson has always been evolved in mobile, realising how it is unlocking important things. His talk Beyond Mobile: Making Sense of a Post-PC World start off with a question, if we take new technology and explore it or do we turn around and apply it to what we did yesterday? He became aware of 3 trends. The first one he calls App Glut. Users become the bottle neck and managing the apps being made. The second trend – value must be bigger than pain and the equality that can be between value and pain. The third trend – smart devices tend to be on the simple side. It has applications that offload a significant amount functionality. Moving forward, how can these trends be applied to make apps that can work across all of our devices.

With Ariel Waldman‘s talk, The Hacker’s Guide to the Galaxy, I could feel her absolute passion and enthusiasm for science. Her talk was an interesting tour of our universe. From black holes and dark matter to exoplanets and the search for extraterrestrial intelligence. She was showing examples of peoples creations that can get anyone excited to start making things.

Seb Lee-Delisle (laterally) lighten up the dome after lunch with his talk Pixels, Play and People. He brings people together with technology. Everyone received a glowstick at the beginning of the talk. The highlight of his talk was using a motion camera and everyone was able to make digital fireworks! By using the motion camera he also divided the crowd in a left side and right side to play a form of Astroids together!

Digital fireworks with Seb Lee-Delisle at dConstruct 2012

Digital fireworks with Seb Lee-Delisle at dConstruct 2012

Jason Scott, a computer historian, besides for his well known cat is also famous for archiving everything. He most certainly looked very comfortable on the stage with his talk The Save Button Ruined Everything: Backing Up Our Digital Heritage, a good recap of how we have been saving, how saving data has changed over the years and how we save things today. Thus, when MySpace go down and you are looking for your ‘stuff’, be sure to contact this guy…

Tom Armitage is a game designer at Hide & Seek. His work is inspired by the toys his dad made out of wood when he was a kid. He sees all his work as toys and decided to have a talk titled, Making Friends: On Toys and Toymaking. He has had quite a bit of fun with Twitter too. For example, he was auto generating descriptions of chocolate from chocolate boxes. He also created a Twitter account for Towerbrige, by taking the times of when the bridge opens and linking it to the internet via Twitter. It has become useful to cab drivers too.

James Burke, a science historian, an author and television presenter ended of the day with his speech titled, Admiral Shovel and the Toilet Roll. He looks at the past (there is no where else to look…), because the future don’t exist and the future is the past, just with a few extra bits attached… Through the whole talk, an interesting point that stood out was his view on Nano Technology. What Nano Technology is going to do socially and when. He points out there is a possibility, in 40 years that everyone would be able to have their own Nano factory your own shed/garage. And also talking about the possibilities of this and the effect this could have on the world.

Missed out on #dConstruct 2012 Conference? Be sure to catch up at

How to connect to a SFTP server from a Mac using a Private Key

by Elzette. 0 Comments

Connecting with Private Key

This blog post is how to connect to a server via the SFTP protocol, thus connecting to a server securely with SSH keys. The client create a SSH Public and Private Key. The Private Key gets sent to me. I use Cyberduck, which is free for Mac, to connect via SFTP Protocol.

Before you can connect with Cyberduck to the SFTP sever, you need to copy the Private Key in your Mac’s .ssh directory. This is a hidden directory. If it doesn’t exist then you need to create one. Lets first check if it exist via Terminal. Open terminal from Applications > Utilities > Terminal.

.ssh directory

  1. With a Terminal session open, make sure you are in your User/$Home directory.
  2. Type the following command to get a full directory listing.
    ls -a
  3. Make sure the hidden directory .ssh exists. If it doesn’t you will need to create it with the mkdir .ssh command.

* You can also try TinkerTool, a nifty tool to let you see hidden directory in Finder.

Copy Private Key to .ssh directory

Go to folder on Mac

  1. Go to Finder by clicking anywhere on the Desktop
  2. On the menu, select Go to Folder and type ~/.ssh. This will open the window of the hidden .ssh directory.
  3. Copy the Private Key – id_rsa in the directory.

Configure Private Key with host from Terminal

  1. From the Terminal session, run the following command: ssh username@local-ip-address
  2. The run the following command to get the right permission set to the Private Key
    cd ~/.ssh
    chmod 600 id_rsa
    chmod 500 .

Connecting to the Server using the Key

Cyberduck Screen Shot

  1. Open Cyberduck and click on Open Connection
  2. Select SFTP protocol from the drop down list
  3. Fill in the rest of the details to connect

There is a possibility that the host also need to set up a few settings on their side. For example, use your computer’s IP to give a specific computer permission to connect.