Build an Awesome Community News Feature for Your WordPress Blog

October 14, 2011 · 60 comments

by Lars


In this article tripwire magazine provides a detailed tutorial on how to setup a Community News Feed solution in WordPress 2.8+. I use it at tripwire magazine and currently get 30-50 links submitted every day. It’s a good way to interact with users and peer blogs!

Allowing your readers to provide interesting and relevant links to you and your other readers is nice feature as it gives a blog dynamic content. It actually also may drive traffic from bloggers looking for sources to get some easy and free traffic for their own site. Besides that links submitted are very useful for creating regular  news posts listing all or the best resources readers submitted. The solution provided have been tested and works with WordPress 2.7 to 2.8.6. This is a follow-up on a previous article taking TDO Mini Forms changes into account. I have also decided to add new options and taking reader comments into account. The post will show you how to:

  • create a Community Link Submit Page (demo)
  • create a Community Link Widget or custom code for sidebar (demo scroll down to find it)
  • create a Community Link page (demo)
  • filter out community links from RSS feeds




Adding a Community Link/Reader News Feed is currently quite popular and I have seen it on many of the very popular Web Development and Design Blogs i keep an eye on. Here is a few good examples that you can check out: Noupe, Psdtuts+. Even though Community Link/Reader News Feeds are popular there doen’t seam to be an easy way to implement it in WordPress. There is as far as I know currently no plugins and we lack good tutorials that binds all the elements together making it available for everyone. This post share the details of the solution created for and used on tripwire magazine. There are as usual more than one way of doing this. Some use the comments system in WordPress while others use their own proprietary database. In the solution I cover in this tutorial User Submitted content will be added as new posts in WordPress.

Step 1. Get the files.

The form

Submitting content to WordPress from the front end can be done in many ways but I think that one of the best and most flexible ways available is to use TDO Mini Forms. TDO is not exactly simple to configure to start with but as you start using it you will see that it gives you real power to make the Forms you want.

TDO Mini Forms: Download

The sidebar community post list

Listing posts from one Category in a widget can also be done in countless ways. You should really use the plugin or approach you prefer here but in this tutorial I have decided to use the plugin Query Posts. I have made a few changes to the plugin presentation template to make it fit my needs. I’m not that proud of this part but….well you may find a better and more generic way yourself if you’re not into changing code to preserve compatibility with future releases of the plugin. If you do please share and post a comment.

Query Posts: Download

As part of this follow-up I have extended the tutorial for Readers using themes without widgets showing you how to code functionality from ground up that pulls the submitted posts from the database and format the output as you prefer.

2. Install and activate the plugins you need

This is not a tutorial on how to install plugins in general but it is very simple. If you’re not going to use Query Posts plugin and plan to use the code version then only install TDO Mini Forms.

a. Upload the files under your wp-content/plugins directury

b. Log into WordPress back-end and click the Plugins menu button. Find the 2 new plugins under Inactive Plugins and press Activate.

3. Create a Page and a Category to hold the Form

You may call the page whatever you want but I suggest calling it "Submit User Link". There’s no reason to publish the page yet but you need it as a place holder. Describe at the top of the page if you have any rules for what resources will be approved.

Create a WordPress Categoty that the posts will be put into per default. In this tutorial the Category is called User-News (user-news)

4. Basic Configuration

Activating TDO Mini Forms (TDOMF) will add a Options Menu at the bottom of your WordPress Admin Menu.

Make sure you start with configuring TDOMF via the main TDOMF menu "Form Manager and Options" in the WordPress Administration back-end. You must assign a user as the "Default Author". This user must not have rights to publish or edit posts, i.e. they should be of the subscriber role. The TDOMF options menu can automatically create a dummy user to set as the Default Author. This is the recommended approach.

With a Default user selected you’re actually done setting up the basics. You may consider enabling the Akismet Spam Protection at the bottom of the page. I don’t use it myself and I have not experienced any spam issues. I generally think standard comments forms are much easier to target and that the effort needed for a spammer to use your custom form isn’t worth the time…

5. Creating the Form

You can use Form 1 or press the “New Form” button. This will add a Form 2 button next to Form 1. I’m not sure why the names are Form 1,2,x and keep being this after naming the form but you may call it a “feature”. Once the form is created press the Form 2 button. This takes you to the main Form 2 configuration page (or stay at Form 1 if you continue using this).

General Tab:

  • Put in the Form Name “User Link Feed”.
  • Check “
  • Finally if you like Ajax forms enable it. I’m using it and it really is a nice feature.

Access Control Tab:

  • Make sure that "Unregistered Users (i.e. everyone)" and "Users with rights to publish posts" can access the form.

Submitting Tab:

  • Set “Default Category” to the category created in step 3.

Moderation Tab:

  • Enable Moderation
  • You may check the check box just below if you want your own submission to go through directly.

Throttling Tab:

  • To prevent your WordPress from becoming spammed you should create a throttle rule. The default rule can be useful. Each IP address can only have 10 unapproved submissions per hour.

6. Setting up the Form Layout

Form Layouts in TDOMF is made by arranging widgets (these should not be confused with WordPress side bar widgets!)  To configure your widget press the create button.

First of all scroll to the bottom and set the Custom Field Widget to 3 and press save.

The make the following arrangement by dragging the field boxes from the area below the widget into it.

Configuration of the 3 custom fields and the content field can be seen here. Click on the images.

[nggallery id=9]

Add the following code to “Custom Fields 1”.

/* Set the link title for use in Append to Post Content 1*/
$LINKTITLE= get_post_meta($post_id, 'LINKTITLE', true);
if($LINKTITLE != false) {
   $link_title = $LINKTITLE;
} else {
   $link_title = '[No Link Title]';

<p><a href="%%VALUE%%" target="_blank"><?php echo $link_title ?></a></p>

Add the following code to “Append to Post Content 1”.

/* Using value put into Custom Field 3 called  LINKTITLE to insert
custom title on post to make it stand out in the WordPress Posts view. */

$link_title = get_post_meta($post_id, 'LINKTITLE', true);

if($link_title != false) {
   $post_title = '[User Link:'.$link_title.']';
} else {
   $post_title = '[no link title set]';
$postdata = array(
         "ID" => $post_id,
         "post_title" => $post_title);

The Form is basically set up now. To make the last hacks you have to go into Form Hack Mode.
Press the Form Hack Button and a page that gives you access to all the code is loaded.
What to do here:
1. Search for “URL:” and remove it. (makes the form look better)
2. Search for “Email:” and remove it.
3. If you want ot get rid of the preview button as well you can just locate the button input html and delete it.

Be aware that once you used the hack page you will not be able to use the form create page in the same way. TDO Mini Forms have made an attempt on solving the issue by introducing a kind of revision and diff functionality. It works OK but once you go into hack mode it is hacked and getting back is hard! SO DON’T start hacking until you’re form is finished with regards to number of input fields needed.

7. Add the form to the Submit User Link Page

Open the page you created in step 3 for editing. Insert this tag on the page as shown below (I can’t put in the code here as it will be turned into a form):

Visit the form page and try to submit a few User Links. NB! Depending on the configuration you decided on in step 5: If you’re logged in as an administrator on the Browser session your submissions will be published directly.

This is the end result at tripwire magazine.

8. Add the Sidebar widget

Here you will be able to either use Query Posts plugin or code it yourself.

Query Posts

Showing the links that users have submitted somewhere is necessary. If the Query Posts plugin was activated earlier as described you should navigate to the WordPress Widgets page.

Here you should Add a “Query Posts” widget to the sidebar and click edit. The configuration is simple but make sure you put in the id of the category you created in step 3 instead of 41.

Save the sidebar. Go to the blog and check if everything works as intended.

Code it yourself

Basically this is about finding a way to pull out the posts submitted by users. You can add this directly to the sidebar.php (or whatever it is called in your theme) or you can use widgets like Executable PHP widget.  I love this plugin and it is also useful here.

Add the following code. It first query the WordPress databse for published posts in a specific category “WHERE wp_term_taxonomy.term_id IN ( 41 )”. You have to replace 41 with the catid of your own category created in step 3. You will get maximum 10 posts returned unless you change it here “LIMIT 0 , 10″ );”. The script then steps through all records returned and prints the post content in a html list.

global $wpdb;
$result = $wpdb->get_results(“SELECT *
FROM wp_posts as wpost
INNER JOIN wp_term_relationships ON wpost.ID = wp_term_relationships.object_id
INNER JOIN wp_term_taxonomy ON wp_term_relationships.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
AND wp_term_taxonomy.taxonomy = ‘category’
WHERE wp_term_taxonomy.term_id IN ( 41 )
AND post_status = ‘publish’
ORDER BY wpost.post_date DESC
LIMIT 0,10” );
foreach ($result as $post) {
$postid = $post->ID;
$title = $post->post_title;
$post_content = $post->post_content;

<li><?php echo $post_content ?></li>
<?php } ?>

If you want to style the post content ex. the link you need to go back to step 6: “Custom Fields 1” and modify this:

<p><a href="%%VALUE%%" target="_blank"><?php echo $link_title ?></a></p>

9. Changing the Query Posts plugin (only needed if you use it!)

Now this is where it gets a bit ugly. I could have found a better way but I don’t have to use the plugin for other things at the moment. Open the following file for editing (on the server or locally….if locally you need to upload it afterwards):


To add the Add and RSS buttons insert the following line of code on line 180. Update the […] as needed.

<div id="userLinkMenu"><a href="http://[your domain]/submit-user-link">
<img src="[theme name]/images/[add image]" />Submit</a>
<a href="http://[your domain]/category/user-news/feed">
<img src="[theme name]/images/[rss image]" />RSS</a></div>

You need some images if you want to use the code as it is. If you just want text links remove the img tag.

<div id="userLinkMenu"><a href=""><img src="" />Submit</a><a href=""><img src="" />More Links</a><a href=""><img src="" />RSS</a></div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div <?php if ( function_exists( 'post_class' ) ) post_class(); else echo 'class="post"'; ?>>

<?php if ( function_exists( 'get_the_image' ) && $thumbnail ) : ?>
  <?php get_the_image( array( 'custom_key' => array( 'Thumbnail', 'thumbnail' ), 'default_size' => 'thumbnail' ) ); ?>
  <?php endif; ?>
  <!-- comment this part out to leave out title in user link presentation
    <?php the_title( '<h2><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>
      <?php printf( __('<span>By</span> %1$s <span>on</span> %2$s', 'query-posts'), '<span><a href="' . get_author_posts_url( get_the_author_ID() ) . '" title="' . get_the_author() . '">' . get_the_author() . '</a></span>', '<abbr title="' . sprintf( get_the_time( __('l, F jS, Y, g:i a', 'query-posts') ) ) . '">' . sprintf( get_the_time( __('F j, Y', 'query-posts') ) ) . '</abbr>' ); ?>
      <?php edit_post_link( __('Edit', 'query-posts'), ' <span>|</span> <span>', '</span> ' ); ?>
    <?php if ( $display == 'the_content' ) : ?>

      <?php the_content( __('Continue reading', 'query-posts') . ' ' . the_title( '"', '"', false ) ); ?>
      <?php wp_link_pages( array( 'before' => '<p>' . __('Pages:', 'query-posts'), 'after' => '</p>' ) ); ?>

    <?php else : ?>

      <?php the_excerpt(); ?>

    <?php endif; ?>
    <!-- comment this part out to leave out post meta in user link presentation
      <span><span><?php _e('Posted in', 'query-posts'); ?></span> <?php the_category( ', ' ); ?></span>
      <?php the_tags( '<span> <span>|</span> <span>' . __('Tagged', 'query-posts') . '</span> ', ', ', '</span>' ); ?>
      <?php if ( comments_open() ) : ?><span>|</span><?php endif; ?> <?php comments_popup_link( __('Leave a response', 'query-posts'), __('1 Response', 'query-posts'), __('% Responses', 'query-posts'), 'comments-link', false ); ?>
  <div style="border-bottom:1px solid #F1F1ED; padding-bottom:3px; padding-top:2px;"></div>
  <?php endwhile; endif; ?>
<?php endif;

In order to make the list of Link only show the post content containing the title og the link and the description and exclude fx. the realt title of the posts some lines of code in the file have to be either deleted or commented out. I recommend commenting them out so for. The blocks below start at around line 195.

Save the file and make sure it is updated on the server. Check how it looks. This is the sidebar at tripwire magazine:

10. Exclude the User News Category from Menus, front page and RSS feed.

I don’t think that You dont want the User Link menu and the User Link posts to appear on your front page or in your RSS feed. This part is really quite dependant on the theme you are using and how you set up your blog. I’m giving a few hints but don’t expect this part to be fully covered here.

1) The feed part is very simple if you’re using feedburner and the feedburner plugin that redirects all feed requests to Just add ?cat=-[catid] to feed URL provided to feedburner

When it comes filtering what is shown on the to the frontpage or what Categoties that are shown in menus and widgets I will advise you to look for descriptions and tutorials that cover this as its main focus. There are manu good resource for this that you can use.

11. Creating a Community Link page

Once people start adding community links to your site it makes sense to show more than the 10 latest. In my case if I approve 30 submissions at a time most of them will never be visible in the sidebar. I have found a useful plugin that can show content of a category on a WordPress page – it’s called List Category Posts. Once you have installed it you can create a page and include the following code (have to write catlist and not cat-list. I could not write catlist as it would have printed 200 posts! ) to make it list a specified number of posts from a category. Ability to limit is important as you may get thousands of submissions over time.

[cat-list id=41 numberposts=200] // NB! change cat-list with catlist on your page! //

Because We don’t want the post title in WordPress to be shown (as it contains [user link:…]) and have added the link to the content we have to modify the plugin a bit to make things work as we want…! You have to locate “list_cat_posts.php” in the folder “list-category-posts” (under wp-content/plugins). Then goto line 66 and replace the entire foreach section. Basically I have commented out a few lines and use single->post_content to insert the post content.

foreach($catposts as $single):
	//Template idea by Verex
	} else {
		//$output .= '<li><a href="' . get_permalink($single->ID).'">' . $single->post_title . '</a>';
			$output .=  ' - ' . get_the_time($atts['dateformat'], $single);//by Verex, great idea!
			$lcp_userdata = get_userdata($single->post_author);
			$output.=" - ".$lcp_userdata->user_nicename . '<br/>';
		//if($atts['excerpt']=='yes' && ($single->post_excerpt)){
			$output .= "<p>$single->post_content</p>";

The result will look like this:

Please leave a comment if you find this tutorial useful or if you try it out and run into trouble!

Hold on! Do you have a Facebook page? With one of the good looking Facebook Skins you social profile and presence will improve. Have a look! If you’re looking for nice Cute Tumblr Themes there is a lot of good one to choose from.

/* Using value put into Custom Field 3 called  LINKTITLE to insert custom title on post to make it stand out in the WordPress Posts view. */$link_title = get_post_meta($post_id, ‘LINKTITLE’, true);

if($link_title != false) {
$post_title = ‘[User Link:’.$link_title.’]’;
} else {
$post_title = ‘[no link title set]’;
$postdata = array(
“ID” => $post_id,
“post_title” => $post_title);

Previous post:

Next post:

Web Analytics