Sure, we should all take the time to check over our text before setting it in concrete but then again we’re only human.

Thanks to our tendency to rush into things I decided to go in search of a WordPress plugin that would allow people to edit the comments they leave on this site… Editable Comments by Julien Appert was what I found.

The plugin allows users to edit their own comments based on a time limit set in the admin section. Although it wasn’t entirely what I was after right out of the box, I was able to disable the plugins CSS and use my own by doing the following:

Add Code To Comments.php

Or functions.php depending on where your comments code is.

<?php if ( class_exists( 'WPEditableComments' ) ) { WPEditableComments::link('Edit'); } ?>

Remove Plugin Styling

You’ll need to add this to your functions.php file.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    wp_deregister_style( 'dialog' );
    // deregister as many stylesheets as you need...
}

Then Use These CSS Identifiers

Just work your CSS magic in your stylesheet.

.ui-dialog-titlebar { }
.ui-dialog-title { }
.ui-dialog-titlebar-close { }
.ui-dialog-titlebar a:hover { }
.ui-icon { }
#dialog.ui-dialog-content { }
#dialog_content { }
#dialog_commentform { }
#dialog_loader { }
#dialog_comment { }
#editable_comment_buttons { }
#editable_comment_buttons input { }
#editable_comment_buttons input:hover { }

In Closing

Hopefully this will be useful to those of you that would like to add this feature to your own WordPress site.

Please feel free to leave a comment below and check it out for yourself ;)

Like so many others I found Elliot’s theme invaluable, and so about 7 months ago I decided to create an HTML5 version that others would be able to use.

Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Elliot Jay Stocks, Starkers

Now with the introduction of WordPress 3.0 I’m pleased to unveil the new version of Starkers HTML5, just like the previous version this one has been based on Elliot’s Starkers, which in turn was based on the new default theme known as Twenty Ten.

So what’s new?

Thanks to WordPress 3.0 theme developers now have new APIs that allow them to easily implement custom backgrounds, headers, shortlinks, menus, post types, and taxonomies.

The Twenty Ten theme shows off all of these new features, whereas Starkers leaves the functionality but strips back the styling.

For a more comprehensive look at everything that has improved in WordPress 3.0 you can check out the 3.0 Codex page.

Final notes

Since the only way to get IE to acknowledge HTML5 elements, is to use the HTML5 shiv, Remy Sharp has put together a mini script that enables all the new elements which has been included in the theme.

For a more in-depth look into HTML5 you can check out the following websites:
HTML5 Doctor, Dive into HTML5, the WC3 working draft and the WHATWG working draft

Karl Dawson also has a similar yet slightly different HTML5 version of Starkers available on his website called Brave New World, make sure you check it out.

Any Updates?

Like with all things new (*cough* iPhone4) there’s bound to be a few things that I’ve overlooked. So if you’ve got any feedback or suggestions then please leave a comment below or contact me via email.

Download Starkers HTML5 v3.0

There are plenty of different options out there for you when it comes to making your site go sideways, firstly the horizontal way have a template that you can download and have a play with.

Chris Coyier has also come up with this solution using jQuery to create a table based layout on the fly, while Antonio Lupetti discusses this option of manually setting the width of your containing element.

How I Went Horizontal

I think I may have decided to go the road less travelled with the QCD Boards website, choosing to dynamically set the width of the containing element using jQuery.

Sure it may be considered bad mo-jo to handle page layout with JavaScript and it may not degrade as nicely as I’d like but has anyone really come across a bulletproof technique yet?

Well the idea behind this method is to come up with a set width for each post, multiply it by the number of posts you have and then include that figure in the CSS file, which in turn forces the browser to grow horizontally.

This is achieved by first setting the width of the post element in the CSS file:

.post { width: 800px; }

Then all you need to do is include this simple jQuery function:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    $function() {
        var numElements_single = $('.post').size();	
        var wrapperWidth_single = numElements_single * 800;
        var wrapperWidth = wrapperWidth_single;
    
        $('#wrapper').css( {width: wrapperWidth} );
    });
</script>

And you should end up with a layout structure similar to this:

Obviously if you want to employ this technique in your own site then you could change the values to something that better suits your needs. Also, if you require more detailed instructions on how to implement this method just let me know and I’ll do my best to help you out.

In Closing

I know that there are plenty of horizontally scrolling websites out there so if you’ve come across a different/better solution for scrolling against the grain then please leave a link in the comments.

A Helpful Tip: if you hold shift while using your mouse wheel, most horizontal websites should scroll sideways for you.

WordPress version 3.0 is nearly upon us and with it will come a new default theme known as Twenty Ten, a brand new theme that’s based on Ian Stewart’s Kirby.

Websites and WordPress have come a long way since the Kubrick theme was bundled with the core back in 2005. As sad as it may be, there comes a time when even the best designs need to be put to rest.

With the addition of drop down menus, custom header images, gallery styling, author information, more widget areas and valid HTML5 the new theme seems like a decent step in the right direction.

At this stage WordPress 3.0 is set to be released to the public in early May 2010. However, if you can’t wait till then you can go and download yourself a copy of the nightly build and have a tinker with it today.

I’m looking forward to getting my hands on the final version, stripping it back and making another theme similar to Starkers HTML5 for designers to start from.

Whether you decide to just check out the demo site or go ahead and download a copy all for yourself, feel free to let us know what you think of the new default theme in the comments.

Earlier this year I came to the realization that I say HTML or more importantly the letter H, a little differently to a lot of others out there.

My journey of self discovery started with the release of my new WordPress theme which was initially going to be called ‘Genesis: an HTML5 variant of Starkers’ but seeing as there was already a theme framework with a similar name, Elliot Jay Stocks and myself decided on ‘Starkers HTML5′ instead.

So my confusion lay in the use of ‘an HTML’ instead of ‘a HTML’. At first I thought it was a simple typo by Elliot but then it dawned on me (thanks to a little bit of Google searching) that not all people pronounce the letter H the same way I do, weird I know.

Aitch vs Haitch?

H is the eighth letter in the basic modern Latin alphabet. Its name in both British and American English is aitch, plural aitches, though it is also pronounced haitch if you’re cool like me.

There is plenty of information as to why there are two different pronunciations of the letter H but I personally like to thank the Catholics.

We conducted a survey of the television programme Wheel of Fortune over a period of some weeks, just to see how many of the participants were aitchers and how many were haitchers. The results: 40% aitched and 60% haitched… Australians from a wide variety of backgrounds are haitchers these days. – Ab(h)ominable (H)aitch, by Frederick Ludowyk

An HTML or a HTML?

The rule of thumb is that you use ‘a’ before words that start with a consonant sound and ‘an’ before words that start with a vowel sound, so depending on how you pronounce the letter H will determine how you write it.

As an Australia who’s never been on the Wheel of Fortune I say haitch instead of aitch. I understand that it’s most likely the lesser of the two alternatives but I’ve always been one to cheer for the underdog.

The reasons I have for creating this site are threefold; (1) To display a bunch of my social network feeds in the one place, (2) hopefully write some quality content and (3) eventually showcase my design portfolio.

So with that in mind, I decided to keep things pretty clean and simple on the design front. I chose not to use any large background images, instead I went with the tiled noise effect that everybody seems to be fond of at the moment.

The homepage is where the party’s at – it’s pretty much the social hub of the site. There’s live feeds to all my latest tweets, blog posts, flickr pics and albums that I’ve been rocking out to on last.fm.

Also, although I’m not officially apart of Project52, I still plan on adding content to my site on a regular basis, so while you’re here you may as well do yourself a favour and sign up to the RSS feed ;)

The Use of HTML5

The whole site has been built using the ‘Starkers HTML5′ theme as a starting point with the average post looking something like this:

<header>
    <h1>Logo</h1>
    <nav id="menu"></nav>
</header>

<section>
    <article>
		
        <h2>Page Title</h2>
        <time pubdate> </time>
			
        The article content
			
        <footer>Tags and Shortlink</footer>

        <?php comments_template(); ?>
	
    </article>
</section>

<footer> </footer>

A Little CSS3 Magic

text-shadow

body {
    text-shadow: #808080 0 1px 0;
}

webkit transitions

a:link {
    -webkit-transition-property: color;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: ease-in;
}

a:hover {
    -webkit-transition-timing-function: ease-out;
}

border-radius

.container {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

rgba background colors

.container {
    background: rgb(97,97,97);
    background: rgba(20,20,20,.1);
}

Some Javascript Love

The latest tweet on the homepage is all thanks to Remy Sharp’s step by step guide on how to add twitter to your site.

There’s a great tutorial from zurb.com on how to add the fade in/out effect on the inline form labels as seen in the search field below.

At the moment I’m currently experimenting with Typekit which allows me to choose from hundreds of different fonts for the site but I’m also interested in seeing what happens with FontDeck when it’s released.

Perishable Press has a nice post on how to create perfect pre tags which I’m using in this article. I’d like to be able to include ‘view plaintext’ and ‘copy to clipboard’ links but haven’t been able to figure them out just yet.

And the fade in/out images that I’ve used on the logo and the different icons throughout the site are based on this example and some help from Jay Hollywood.

Noteable WordPress Plugins

FlickrRSS
Last.fm Records
Get Recent Comments
Subscribe to Comments
WordPress.com Stats for the shortlinks

If you’ve got any questions on how I’ve implemented any other aspect of the site, please feel free to leave a comment.

For as long as I can remember I’ve been using Elliot Jay Stocks’ Starkers theme as a clean slate for all of my WordPress endeavours. Starkers is a godsend to designers like me who would have otherwise spent hours stripping back the code of the default WordPress theme in order to create a starting point for any new designs.

Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Default’ theme that ships with WordPress. Elliot Jay Stocks, Starkers

So when word hit regarding HTML5, it certainly got people talking and got me thinking about an idea for my next side project.

Call me experimental or maybe just impatient, but I figured why not transform Starkers into an HTML5 theme that others could use right now? And so “Starkers HTML5” was born.

Some info on HTML5

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. A lot of them are semantic replacements for common uses of the <div> and <span> elements.

As a designer you’ll have a whole bag of new elements to play with, such as <header>, <nav>, <article>, <section>, <aside>, <footer> and loads more.

For a more in-depth look into HTML5 you can check out the following websites:
HTML5 Doctor, Dive into HTML5, the WC3 working draft and the WHATWG working draft

Features remain the same

All non-semantic, presentational class names (e.g: class=“center”) have been removed; all non-semantic, presentational HTML elements (e.g: <hr />, <br />) have been removed; all unnecessary elements have been removed (e.g: <div class=“entry”> disappears entirely and <h3 class=“comments”> simply becomes <h3>).

Elements have been converted where necessary (e.g: <small> becomes <p>) and some IDs have been kept intact (such as <h3 id=“respond”>) to preserve functionality.

Browser defaults have been reset in the stylesheet thanks to Richard Clark

Final notes

Since the only way to get IE to acknowledge the new elements, is to use the HTML5 shiv, Remy Sharp has put together a mini script that enables all the new elements which has been included in the theme.

Download Starkers HTML5 and get stuck into HTML5 today.

Update: February 3rd, 2010
Thanks to a suggestion from @matthewsimo comments have now been marked up as individual articles instead of an ordered list and are nested inside the parent article.

Thanks to services such as Twitter, URL shorteners seem to be all the craze these days. Especially when it comes to trying to keep your precious characters to a minimum.

With the release of WordPress 2.9 and an update to the WordPress.com stats plugin the wp.me shortlink feature is now available to all self-hosting users of WordPress.

How to get your own shortlinks

To get shortlinks working on your own site you’ll first need to head over to WordPress.com and sign up for an account (so you can get your hands on the all powerful API key) then simply proceed to download and install the WordPress.com stats plugin.

Once you have the plugin installed you’ll see a ‘Get Shortlink’ button on the ‘Edit Post’ screen.

Displaying them on your site

If you’re like me and want to display the sexy new shortlinks on your site all you need to do is add this little piece of code within the loop of your theme.

<?php if (function_exists('get_shortlink')) { ?>
    <a href="<?php echo get_shortlink($post);?>"><?php echo get_shortlink($post); ?></a>
<?php } ?>

Keep the stats but remove the shortlinks

Now I know there are people out there who are already using plugins to create shortlinks for their content and are more than happy to continue using them. In fact they may even get a little upset that this feature has been included in the WordPress.com stats plugin.

So if that’s you and you’d like to exclude the WordPress shortlink feature but keep the stats working then just add this to the functions.php file in your theme folder.

remove_action('wp_head', 'shortlink_wp_head');

Just like a builder who builds his own house or a mechanic who builds his own car a designer who builds his own site is never finished. Even though I’m happy with the way things look at the moment I can certainly guarantee that over time improvements will be made.

Now depending on your choice of web browser, things may look a little differently from where you’re sitting (may have a few issues with the inline labels in IE). The whole site has been designed using html5 and css3 which at the time of writing have yet to be finalised and fully supported.

If you think you’ve come across any errors or just want to help me improve the site with some friendly advice then please send me an email or leave a comment below.