How to build a News site in WordPress (that’s issue based)

Middlebury recently rebuilt their MiddleburyCampus.com news site. Their point of pain was workflow as their current news site was slow and difficult to manage. Middlebury also publishes the campus news in print every week and needed to be able to publish digital editions to match this schedule.

What did they do? They turned to WordPress. Here were their needs:

  • Publish and launch each issue every Friday
  • Feature articles on the home page
  • Access articles by department (sports, arts, opinion, etc.)
  • Run a news blog alongside the articles
  • Archive and provide easy access to past issues
  • Feature Twitter discussions and encourage article comments
  • Easily share articles and blog posts through Twitter, Facebook, RSS, email etc
  • Show off each author’s publishing history on the author’s info page
  • Let readers subscribe to the news by email

Watch the video below to see how this news site was put together to fulfill all these requests, and note this was built for less ($) than you think.

The site was designed by Middlebury and constructed by TCwebsite.com who implemented Middlebury’s design and built all the functions in WordPress using a handful of plugins. The end result is what I think is a state of the art news site.

Here is a list of all the sofware and services used to create the site:

  • WordPress publishing platform (of course)
  • IssueM plugin which turns WordPress into an issue based publisher
  • MailChimp for email subscriptions
  • GravityForms (affiliate) for contact form capture
  • JetPack plugin for social sharing
  • DISQUS for comment management
  • YARPP yet another related posts plugin for displaying related article links

Video transcript:

How do we build a state-of-the-art news site in WordPress? The best way to do this is to show you an example of one that we just launched for Middlebury College. It’s called the Middlebury Campus, found at MiddleburyCampus.com. They publish their news weekly, every Friday. What we have here on the site are two things. We have their news articles, which are driven by our IssueM plug-in, which creates a custom post type called “Articles.” That’s what you see up top, here. Then we have their blog, which is handled through a slideshow down here, called “The Campus Current.”

The navigation up top simply pulls you to articles that are in a category. There’s a “News” category. If I click on “News,” what is does is it brings up the template for the news page. The same goes for all the other categories. If I hop into “Sports,” we get the featured sports category articles for this issue.

Let’s go back to the home page. In this case, they have eight positions available that they simply check off to determine which article goes where on the home page for that particular issue.

They’re feeding Twitter conversation under “Thoughts,” and they’re feeding comments throughout the website under “Discussion.” By the way, the comments are driven through the DISQUS plug-in, which is really excellent, and you should use it.

If we go to the bottom, we have a footer, here, that’s actually loaded with functionality. I’ll take you through it really quickly. If you click the “About” link, it gives you a little blurb on what Middlebury Campus is about, but it also links you to the staff, which are the authors of the news.

What this is doing is actually pulling from the WordPress user database and it’s feeding in any articles that that particular author has written right into their profile. Of course, you can flesh this profile out quite a bit more, but, right now, the articles are coming in under each author or user.

All right, let’s go back to the bottom. If you go into “Archives,” we have the ability to go into back issues. The last three back issues are presented, October 11, October four and September 26. If I hit the “Full Archives” link, what it does is it brings me to the archives page, which brings up all the issues that have been published.

The way the plug-in works is, when a new issue goes live on the home page, the old issue automatically shows up on the archive page. In this case, they’re also adding the ability to download a PDF link. Let’s pull up Volume 111, Number 5. What is does is it brings up that issue and all the articles in that issue forward, and then you can jump into any article in a past issue.

OK. Let’s go back down to the bottom. Let’s go to “Resources.” This is a simple yet very little use function, your blogroll links that are available in your dashboard, are a great way to publish resources. The way this is set up is any links that are published in that blogroll simply show up here in the footer, and they’re calling it using it as a “Resources” section.

The “Contact” form is simply a gravity form. If you don’t use it I highly recommend it, especially since it stores all your contacts in a database right online that you have access to in case your email blows up. And then we have your social media links here. If you want to subscribe to the mailing list, the “Email Subscribe” function is handled through MailChimp, which, again, I also highly recommend.

Let’s go back up to the top and take a look. You might be wondering what these gray boxes are up top. These are advertising slots. This is a new site. They haven’t dropped in their advertising. They have an in-house ad system that they’re going to put in place here. You could simply use widgets for ads or you could use Ohio Publisher, which we like to use for advertising as well.

The search function, if you click this little search box here, you can search in this field for anything. There were some articles on the Dalai Lama. I’ll search on that. What it’s doing is it’s pulling articles and blog posts and putting them all into the search results.

Let’s jump into an article page, shall we? I’ll switch back to my normal profile here. What we have here is the layout for the article page. I mentioned the DISQUS plug-in. That plug-in allows you to do quite a lot of things. One, if there are any comments against an article the comment ticker will show up here. Right now there are zero comments on this article, but soon as somebody dumps in a comment this changes to one, second comment two, et cetera, which gives the reader an idea of what kind of discussion is going on against an article. That’s pretty neat.

If you go down to the bottom and actually leave a comment, you can log into a variety of different accounts, Facebook, Google, et cetera, to drop in your comment. Of course, that provides a spam filter for the site so they’re not getting spam comments. All the comments are still stored in WordPress. Of course, you can, and Discuss does this very nicely, leverage the discussions and feed those around the site as you’d like.

Now, share this story. We use the Jet Pack plug-in from automatic to provide all the social media and sharing links. It’s a great plug-in. It works very well. For instance, if you want to email something it’s a quick email box that pulls up. If you want to print a page, I haven’t found a plug-in that does a better job at formatting a page for print then Jet Pack does. Cancel.

Related stories, we use the yet another related post plug-in to generate the related stories for the article. Discuss does another thing, too, very nicely. At the bottom, if there are any articles that do have some discussions going, it drops them below the article or the post. So here you have five comments, here you have two comments, one comment, four comments and that brings the discussion forward very nicely too.

So this is how we put together the Middlebury Campus for Middlebury College. What we found is that you could put together really a very state of the art news site using WordPress, and a few handful of plug-ins, and build a site that can compete with the big news sites for a lot less money.