creative briefing

User-generated content is not uncommon to websites today and its popularity has grown over the years with the public’s demand to have control and input over what they’re seeing on websites. Sites like Digg, StumbleUpon, and countless others will typically offer a form on the front-end of their website for users to submit content for immediate publishing, enhancing user interactivity and overall experience.

For WordPress users, this is usually a problem because the post and page-writing functionalities are hidden away in the back-end admin panel of WordPress. Not only that, but users are required to have a registered account before being able to access these functions. Add on the fact that logging into the admin panel exposes the user to a different interface and visual environment, and you’ve got yourself a bad user experience and little incentive for the user to want to submit content.

So how do you create a site that offers a usable front-end form that will allow users to publish content immediately onto your site while still taking advantage of the powerful publishing engine of WordPress?

This tutorial will break down one way of overcoming this obstacle using cantwaitforchristmas.com to illustrate examples.

The Case Study

In early December, my agency decided to run a project marathon and pump out a new site from scratch in less than 24 hours. The idea was simple: we wanted to create a single page website that would countdown the days, hours, minutes, and seconds to Christmas, while also letting users submit their Christmas wishes to the site. The structure we had imagined was similar to a Facebook wall in the sense that users would post content (wishes) that would add to a running list of other user-posted content. This was the basis of cantwaitforchristmas.com.

 

The Concept

Achieving the goal is actually quite simple and just requires looking at WordPress’ basic functions slightly differently. As mentioned, WordPress’ post and page-writing functions are hidden away in the back-end admin panel, but WordPress does offer one other way of publishing content through a front-end form: comments!

The concept then is to isolate the comments functionality and use it to run our wish list form. And because comments always need to be attached to a post or a page, cantwaitforchristmas.com essentially became just one blog post with a lot of comments.

WordPressing

Note: This section assumes that you have general knowledge of how WordPress works and how it is structured. 

Once the site design had been designed, chopped up, CSS’d, and WordPressed into its respective sections (i.e. header, body/index, footer), we began modifying the WordPress theme.

Note: The default WordPress theme was used as our base theme, but the idea applies to most, if not all, themes.

There were 4 tasks that needed to be accomplished:

1. The main index page must show only a single post.
2. The main index page must show the comments for this single post.
3. Posting a comment will direct the user back to the main index page (as opposed to the single post page).
4. The comments must be listed in descending order (newest at the top).

The following files were used to accomplish these tasks:

• Main index page (index.php)
• Single post page (single.php)
• Comments (comments.php)

Show a single post

To show a single post on the main index page, WordPress’ query_posts() function was used. Learn more about query_posts() here.

To show only the post with ID 1, query_posts('p=1') was inserted before the if / while loops like so:

...
<?php query_posts('p=1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
...

Alternatively, if we wanted to show just the last post, query_posts('showposts=1') could have been used instead. In our case, it didn’t make a difference since the entire site only needed one post.

Show comments on the main index page

Getting comments to show on the main index page is incredibly easy. Essentially, the main index page (index.php) just needs to be treated as if it were the single post page (single.php).

To do this, <?php comments_template(); ?> was inserted right above <?php endwhile; ?> on index.php, like so:

...
<?php while (have_posts()) : the_post(); ?>
...
<?php comments_template(); ?>
<?php endwhile; ?>
...

Important: In order for this to work, only a single post must be showing on the main index page.

Redirect commenters to the main index page

Another easy task. We simply replaced everything in our single.php file with <?php header('location:/'); ?>. In your case, replace ‘/’ as necessary (i.e. if your site resides in your /blog directory, then replace ‘/’ with ‘/blog’).

When a user posts a comment, the WordPress comment function automatically detects the permalink of the post the user is posting on, and redirects them there, thus calling the single.php file. The <?php header('location:/'); ?> in single.php therefore tells the server to redirect the user back to main index page, rather than display the single post page.

List comments in descending order

When WordPress gets ready to display comments, it compiles all the comments into an array variable named $comments. By default, it orders the comments in ascending chronological order (oldest first, newest last).

Knowing this, a little PHP knowledge was applied to reverse the order of the array. The array_reverse() function was used to make this happen.

We simply inserted <?php $comments = array_reverse($comments, true); ?> right above the comments foreach loop like so:

... 
<?php if ($comments) : ?>

<a name="wishes"></a><h3><?php comments_number('nobody has', '1 person has', '% people have' );?> shared their wishes!</h3>

<?php $comments = array_reverse($comments, true); ?>

<?php foreach ($comments as $comment) : ?>

<div id="wish-<?php comment_ID() ?>" class="wishpost">
...

And there you have it, a few tips and tricks that gave cantwaitforchristmas.com its user-generated wishlist!

The Resources

Of course, we came across and used a number of great resources and tools that helped us develop the site that may also be useful for those of you reading this tutorial. Here’s a list of them:

• WordPress Template Tags – a full list of WP tags and how to use them, a great reference guide!
• Comment Relish – a great plugin that helps to extend the user engagement by emailing first-time posters.
• Custom Comment Fields – another useful plugin that helps you build custom forms in AJAX.
• Holiday Social Networking Icons – we used these icons to help our users spread the holiday spirit.
• Snowflakes – the blissful snowflakes that flutter in the background were downloaded from SpoonGraphics.
• Countdown timer – a simple DHTML/JS script that made the countdown to wonderfulness possible.

Final disclaimer: this tutorial represents just one simple way to incorporate a front-end form to help users generate their own content for a website. I’m all about constant-improvement and would love to hear about other methods.

I hope this has been helpful!