The Right Way To Build WordPress As A Community News
Spread it!
WordPress is getting popular now and everyone is switching to use WordPress because we can build anything with WordPress: WordPress as a magazine, WordPress as a bulletin board, Video site ….. Today, I would like to put all my love for WordPress into this tutorial to explain how to build WordPress as a Community News, … but in a right way.
In WordPress, the popular plugin for us to build community news submission is FV Community News which is being used on a lot of blog pages. This plugin is really useful to add related articles from other blogs to your sidebar. Adding them manually takes lots of time we don’t have. However, FV Community News stores submissions in another table in database. That’s the problem now for someone want to build a community website where everyone can submit their news to. You can check some design community news website such as: webdesign-ne.ws, design-newz.com, scriptandstyle.com… or check my second website at whofreelance.com. They and I are not using FV Community News to handle users submissions. The plugin on these websites is TDO Mini Forms because TDO Mini Form help users submit their posts as WordPress posts.
1. Setting up your TDO Mini Form.
First, very simple, download this plugin in zip format and extract the files to a subdirectory, called tdo-mini-forms, of your plugin directory. i.e. /path_to_wordpress/wp-content/plugins/tdo-mini-forms. Then, go to plugin menu in WordPress Admin and active it. Make sure you then configure it via the main TDOMF menu in the Wordpress Administration backend.
I would like to forward you a link to Tutorial Video for TDO Mini Forms! . The video is pretty good too as it shows you how to create a submission form and an edit form.
And after you know how to use the TDO Mini Form, create a submit page with the form as below:
Create new page item in Wordpress Admin and name its title as “News Submission”. In my case on whofreelance.com, the permalink for this page is http://whofreelance.com/news-submission/. After that, type something about the the copyright or something like the rules for submission. Don’t forget to implement the form to this page by put this code below:
[tdomf_form1]
And this is what you get:
Now, at this step, you already done for the community website that publish users’s news submissions. No more step required for doing like all of the community design news websites I referred at the beginning of this post.
If you have not only one website or blog, and you want to display these submissions on another websites, the best way is fetching rss feed from it. However, the problem is you cannot get the direct urls to original posts because we save the users’s post urls as post meta tags. B default, post meta tags were not included in the feed. You might have a little confusing because css-tricks.com is fetching the news from scriptandstyle, or you can see I’m doing the same with AEXT.NET which are fetching users’s submission on whofreelance.com. That’s why you need to go to next step.
2. Modify the feed of the submissions.
Each post when submitted to your WordPress will appear on your feed, right? Someone will say: “Hey, it’s easy, I have the feed here, I can fetch rss and display the submissions on other websites”. The answer is “Yes, you can”. However, you can just only fetch the post title, post url or anything is belong to the article submitted except post meta tags. Refer to the first image above, I highlighted the post_url meta tags because it will be the most important part of community news.
ScriptandStyle published a post explains how to Add Custom Values To Your WordPress RSS Feed. That would be a good solution for you to put post meta tags to the feed, right? This hack will work. However, you will realize that everything (your changes) will be lost when you update WordPress.
Here is better solution. In your WordPress Admin, create another page. What’s the heck this page for? For your feed. Because you will lose your changes when you update WordPress if you hack into feed-atom.php file. So, why don’t you create your own rss file and put it into your template folder, and create a new page in WordPress Admin with the content is the content of rss file? Everything will be fine if you update WordPress or not.
Simple as I did, in your theme directory, create new file name it “communty-feed.php” or something you like (just keep it in secret), then copy all the content of feed-atom.php in wp-includes folder and paste into your new file you have just created.
Important: Insert these code at the head of this file.
<?php
/*
Template Name: Community Feed
*/
$numposts = 10;
$posts = query_posts('showposts='.$numposts);
Without query the posts and number of posts to display, the content of your new feed file will be empty and only the title of page will appear in the feed.
Set the Template Name on the head will help WordPress recognise the file, so that you can create new page in Wordpress admin with the template is this page. Furthermore, add the direct url to your feed by put these code within the entry tag.
<entry>
<author>
<name><?php the_author() ?></name>
<?php $author_url = get_the_author_meta('url'); if ( !empty($author_url) ) : ?>
<uri><?php the_author_meta('url')?></uri>
<?php endif; ?>
</author>
<!-- this is what we add -->
<directurl><?php echo get_post_meta($post->ID,'post_url',true); ?></directurl>
<title type="<?php html_type_rss(); ?>"><![CDATA[<?php the_title_rss() ?>]]></title>
To set this page as page template, following this image:
And now, you are fine with the feed, you will not see the post meta tags in any feed readers, but the feed still work like original feed.
Fetching feed on other websites
All the feed have the same basic structure. Each feed has its children tags, and in this case, our feed is:
We will fetch only the title, published date, and the link to original post of each item. In your functions.php file, create new function to fetch all the feed items. Remember that the total number of items will be fetched is 10 because we have limited the number of post displayed in our feed is 10 as above. Refer to the image right above, using simplexml_load_file, your function will look like:
function getFeed($feed_url) {
$xml = simplexml_load_file($feed_url);
echo "<ul>";
foreach($xml->entry as $entry) {
echo "<li>";
echo "<span class='post-date'>Posted: ".date( "F j, Y", strtotime($entry->published) )."</span>";
echo "<h3><a title='Permanent Link to ".$entry->title."' rel='nofollow' href='".$entry->directurl."'>".$entry->title."</a></h3>";
echo "</li>";
}
echo "</ul>";
}
In your sidebar, use this code to display the feed.
<?php getFeed("http://link-to-your-feed/"); ?>
Your result:
The feed can be display by different codes, this code is just an simple code I would like to put it into this tutorial.
Some code you will be interesting to take a look for example:
- SimplePie Core for WordPress
- How to Read an RSS Feed With PHP – screencast
- Function Reference/fetch feed
- How to: Display any rss feed on your WordPress blog
Conclusion
You see? we can build anything from WordPress. The only problem is the better way to transform it and do it in a right way. I hope this tutorial will help you build a better web community news for news submission. I would appreciate all the comment the help the tut more completed.
48 User Comments
Trackbacks/Pingbacks
-
-
03. Jan, 2010
[...] This post was mentioned on Twitter by Lam Nguyen, Web Design News. Web Design News said: The Right Way To Build WordPress As A Community News http://bit.ly/85mCay [...]
-
-
03. Jan, 2010
[...] This post was mentioned on Twitter by Lim Hong Kiat, Don Rogers. Don Rogers said: RT @hongkiat: The Right Way To Build WordPress As A Community News http://bit.ly/4AhjOM #wordpress (via @prlamnguyen) [...]
-
-
03. Jan, 2010
Social comments and analytics for this post…
This post was mentioned on Twitter by SergioArantes: The Right Way To Build WordPress As A Community News http://bit.ly/710SIW...
-
-
04. Jan, 2010
[...] The Right Way To Build WordPress As A Community News | AEXT.NET Today, I would like to put all my love for WordPress into this tutorial to explain how to build WordPress as a Community News, … but in a right way. (tags: wordpress news ugc community plugin) [...]
-
-
04. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
04. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
04. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
05. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
07. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
07. Jan, 2010
[...] Lam Nguyen explains in an in-depth tutorial how to best create news submissions FV Community News . Go to the turorial, thanks for sharing [...]
-
-
07. Jan, 2010
The Right Way To Build WordPress As A Community News…
Using TDO Mini Form, Hacking into WordPress Feed to build WordPress as a community news site for news submission….
-
-
11. Jan, 2010
The Right Way To Build WordPress As A Community News…
Today, I would like to put all my love for WordPress into this tutorial to explain how to build WordPress as a Community News, … but in a right way…….
-
-
15. Jan, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
15. Jan, 2010
[...] The Right Way To Build WordPress As A Community – I really want to add a community news section to Inspiredology, can anyone help me with this? Let’s talk @chadmueller [...]
-
-
31. Jan, 2010
[...] The Right Way To Build WordPress as a Community News By Lam Nguyen, January 2nd, 2010 Site: AEXT [...]
-
-
07. Feb, 2010
[...] : The Right Way to Build WordPress as a Community Website Etiquetas: Contenido colaborativo, TDO Mini [...]
-
-
11. Feb, 2010
[...] The Right Way To Build WordPress as a Community News By Lam Nguyen, January 2nd, 2010 Site: AEXT [...]
-
-
08. Mar, 2010
[...] The Right Way To Build WordPress As A Community News [...]
-
-
12. Mar, 2010
[...] The Right Way To Build WordPress As A Community News [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Finally someone show us how to do it the proper way without leaving out any steps. Thanks ! Great tutorial and great instructions
Thank for your comments!
Thanks.. Got a lot of information
Thanks Lam for this great tutorial.
This is really useful. Thanks so much for sharing.
Hi,
I have been reading your blog for long time and its awesome. I have one question. I have a wordpress blog where i provide users to download free vector graphics. Every post i have to post download link. is there any way to make it more easy like giving some special value and just by entering download link download image should come.. Here is one sample http://365icon.com/icon-styles/video-games-icon-styles/nintendo-nes-icons/.
This is what i wanted! Thanks!
this is what exactly i am looking for, this is a great tuts, thanks for sharing
great tutorial, thank you so much..
I wanted to do something like this for a press release site. This should help me get something up rather quickly. Thanks!
thanks.. I think I’ll try this on http://www.seputarngawi.com, a local government’s news site
Great tutorial, although TDO was such a nightmare when I tried to set it up, I ended up using FV-Community Links instead.
thanks for good tuts, and you done as you said before. this post is featured in our new post
mind have a look 
http://su.pr/4b1EMR
Thank you guys
!
Nice and clean solution. I will be back for this later
Great job on your previous articles as well, I’ve enjoyed them~
Ive seen a lot of community news plugins for wordpress before, but never this one. Thanks for sharing.
Hey! Love this article, thank you so much! But tell me: Is there a way to put a image cover into the community posts? I mean each post with some images… like this: http://papelpop.com/postavc/ but using TDO Mini forms…
I’ll wait for your reply here! thanks a lot and keep it up with the great work
I’ve never used for the image for TDO Mini Form before, but TDO has a image upload feature that you can allow users to upload image with their submission. The best way is check the plugin hompage and document. By the way, see the video above in this article for more information and how to use the TDO Mini Form.
Thanks for your enjoying!
Thanks a lot! :]
i need a help on this | the form is created but it shows on post, i dont need this, i like to show it in the sidebar and in the submission page like designrfix.com and many other blogs. how to to that ? plz help me in this
sriganesh´s last blog ..demo run for communtiy test
@sriganesh – What you see on designrfix.com is what you see here, but designrfix link to their posts then click on original link.
If you want to see it on the sidebar, you can use WP_Query() and query the post in Community News category. If you want to display on other blogs, fetch rss is the only way you can do.
I’m sorry for late reply because I wasn’t notified when your comment posted.
Just out of curiosity, how big of a problem is spam with whofreelance.com?
No spam, it’s using Akismet and reCapcha. However, we cannot stop someone want to spam by sending stupid links.
hey lam what about my doubts ???
great article! One thing that keeps bothering me with your site thought is your tag line in your logo. “meanless name”….should be… “meaningless name”. Ha, sorry, just sounds like broken English otherwise. Other than that, great site you have here, keep up the good work!
I used TDO Mini Forms in the creation of the Community News section on Live Dev Feeds if anyone is interested they can check it out and submit there own news at this link http://ldfeeds.com/add-news
Some good points, will be trying some out on my next wordpress build
Great info and thanks for the walkthrugh. Those TDO mini forms are super handy ;0
I am looking forward to building my 1st community this way, it rocks.
Bronson´s last blog ..History of Official FIFA World Cup™ Match Ball
Lam Nguyen..
How to build the sites like http://whofreelance.com/?
Kimcool´s last blog ..Nike Sportswear Gotham Kings