Howto: WordPress 2.7+ User Link Feed Submit Form and Widget

March 20, 2010 · 117 comments

by Lars

wp-user-link-feed

In this article tripwire magazine provides a mini-tutorial on how to setup a User Link/News Feed solution in WordPress 2.7+. I really think it is a nice feature as it gives a blog dynamic content and it it may actually drive traffic from bloggers looking for sources to get some easy and free traffic for their own site. You may also yourself find useful ressources by follwoing the links that your users submit.

NB! Post updated here: Build an Awesome Community News Feature for Your WordPress Blog


ElegantThemes
ThemeForest

Advertisement

Introduction

Adding a User Link/News Feed is currently quite popular and I have seen it many of the very popular Web Development and Desing Blogs i follow. Here is a few good examples that you can check out: Noupe Psdtuts+ Smashing Apps. Even though User Link/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 plugin or really good tutorials that binds all the elements together why I decided to share the details of the solution I have just added to tripwire magazine (make sure you try it out and post a link to a useful resource!). 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.

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 simpel to configure to start with but as start using it you will see that it gives you real power to make the Forms you want.

TDO Mini Forms: Download

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

2. Install and activate both plugins.

This is not a tutorial on how to install plugins in general but it is very simple.

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 placeholder. 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.

5. Creating the Form

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.

  • Put in the Form Name “User Link Feed”.
  • Make sure that "Unregistered Users (i.e. everyone)" and "Users with rights to publish posts" can access the form. The check boxes for this can be found scrolling a bit down. Further down if you want to receive notifications enable it for Administrator.
  • Scroll further down and locate “Default Category” Select the category created in step 3.
  • Look for Enable Moderation and make sure it is checked.
  • To prevent your WordPress from becoming spammed you should create a throttle rule.In the example here each IP address can only have 10 unapproved submissions per hour. Setup what you want here.

Finally if you like Ajax forms enable it. I’m using it and it really is a nice feature.

6. Setting up the Form Layout

Form Layouts in TDOMF is called widgets and thus should not be confused with WordPress side bar widgets! To configure your widget press the Widget 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=7]

Add the following code to “Custom Fields 1″.

<?php
$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″.

<?php
/* 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);
      sanitize_post($postdata,&quot;db&quot;);
      wp_update_post($postdata);
?>

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.

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

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.

9. Changing the Query Posts plugin

Now to this is where it gets a bit ugly. I may 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):

/wp-content/plugins/query-posts/query-posts.php

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="http://www.tripwiremagazine.com/wp-content/themes/[theme name]/images/[add image]" />Submit</a>
<a href="http://[your domain]/category/user-news/feed">
<img src="http://www.tripwiremagazine.com/wp-content/themes/[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="http://www.tripwiremagazine.com/submit-user-link"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/add.png" />Submit</a><a href="http://www.tripwiremagazine.com/user-links"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/link-page.png" />More Links</a><a href="http://www.tripwiremagazine.com/category/user-news/feed"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/ico-rss.gif" />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 class="post-title entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>
    <p class="byline">
      <?php printf( __('<span class="text">By</span> %1$s <span class="text">on</span> %2$s', 'query-posts'), '<span class="author vcard"><a class="url fn n" href="' . get_author_posts_url( get_the_author_ID() ) . '" title="' . get_the_author() . '">' . get_the_author() . '</a></span>', '<abbr class="published" 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 class="separator">|</span> <span class="edit">', '</span> ' ); ?>
    </p>
    -->
    <?php if ( $display == 'the_content' ) : ?>

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

    <?php else : ?>

    <div class="entry-summary">
      <?php the_excerpt(); ?>
    </div>

    <?php endif; ?>
    <!-- comment this part out to leave out post meta in user link presentation
    <p class="entry-meta">
      <span class="categories"><span class="text"><?php _e('Posted in', 'query-posts'); ?></span> <?php the_category( ', ' ); ?></span>
      <?php the_tags( '<span class="tags"> <span class="separator">|</span> <span class="text">' . __('Tagged', 'query-posts') . '</span> ', ', ', '</span>' ); ?>
      <?php if ( comments_open() ) : ?><span class="separator">|</span><?php endif; ?> <?php comments_popup_link( __('Leave a response', 'query-posts'), __('1 Response', 'query-posts'), __('% Responses', 'query-posts'), 'comments-link', false ); ?>
    </p>
    -->
  </div>
  <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 feedburner.com. 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.

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

{ 91 comments… read them below or add one }

reklama July 23, 2013 at 4:51 pm

Everyone loves it when folks get together and share thoughts.
Great blog, keep it up!

Reply

Sven June 11, 2013 at 2:47 pm

Exceptional post however I was wondering if you could write a litte
more on this subject? I’d be very grateful if you could elaborate a little bit more. Bless you!

Reply

zarzadzanie trescia May 17, 2013 at 2:35 pm

Way cool! Some very valid points! I appreciate you writing this article and also
the rest of the website is also very good.

Reply

custom publishing February 6, 2013 at 5:21 pm

Hi everyone, it’s my first pay a visit at this web page, and article is actually fruitful in favor of me, keep up posting these articles or reviews.

Reply

annesofie February 7, 2013 at 9:22 am

Welcome to the blog – hope you will like our articles :)
Kind regards,
Sofie

Reply

Trista January 23, 2013 at 9:26 pm

Hello! Do you use Twitter? I’d like to follow you if that would be ok. I’m
undoubtedly enjoying your blog and look forward to new
updates.

Reply

annesofie January 24, 2013 at 8:24 am

Hi Trista, glad to hear you enjoy the blog. You can follow us on Twitter @tripwiremag where we post lost of interesting articles every day.
Look forward to seeing you on Twitter as well :)

Kind regards,
Sofie

Reply

cerca casa November 2, 2012 at 2:10 pm

In case you are novice trader, you should begin off with just one one sort of expense.

Opt for an individual residence sort which you would take pleasure
in beginning from and simply pay attention to it.
It is actually to your advantage to keep focused on a single kind and do your best,
instead of distribute on your own too thin and simply do
typical at several purchases.

Reply

background for facebook page October 16, 2012 at 6:21 pm

Hurrah! In the end I got a blog from where Ӏ know how to truly takе valuable information concerning my stuԁy
and knoωledge.

Reply

sam March 9, 2011 at 9:06 am

hi ….. i want users to add links to post … i mean if i published a post … i want users to add link to dat particular post …not like if dey submit link …a new post is created.. plz help me how to do dat?
thnxx

Reply

Why Country Sucks December 30, 2010 at 4:23 pm

hey tripwireteam, thanks for your link. that was very useful! TDO miniforms has not been updated in a long time and I fear upgrading wordpress because of this. I do not want to lose its functionality.

Reply

wczasy August 30, 2010 at 11:03 am

Super zapomnialem dopisac ze jestescie extra

Reply

qyu August 30, 2010 at 11:02 am

Bardzo dobra strona polecam ka?demu THX :)

Reply

tripwire team August 30, 2010 at 10:49 pm

he he I don’t understand one single word here…..sorry ;)

Reply

Craig Borok July 31, 2010 at 9:09 am

Thanks for great post, and i will bookmark this post, have a good day!!!

Reply

mysuperwoofer July 19, 2010 at 5:50 pm

Link Building is one of the most significant aspect of the off page optimization process and is a major determinant of the popularity of your site. For search engines, back links or links pointing to your website indicate that you are ‘hot’ in the online marketplace.

Reply

Stevo April 21, 2010 at 3:51 pm

I’m stuck on step 9, all I did was paste the code and then publish it. But then my whole site gave me an error. I’m using Fresh News theme from Woothemes. How do I do this?

Reply

tripwire team April 21, 2010 at 7:23 pm
Chris April 1, 2010 at 7:06 pm

Hi – awesome tutorial, thanks. I am curious as to how to setup each user submitted post/link with it’s own page, like they do at WD here: http://www.webdesign-ne.ws/2010/04/01/ajax-ed-todo-list-with-php-mysql-jquery/?utm_source=twitterfeed&utm_medium=twitter&utm_campaign=Feed%3A+webdesign-news+%28Webdesign+News%29&utm_content=Twitter

Any suggestions?

Reply

adegustiann March 30, 2010 at 11:21 am

thanks for the information.. i like this post..:)

Reply

Simran March 28, 2010 at 8:25 am

Hey I’m not able to find “Append to Post Content 1?

Can you pls help me out ?

Reply

Jason Keith March 26, 2010 at 4:43 pm

Theme Name: Law Firm Theme

Theme Description:
This is a simple, but professional Wordpress theme for use by lawyers, attorneys, law firms and other legal industry companies and organizations.

The theme features blue colors and a right sidebar for navigation. This theme is perfect for a blog or to run the website as a CMS theme.

Theme Demo | Theme Download

Reply

san March 20, 2010 at 1:06 am

@tripwire team thanks for the link, I will give that a try! I just thought I might have read something wrong the first few try and didn’t want to bother you before I gave it my best, thanks again for the fast response!

Reply

san March 19, 2010 at 11:03 pm

Hi, thanks for the tutorial on this site! I been trying to get this to work for sometime already but I keep getting stuck. I am having the same problem with another comment from above but I don’t see any thing to solve it yet. I keep getting no new link on my result instead of the title, I’ve deleted and tried so many times. I just can’t get it to work right…

http://mytrendwatch.com/submit-and-share/

Reply

tripwire team March 20, 2010 at 12:13 am

@san, I’m really sorry that you tried more than once and didn’t contact me for help. Please take a look at this newer post covering same subject but in more details.
http://www.tripwiremagazine.com/2009/12/build-an-awesome-community-news-feature-for-your-wordpress-blog.html

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 26 trackbacks }

Previous post:

Next post:


Web Analytics