I
often find myself needing a simple blog type news feed for the various
sites I'm creating. In the past when I was still doing my primary development on .NET I rolled my own solution using a SQL
database to hold the entries. At first I'd just put the data into the database directly but of course over time I wanted to be able
to edit and add new entries from a web interface. So I found myself incorporating TinyMCE and pretty soon I was writing a whole management interface just for editing news posts. I knew it was time to stop myself before completely falling prey to NIH syndrome.
Lately
I've been doing a fair amount of small projects using Wordpress and it
seemed that I could just use its CMS to hold my news posts.
I'd now have a repository for my posts as well as the ability to edit
them.
In order to use the post data in my
other sites I wanted to export my posts in JSON format. I've written a fair amount of JSON exporting code server side so I knew this wouldn't be a problem. Luckily I took a look in the Wordpress plugin repository and there's already a pretty nice plugin that dumps any post in
JSON.
If you want to do this you first need to download and install the latest version
of Wordpress. This should take you all of 5 minutes unless you've never done
it before in which case it might take you 30 minutes if you need to install LAMP or WAMP if you're on Windows. You can also do it in about 5 minutes on an Amazon EC2 micro instance by following this excellent guide.
You will also need to download the JSON plugin and copy it to the plugins directory. You can now create
new posts in Wordpress and pull the data out in JSON.
I'm using this for my Madtown yoga website. If you look at the site you will see a list of news posts on the right that are fed by the Wordpress blog.
The
simple blog interface is here, where you can see a series of posts in the
default wp skin. If you look here you can see the exact same posts rendered out as JSON data. Since I'm only using the blog as a data repository I
didn't bother messing with the Wordpress UI.
If you look at the HTML for the news section on the right you will only see two lines of relevant code.
<script src="/Scripts/wpnews.js" type="text/javascript"></script>
<div id="news-widget-container"></div>
In this case the JavaScript checks to see if JQuery v1.6.4 is currently loaded on the page and if not it loads it. It then reads the data from my Wordpress site as JSON into an array and then adds the posts as a series of divs to the HTML DOM . The actual formatting of the data is handled by a separate CSS file.
If you want to have some fun make a simple text document on your desktop that looks like this and save it as test.html.
<html>
<script src="http://madtownyoga.com/Scripts/wpnews.js" type="text/javascript"></script>
<div id="news-widget-container"></div>
</html>
If you then open this test.html file in your browser you should see an unformatted list of my news posts in the document you just created. If you add in the line
<link href="http://madtownyoga.com/Content/Site.css" rel="stylesheet" type="text/css" />
you will then see it with my formatting applied to the divs. What's nice about widgets, besides the simplicity of using them, is the ability to their look on your page. In this case add simple formatting to the classes FrontPageNewsTitle and FrontPageNewsContent and you can make my news feed look however you like on your web page.If you take a look at the source code for wpnews.js it should be pretty straight forward to understand what I'm doing. The majority of the code at the bottom is simply used to get JQuery loaded up if it isn't already used on the page.
