A WordPress Index Page Template

January 7, 2009 by Samantha Halfon · 14 Comments
Filed under: Computing, Internet 

wordpress_logoAfter a few weeks of writing content for our blog, quite a bit of information has accumulated. Sometimes, we find it necessary to look at our pasts posts in order to get a piece of information. Browsing back in time has become more and more tedious as we have more content archived. On the very same day, Derrick and I both had the idea that we needed to create an Index page allowing instant access to any posts.

I worked on a template page for WordPress over the weekend in order to display such an index. Our main goal was to simply display a list of posts by date, but as I started to work on this I realized it could be a nice feature to also offer a list grouped by categories and tags. Since the list of posts was bound to grow, I decided to make each section title collapsable while still offering a view all link to display every posts title if so desired.

wwa_archives

Before going ahead with the code, I did a quick Google search to see if anyone had worked on this before. What I found was an impressive graphical view of a blog past developped by Vladimir Prevolac based on the default archive page of Tumblr called Snazzy Archives. I really liked Vladimir’s work and decided to integrate that option as well  in my Index page.

snazzy_archives

As I started working on this, I decided that I would make my work more valuable by making it generic enough to be used by other people. To do so, I knew that I had to make sure of the following:

  1. Use WordPress core functions
  2. Not rely on the pre existence of the Snazzy Archives plugin as not everyone would want to use i
  3. Test my index page with at least three different WordPress installations

It was the first time I tried to extend WordPress, and after a quick Google search I found this function reference page on the WordPress Codex. The documentation, though still being worked on by the community, is easy to read and understand and makes it quite enjoyable to work with the WordPress code. In the end, the only function I had to write was the one returning me the list of months during which at least one blog post had been written. Still, I found the code I needed within WordPress, I just had to adapt it to what I was doing.

Like I said, I really liked Snazzy and wanted to add it to our blog but my Index Template Page couldn’t rely on it to be installed as it might be temporarely disabled or some other user might not want to show it. I simply tested the existance of the plugin before placing the link to the Snazzy Archives in the page.

In order to test, I tried my template on three installations of WordPress. Two running WordPress 2.6 and one running 2.7. I also ran some tests enabling or not the permalinks options as it changes the url handling quite a bit. Regarding this question of URL, I decided not to use Ajax as WordPress front-end doesn’t use it, I decied to make my Index page match the rest of the blog engine on that aspect as well.

All in all, after a few hours of coding and experimenting with WordPress, I had completed my own template page. So far it has worked fine for us, but feel free to report any bug or share your comments with us on this page.

Live demo:

You can see the result in action by visiting our archive page. You can also see it running on my other blog World Gone Web.

Download:

You can download the template here.

Installation process:

  1. Download the template
  2. Upload the template archives.php to your theme directory (i.e. <wordpress>/wp-content/themes/<theme_name>
  3. Make sure your script file can be read
  4. Adapt the page structure of the template to match your blog theme structure (i.e. copy the beginning and th end of your blog theme index.php page like the content div and sidebar declaration)
  5. Enter your wordpress administration and write a new page
  6. Enter the title you wish to see in your menu (be carefull, “index” might generate problems, choose another name)
  7. Do not enter any content
  8. Find the page template menu and select “Index Page”
  9. Publish this new page
  10. You’re  done, go to your blog and test it

If you wish to use Snazzy Archives as well, you also need to:

  1. Download SnazzyArchives and upload it to your plugin directory
  2. Go to your administration page and enable the plugin
  3. Refresh your blog archive page, the link to snazzy archives should appear

We hope you like it!

First time on World Wide Angle, you may want to subscribe to our RSS feed. Thanks for visiting!

Streaming FLV videos #3

December 29, 2008 by Samantha Halfon · Leave a Comment
Filed under: Computing, Internet 

I’ve described in an earlier post how we play videos on our site using the JW Media Player. We created a playlist that begins with our animated logo then shows some of our latest videos. The logo animation will play automatically when the page loads. The user is then presented a menu allowing him to watch the videos.

wwa_playlist

Jw Media Player on WWA

This menu only displays a sample of our videos, which means that some of our movies are not available from our main page. This is something I intend to fix shortly. The real limitation of this system was that we could not provide a direct link to any of these videos to people who might want to easily play a given movie or link to it from their own website. To handle direct links, I wrote a PHP script which generates the playlist.xml file used by the jw media player. If a movie is requested via the url, it will be the first one in the playlist and will automatically play, the other videos of the default playlist are added to the playlist.

If you wish to create a similar feature for your site, here are the main steps of the procedure :

  • Create your PHP script file (for example playlistgenerator.php).
  • In this file, declare an array that will contain the information about each video of the playlist. Here is an example of the array structure  I used:
$videos = array (
0 => array (
“default” => 1,
“name” => “wwa logo”,
“title” => “World Wide Angle animation logo”,
“url” => “world_wide_angle.flv”,
“thumbnail” => “thumbnails/world_wide_angle.jpg”,
“author” => “World Wide Angle”,
“date” => “”,
“description” => “World Wide Angle animation logo”,
“link” => “”
),
1 => array (
“default” => 1,
“name” => “second_video_title”,
“title” => “Title of the second video”,
“url” => “second_video.flv”,
“thumbnail” => “thumbnails/second_video.jpg”,
“author” => “World Wide Angle”,
“date” => “September 20, 2008″,
“description” => “description of the second video”,
“link” => “http://www.alinkaboutthissecondvideo.com”
)
);

I use the default attribute (value is 1 or 0) to define whether the video should be added to the playlist at all times, or only when it has been requested. If you want all your videos to always be in the playlist, set this attribute to 1.

Next, copy (and feel free to adapt) the following code in your script:

function appendVideoToXml($video, &$xml) {
$xml .= ‘<item>’;
$xml .= ‘<title>’.$video["title"].’</title>’;
$xml .= ‘<media:content url=”‘.$video["url"].’” type=”video/flv” start=”00:00″ />’;
$xml .= ‘<media:thumbnail url=”‘.$video["thumbnail"].’” />’;
$xml .= ‘<author>’.$video["author"].’</author>’;
$xml .= ‘<description>’.$video["description"].’</description>’;
$xml .= ‘<link>’.$video["link"].’</link>’;
$xml .= ‘</item>’;
}$xmlheader = ‘<rss version=”2.0″ xmlns:media=”http://search.yahoo.com/mrss/”><channel><title>World Wide Angle video gallery</title><link>http://www.wwangle.com</link>’;
$xmlfooter .= ‘</channel></rss>’;
$selected = $_GET["title"];
$xmlselected = “”;
$xmldefault = “”;
foreach ($videos as $video) {
if ($video["name"] == $selected) {
appendVideoToXml($video, $xmlselected);
} else {
if ($video["default"] == 1)
appendVideoToXml($video, $xmldefault);
}
}
$xmlcontent = $xmlheader . $xmlselected . $xmldefault . $xmlfooter;
file_put_contents(“jwmediaplayer/playlist_custom.xml”, $xmlcontent);

As it is, the script expects the video name to be passed as the “title” parameter.

  • The script being PHP, you need to be sure that your server can run PHP, if so, upload the script to your server
  • In your main page, call the script in order to generate the playlist
include(“jwmediaplayer/playlistgenerator.php”);
  • Finally, modify the page containing the player in order to use the generated playlist instead of the hard coded one
function initMediaPlayer() {
var so = new SWFObject(‘jwmediaplayer/player.swf’,'mpl’,’560′,’420′,’9′);
so.addParam(‘flashvars’,'&file=jwmediaplayer/playlist_custom.xml&playlistsize=280&autostart=true’);
so.write(‘player’);
}

That’s it, it worked for us and allowed us to give artists a direct link to their videos that they could add on their own website: to see the scrcipt in action, you can follow the links below to discover the videos about Michael Johnston an Nassim Al Amin vernissages we filmed last month at chezGrace.

Hope this will help some of you out there.