If you've ever needed custom data input for your WordPress posts or pages (or any other kind of custom post type) then Advanced Custom Fields (ACF) is the shit! It's flexible, extensible and frequently improved by Elliot Condon. Simply brilliant!

I've been using ACF in a couple of projects now and in the current one I needed to be able to present WordPress users as hosts for different kinds of events, showing user a profile photo and a custom user metadata type. There was no obvious, flexible and easy to administer option available, or at least I couldn't find one, so I started thinking about what could be done with ACF and user profile custom fields. I decided to try it out.

Adding metadata to the user profile

To start with I had to add a couple of custom metadata fields to the user profile.

<?php
class JwCustomUserMeta {

	function __construct(){
		add_action( 'show_user_profile', array($this, 'jw_add_custom_user_profile_fields') );
		add_action( 'edit_user_profile', array($this, 'jw_add_custom_user_profile_fields') );
		add_action( 'personal_options_update', array($this, 'jw_save_custom_user_profile_fields')  );
		add_action( 'edit_user_profile_update', array($this, 'jw_save_custom_user_profile_fields')  );
	}

	function jw_add_custom_user_profile_fields( $user ) {
	?>
<?php _e('Extra Profile Information', 'your_textdomain'); ?>



					<?php _e('Title', 'your_textdomain'); ?>
				


					<?php _e('Please enter your work title.', 'your_textdomain'); ?>
				



					
				


					<?php _e('Please enter your phone number.', 'your_textdomain'); ?>
				



	<?php }

	function jw_save_custom_user_profile_fields( $user_id ) {
		if ( !current_user_can( 'edit_user', $user_id ) )
			return FALSE;
		update_usermeta( $user_id, 'jw_title', $_POST['jw_title'] );
		update_usermeta( $user_id, 'jw_phone', $_POST['jw_phone'] );
	}
} ?>

Creating the User Meta field type

To be able to nicely select users as hosts in the custom post type Event I had to create a new Advanced Custom Field type; User Meta. It is in many ways a rip-off of the Select core field type differenting in the way that it is not configurable with respect to options (the values of the select input field) but the options are populated with all the registered WordPress users, instead.

Here's the code. I've kept most of the code in the create_field function to support ACF field options, that might be a requirement for some:

<?php

class acf_UserMeta extends acf_Field
{

	function __construct($parent)
	{
		// do not delete!
    	parent::__construct($parent);

    	// set name / title
    	$this->name = 'user_meta'; // variable name (no spaces / special characters / etc)
		$this->title = __("User Meta",'acf'); // field label (Displayed in edit screens)

   	}

	function create_field($field)
	{
		global $wpdb;

		// get the wordpress users
		$wp_user_search = $wpdb->get_results("SELECT ID, display_name FROM $wpdb->users ORDER BY display_name");

		$choices = array();

		// loop through users and add them as choices
		foreach ( $wp_user_search as $user ) {
			$user_id = (int) $user->ID;
			$display_name  = stripslashes($user->display_name);
			$choices[$user_id] = $display_name;
		}

		$field['choices'] = $choices;

		// defaults
		$field['value'] = isset($field['value']) ? $field['value'] : array();
		$field['multiple'] = isset($field['multiple']) ? $field['multiple'] : false;
		$field['allow_null'] = isset($field['allow_null']) ? $field['allow_null'] : false;
		$field['optgroup'] = isset($field['optgroup']) ? $field['optgroup'] : false;

		// no choices
		if(empty($field['choices']))
		{
			echo '

' . __("No choices to choose from",'acf') . '

';
			return false;
		}

		// multiple select
		$multiple = '';
		if($field['multiple'] == '1')
		{
			$multiple = ' multiple="multiple" size="5" ';
			$field['name'] .= '[]';
		} 

		// html
		echo '
';	

		// null
		if($field['allow_null'] == '1')
		{
			echo '
 - Select - 

';
		}

		// loop through values and add them as options
		foreach($field['choices'] as $key => $value)
		{
			if($field['optgroup'])
			{
				// this select is grouped with optgroup
				echo '';
				if($value)
				{
					foreach($value as $id => $label)
					{
						$selected = '';
						if(is_array($field['value']) && in_array($id, $field['value']))
						{
							// 2. If the value is an array (multiple select), loop through values and check if it is selected
							$selected = 'selected="selected"';
						}
						else
						{
							// 3. this is not a multiple select, just check normaly
							if($id == $field['value'])
							{
								$selected = 'selected="selected"';
							}
						}
						echo '
'.$label.'

';
					}
				}
				echo '';
			}
			else
			{
				$selected = '';
				if(is_array($field['value']) && in_array($key, $field['value']))
				{
					// 2. If the value is an array (multiple select), loop through values and check if it is selected
					$selected = 'selected="selected"';
				}
				else
				{
					// 3. this is not a multiple select, just check normaly
					if($key == $field['value'])
					{
						$selected = 'selected="selected"';
					}
				}
				echo '
'.$value.'

';
			}
		}

		echo '

';
	}
}
?>

So now, I can use this field as any other basic Advanced Custom Field; as standalone, in repeaters and flexible content. It's a very simple solution that stores the user id as value which can then be retrieved in templates to use when fetching information about the user via get_userdata($user_id);

Defining a User Meta field in the event ACF group.

Using the User Meta field to assign hosts to the event post type.

Implementing it in templates

Below I will list a piece of code where the field is used in a repeater, listing event hosts.

Hosted by

<?php while(the_repeater_field('event_hosts', $post->ID)):
	$user_id = get_sub_field('event_host', $post->ID);
	$user_info = get_userdata($user_id);?>

		
	

<?php echo $user_info->display_name; ?>

<?php echo $user_info->jw_title; ?>


<?php endwhile; ?>

The result

The final result.

To learn more about how to create your own Advanced Custom Field types, see this video tutorial.

How to backup WordPress

There are numerous plugins for WordPress when it comes to backup. I have learnt to appreciate the plugin BackUpWordPress as it not only backs up your database but also all the files within the installation.

http://hmn.md/backupwordpress/

There are a few number (though quite complete) of configuration options like

- manual or daily scheduled backups
- number of backups to keep
- whether to include files or database or both

The backups are stored on disk on the path of your choice and could also be attempted to be emailed. Having this kind of backup data makes it very comfortable to restore your WordPress installation.

But what if your complete machine/instance is failing? On, for example Amazon EC2 one should take snapshots of instances when the setup of these change but this does not apply to content changes. Restoring from a snapshot does not bring back newly created or updated content from, for example WordPress. That is, moving those WordPress backup files to a safer place becomes vital. So, s3cmd to the rescue.

What is s3cmd?

Extracted from its' homepage:

"S3cmd is a command line tool for uploading, retrieving and managing data in Amazon S3. It is best suited for power users who don't fear command line. It is also ideal for scripts, automated backups triggered from cron, etc."

http://s3tools.org/s3cmd

At the time of writing s3cmd requires Python 2.4 or newer and some pretty common Python modules. Installing it is merely a matter of running:

sudo apt-get install s3cmd

To configure it run

s3cmd --configure

You will be asked for the two keys of your Amazon account - copy and paste them from your confirmation email or from your Amazon account page.

To list all your buckets run

s3cmd ls

and to list the content of a bucket run

s3cmd ls s3://[bucket name]

Now, you could use 's3cmd put' to upload and 's3cmd remove' to remotely remove specific files but then you would have to do some scripting to select these specific files and to keep the bucket contents to an acceptable size. There is another option that simply syncs the content of your local directory to the remote bucket, doing the removal automatically, namely 's3cmd sync'.

s3cmd sync --delete-removed [source directory] s3://[bucket name]

The source directory is naturally replaced with the directory of where you put your WordPress backups.

Scheduling it

To make it a little easier to schedule via crontab you preferrably put the sync command in a shell script, for example 'sync-wp-backups.sh'

#!/bin/bash

/usr/bin/s3cmd sync --delete-removed [source directory] s3://[bucket name]

To schedule this script run

crontab -e

which brings you into editing the cron job with the editor of your choice. For example you could edit the crontab file to schedule it to run daily at 23:30 (11:30 PM)

30 23 * * * /home/ubuntu/sync-wp-backups.sh >> /home/ubuntu/s3-backup.log

which logs the output to file (s3-backup.log).

That's it! Now I have a number of days of backup automatically synced from the Amazon instance running WordPress to a more fail safe S3 bucket. At least I sleep a lot better with this in place.

That said, I must also give credit to DreamHost for always being very helpful and supporting when needed.

If you want to know what we did to gain the speed needed for a lift-of, keep on reading.

Exporting the Existing Database

I really like MySQL, but when it comes to encoding for character sets and collations there seems to be such a complexity in the details that users often get lost and configure it the wrong way. The UTF-8 configured database we used on DreamHost worked just fine together with our WordPress installation but it turned out to be impossible to export a correct UTF-8 version for importing into our new environment. And I tried a lot of things. Really. I'm not going to go into details but to sum it up I had to sit down and do kind of manual replacements of the swedish specific characters in the database export. Lucky me this blog is in english.

Anyway, I had ssh access to the Trafficante server and could use this connection to export the database from the DreamHost MySQL server by issueing:

 
mysqldump --default-character-set=UTF8 -u [user] -p -h [host].dreamhosters.com [database] -r [output].sql
 

This resulted in a database dump later used for importing into the new MySQL instance.

Setting up the Amazon EC2 Instance

To make your Amazon life easier start with installing the Firefox plugins Elasticfox and S3 Organizer. These tools give you a GUI view of the somewhat more complex underlying details of Amazon.

Amazons' cloud solution is based on a user account. There are no start-up fees, you only pay for what you use. So if you still haven't got an account, sign-up now. The rest of this article assumes you have signed up and set up accounts for Amazon EC2, Amazon S3 and Amazon EBS. Start by reading the EC2 Getting Started Guide and don't stop reading until you have created an ssh key pair, a security group and have a server instance running.

Now you should also have a private key and a certificate in your ${EC2_HOME} (preferrably ${HOME}/.ec2/) folder of your local computer. These two files should also be uploaded to your instance /mnt folder to make it possible to bundle and upload your images to your S3 "bucket(s)" (buckets are one level deep folders/directories). Make sure you put them in the /mnt folder to prevent them from being bundled with the image and thereby increasing the risk of having your identity revealed.

Bundling, by the way, should be done when you've made changes to your server instance that you don't want to loose. The result of a bundling and uploading is an image with a specific Amazon Image Id (AMI ID) reflecting the state of your server instance at the moment of bundling. You also have to register the image with the manifest file created for you. If you do that you could then safely close down your instance and have it up and running again by issuing the ec2-run-instances command with the AMI ID as parameter. A way to save money.

Bundling and uploading was made easier for me as I used two scripts created by my colleague Ulrik. I put these scripts in the /root folder.

bundle-myself.sh:
 
#!/bin/sh
prg=`basename $0`
dest=/mnt
image=blog-image
 
USAGE="Usage: $prg <datetime>
 
Example:
% $prg 20090415-1000
Bundling into $dest/$image-20090415-1000.manifest.xml"
 
if [ $# -ne 1 ]; then
  echo "$USAGE"
  exit 1
fi
date=$1
echo "Bundling into $dest/$image-$date.manifest.xml"
ec2-bundle-vol --debug -k /mnt/pk-PRIVATE_KEY.pem -c /mnt/cert-CERTIFICATE.pem -u USER_ACCOUNT_ID -d $dest -p $image-$dat
e -r i386
 

upload-myself.sh:
 
#!/bin/sh
prg=`basename $0`
dest=/mnt
image=blog-image
 
USAGE="Usage: $prg <date>
 
Example:
% $prg 20090415-1000
Uploading bundled AMI parts to https://s3.amazonaws.com:443/[S3_BUCKET] ...
Uploaded blog-image-20090415-1000.part.00 to https://s3.amazonaws.com:443/[S3_BUCKET]/blog-image-20090415-1000.part.00.
..."
 
if [ $# -ne 1 ]; then
  echo "$USAGE"
  exit 1
fi
date=$1
ec2-upload-bundle --retry -m $dest/$image-$date.manifest.xml -b blog-images -a [PUBLIC_KEY] -s [PRIVATE_KEY]
 

Another thing I needed was a static IP address for my instance. To solve this I used Amazons Elastic IP service which doesn't cost anything as long as the generated IP address is in use. So, I generated an Elastic IP address and assigned it to the instance.

Installing Necessary Software

The blog require Apache2, Php5, MySQL and the Php GD graphics package, to start with. This was easily installed using Advanced Packaging Tool, apt-get:

 
# sudo apt-get update
# sudo apt-get install apache2 php5 mysql-server php5-mysql php5-gd
 

Setting up the Database for EBS

EBS volumes are, as you might know, more persistent than EC2 instances and will survive if instances go down. Volumes are attached to the instance and could as well be detached and re-attached to new instances. As EBS volumes are not 100% reliable you should also take snapshots of your database data and have it uploaded to an S3 bucket. All this is nicely described in Eric Hammonds' EBS and MySQL tutorial, so I urge you to read it if you haven't yet.

The only thing I sidestepped in the tutorial was the MySQL configuration to point out the data and log directories. Instead I used symbolic links:

 
# ln -s /vol/lib/mysql/ /var/lib/mysql
# ln -s /vol/log/mysql/ /var/log/mysql
 

The tutorial also walks you through automatic snapshots which requires the EC2 command line tools. Here is a nice tutorial on setting these tools up on Ubuntu.

I had to tweak the environment variable settings in ec2-snapshot-xfs-mysql.pl script from

BEGIN {
  $ENV{PATH} = '/bin:/usr/bin:/usr/local/bin';
}

to

BEGIN {
  $ENV{PATH} = '/bin:/usr/bin:/usr/local/bin:/usr/sbin:/root/ec2-api-tools/bin';
  $ENV{EC2_CERT} = '/mnt/cert-CERTIFICATE.pem';
  $ENV{EC2_PRIVATE_KEY} = '/mnt/pk-PRIVATE_KEY.pem';
  $ENV{EC2_HOME} = '/root/ec2-api-tools';
  $ENV{HOME} = '/root';
  $ENV{JAVA_HOME} = '/usr/lib/jvm/java-1.5.0-sun';
}

to get the snapshotting to fully work. I also wrapped the ec2-snapshot-xfs-mysql.pl script for a more convenient way to handle the input:

/root/snapshot-myself.sh

#!/bin/sh
mountpoint=/vol
volume_id=[VOLUME_ID]

su -c "/root/ec2-snapshot-xfs-mysql.pl ${mountpoint} ${volume_id} > /vol/cron.log"

To automatize the snapshotting I set up a simple crontab job by issueing:

 
# crontab -e
 

and then edited it like this

05 */6 * * * sh /root/snapshot-myself.sh

which makes the job run five minutes past every six hours, every day.

I also had to set the timezone info to apply to our local time. The easiest way I've found out of setting this for a Linux server is like this:

 
# ln -sf /usr/share/zoneinfo/Europe/Stockholm /etc/localtime
 

Configuring MySQL

To configure MySQL for UTF-8 content make sure the /etc/mysql/my.cnf file contains the following:

[client]
default-character-set=utf8

[mysqld]
#
# * Basic Settings
#
init_connect='SET collation_connection = utf8_general_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_general_ci
default-character-set=utf8
skip-character-set-client-handshake

Now, if you haven't yet, go on and start your MySQL server. You need to create your wordpress database. It's as simple as:

 
# mysql -u [user] -p
> CREATE DATABASE [database_name]
 

To create the user with which WordPress will access the database:

 
> GRANT ALL ON [database_name].* TO '[user]'@'localhost' IDENTIFIED BY '[password]';
 

And to import your database dump into the newly created database:

 
# mysql -u [user] -p [database_name] < [output].sql
 

You shouldn't need to specify any character set or collation when importing thanks to the configuration done in /etc/mysql/my.cnf.

In order for us to stick with our domain name and have no downtime we needed to use the instances IP address until we were finished testing. This means I had to replace two properties in the database to prevent the blog from redirecting to the original host; the 'siteurl' and 'blogurl' properties residing in the option_value column of the wp_options table. The commands

 
# mysql -u [user] -p
> UPDATE wp_options SET option_value='http://[ip_address]/wordpress/' WHERE option_name='siteurl'
> UPDATE wp_options SET option_value='http://[ip_address]/wordpress/' WHERE option_name='blogurl'
 

fixed this. As soon as the DNS info was propagated throughout the Internet this was reset to "http://blog.jayway.com/wordpress" from within the WordPress admin interface.

Apache Configuration

Our WordPress installation makes use of permalinks and redirects to FeedBurner for RSS statistics. This is based on .htaccess redirects (at least that's how we've solved it) which in turn is dependent on the Apache redirect module. So, in order to make this to work I had to enable that.

 
# sudo a2enmod rewrite
 

Easy as that! One more thing on redirections. I had to configure Apache to allow redirection directives specified in the .htaccess file by changing the /etc/apache2/sites-available/default configuration of the element from

 
	<Directory /var/www/>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride None
		Order allow,deny
		allow from all
	</Directory>
 

to

 
	<Directory /var/www/>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All <----------
		Order allow,deny
		allow from all
	</Directory>
 

Securing the WordPress Admin Interface

Again, I choose to refer to detailed and well written sources. Here are the two articles I followed to create a self-signed certificate and to configure Apache to use it.

• Creating a self-signed certificate
• Configuring Apache for SSL on Ubuntu

To enable https access from the "outside world" I also edited the group policy to open up port 443. This could easily be done via the Elasticfox Firefox plugin mentioned earlier.

Installing and Configuring WordPress

The default location for Apache httpd server for reading content is /var/www/. If you, as I did, have an existing WordPress installation you can simply copy this to the new server. I ended up having it located at /var/www/wordpress/ on the Amazon instance.

Once the database connection properties in the wp-config.php wordpress configuration file was adapted to the new environment I was able to access the WordPress installation via a browser and the Amazon instances' IP address. Sweet!

And as we have our WordPress installation in a separate "/wordpress" folder instead of in the document root of Apache we need to specify, in WordPress admin settings, that the 'Site URL' should be "${host}/wordpress" but the 'Blog URL' should simply say "${host}" to prevent the resulting URL from containing "/wordpress/...". This also requires that we move the .htaccess and index.php files from within our "/wordpress" folder and up one level to "/var/www/", in our case.

In the index.php file, make sure to change from

 
/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');
 

to

 
/** Loads the WordPress Environment and Template */
require('./wordpress/wp-blog-header.php');
 

If or when specifying the permalinks, WordPress must have write access to the .htaccess file, so 'chmod' that file.

 
# chmod 755 .htaccess
 

Otherwise it will complain and simply print out the .htaccess modification it tried to modify with and you are left to change it manually, instead.

Sending Mail from WordPress

Mailing is used in WordPress when generating new passwords to users, among others. We also use it to send data backups to the administator of the blog.

Setting up a mail server isn't a trivial task. I gave it a thought but quickly put it aside in favour of the simple WordPress plugin WP Mail SMTP as I realized I could make use of our existing corporate mail server. It was a breeze to configure the plugin with the necessary mail user credentials.

So, here we are. Sailing these fluffy clouds.

We have these white and rather dull walls with nothing but whiteboards hanging on them so we figured, what could we do to make it look better, more inviting and inspiring? Yeah, you could go with these modern wall stickers, which are easy to work with and looks good but not very personal, really. Could we do something that more connects to what we do for a living?

It took some time to get to it but finally we came up with the idea to depict the people in our industry that have meant something to us, that have made our lives as developers easier. Simply put; gurus. We finally went for the "Warhol Marilyn Monroe" way as the form of how we would portrait these gurus, which would both be quite easy but also colourful and warm.

As there is only room for some five'ish paintings or so in our office, we had to really cut tight in the selection of whom to choose for our paintings. Asking the other Jayway offices revealed quite a lot and brainstorming ourselves resulted in too many, really. The final five was finally set to (in alphabetic order, to be safe) Joshua Bloch, Thomas Dagsberg, James Duncan Davidson, James Gosling and Rod Johnson. Thomas Dagsberg, you ask? It's our CEO...

The paintings were digitally produced using Gimp with a 180ppi resolution on a MacBook Pro. They were printed and framed on a 700x700x15mm format on high quality canvas by Kanfoto produktion & försäljning in Halmstad.

One area that, in my opinion, could still be improved is the development environment. It may be a heck of a good build system Liferay has come up with, but at the bottom line it takes time to learn it and to just start studying it you easily become a bit uncertain. It consists of homegrown ant scripts. To have a flatter learning curve for newcomers Maven 2 might be suitable.

Anyway, I sat down one evening some time ago and looked into how Maven 2 could be used for creating Jsp Portlets for Liferay. Some hours later the work had resulted in a new archetype for creating Liferay Jsp Portlets.

The structure and content of the standard Liferay Jsp Portlet can be viewed here.

So, what did I do?

1. I followed these instructions to manipulate the Jsp Portlet part of Liferay's plugin SDK into a maven archetype:

http://maven.apache.org/guides/mini/guide-creating-archetypes.html

This involved editing these property and xml files:

liferay-plugin-package.properties
name=${artifactId}
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=MIT

portlet.xml
<?xml version="1.0"?>
<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" version="2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd">
<portlet>
<portlet-name>jspPortlet</portlet-name>
		<display-name>${artifactId}</display-name>
<portlet-class>${groupId}.JSPPortlet</portlet-class>
		<init-param>
			<name>view-jsp</name>
			<value>/view.jsp</value>
		</init-param>
		<expiration-cache>0</expiration-cache>
		<supports>
			<mime-type>text/html</mime-type>
		</supports>
<portlet-info>
			<title>${artifactId}</title>
			<short-title>${artifactId}</short-title>
			<keywords>${artifactId}</keywords>
		</portlet-info>
		<security-role-ref>
			<role-name>administrator</role-name>
		</security-role-ref>
		<security-role-ref>
			<role-name>guest</role-name>
		</security-role-ref>
		<security-role-ref>
			<role-name>power-user</role-name>
		</security-role-ref>
		<security-role-ref>
			<role-name>user</role-name>
		</security-role-ref>
	</portlet>
</portlet-app>
 

to insert ${artifactId} and ${groupId} for the portlet name and package structure. These files are part of the file list finally being wrapped up within the archetype and used to generate the resulting portlet from Maven 2.

2. I ran 'mvn install' on that particular archetype to have it installed in my local repository.

3. I used the archetype to create a new Liferay Jsp Portlet artifact:

mvn archetype:create -DarchetypeGroupId=com.liferay.maven.archetypes.portlet.jsp
  -DarchetypeArtifactId=liferay-jsp-portlet
  -DarchetypeVersion=1.0-SNAPSHOT
  -DgroupId=[my.package]
  -DartifactId=[MyFirstLiferayJspPortlet]

4. I stepped into the artifact and ran 'mvn install' on it which generated my MyFirstLiferayJspPortlet-1.0-SNAPSHOT.war.

5. I then uploaded the war file to my portal instance via the Liferay admin GUI Plugin Installer.

6. Et voila. It worked, showing up in the portal.

And of course, worth mentioning, to have a development environment up and running in eclipse in seconds this is all you have to do:

1. mvn eclipse:add-maven-repo -Declipse.workspace=[full-path-to-workspace]

2. mvn eclipse:eclipse

To have the archetype play with the existing build situation of Liferay it would probably need to be generated from some ant target and be based on the portlet template in subversion located at "plugins/tools/portlet_tmpl/" to have it follow updates of Liferay.

Here you can download the final result, as a zipped archetype.

If a generated archetype like this was to be uploaded to a public maven repository, working from above point #3 and down is what would be necessary for a developer to have a project and all the necessary property and xml files (correctly edited with package structures and all) in place for a Liferay Jsp Portlet development environment. It could at least become a complement to the Plugins SDK. And yes, it could for sure still be enhanced. For example, there is no JSPPortletTest class generated for the JSPPortlet class.