Sunday, March 20, 2011

Wordpress as CMS for Facebook page

This tutorial shows how to use Wordpress as CMS (content management system) for Facebook page or any other site. Recently I have arrived to London and so far I successfully completed one freelancing job. It has one strict requirement: use Wordpress. At first I was reluctant ("I can do it myself") but then I realized that there is no reason to reinvent the wheel and with some help and little effort I can do this, meet deadline and learn something new. Right now I would like to share my final thoughts and present really straightforward (I wish, I wish) tutorial how to get it done!

1. Install wordpress

There are many other tutorials covering this topic. I personally use XAMPP as a all-in-one development environment. When putting site live on the internet you will need to specify database from your hosting provider.

2. Install Custom Field Template plugin

Same as above, you can easily find description how to do it. You can install do it via admin panel or by copying files to wordpress-tutorial\wp-content\plugins\ directory, whatever suits you at most. Please remember to activate plugin afterwards!

3. Register new post type
To do so just add a few lines to the following file: wordpress-tutorial\wp-content\themes\twentyten\functions.php

add_action('init', 'create_post_type' );

function create_post_type() {
'labels' => array(
'name' => __( 'Welcome' ),
'public' => true,
'supports' => array('title')

("supports" parameter tells wordpress to use "title" from default post structure)

You can now add a new post of a created type:

4. Customize Custom Field Template plug-in

Custom Post Type: name of the previously created post type lowercase (bug prone)
Template Content: anything you need, for example:

type = text
size = 35

type = textarea
rows = 4
cols = 35

[Splash image]
type = file

Click "update option" and try to add a new post now. You should see something like that:

5. Add sample content to your new post type.

And see the post:

Don't worry if your fields isn't visible on site immediately, now it's time to...

6. Specify post template.
Learn more about wordpress template matching in Wordpress. You can customize existing page or create something from a scratch by adding file single-welcome.php to wordpress-tutorial\wp-content\themes\twentyten\ directory.
<h1><?php $key="Header"; echo get_post_meta($post->ID, $key, true); ?></h1>


<?php $key="Description"; echo get_post_meta($post->ID, $key, true); ?>


$key="Splash image";
$large_image_url = wp_get_attachment_image_src( get_post_meta($post->ID, $key, true), 'large');
echo '<img src="' . $large_image_url[0] . '"/>';

Your site should now looking like that:

7. Basically this is it.
You can also add some additional features.

Specify image size:
Wordpress by default creates a few different image sizes:

In functions.php file (when new post was registered) you can add additional image size.

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'square', 120, 120, true);

True allows cropping. Please note: it's better to use dedicated software to optimize images before posting.

Use wordpress as a CMS for Facebook page:
From 17 march 2011 static FBML application is no longer available. Instead you can easily apply iframe to your page (Hyperarts blog covers this topic thoroughly). So why wouldn't you use presented technique to manage your sites?

If you find this tutorial useful please leave a comment below :)

EDIT: Site is live here.