Semblance

Graphic Design and Web Design

wordpress

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

by Elzette. 4 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 127.0.0.1   www.site.dev 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 user.name Semblance 
$ git config --global user.email semblance.design@gmail.com

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.

.gitignore
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 https://github.com/resmo/git-ftp.git
$ 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 - ftp://example.com

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…).

 


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_theme_support('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 -->
 </a>
/* 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().'')); ?>
 </figure>

 </div><!--.bar-->
 <?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 Meetup #6

by Elzette. 0 Comments

WordPress London Meetup at the Telegraph

WordPress London Meetup is still a baby, with the first Meetup that took place 9 June 2011. Besides the success in attendance it also had a change in name. Starting out as London WordPress Meetup it is now officially WordPress London Meetup group. Clearly a much needed Meetup group for London locals, I am happy to have attended 3 of them so far. The 6th meetup took place Thursday, 20 October 2011—Publishing with WordPress, hosted by the Telegraph.

How the Telegraph use WordPress

First up was Paul Gibbs, core developer of BuddyPress and web developer at Daily Telegraph. That’s right, Telegraph Blogs is powered by WordPress and MyTelegraph is possibly the largest BuddyPress website in the UK. Paul shared some of the plugins they use for the respective websites.

Telegraph Blog plugins:

  • Yoast Breadcrumbs (more information at yoast.com)
  • WordPress SEO (also by Yoast, more information here)
  • Widget Logic (lets you control on which pages widgets appear)
  • Unfiltered HTML (gives blog Administrators and Editors the ability to post whatever HTML they want)
  • TMG Open Graph (based on the Open Graph plugin for adding additional metadata to webpages to identify them as “social objects”— modified further by the development team at the Telegraph)
  • Blackbird Pie (add embedded HTML representations of actual tweets in your blog posts)

MyTelegraph BuddyPress plugins:

  • BuddyPress (a social network in a box—more information at BuddyPress.org)
  • BuddyPress Groupblog (extends the group functionality by enabling each group to have a single blog associated with it)
  • SSO (single sign-on) Integration
  • WP Report Posts (puts a link to each posts and pages to report that particluar post or page)
  • Yoast Breadcrumbs (more information at yoast.com)
  • Sitewide Tags (creates a new blog on your server for all the posts on your site, much like http://wordpress.com/tags/)
  • Blackbird Pie (add embedded HTML representations of actual tweets in your blog posts)

WordPress and Web Accessibility: Why it’s Important

Graham Armfield was on for the second talk of the evening. His presentation covered some issues that disabled and elderly users experience with websites. He shared valuable techniques to improve accessibility and why it makes business sense.

Graham’s presentation, WordPress and Web Accessibility, can be viewed at SlideShare.

Upcoming WordPress London Meetups

Thursday, 17 November 2011: WordPress SEO and Custom Post Types

Wednesday, 7 December 2011: Christmas social!

 


London WordPress Meetup #3

by Elzette. 0 Comments

London WordPress Meetup No.3

London WordPress Meetup had its 3rd meetup 28 July 2011. It is still a relatively new Meetup group, but has grown at a very nice speed. Three people attended the first meetup, where as fifteen attended the second. The third, hosted at Headshift, was a ‘sell out’ with a capacity of fourty.

The meetup started off with ice-breakers. People attending had the opportunity to introduce themselves and show off a few WordPress projects. This was followed by 3 presentations.

1. yeah! Hackey

Emily Webber talked about her amazing sideline venture yeah! Hackney. yeah! Hackney is a website, serving as an online community for Hackney locals sharing local knowledge. It is a WordPress website using the BuddyPress plugin, that creates the function for members to join and interact ‘as a community’.

This platform has become a great way for local people in the borough to share, discuss and collaborate about the great things around them. Thus in essence it is the community that creates the content and not administrators. The main features of yeah! Hackney website are the groups, discussion forums and members.

2. Beginner Theme Development

Keith Devon‘s talk was a nice summary of all the basic elements when starting out with theme developement in WordPress. Starting off with the basic theme structure, such as the necessary files WordPress require, The Loop and the heirachy of WordPress files. Followed by an explaination of Child Themes and using Custom Page Templates.

He also share a handy bundge of WordPress resources, tools and functions. Keith’s presentation can be seen at Prezi.

On the topic of Prezi, it was the first time I have seen Prezi. If you have and iPad, make sure to check it out. Great for presentations and it takes the in and out zooming of iPad to the next level.

3. Getting to The Loop

The presentation of Chris Adams dig right into the core of WordPress. By looking at some of the key items in the ‘brain’ of WordPress and how it works, gives a better understanding for developers when developing themes and plugins.

The 5 key topics of the presentation:

  1. Load in files for bootstrap phase
  2. Set up Plugins
  3. Turn the request URL into a data base query
  4. Choose a Template
  5. Start The Loop

You can also view the presentation at Slideshare.

The next London WordPress Meetup is scheduled for 16 August 2011.


Use SimplePie and RSS to display latest WordPress blog post

by Elzette. 2 Comments

SimplePie and feed in WordPress

I made a custom WordPress template for Printhouse Corporation. Printhouse has a blog with a seperate WordPress install (and subdomain). It was required to show an excerpt of the latest blog post from the seperate blog, in the footer of the official Printhouse website.

The way I thought about it, was to use the blog’s RSS feed to show the latest blog post. I found a bit of code from WpRecipes website. This only list a few titles of the latest blog posts. In this post I explain how to display the latest blog post from a different website, using SimplePie and the RSS feed in your WordPress website.

1. Install SimplePie Core Plugin

Most importantly use the SimplePie to make this work. As it says on the SimplePie website:

SimplePie is a very fast and easy-to-use class, written in PHP, that puts the ‘simple’ back into ‘really simple syndication’.

Thus, first install the SimplePie Core WordPress plugin to load the core SimplePie API library.

2. Call RSS Feed

The code snippet start off by placing the following where you would like the latest post to show, eg. sidebar or footer. This is to call the RSS feed that is going to be used.

<?php
$feed = new SimplePie('http://www.exampledomain.com/feed/');
?>

3. Code snippet for the post excerpt

Then add the rest of the code to create the title and an excerpt of the latest blog post of the RSS feed.

<h3><a href="http://www.exampledomain.com">Example Heading</h3>
<?php $item = $feed->get_item() ?>
<h4><a href='<?php echo $item->get_permalink(); ?>'
  title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $item->get_title(); ?></a></h4>
<p><?php print $item->get_description(); ?></p>

WordPress post from feedThe image on the left is an example of the result.

First a static heading. It depends on the website structure and where this go, which heading tags to use. Followed by the latest blog excerpt with the title as a link to the blog post.


#WordCampUK 2011 in Portsmouth

by Elzette. 0 Comments

#WordCampUK 2011 in Portsmouth

I attended my first WordCamp this year. It was also a first for me to Portsmouth! Below I talk about my personal running order. Read about more sessions at WordCamp UK 2011 Portsmouth here.

Saturday, 16 July 2011

Kicking the day off early, Saturday 16 July 2011, registering took place from 9:30 and I received my official WordCampUK 2011 t-shirt. Tony Scott started off the day at 10:00 with an introduction that followed onto sharing stickers that leads to more pleasand introdutions! I topic that all WordPress fanatics love followed after that: How are you pushing your WordPress install to the limit? I am even more impressed now…

Legacy to Latest by Kieran O’Shea

Kieran’s talk was about how plug-ins have an influence when upgrading WordPress.
For example before upgrading, consider:

  1. Modified default themes
  2. Deprecated functions
  3. Phantom features (what is phantom features?)

Plugins can break an upgrade, or be broken by an upgrade, deprecated functions.
A solution is Custom Posts. Legacy plugins may over-use tables. Post framework makes code simpler. Migration then is simplified.
Visit Kieran O’Shea’s dedicated website for WordCamp UK 2011 Portsmouth. Where you can find loads off goodies, eg.
Slides: PDF of Presentation Deck
Code: Zip File of Code

WordPress and Mobile by Rachel McCollin

Rachel discussed 4 ways how you can turn your website into a mobile version.

  1. Mobile themes
  2. WordPress plugins
  3. Media Queries
  4. Bespoke mobile websites (or just make an app version)

Advanced SEO with WordPress by Nick Garner

Nick told a lovely SEO story of The White, black and illegal Hat in WordPress SEO. This story shared so much SEO information in a friendly way. Check out his presentation.
Some of his favourite plugins to use are:

  • wp-supercache plugin
  • yoost plugin
  • wordpress categorie radion buttons
  • seo-image plugin

WOW Plugins 2011 by Michael Kimb Jones

First few favourite plugins mentioned:

  • Yoost SEO plugins
  • Google XML Sitemaps (switch something off)
  • WP Super Chache (W3 Total Cache – best to use?)

E-Commerce:

  • WP e-Commerce
  • Jigoshop (New)
  • MarketPress (WP multi)

Other few mentioned randomly:

  • Jetpack (loads if functionality in one plugin – X6)
  • Members Only
  • WordPress Beta Tester
  • Widget Logic (conditional loads for Widgets) Dynamic Widgets
  • Extended Page List

Final list of 10:

  1. CMS Tree Page View (extremely handy if you have A LOT pages!)
  2. CollabPress (for project management)
  3. Contact Form 7
  4. Easy Table Creator
  5. Custom Post Type UI
  6. EG-Attachments (for external document files)
  7. Front end editor
  8. Regenerate Thumbnails
  9. Widgets on Pages (just check it out, it’s really cool)
  10. WordPress reset (good plugin for a test site)

After this it was the wrap of the day that lead to dinner and a lot of free drinks at the Dolphin. After this… what happens at WordCamp stays at WordCamp…

Sunday, 17 July 2011

After a well needed full English breakfast the second (and last) day of WordCamp started off with a quick introduction by Tony Scott again.

Ten Proven Steps to the Top of Google (SEO) by Mark Adams

Another SEO session with more handy tips..

  1. Keyword Research - with Panda update, quality of website very important
  2. Basics – Homepage links – SEO friendly URLs, keywords in page name and URL
  3. Page structure – one keyword per page, maybe 2, images – title tag, images – file name
  4. Copywriting – at least 250 words per page
  5. (missed this slide :-/)
  6. Blog – Important to talk about topic website is about, become expert in the topic (authoritive)
  7. Social media and online PR
  8. Link building – get links from sites with related topic
  9. (missed this slide :-/)
  10. Call to action

Some handy tools:

How to content manage everything by Robert O’Rourke

A few points taken….

Menus

Post types - register post type using available of arrays

  • things that are neither posts or pages
  • Forums – bbPress plugin
  • Properties
  • Events
  • Static bloks or ‘boilerplate’
  • Landing pages
  • Other applications

Themergency is a handy tool to easily create post types. After registering it appears in admin bar.
Use Metabox API to add/remove or reorder meta boxes:

add_meta_box();

Also visit http://codex.wordpress.org/Settings_API

Site doctors: Let the experts help you! by Jonny Allbut (Jonnya), Nick Garner

A Questions & Answers session with informative discussions and tips going around.
Sadly all good things do come to an end. Well sort of… I noticed emails with loads of ideas going around already for 2012. And if you can not wait till then, the WordPress community do spread their wings to numerous Meetups and other smaller conferences.