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.
If you look at the HTML for the news section on the right you will only see two lines of relevant code.
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.
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.