Can WordPress really do that? A case study of vierderduer.no

To ring in 2012 I’m bringing something completely different to WordCamp Victoria. If you’ve seen my live talks previously you know they are usually either neck deep in live code or conceptual presentations on theoretical ideas. This time will be different:

My talk, entitled “Can WordPress really do that? A case study of vierderduer.no” will be focussed around one of the most interesting and challenging WordPress projects I’ve ever been involved in, the building of a site called “Vi er der du er” (“We are where you are”) for Norwegian bank SpareBank1. I was brought on as an outside contractor by Netlife Research, one of the largest and most well renowned web dev houses in Norway, to make their crazy ideas and designs into a real-life site. I say crazy because this is a site that does things so far out of the ordinary even I have a hard time figuring out how we got where we are today.

What makes the site so interesting is that it uses Facebook Likes as a voting system to help raise money for organizations. The more likes an organization gets, the more money the bank gives them. And along the way the organization gets SMS messages telling them about the status of their application and how much money they have raised.

But that’s just the tip of the iceberg. This site has so many hidden features and backend customizations I’m not sure I’ll be able to cover them all in a measly one hour. But I’ll try.

The talk (which I have yet to prepare) will be a nice break from my regular stuffing-code-down-your-throat approach. I’ll talk about how the site came about, the many challenges and solutions implemented and how you can take my hard learned lessons and use them to make your custom WordPress themes more effective and easier to manage. More importantly though I’ll spend the hour helping you break free of the well established preconceptions about what WordPress can and cannot do. If you ask me there is no limit. And in this talk I’ll prove it.

So, if you haven’t already bought a ticket, head on over to the WordCamp Victoria site and grab yours. See you there!

Curious about the concept behind WordPress on Windows Azure or why I’m so excited about hosting WordPress Networks on a Microsoft platform? Look no further than the presentation above from Make Web Not War 2011.  In it I explain the premise and reasoning behind hosting WordPress Networks on Windows Azure along with some general principles around hosting large WordPress Networks. Your own private garden in the cloud? You bet.

Sadly the video doesn’t feature the slideshow presentation I created, but you can follow along in a separate window by navigating the slides on Prezi.com.

For a rundown on how to host WordPress on Azure with the new scaffolder solution which was introduced this fall, check out the full WordPress on Windows Azure: Single-Site Deployment tutorial.

Syx getting ready for our talk at Vancouver Photo Workshops.

Mark your calendars! On Thursday August 25 Syx Langemann and I are hosting a two hour encore of our hugely popular Northern Voice 2011 talk Your Blog is Boring and Your Photos Suck about photoblogging. The talk will take place at the Vancouver Photo Workshops and is 100% free of charge.

The talk was hugely popular at Northern Voice and we had people sitting on the floor and standing in the isles. If you want to join us, go register at Meetup.com or Eventbrite.com. And again, the talk is free.

Your Blog is Boring and Your Photos Suck is a two-part presentation. Part one has Syx take you through the creative process of taking a photo – everything from camera techniques and lighting to composition, colour theory and beyond. The second half picks up where Syx leaves off with me explaining how to publish your photos online in the most efficient way and get them noticed by the people of the internet.

If you’ve ever wanted to take better pictures, publish your photos online or you run a WordPress or other photo blog and wonder what you can do to make it better and more noticeable, this is the talk for you.

Because we have more time this time we’re also adding in ample time for Q&A, so bring your questions, ideas and comments and we’ll have a good old fashioned free-for-all.

So, go register at Meetup.com or Eventbrite.com and come geek out with us on Thursday!

As a side note I’m also starting a full-fledged WordPress course at Vancouver Photo Workshops in September. The course is the first of three targeting beginners. You can learn more by going to the Vancouver Photo Workshops website.

Photographer extraordinaire Syx Langemann and I decided to team up for a presentation on the fine art of photo blogging at the Northern Voice 2011 conference. Above is our slide deck for you to enjoy.

Warning: The slides contain nudity.

Think you know Open Source? Feel like your brain is overflowing with trivia about all things non-proprietary? Ready and willing to prove you are the Number One Go To Person For Anything Open Source? Then this contest is for you.

We need 4 contestants, so if you feel the call of the stage this is your time to shine.

Oh, and there will be some cool prizes courtesy of Make Web Not War and Microsoft.

Drop a line in the comments, tweet me at @mor10 or the Make Web Not War team at @webnotwar and put your name in the hat to participate!

Update: Firefox 4.0 was released on March 2nd meaning all the major browsers now have full support for HTML5 and you no longer have an excuse not to implement it.

On March 26th the IE9 / WP7 Boot Camp is coming to Vancouver, and if you attend you’ll find me presenting two of the sessions; A Lap Around Internet Explorer 9 and HTML5 and Enhancing Pinned Sites with Internet Explorer 9. I realize this kind of statement is likely to get me rolled in tar and feathers and chased out of town, but before you go looking for your pitchforks and good torch material, hear me out. There are usually reasons why people do things that don’t seem to make sense, and this is no exception. I’m making the case for Internet Explorer 9, and quite frankly so should you. Here’s why.

HTML5 is should be now

Over the last couple of years new technologies have started rolling out that will improve both the usability and effectiveness of code on the web. These technologies have been bundled into one collective term, HTML5, but actually include HTML5, CSS3, SVG and a whole pile of other forward thinking inventions. One of the major reasons why the implementation of HTML5 is so slow, apart from the fact the spec is not yet completed, is that up until March 15th, 2011 Internet Explorer, the default and primary browser for PCs, did not support any of these technologies at all. So while the other major browsers (Firefox, Chrome, Opera and Safari) were providing better and better support for these new technologies anyone using Internet Explorer was experiencing the old internet. As a result, for full cross-browser compatibility HTML5 integration was at best included as an add-on to backwards compatible code.

That was then. This is now. With IE9 finally released we are facing a new reality where HTML5, even in it’s unfinished spec, can and should be implemented as the primary code of the web with backwards compatibility as an add-on. But this can only happen if we get everyone currently using Internet Explorer to upgrade.

Stop Living in the Past

A couple of years ago I started a website called Stop Living In The Past where I encouraged all web developers to install a simple script on their site that would tell IE6 users they were running a horribly outdated piece of software and that they needed to upgrade. This was not a new idea – there are plenty of such sites out there and the majority of European newspapers had already implemented such warnings on their sites – but unlike the major IE upgrade scripts out there mine told people to upgrade to a newer version of IE, not get a new browser. My reasoning was simple: If I am to be able to implement the latest and greatest in web technologies and ensure cross-browser compatibility on the sites I build I need to know that the people that visit those sites are running browsers that support them. And since I knew a lot of people were running old and outdated versions of Internet Explorer, largely because they were unaware they had the ability to upgrade, I figured warning people and giving them an opportunity to upgrade right away was a good idea.

This pissed everyone off.

On the IE hater side people were up in arms about the fact I was telling visitors to upgrade IE, not get a different browser. Their argument was that IE, no matter what version, was pure evil, the cause of all things bad on the internet and should be knocked unconscious, bound and gagged and dropped in a deep well to be sealed forever.

On the IE lover side people were shocked that I would question the all-knowing Microsoft on the quality of their ancient browser. To them the mere notion that IE was somehow fallible was heresy.

Both sides were furious, both sides were unwavering in their beliefs and both sides seemed to completely ignore the fact that Microsoft themselves stated in no uncertain terms that they wanted nothing more than to see IE6 eradicated from the web.

In short, my site unwittingly uncovered dogmatic lunacy, on both sides. And as with science and religion, dogmatic thinking about browsers is just plain stupid.

This became comical (at least for me) when Microsoft a few weeks ago released the IE6 Countdown website on which they offer up a code to warn IE6 users they need to upgrade their browsers.

Now there are very good reasons why Microsoft can’t simply flip a switch and kill IE6 right now, most of them involving major mulit-national Asian banks, airline booking systems and other highly integrated and globally important systems, but that is no excuse for the remaining 99.9% of computers in the world not to upgrade to the latest version of the browser right now.

IE haters are (surprisingly) part of the problem

You’ve surely met them – people who treat any version of Internet Explorer like the next plague and tell people to never touch the browser, run away when they see it and preferably buy a Mac right now. These are the same people who blame Internet Explorer for everything from web standards incompliance (true), table-based layouts (partially true) and their websites not working properly (utter nonsense). What these people fail to realize or accept is that while IE6 is a horrible piece of outdated software that doesn’t work to modern standards, the newer versions have gotten progressively better to the point where today we have version 9 which not only is standards compliant but also incorporates the forward thinking new technologies of the web. It doesn’t mean you have to like it, but saying that the current version of Internet Explorer is bad is just not true.

Being dogmatic about this kind of stuff is just plain stupid. Any serious web designer or developer should be a browser agnostic. After all, you have no control over what browser your visitors choose to use and your job is to ensure a consistent experience across all devices, platforms and browsers. In short a pragmatic approach is the only way we will ever get anywhere. When it comes to browsers this means accepting that no matter what you personally think of Internet Explorer and the company behind it, millions of people use the browser every day and if they are not using the latest version, they are not experiencing the web as it should be and you as a designer and developer are forced to stick with old solutions.

The bottom line is we have to get people on track and upgrade them to IE9 en masse so that we can start using the new technologies we have been waiting for and talking about for the last several years. And even though IE is not my preferred browser I will play my part in ensuring that people upgrade and that web designers and developers know what the browser can do, how to use the advanced features that come with it and how to start implementing HTML5 right now.

The argument used to be that HTML5 was a non-starter because IE didn’t support it. Well, now it does, so let’s embrace it, get people up to speed and start building better and more functional solutions for the web.

Go berserk in the comments section.

Replace Site Title with a Linked Image

This is my number one pet peeve. When people visit a site they intuitively expect the logo or header image to be a link back to the home page, and it should be. When it’s not they (and I) get annoyed. Making your header image link back to your home page is not hard. All you have to do is wrap the header image code in a simple anchor tag that leads back to your root URL and you’re good to go. For simplicity the code looks like this:

<a title="&lt;?php get_bloginfo( 'name' ); ?&gt;" rel="home" href="&lt;?php echo home_url( '/' ); ?&gt;">
 
… the image code …
 
</a>

For a more in-depth explanation check out the tutorial Twentyten Header Image as Home Button.

Enable WordPress 3 Custom Menus

The WordPress 3 custom menu function is built into the TwentyTen theme and most newer themes, but older themes usually just have hard-coded menus. Adding WP 3 custom menus to a theme is not hard though. It requires a function call in the functions.php file and a template tag in the template file of your choice (usually header.php and/or footer.php). Here’s that code:

In functions.php:

register_nav_menus(
        array(
                'menuName' =>__('Menu Name'),
                ' primary' =>__('Primary Menu'),
                '2ndMenu' =>__('2nd Menu'),
        )
);

Where menuName is the identifying slug for WordPress and Menu Name is the actual displayed name in WordPress Admin.

To display a menu you can either call it based on the slug:

<?php 
        wp_nav_menu(array(
                'theme_location' => 'primary'
        )); 
?>

… or the name defined in the Menus admin area:

<?php 
        wp_nav_menu(array(
                 'name' => 'Menu Name'
        )); 
?>

Menus Outside the Box

Menus don’t have to be regular boring one or two word one-line elements. Because WordPress allows HTML in the Navigation Label you can add more interesting designs like we did on the 12×12 Vancouver Photo Marathon site. On this site we added a simple span tag around the text that displays under the menu heading and then used CSS to change how it displays. Sorry, no code examples – it’s just straight up CSS and out of context it makes no sense.

WordPress 3 Custom Background Images and Colours

The TwentyTen theme introduced a very cool custom background function built right into the admin interface (under Appearance -> Background). This is not a function found in TwentyTen but a core function found in WordPress. That means you can activate it in any theme. All you have to do is call it from the functions.php file:

add_custom_background();

The function injects CSS style code right into the HTML pages which means it’ll override your theme CSS file no matter what. That in turn is why it’ll work on any theme as long as you run WordPress 3.0 or higher.

Adding Featured Image (post-thumbnail) Functionality

Featured images are great, if you know how to use them. They also do way more than just displaying thumbnails (which is why I think the function should be renamed). To activate the function add the following code to your functions.php file:

add_theme_support( 'post-thumbnails' );

This will add the function to you Admin panel. To display the featured image (in the size you want) in your theme use one of the following functions:

<?php the_post_thumbnail(); ?>

Variations:

<?php the_post_thumbnail('thumbnail'); ?>
<?php the_post_thumbnail('medium'); ?>
<?php the_post_thumbnail('large'); ?>
<?php the_post_thumbnail(array(nnn,nnn)); ?>

Custom Page Templates

Custom page templates allow you to individualize the look of different pages on your site. They can be used to create custom front pages, differentiated legal pages or even custom query pages that pull in posts from multiple categories.

A custom page template is basically a regular page template with a commented out tag at the very top that looks like this:

<?php 
 
/* Template Name: Whatever */ 
 
?>

Custom Category Templates

Custom category templates can be used to create differentiated category index sections in a site. Some good examples are the Reeltime Videoworks show reel page and testimonials page and Design Schooled Kids’ press page.

A custom category template can be made in one of two ways. Either create a file with the name category-ID.php where ID is the ID number of the category or category-slug.php where slug is the slug for the category. These files will automatically become the category tempaltes for the defined categories.

Custom Header, Sidebar and Footer

You can also create custom headers, sidebars and footers sort of the same way. You make and call them the same way. For example if you want a custom header you create a new header file called header-custom.php and then call it using the standard get_header() function with a small difference:

<?php get_header('custom'); ?>

where ‘custom’ can be anything.

Better Context Links

One of the things that bug me about standard WordPress themes is that they display links to the next and previous posts in the single post view. These links don’t really provide a lot of value. Instead you should be displaying the two latest posts from the current category. So I made a small theme add-in you can dump into your theme for some better context. The add-in adds links to the two latest posts in the current category including the title, publishing date and short description. To install it download the related.php file here (right-click and choose “Save As” – it’s a straight up php file), add it to your theme directory and call it using the following code in your single.php file:

<?php get_template_part('related'); ?>

That’s all you have to do.