Look a new browser, with lots of surprise new features. Seriously surprising. Innovative? Are we talking about Microsoft? Indeed we are. I couldn’t help but have a look to see what interesting new things IE8 might bring, or indeed cock up, around WordPress.

First up, this site works quite nicely in IE8 and so I’m looking forward to changing nothing. Some of my other sites are not so lucky. My new theme for example has a problem or two in the navigation area, but not series ones and so they should be easy to fix.

The new admin theme for 2.5 seems mostly OK, although the visual editor wasn’t working for me and there is a distinct lack of opacity where you would expect it.

I won’t run through all the new features in IE8, I expect you will be sick of hearing about them by this time tomorrow, however, there is one that seemed to have possibilities: Web Slices.

The idea of slices is that web sites can pre-define area of content that are liable to be updated often, using Microformats. IE picks up on this and offers the users the option to subscribe to that section of the page.

IE will check back periodically so If and when that part of the page is updated, the user sees the icon go bold and can open a window containing just that section of webpage. They then have the option of opening the page proper, or deleting the subscription. Easy.

My feeling was that this could be useful for tracking a comment thread. In most cases I think this is likely to be a fairly short term activity that is better suited to this than RSS, although the format does provide the site owner to define an optional alternative tracking technique such as an RSS feed.

To test the idea I have created a slice for the last comment on each post. Anyone using the IE8 beta can subscribe to the last comment on any post, so if a new comment is added the slice will change. When IE next checks it will find it has updated.

The screenshot shows my last comment open while I a reading the BBC website.

So how is it done? Well, it is really easy. It uses a Microformat, an example is below:

<div class="hslice" id="blogtitle-comments-post-<?php echo $post->ID; ?>">
    <span class="entry-title" style="display:none;">Comments on <?php the_title(); ?></span>
    <div class="entry-content">
        <?php comment_text(); ?>
    </div>
</div>

The drawback to this is that only the last comment will actually show up. This means that it is possible to miss comments if more than one happens between refreshes.

It will probably be better in the long run to come up with a comment section that simply reports how many comments there have been in the last 15 minutes or something along those lines. At the moment it does not appear as though the preview box has a scrollbar so some messing around with body classes and alternative styles will probably be needed if you wanted to provide your entire comment stream as a single slice.

There is a PDF document for download from Microsoft that explains the methods in more detail. If you going to have a play with this concept you will need it.

This is the eighth post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

A great design tip that I’ve always tried to keep in mind is to be prepared to just drop any feature if it turns out that it doesn’t work. That is what I have done a little with the navigation. The theme will still have navigation, of course, it just won’t be quite so complex.

In my original design mock-up, shown on the right, I designed the layout to be several layers deep. So a user could select categories, and within that see a list of the last five posts in that category, and by hovering over each post see the excerpt from the post.

This idea was a good one. It allows users to browse the site using the navigation without hitting an intermediate page and so sounds like it adds a lot.

Having built it, however, I realised that it just doesn’t work with the minimalist theme.

In practice the additional levels of drop down cluttered up the white space and killed the feel that I am seeking. The extra utility actually reduced the good aspects of the theme so, in this case, less is really more. I hope you agree.

This is a screenshot of the navigation in action.

To create the menu I have used a an unordered list, centred using auto margins. Each list item has a top border equal to 21px, but set in EMs), padding of the same amount, and a span within the list item of the size dimensions to create the right hand border. The colour of the top border is determined by the class: static, or dynamic.

The large size of the top border prevents me from using a side border on the list item; when the text is resized upwards the borders would taper off and lose the structure.

The drop down functionality uses the Son of Suckerfish technique.

The interesting part of this navigation scheme; however is how it fits into WordPress.

I wanted to provide a quick and easy way of controlling the static pages that come at the start, and end of the menu, while allowing the dynamic options to act independently. To do this the navigation scheme uses two bookmark ( blogroll / links ) categories. Links with a category of, ‘mainmenu’ appear before the dynamic menus, and links with the category of ‘mainmenu-after’ appear after it.

The PHP that adds these in is included below:

/* Retrieve bookmarks and display them with an appropriate class */
$bookmarks = get_bookmarks('category_name=mainmenu&orderby=rating');
 
foreach($bookmarks as $bookmark){
	echo '<li class="static">';
	echo '<a href="'.$bookmark->link_url.'" title="'.$bookmark->link_description.'">';
	echo $bookmark->link_name;
	echo '</a>';
	echo '</li>';
}

Note that in the original query I have specified that link rating should control the order. This means that both the inclusion of static links, and the order they appear in is dealt with by existing WordPress admin features, requiring no alteration of the theme files.

For the most part the dynamic links are handled using the standard theme tags, wp_get_archives, and wp_list_categories; however, I couldn’t find a similar function for tags and so I have used the get_tags function and output each using a foreach loop.

$display_tags = get_tags('orderby=count&order=DESC&limit=10');
 
foreach ($display_tags as $display_tag){
 
	$tag_link_title = sprintf( _('Posts tagged with %s' , 'Fun with Minimalism') , $display_tag->name );
 
	echo '<li>';
	echo '<a href="'.get_tag_link($display_tag->term_id).'" title="'.$tag_link_title.'">';
        echo $display_tag->name;
        echo '</a>';
	echo '</li>';
 
}

Note that for the moment I have restricted this list to the 10 most used tags. I don’t know how many tags the average WordPress blog is likely to have but I think the user is likely to be overwhelmed with any more than ten. Even that seems like a fairly long list when displayed in a drop down menu.

At the time of writing I haven’t produced the post specific list; however, it will operate in exactly the same way,albeit with a few less borders applied.

I have replaced the tag code with the internationalised version, for the sake of consistency with the end theme.

Social Networks are pretty big business at the moment, but one thing about them always bugged me. I have two separate networks, one, my offline peeps, guys I went to school with or worked with over the years, that tend to be using Facebook, and the other group my online-peeps, who I tend to interact with via my blog. The first network is already there, but I wanted a way to make use of the second

What I really wanted was a distributed network that let me use my blog to connect to others, so I planned on writing a plugin to do just that.

My plugin would use WordPress as a base. It would follow the regulatory of linking out, of people commenting on my blog and use these to determine whether a site was part of my network.

Once it decided a site was part of my network it would use WordPress’s XML-RPC implementation to contact that blog and ask to be friends and the blog owner would need to agree. I am assuming that the other blog is also using the plugin.

With the blogs connected (automated passwords having been exchanged) we could now share data, all automatically, about who the author is, perhaps a Twitter-esque networking messaging thing, and possibly share search results of common searches to help define what is going on in the network.

The feature I really wanted was one where each blog would share its own network. This would not be displayed to anyone but where several sites have a site in their network, which you did not have in yours, you would receive recommendations.

Finally, you could automate your blogroll, assuming you have one.

I think this sounds pretty interesting and I was all set to start on it when I found out about the DISo project. Their website describes it like this:

DiSo (dee • zoh) is an umbrella project for a group of open source implementations of these distributed social networking concepts. or as Chris puts it: “to build a social network with its skin inside out”.

It is all I wanted and more.

There is a video of Chris Messina explaining the DISo Project at Read Write Web. I suggest you take a look.

This is the seventh post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

Although I already explained how the layout would work, in the initial design process that I wrote about last week, I didn’t do any calculations at that time; it was purely visual. This post will explain the process behind creating the major structures, and the basics of the type that the theme will use.

As this theme doesn’t really include any graphics there isn’t really any excuse for restricting the users’ ability to resize the text. I want to keep the structure intact, but allow resizing, and so I have opted for an elastic layout.

Normally I would set the body font-size to the final size I wanted (equivalent to 12px) but to make the layout simpler I have set the body size to the equivalent of 10px: 62.5%; the background colour is used to illustrate the layout and will be removed.

body
{
	font-size:62.5%;
	background-color:#fff;
	font-family:verdana, arial, helvertical, sans-serif;
}

With a font-size of 10px the rest of the layout should be relatively straightforward. The basic HTML looks like this (I have omitted the actual content for simplicity:

<div id="container">
    <ul id="sitewide_navigation">
    ...
    </ul>
    <div id="content">
        <h1>Page Title</h1>
        <ul id="post-navigation">
        ...
        </ul>
        <p>Content</p>
        <div id="comments>
        ...
        </div>
        <p>Content</p>
        <blockquote>
        ...
        </blockquote>
        <p>Content</p>
    </div>
</div>

The important point to note about this layout is that, with the exception of the site wide navigation, all of the content is contained within the content div and then moved out using negative margins. This means that for elements such as blockquotes and the comments that I can wrap the text around it while having it appear mostly as a separate column.

The width of the content and the width of the columns, placed side-by-side are roughly the dimensions of the golden ratio: 55em (550px) X 0.618 = 34em (340px). The comments are then indented, also using the golden ratio: 34em (340px) X 0.618 = 21em (210px).

The same dimensions are used for the blockquote on the left hand side, and will be used for other items such as figures.

The key CSS that achieves these is set out below:

#container
{
	width:97em;
	margin:0 auto;
	background-color:#ccc;
}
 
#content
{
	width:55em;
	margin:4.2em 21em 0 21em;
	background-color:#efefef;
}
 
#comments
{
	width:30em;
	padding:0 1em;
	margin:0 1em;
	float:right;
	margin-right:-21em;
	background-color:#ccccff;
}
 
#content blockquote
{
	width:30em;
	padding:0 1em;
	margin:0 1em;
	float:left;
	margin-left:-21em;
	clear:left;
	background-color:#ffefef;
}

As I have sized everything using EMs the whole layout will scale as the font-size is increased

The type I have used follows a fairly standard baseline rhythm. The font is 1.2em (12px) Grey Verdana with a line height of 1.75em (21px) and margins the same height. The comment text is 1.1em (11px) but follows the same line height to ensure that the text remains consistent throughout.

The header is 2.8em (28px) Ameretto with a line height of 1.5em (42px), and the text beneath it, which will become the post navigation is 1em (10px) with the standard 2.1em (21px) line height and a bottom margin of 0.75em (21px).

The image on the right shows how the comment text, despite being a different font size is perfectly lined up with the content text. This helps to create a uniformity on the page that reinforces the minimalist concept.

When seen without the lines the text is very easy to read, uniform, and resizeable.

This isn’t absolutely final. I am still tweaking things as I go; for example, I am not sure I like the line space between the name of each commenter and their comment, but in general this is how it will appear.