Wordpress Year/Month Archives

by Andy Appleton

This post falls squarely in the "probably only useful to me" category, but I wanted to archive it somewhere for posterity.

I have recently built a new site for Matizmo using Wordpres as the CMS. The blog section of the site includes sidebar links to monthly archives with a post count, arranged by year — much like a table of contents.

Matizmo Archives Screengrab

This was remarkably easy to mock up in Photoshop but remarkably tricky to achieve with the wp_get_archives() function. You might have noticed that I did manage it — this is how:

<?php
$year_prev = null;
$months = $wpdb->get_results(	"SELECT DISTINCT MONTH( post_date ) AS month ,
								YEAR( post_date ) AS year,
								COUNT( id ) as post_count FROM $wpdb->posts
								WHERE post_status = 'publish' and post_date <= now( )
								and post_type = 'post'
								GROUP BY month , year
								ORDER BY post_date DESC");
foreach($months as $month) :
	$year_current = $month->year;
	if ($year_current != $year_prev){
		if ($year_prev != null){?>
		</ul>
		<?php } ?>
	<h3><?php echo $month->year; ?></h3>
	<ul class="archive-list">
	<?php } ?>
	<li>
		<a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
			<span class="archive-month"><?php echo date("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span>
			<span class="archive-count"><?php echo $month->post_count; ?></span>
		</a>
	</li>
<?php $year_prev = $year_current;
endforeach; ?>
</ul>

This will output HTML in the following format:

<h3>2010</h3> 
<ul class="archive-list"> 
	<li><a href="http://www.matizmo.co.uk/2010/10"><span class="archive-month">October</span><span class="archive-count">5</span></a></li> 
	<li><a href="http://www.matizmo.co.uk/2010/09"><span class="archive-month">September</span><span class="archive-count">3</span></a></li> 
	<li><a href="http://www.matizmo.co.uk/2010/08"><span class="archive-month">August</span><span class="archive-count">6</span></a></li> 
	<li><a href="http://www.matizmo.co.uk/2010/07"><span class="archive-month">July</span><span class="archive-count">6</span></a></li> 
</ul>

A bit of CSS to get everything aligned and apply a bit of League Gothic to the year heading:

h3				{ clear:left; font:normal normal 5.14em LeagueGothicRegular; margin:0; float:left; width:100px;}
.archive-list			{ margin:2px 0 3em 0; padding:5px 0 0 0; left:0; float:right; width:100px;}
.archive-list a			{ border-bottom:1px dotted #918f8f; color:#4c4c4c; display:block; width:100px; line-height:1; height:14px;}
.archive-list li		{ height:21px; list-style:none; margin:0 0 2px 0;}
.archive-list span		{ background:#fdfdfd; padding:0 2px 1px 0;}
.archive-list .archive-month	{ float:left;}
.archive-list .archive-count	{ float:right;}

Not quite as straightforward as <?php wp_get_archives(); ?>, but it gets the job done. If you have a less offensively inelegant solution to this I'd love to hear it!

Edit: Thanks to Keith in the comments for pointing out that the PHP code above totally didn't work... It should be fixed now!

Less Framework

by Andy Appleton

A responsive CSS framework with media queries for desktop, iPad and mobile size viewports.

Only provides the bare minimum to get started with no confusing class names to learn and apply.

http://lessframework.com/ →

O2's New iPhone Tarrifs

by Andy Appleton

O2 have announced their iPhone 4 tariffs, and have introduced a 500MB data cap on the cheaper contracts.

The Web Standardistas perfectly describe my feelings about this:

Sadly, the removal of the unlimited data option creates an increased awareness of data usage as far as the average Joe is concerned, leading, in many cases, to a hesitation in using this data, as it’s counting towards a - now defined - total allowance. This, in turn, only increases the guilt and diminishes the enjoyment you might get out of using your shiny, new iDevice.

It isn’t that I expect to ever use 500MB in a month – my last month’s usage was about 70MB – I just don’t want to be worrying about it each time I open Safari or Mail.

I have been with O2 since way before the iPhone was released, but it looks like they will be losing me (and no doubt others like me) for a seemingly petty and avoidable reason.

(NB. No other carriers have announced their iPhone 4 plans in the UK, but Vodafone currently offer 1GB of data on their 18 Month, £35 plan and Orange offer 750MB.)

Transmit 4

by Andy Appleton

</p>Panic have just released an update to the hands-down best Mac FTP client ever made.</p>

It's a $19 (~£12) upgrade if you have a version 3 license and is worth every penny. (Nice new product page too).

http://panic.com/transmit/ →

Helvetireader Tweaked

by Andy Appleton

I love John Hicks’ Helvetireader user script for Google Reader.

And I love it even more now that I have discovered that Google Reader includes a keyboard short cut to hide the feeds sidebar. Tapping ‘u’ hides the sidebar and gives a more unobstructed reading view.

Generally I will hide the sidebar and just tap ‘space’ to flick through all new feed items. The only problem with this is that Helvetireader hides the feed title at the top of the viewing pane, making it difficult to keep track of which site’s feed you are reading.

I have put together a really small modification to the script to add the feed title back in.

Applying this tweak is pretty straightforward:

  1. Navigate to the Google Chrome extension folder \Documents and Settings\[user]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\ (for Windows) and find the Helvetireader folder. For me this is called /gkkhfigkhgiogdobmgcdnankjlbhilaa/ I'm not sure if this ID is unique to my computer (and will be different for you) or to the extension (and will be the same for you).
  2. Once you're in the correct folder, open the file script.js in your favourite text editor, and add the following to the bottom:
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = 'http://appleton.me/helvetireader/helvetireader_mods.css';
    cssNode.media = 'screen';
    cssNode.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(cssNode);
  3. Clear your browser cache and re-launch it and you're done! This stylesheet is served from my own domain, appleton.me, but it is also hosted on Google Code, so you're free to fork it and add your own edits if you feel so inclined.