To simplify the process I usually resort to a custom meta box but the technique works just as well with custom fields.

This is the first of two tutorials on this topic and here I’ll be focusing on YouTube videos and oEmbed. The next tutorial will be on self-hosted videos and VideoJS.

Auto-Embedding YouTube videos with a custom field

Consider the following scenario: You have a design that calls for videos to be embedded outside of the main content, for example by placing it above the headline. This is becoming more and more common, and provides both a better user experience and easier access to the important content in the post. The problem of course is that regular video embedding puts the video in the post body, and that’s not what we want. Enter the custom field option.

First thing first: In the post you want to present the video, create a new custom field with the name video_url and the value set to a normal YouTube video ID (the illegible part at the end of the video URL).

Now you have a custom field carrying the YouTube video value. The next step is to dump it into your theme so WordPress can display it. For this we’re going to use the built in oEmbed functionality in WordPress which when used normally lets you dump in a YouTube URL and then automagically inserts the embed code. But in our case we’re adding the URL dynamically in the theme so we are going to use the wp_oembed_get() function a function. The end result is the code you see below:

<?php
// Get the video URL and put it in the $video variable
$videoID = get_post_meta($post->ID, 'video_url', true);
// Echo the embed code via oEmbed
echo wp_oembed_get( 'http://www.youtube.com/watch?v=' . $videoID ); 
?>

The code above places the embed code dynamically generated from the YouTube URL wherever the code is placed in your theme (this of course has to go inside the loop).

Making it conditional

Normally I wrap the code above in divs to control the behavior and place the video where I want it. Because I’m neurotic about clean code I insist on always using conditionals in cases like this to avoid leaving empty divs lying around when no video was added through the custom field. With the conditional added the code gets a bit expanded, but works the same way:

<?php
// Get the video URL and put it in the $video variable
$videoID = get_post_meta($post->ID, 'video_url', true);
// Check if there is in fact a video URL
if ($videoID) {
	echo '<div class="videoContainer">';
	// Echo the embed code via oEmbed
	echo wp_oembed_get( 'http://www.youtube.com/watch?v=' . $videoID ); 
	echo '</div>';
}
?>

Now the video will display wherever you place the code on the provision a video URL was actually added with a custom field.

Getting a video thumbnail from YouTube

So far we’ve just made a fancy way of embedding videos, and it might seem a bit superfluous to do so seeing as you can just add the video right in the post body. But there’s a reason you may want to do it this way: What if you want to make an index page of all your video posts but you want to show the video thumbnail directly from YouTube instead of the video itself? To do this you need the video ID and you also need a bit of PHP magic.

The code below goes inside the loop on an index page and produces the video thumbnail wrapped in a link to the post:

<?php 
// Calls up the YouTube video thumbnail or, if no URL is provided, the featured image from WordPress
 
// Add a container and a link around the video
echo '<div class="tinyVideoThumb">';
echo '<a href="' . get_permalink() . '" title="Go to ' . the_title() . '" rel="bookmark">';
 
if ( $video_url ) { // if there is a video URL
 
	// Get the video URL from custom field
	$videoID = get_post_meta($post->ID, 'video_url', true); 
	// Query YouTube for video meta data
	$thumb_query_url = 'http://gdata.youtube.com/feeds/api/videos/' . $videoID . '?v=2&alt=jsonc';
	// Decode the json data from YouTube and put it in a readable format
	$json = json_decode(file_get_contents( $thumb_query_url ));
	// Echo out the thumbnail, give it height and weight and set the alternate description to post title
	echo '<img src="' . $json->data->thumbnail->sqDefault . '" width="60" height="45" alt="' . the_title() . '">';
	echo '</a>';
	echo '</div>';				
 
} else { // else use the standard featured image
 
	the_post_thumbnail('tinyThumb', array('alt' => $postTitle, 'title' => $postTitle)); 
 
} 
?>

The above of course only works for YouTube videos, and only if they are entered with the full URL and none of the other junk that often comes along with YouTube video URLs. You could make a strict rule to only plug in the actual YouTube video ID in the field. If so you could omit the substr() function.

For a recent project I had to parse time tags both from WordPress and from an RSS feed. After some mucking about I found what I think is the optimal solution, so to save you some time I’ve put it all together for you.

Date stamp for WordPress using the <time> tag

WordPress can output the publishing date and time in pretty much any configuration you want. For the time tag to work you need the datetime variable to show the time in a specific format that looks like this:

2012-01-30T18:55:21+08:00

That’s year, month, date, time (international) and an optional time zone reference. I’m in Vancouver, Canada so that’s GMT+8 hours.

Using the get_the_date() function in WordPress you can get this time format and any other. In this case I wanted the format “Jan. 30, 2012″.

The end result:

<time class="entry-date" datetime="<?php echo get_the_date( 'c' ); ?>" pubdate><?php echo get_the_date('M. j, Y'); ?></time>

Date stamp when parsing RSS feeds using the <time> tag

For the project I also needed to parse an RSS feed and show the details of each item in an index page. RSS feeds output the date in a standardized format, but it is rather unsightly:

2012-01-30T23:00:00+00:00

I needed to get this parsed to match the example above. To do so I used a handy PHP function provided by Handy PHP called Reformat Date. This function uses the strtotime() PHP function to reformat dates into anything you want simply and easily.

First I added the function itself to the functions.php file in my theme like this (notice I append the name of the theme at the front of the function name to avoid any future clashes should WordPress decide to bake this feature in):

// Reformat date for RSS feed
function theme_reformat_date($date, $format){
// Function written by Marcus L. Griswold (vujsa)
// Can be found at http://www.handyphp.com
// Do not remove this header!
 
    $output = date($format, strtotime($date));
    return $output;
}

Second I grabbed the RSS feed using WordPress’ native RSS import function (I’ll write about that in a separate post but it’s pretty straight forward) and then I parsed the data.

Note: In an RSS feed the time is contained in each item under the handle pubdate so to get the raw time I use $item['pubdate'].

<time class="entry-date" datetime="<?php echo theme_reformat_date($item['pubdate'], 'c'); ?>" pubdate><?php echo theme_reformat_date($item['pubdate'], 'M. j, Y'); ?></time>

Note that the date has to be reformatted twice, once for machine readable output (‘c’) and once for the human readable output (‘M. j, Y’).

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!

Want to bring more people to your website, play nice with social media and allow everyone to access your fabulous content, regardless of how they choose to do so? If so you should check out my newest course on lynda.com, Improving SEO Using Accessibility Techniques. This course grew out of a realization that though SEO and Accessibility seem to be at the opposite ends of the “stuff I code for and care about” spectrum, they are actually two peas in a pod. And they are also sharing that pod with a third pea called “Web Standards”. Or, to put it slightly less cryptically, accessibility, SEO and web standards go hand in hand … in hand. And by applying all three in your web development process you end up with sites that are not only easier to access for people who use keyboard navigation and text-to-speech browsers, but also other non-standard visitors like Google, Bing, Facebook, G+ and so on.

Check out the video above for a primer and go watch the Improving SEO Using Accessibility Techniques course on lynda.com to get your sites up to snuff and get more visitors in the process.

The video above shines a light on an important topic. It may seem like a purely lexical trick – referring to women as ‘women’ rather than ‘girls’ – but it is so much more. Considering females constitute more than half of the world population and that in the western world at least, the female work force is both better educated and more skilled than the male counterpart, referring to them in a manner that properly indicates their age and maturity is vital.

But the issue goes much deeper than that: Even though many consider womens’ lib to be a thing of the past and feminism to be dead, women are still not treated as equal to men. This manifests itself in lower wages, lower positions and lower overall value in the work force. And this is especially true in the tech sector.

Why it is so is a mystery to me, but it is likely rooted in two main predispositions:

1. Men don’t see women as equal
2. Women don’t see themselves as valuable

Both of these ideas are fatally flawed and rooted in biasses that belong in the 17th century, not 2011. And to rid ourselves of them we all need to start thinking differently about gender in the workplace.

Consider James Chartrand – famed writer for Copyblogger and other online publications. When he published the article “Why James Chartrand wears women’s underpants” in 2009 it created a furore. James announced he was actually a she and was writing under a male pseudonym to gain respect. Her (yes, it’s confusing) claim was that as a man she had an easier time finding work and was paid more than as a woman.

Panzer Feminists and women’s lib (and anti-lib) opinionators world wide went ballistic on James for a variety of reasons. That itself was not a surprise. However, there were a group of arguments coming usually from women that really stuck out to me. I like to call them the head-burried-in-the-sand arguments. They came in two varieties:

1. James is doing the women of the world a disservice by pretending to be a man. In fact, she is furthering the gender bias and worsening the situation. James should have her woMan card revoked.
2. James is delusional. There is no gender bias in tech. Her woes were caused by her inferior writing and obvious self-loathing.

Both of these claims are, in my opinion, ludicrous. James did not do women a disservice or damage womens’ lib or feminism by doing what she did. In fact, by pretending to be a man she proved beyond any doubt there is a severe gender bias in the tech world. And by going public she made it impossible to ignore. And to the claim that there is no gender bias in tech? Get real. Of course there is. And it’s worse than most other industries. Don’t believe me? Check out this piece from Redit posted some 5 months ago entitled ”I regularly hire woman for 65% to 75% of what males make“. A sobering piece of hard reality right there.

This last piece also highlights that often overlooked women devaluing themselves issue I mentioned earlier: Women, through cultural bias and lack of inbred arrogance will often sell themselves short either because they think they’re not worth more or because they think they’re not skilled enough. Men on the other hand will almost invariably oversell both their value and their skills. As a result there is an artificial gap created by honesty vs bravado. The only way to get past that dear oestrogen enriched human entities, is to start demanding what you deserve. Otherwise you’re just playing weak cards in an attempt to be well liked. And just like in poker, that won’t work if you have any plans of winning.

So what do we do now?

Inequality for women or between the sexes is nothing new. The sad thing is it continues today. So we have to do something about it. And bizarre as it may sound, it starts with the language we use. Just like you would never refer to me as a ‘boy’, you should never refer to a female over the age of 18 as a ‘girl’. She is a ‘woman’. And that goes for all you other women out there. I know  you think it’s cute to call yourselves ‘girls’, but you’re not girls, and by doing so you are selling yourselves short. Girls are females between the ages of 0 and about what… 14? 16?. Anything older than that and they are either ‘young women’ or ‘women’ proper.

Try applying this simple rule: When referring to a female, if she were a male, would you call her a “boy” or a “man”? If ‘boy’, go with ‘girl’. If ‘man’, go with ‘woman’. That’s what this linguistic differential is for: to distinguish based on age as well as gender.

Once that’s settled, let’s start talking about not referring to people based on their gender but rather their skill set. But that’s a whole different argument.

“If you’re only focusing on the next thing you’re going to learn, you’ll always feel like a student, never a dancer.”

When she said it it was part of a conversation, little more than a fleeting thought put into words. But it struck me that not only was there profound meaning and wisdom in that sentence, but there was universality. Swap out “dancer” with any other word and you see what I mean.

“She” in this case is the teacher of the Argentine Tango weekend intensive Angela and I attended this weekend. You find the wisest words to live by in the strangest places.

It may not sound like much, but this is big. As in you can make your own WordPress.com. In the cloud. With infinite scaleability and redundancy. Without managing your own server.

The Idea

As with many other WordPress developers one of my big challenges has always been hosting. You basically have two options: Host your clients independently on their respective shared hosting plans all over the web or host them on your own server. If you choose to host them on your own server you again have two options: Host them as separate WordPress installs or host them all under a WordPress Network (previously WordPress MU). By far the best option from a content management and administration point of view is the WordPress Networks option. But it came with some pretty brutal downsides: When hosting multiple sites under a WordPress Network you are basically calling one set of core files and one database from many sites at the same time. And though this is unproblematic if each of the sites get a couple of hundred visits a day it becomes a huge problem if you have say ten sites that each pull 10,000 visits an hour. Why? Because that amounts to 100,000 calls to the same core files and the same database. That kind of traffic requires a robust server and a big pipe.

The solution to this problem has been to host such networks on unreasonably large and powerful servers. You basically scale for the worst case scenario and pay for a lot of down time in between. An inefficient solution, and also a cumbersome one as these setups in most cases require constant server maintenance and upkeep. Not to mention the enormous headache of adding additional drives and servers should upscaling be necessary.

This is what the cloud was built for: Dynamic scaleability both in terms of bandwith, capacity and processing power. So the best solution for WordPress Networks must surely lie in the cloud somewhere.

There’s just one problem: The cloud is complicated. And that’s where Windows Azure comes in – at least it did for me.

I’m not a gardener

Though I consider myself proficient at web development and people have referred to me as a “WordPress Adept” I am by no means a server expert. Quite the contrary. I have only a superficial understanding of servers and server maintenance, and I have little interest in expanding my knowledge in this field. So though a cloud server would provide me with a garden in the cloud I have little interest in becoming a gardener. I just want it to work. And that’s what Windows Azure offers: A maintained garden where I could deploy my applications.

The problem of course was that Windows Azure runs a .NET framework and a SQL server, not the PHP framework and MySQL server required by WordPress runs on. What was needed was some sort of symbiosis. Which is what we’ve been working on for the last 6 months.

Make it Native

Previous attempts had been made to make WordPress run on Azure, and they did work, at least for short periods of time. The problem was that they created pseudo states within the Azure framework where the PHP application could run, but these pseudo states were not stable. What was needed was a way of making WordPress into a native Azure application. That way it would be persistent, properly scaleable, and could be managed like any other Azure application. But this had to be done without touching the core files within WordPress, otherwise future updates would become a nightmare and that would defeat the purpose of doing this in the first place.

The solution was to create a set of adjoining files that served as bridges or translators between WordPress and the foreign Azure environment. That way the administrator could swap out and upgrade core files within WordPress without breaking anything and also change the configurations of the application through the normal Azure interface. And after a lot of experimentation and tweaking it worked.

Domains for everyone

So now we had a persistent, upgradable installation of WordPress running in Network mode on Azure. The last hurdle, the one that would prove to me most challenging, was to achieve seamless domain remapping for the different network sites. Let me explain:

A WordPress Network can be set up in two ways: Sub-sites or Sub-directories. The former produces site URIs such as newsite.pinkandyellow.com while the latter produces URIs like pinkandyellow.com/newsite. The obvious problem with both is that they use the pinkandyellow.com domain as the root. Which won’t work if you intend to host other sites or client sites under your network.

Domain remapping allows you to point these sub-sites or sub-directories to a different domain, so instead of newsite.pinkandyellow.com you’d get newsite.com. This requires a WordPress plugin (of which there are several) because the remapping has to be done based on the core URL. I could go on ad nauseum about how this works but suffice it to say it only works with one of these plugins. Problem is none of these plugins worked with SQL servers. Instead they produced bizarre errors and messed everything up quite badly. For a long time. Until the lead developer Satish found a solution.

Your own personal garden in the blue cloud

The end result of all this is a simple solution that allows you to deploy WordPress Networks on Windows Azure as a native application. By doing this you can take advantage of every aspect of the cloud including scaleability, persistency, CDNs and redundancy. But most importantly you will no longer be paying for processing power and bandwidth you are not using. Because Azure is a scaleable environment your solution will breathe with traffic, expanding and contracting as visitor numbers go up and down. As a result your costs will be a true representation of actual use, not a worst case scenario approach.

There are other great benefits to this solution including the ability to remote desktop into the application itself for beta testing and quick resets should something go wrong. In fact there are more possibilities here than I am able to wrap my mind around and as we move forward with the project countless more will undoubtedly take shape.

For now the only thing that matters is that you can set up and deploy your own installation right now and give this new solution a spin for yourself.

In the coming months I’ll be posting a series of tutorials and articles on my own experiences running WordPress on Azure. The first one on how to create a single site installation went live a couple of weeks ago and will be updated as the deployment solution matures. To see a live example of WordPress running on Windows Azure you can head on over to PhotoPivot.com which currently runs on four extra small instances.

At first I thought it was a matter of removing the actions that called the plugin itself. I’ve done this in the past and it works for some plugins. I also found a code snippet here that seemed to show it working. That unfortunately was not the case. So I had to keep digging. Then I found this excellent article How to disable scripts and styles by Justin Tadlock that explained it all: I needed to de-register the scripts, not simply remove the function.

After digging through the plugin code I found the script calls and ended up with this code snippet in my functions.php file:

<?php 
 
// remove WP Geo JS/CSS from the nybank page
add_action( 'wp_print_scripts', 'vierderduer_deregister_javascript', 100 );
 
function vierderduer_deregister_javascript() {
 
	if (is_page_template('page-nybank.php')) {
 
		wp_deregister_script( 'googe_jsapi' );
		wp_deregister_script( 'jquery' );
		wp_deregister_script( 'googlemaps' );
		wp_deregister_script( 'wpgeo' );
		wp_deregister_script( 'wpgeotooltip' );
		wp_deregister_script( 'wpgeo-admin-post' );
 
	}
}
 
?>

As you can see I made the function conditional so it only kicks in when a specific page template is used. You can swap out that condition for any other condition for the same result. Bottom line is it works and now WP Geo works on every page, post and post type except pages that use the page-nybank.php template file.

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.