Although WordPress has a *very* extensive plug-in collection, now and again things come up for which there are no suitable plug-ins available (yet). When I built PSDTUTS I thought it would be cool to have a way for users to submit links and to create a public link feed out of it. Today I'll show you how I hacked together a method using WordPress' comments.

So first of all if you're not sure what I mean by a User Contributed Link Feed, all you need to do is look in the sidebar of NETTUTS and you'll see our public link feed. You can subscribe via RSS or click to submit your own links. It's a neat little way to get more interactivity into the site, and to let readers leverage the traffic of the TUTS sites back to their own blogs and tutorials.

Rough Plan of Action

The first thing to do is come up with a plan of how it's all going to work. Here's our plan:

1. First we'll create a special Post on our blog that will just have some short submission instructions
2. Then we'll edit the comments.php file so that when this special Post comes up, it will display comments differently
3. On those comments we'll change the regular comments form to be relabelled so that the fields fit a link submission
4. Then we'll change the way comments display both on the post and in the comments RSS so that it makes sense
5. Finally we'll make a bit of code to pull the latest 10 links and place them in the sidebar

Now the advantage of using the regular WordPress comments system is that there is already an approval and spam-catching workflow in place.

Step 1 - Create the Post

For my example today I'm going to be using the soon-to-launch AUDIOTUTS site that I've been spending the afternoon putting together. So we just make a regular Post with a title and some text, you can see me making mine in the screenshot:

And here it is on the AUDIOTUTS site:

Now it's important to find out what the Post ID is for our post. You can figure this out by editing the post you just created and looking at the URL for the edit post page. My edit post URL is "https://music.tutsplus.com/wp-admin/post.php?action=edit&post=3" so therefore the Post ID is 3!

Next we're going to alter our comments.php file to look for the post with ID of 3 and to make that particular post's comments look different. Note that if you're interested to learn more about the comments.php file, we have a great tutorial here on NETTUTS called Unravelling the Secrets of Comments.php that is a great place to start.

So basically we're going to add a big if statement and if the Post ID is not 3 then we'll do our regular comments stuff, and if it is 3 then we'll change the way they are displayed AND how the form looks. Here's my comments.php file for AUDIOTUTS (note that I've commented out the regular comments stuff to make it clearer in regards to the link feed)

 1 2 ID != 3) {  3 4  // If the Post ID is *NOT* equal to 3 (our link feed post that we created earlier) then  5  // we execute the regular comments.php stuff in this space.  6  //  7  // I've deleted mine to make my code snippet a bit clearer  8 9 } else { ?>  10   11 

Previous User Submissions

 12  Submit a Link  13 14   15   16 
 17   18   19 
1.  20 
 21   22 
2.  23   24   25 
 26   27   28   29 
 30   31 

 32   33 
 34   35 
 36   37 

 38 

 39   40   41   42 

 43 

 44   45 

 46 

 47   48   49 

 50   51 

 52  ID); ?>  53   54   55   56 
 57 
 58 59  

So let's analyse our code in two parts, first the form and then the comment display.

Step 3 - Altering the Comment Form

By default there are four form fields that WordPress uses to allow input of comments, they are:

1. Author
2. Email
3. URL
4. Comment

2. URL

So we'll map the four form fields to our three requirements like this:

1. Author Field > Link Title
2. URL > URL

And for the email field, we'll switch this to be a hidden form field and give it a value of "USER_LINK_SUBMISSION@AUDIOTUTS.COM", that will make the links a lot easier to spot when they are being approved in the comments approval.

So here's the form I'm using:

 1 2 
 3   4 

 5 

 6   7   8   9 

 10 

 11   12 

 13 

 14   15   16 

 17   18 

 19  ID); ?>  20   21  

As you can see we have three <input type="text"> fields and one <input type="hidden"> for the email address. And though in the HTML these input fields still have their usual id's (author, url, comment), you can see in the text that the user sees they are labelled as link title, URL and link description. So that the form looks like this:

Step 4 - Displaying Previous Link Submissions

Next we'll format how the previous comments appear so that they also make use of our reusing the author, url and comment fields. Here's the code we'll use to display the links:

 1 2   3   4 
 5   6   7 
1.  8 
 9   10 
2.  11   12   13 
 14  

So here's what we are doing

1. First we check if there even are any comments
2. If there are then we'll generate an ordered list <ol> of entries
3. For each comment we publish an <li> element with:
1. A linked author name - remember we've used these fields so that this will actually be the link title linked to the URL
2. The comment text - or in other words our link description.

Now the great thing about using comments is that, by default, there is an RSS feed for each WordPress post. The URL is simply the address for the post followed by '/feed'. So in our case it is: https://music.tutsplus.com/general/user-link-feed/feed/

The only problem is that by default the formatting of the comments RSS will create a feed that looks like this (in Safari):

So there are three problems:

1. The title of the feed is "Comments On: User Link Feed"
2. The link title says "By: ..."
3. The link doesn't go to the URL, it goes back to AUDIOTUTS

So to solve these problems we have to edit the feed template. So we go into our WordPress install to /wp-includes/feed-rss2-comments.php, which is the template file for the comments RSS. Here's what the file has in it by default (in WordPress 2.5.1):

 1 2 ';  12 ?>  13   18   19  <?php  20  if ( is_singular() )  21  printf(__('Comments on: %s'), get_the_title_rss());  22  elseif ( is_search() )  23  printf(__('Comments for %s searching on %s'), get_bloginfo_rss( 'name' ), attribute_escape($wp_query->query_vars['s']));  24  else  25  printf(__('Comments for %s'), get_bloginfo_rss( 'name' ) . get_wp_title_rss());  26  ?>  27   28   29   30   31   32   33 comment_post_ID);  36  get_post_custom($comment_post->ID);  37 ?>  38   39  <?php  40  if ( !is_singular() ) {  41  $title = get_the_title($comment_post->ID);  42  $title = apply_filters('the_title_rss',$title);  43  printf(__('Comment on %1$s by %2$s'), $title, get_comment_author_rss());  44  } else {  45  printf(__('By: %s'), get_comment_author_rss());  46  }  47  ?>  48   49   50   51   52 post_password) &&$_COOKIE['wp-postpass'] != $comment_post->post_password) : ?>  53   54   55   56   57   58 comment_ID,$comment_post->ID);  60 ?>  61   62   63   64  

Now we don't really need to know what most of that does, rather we'll just go through and change a few lines. The first line that we can fix is Line 18, which we change from this:

 1 printf(__('Comments on: %s'), get_the_title_rss()); 

to this:

 1 printf(__('%s'), get_the_title_rss()); 

Then we'll change Line 42 from this:

 1 printf(__('By: %s'), get_comment_author_rss()); 

to this:

 1 printf(__('%s'), get_comment_author_rss()); 

In both cases we are simply removing the extra words - "Comments on: " and "By: " - so that the feed makes more sense. So that was pretty easy. The next bit is a bit more complicated because we need to change where the URL is pointing. Now currently it points back to the post so that the user can follow comments on that post. Since this template controls *all* comment RSS feeds, we don't want to break that functionality so we need an if statement as follows:

 1 2  ID != 3) {  4  comment_link();  5  } else {  6  echo $comment->comment_author_url;  7  }  8  ?>  9   So here we are simply checking if the post has an ID of 3 (which in our example is the Post ID of the user link feed) and if it does then we publish the URL, and if not we do the regular comment_link() function. So the final RSS template looks like this:  1 2 ';  12 ?>  13   18   19  <?php  20  if ( is_singular() )  21  printf(__('%s'), get_the_title_rss());  22  elseif ( is_search() )  23  printf(__('Comments for %s searching on %s'), get_bloginfo_rss( 'name' ), attribute_escape($wp_query->query_vars['s']));  24  else  25  printf(__('Comments for %s'), get_bloginfo_rss( 'name' ) . get_wp_title_rss());  26  ?>  27   28   29   30   31   32   33 comment_post_ID);  36  get_post_custom($comment_post->ID);  37 ?>  38   39  <?php  40  if ( !is_singular() ) {  41 $title = get_the_title($comment_post->ID);  42 $title = apply_filters('the_title_rss', $title);  43  printf(__('Comment on %1$s by %2$s'),$title, get_comment_author_rss());  44  } else {  45  printf(__('%s'), get_comment_author_rss());  46  }  47  ?>  48   49  ID != 3) {  51  comment_link();  52  } else {  53  echo $comment->comment_author_url;  54  }  55  ?>  56   57   58   59   60 post_password) &&$_COOKIE['wp-postpass'] != $comment_post->post_password) : ?>  61   62   63   64   65   66 comment_ID,$comment_post->ID);  68 ?>  69   70   71   72  

And as a result our comment RSS feeds now look like this (for the user link feed and a regular post):

Step 6 - Displaying the Last 10 Items in the Sidebar

Next we need to display our most recent 10 items in the sidebar. Here's a little piece of code to do that:

 1 2   6 7 
 8   9   10 

•  11   12   13 


So you can see here we are:

1. Grabbing all approved comments from the post with Post ID = 3 as an array and reversing them so that we get the most recent first
2. Then we create a <ul> element and for each comment in the array up to 10 we print out an <li> element with the link, title and description

And with a bit of styling here's how the result looks:

Finished!

So that's it! I also like to burn the feed via Feedburner so I can track how many people subscribe. So far it's been quite a useful feature, here at NETTUTS we have about 150 subscribers to the link feed, at PSDTUTS we have close to 500. So they are a good way of letting the community know about new links and they keep the site regularly updated.

I've recently contracted the fabulously talented Joshua Blount to build this into a WordPress plugin. Once it's all finished I'll make sure he releases it here as our first bit of NETTUTS open source :-)