If you want to use sub domains for your wordpress mu blogs you are going to need to add a DNS wild card to get it to work. Thankfully if your host provides cpanle there’s a really easy way to do this. Here’s a screencast showing you how.

Using tags in Shopify to create nested navigation is a great  way to help customers find products but once they’ve browsed to the tag page you need to let your customers  know what they’re looking at. A collection has the following property for this : -

{{ product.title }}

That works well for collections but tags are slightly different firstly a tag doesn’t have a title so you can’t have{{ tag.title }}. Tags are attributes of products and collections but if you use {{ collection.tags }} you are going to get a list of all the tags associated with the collection, which is not what we want. The function to use is : -

{{ current_tags }}

And voila this will output the current tag which you can use as a title by wrapping it in some <h2> tags or what ever you want. Nice and simple when you know how.

Shopify doesn’t have categories so to speak, but it does have collections and tag and you can combine them to make powerful and intuitive product navigation.

<ul class="collections"> {% for collection in collections %}
{% if collection.handle != 'frontpage' %}
<li><h3><a href="{{ collection.url }}" title="{{ collection.title }}">{{ collection.title }}</a></h3>
<ul class="tags"> {% for tag in collection.all_tags %}
<li><a href="{{ collection.url }}/{{ tag | handleize }}" title="{{ tag | escape }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>


The above code will create a product navigation of all your collections and all the tags within the appropriate collection. The third line of code is use to exclude collection such as the frontpage collection which isn’t really appropriate in your product navigation.

Embed flash videos in your WordPress mu blog

Ok, so it wasn’t all bad. I quickly found out why the embed tags are strip when you save a post, they poses a security risk because it gives users access to your file system, which is something you don’t want in a typical mu setup where you don’t know who your users are. I also quickly found a solution, the wordpress video plugin. This gives users a real simple way to embed flash content from about 50 popular video sites including youtube, last.fm and Yahoo! Video. You can see all the the site they support on there instructions page. So this plugin helped a lot but I still had a couple of problems. Firstly the plugin, typically didn’t support screentoaster.com which is where I host my screencasts and secondly I don’t have a typical WordPress mu setup, I don’t have the security risk that are associated with blog hosting, I know  the owners and publishers of the blogs we host because 90% of them are me and I needed the video plugin to support flash files that I host.

The code in the video plugin is well written and so was easy to hack. The code snippets below can be copied and pasted into the wordpress video plugin, video.php file or you can paste them into you functions file in your theme folder. the screentoaster code is safe to use in all wordpress mu installations. The self-hosted code is not safe to use if you allow members of the public to host there own blogs only use it if you completely trust you bloggers.

Screentoaster function

//Screentoast Code

define("ST_WIDTH", 425); // default width

define("ST_HEIGHT", 344); // default height

define("ST_REGEXP", "/\[screentoaster ([[:print:]]+)\]/");

define("ST_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"http://www.screentoaster.com/swf/STPlayer.swf\"  codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0\"><param name=\"movie\" value=\"http://www.screentoaster.com/swf/STPlayer.swf\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function screentoaster_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = ST_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);	

	}

	return ($output);

}

function screentoaster_plugin($content)

{

	return (preg_replace_callback(ST_REGEXP, 'screentoaster_plugin_callback', $content));

}

add_filter('the_content', 'screentoaster_plugin',1);

add_filter('the_content_rss', 'screentoaster_plugin');

add_filter('comment_text', 'screentoaster_plugin');

Instructions

To embed a video hosted by screentoster use the following short code in your posts or pages

[screentoaster urlcode height width]

simply replace urlcode with the long string of letters and numbers that appears in the url of the video you want to watch. If you want too specify the size of the of the video just add the height and the width.

examples

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX ]

or

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX 300 400 ]

Self-hosted flash files

//Upload Code

define("SELF_WIDTH", 425); // default width

define("SELF_HEIGHT", 344); // default height

define("SELF_REGEXP", "/\[uploaded ([[:print:]]+)\]/");

define("SELF_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"###URL###\"  type=\"application/x-shockwave-flash\"><param name=\"movie\" value=\"###URL###\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function self_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = SELF_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);	

	}

	return ($output);

}

function self_plugin($content)

{

	return (preg_replace_callback(UPLOAD_REGEXP, 'self_plugin_callback', $content));

}

add_filter('the_content', 'self_plugin',1);

add_filter('the_content_rss', 'self_plugin');

add_filter('comment_text', 'self_plugin');

Instructions

To embed a flash object hosted on your own blog, upload the flash file in the usual way and make a note of the files URL and use the following short code in your post or page

[self fileurl height width]

simply replace fileurl with the URL of the file you upload. If you want to specify the size of the of the video just add the height and the width.

examples

[self http://wpdcmu.ambercouch.co.uk/files/2009/05/yourflashfile.fla ]

or

[self http://wpdcmu.ambercouch.co.uk/files/2009/05/yourflashfile.fla 300 400 ]

Thanks goes to Oliver Wunder for the WordPress video plugin

Here’s a step by step screencast showing you how to setup domain mapping. It’s pretty straight forward with the help of this domain mapping plugin, just remember you have to have already registered your domain so you can use it as and addon domain in cpanel and point it to you WordPress mu installation

You can see a bigger version of the screen cast at the screentoaster.com

A PHP and CSS Tutorial

Create a date badge for WordPress

Thematic is a great theme and I’ve been using it for about a month now on this blog and I love it. I’m slowly designing a child theme for it and I thought I’d share the code for the date badge I’ve create for my posts.

Because Thematic uses lots of filter-hooks it’s possible to create the badge without editing any of the template files. We can just add a filter function and some CSS.

First we need to make a copy of the thematic_post_header function. This can be found in the Thematic template folder library/extensions/filter-hooks.php and looks like this.

function thematic_postheader() {
    global $id, $post, $authordata;

    // Create $posteditlink
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
    $posteditlink = apply_filters('thematic_postheader_posteditlink',$posteditlink);

    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>n";
    } elseif (is_404()) {
        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>n";
    } else {
        $posttitle = '<h2 class="entry-title"><a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();
        $posttitle .= "</a></h2>n";
    }
    $posttitle = apply_filters('thematic_postheader_posttitle',$posttitle);

    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="author vcard">';
    $postmeta .= __('By ', 'thematic') . '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep"> | </span>';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep">|</span> ' . $posteditlink;
    }
    $postmeta .= "</div><!-- .entry-meta -->n";
    $postmeta = apply_filters('thematic_postheader_postmeta',$postmeta);

    if ($post->post_type == 'page' || is_404()) {
        $postheader = $posttitle;
    } else {
        $postheader = $posttitle . $postmeta;
    }

    echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header
}

Copy and paste this code into your child theme’s functions.php file, of course it has to go between the php open and close tags (i.e. <?php  code goes here ?>). Next we need to change the name of the function to make it our own. You only need to make a couple of changes to the first and last line like this:

The first line, change from this.

function thematic_postheader() {

to this.

function wpdc_postheader() {

and the last line, change from this.

echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header

to this.

echo apply_filters( 'wpdc_postheader', $postheader ); // Filter to override default post header

Basically I’ve just changed  ‘thematic’ to ‘wpdc’ but you can change it to anything you want, I’ve just used wpdc because it’s the initials to this blog.

Next we need to find these lines.

    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';

Cut them and move them up and past them underneath this line.

   $postmeta = '<div class="entry-meta">';

So after that, this area of code should look like this.

    $postmeta = '<div class="entry-meta">';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

We then need to change it to this.

    $postmeta = '<div class="entry-meta">';
    //$postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= '<span class="month">' . get_the_time('M') . '</span>';
    $postmeta .= '<span class="day">' . get_the_time('d') . '</span>';
    $postmeta .= '<span class="year">' . get_the_time('Y') . '</span>';
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

What we’ve done there is to comment out the ‘published’ line because we don’t need it for our date badge. Then we’ve removed the ‘get_the_time(thematic_time_display());’ and broken it up into ‘get_the_time(‘M’)’ the month, ‘get_the_time(‘d’)’ the day and ‘get_the_time(‘Y’)’ the year and we’ve wrapped it in some span tags so we can select it with some css.

Finally we need to add the actual filter which replaces the Thematic header with our header, like this.

add_filter('thematic_postheader','wpdc_postheader');

Paste that code into your functions file directly underneath your header function. All we have left to do is save function.php and add the css code to you style.css file.

.entry-date{
 border:1px solid;
 display:block;
 font-family:georgia;
 margin-bottom:10px;
 text-align:center;
 width:60px;
 float:left;
 margin:10px 15px 20px 0;
}
.entry-date span{
 display:block;
}
.entry-date .month{
 font-size:12pt;
 padding-top:3px;
 text-transform:uppercase;
}
.entry-date .year{
 background-color:#666666;
 color:#FFFFFF;
 font-size:12pt;
 line-height:1em;
 margin:10px 0 0;
 padding:3px;
}
.entry-date .day{
 font-size:24pt;
 line-height:.8em;
 font-weight:bold;
}
.post .entry-title{
  float:right;
  width:460px;
}

So That’s it all done. You can download the full code if you want and just copy and paste it into your files. You may have to adjust the css depending on what changes you’ve made to your styles already.

Get's fonts on the web

I tend to only ‘get things’ when they are explained to me in the ‘right way’. Too simple and I get bored, too complex and I switch off and try something else. The main reason I use WordPress is because a I ‘got it’ after 5 minutes. Something about the code, the documentation and the UI just seemed to be on my level and that was something that was missing in other CMS’s  I tried.

Which brings me to sIFR.  sIFR is away of replacing web fonts with practically any font you have on your PC! Sound good, well it is good but for some reason, for a long time I just didn’t get it. May be it was something to do with JavaScript, which is not one of my strong points, or the fact that sIFR changes text to a flash movie, which sound unthinkable to a web standards geek. But probably the biggest hurdle for me was the documentation, it didn’t really explain it in a way that I understood.

So for anyone who’s on a similar wave length to me, here’s my explanation of how to get sIFR to work: -

The reason you would want to use sIFR to replace text is because you can embed fonts into flash movies which aren’t universally supported on the web and the reason it is better than straight forward image replacement is that sIFR replaces text ‘on the fly’.

Take the title of this post for instance, it’s been replaced by sIFR, the font  being use is ‘Bau Super Italic’. You might not have that font on your computer but that doesn’t matter, you still see the correct font and I didn’t have to create the title in Photoshop. I just put a normal title in my WordPress post and sIFR did the rest, silently in the background.

Download the latest version of sIFR and unzip it,  There’s a whole bunch of files in there but there is really only 3  files that you need to get it to work: -

1. sifr.js
2. sifr-config.js
3. sifr.css

You also need the .swf font files but I’ll talk about them later, firstly I just want to mention the 3 file above. sifr.js is the main work horse. You don’t need to look at that file, just attach it to your html document like this: -

< script type="text/javascript" src="/sifr/sifr.js" />

The next file, sifr-config.js, basically activates your fonts, selects the html element you want to replace and styles the flash text with something that look suspiciously like CSS but isn’t. The files got a bunch of code in it already but it is just for the demo so just change it as you need.

Firstly you will need a variable so you don’t have to type the full path to your font every time you want to use it. It will look something like this: -

var bau_super = { src: 'http://www.yoursite.com/sifr/bau_super.swf' };

In the code above ‘bau_super’ is the name of your variable, it can be anything you want but it’s best to keep it the same as the name of your font file for consistency. The next part of the code is simply the path to your .swf font on the web. Now you can use your variable name instead of the full path

Next you need to activate your font.

sIFR.activate(bau_super);

That was easy. Finally we need to add the replace statement that selects the font you want to use, selects the html element you want to replace and styles the text in the flash file. The code is going to look something like this

sIFR.replace(bau_super, {
  selector: 'h3',
  css: [
        '.sIFR-root { text-align: left; font-weight: normal;}'
        ,'a { text-decoration: none; font-size:16pt;}'
        ,'a:link { color:#a00096; }'
        ,'a:hover { color:#a00096; }'
      ],
  wmode: 'transparent'
});

Basically the code above specifies bau_super (that’s your variable name) as the font you want to use, then after  ‘selector:’  it selects the element that you want to replace. In this case it’s all  h3  element but it could be any CSS selector such as a class or an id. Next, after the ‘css:’  we style the text in the flash file, it’s not really CSS but it looks and works in a very similar way but not all CSS rules are valid. The ‘.sIfr-root’ is the element you selected but If  element in your web page contain a link inside, you’ll need to style that next, this happens in the next 3 lines of the code and again you are going to use the faux CSS rules. The only other thing to mention in the above code is – wmode: ‘transparent’ – , if you’ve used flash before you’ll recognize wmode, basically it puts the flash movie on a transparent background. I believe you can also use background:transparent in the css statements on the sIFR-root, which may be preferable because some browsers don’t support wmode.

finally there is sifr.css this is just a normal CSS file that hides your original text and styles the flash object, not the text inside the flash file. You’ll need to attach it to you html document like this: -

<link media="all" type="text/css" href="sifr/sifr.css" rel="stylesheet">

So that’s JavaScript, CSS and HTML taken care of, now we just need our font. If you have Adobe  Flash installed on your computer you can simply open sifr.fla, which is in the flash folder. Once opened you’ll see a blank movie clip on the stage, double click the movie clip and you’ll see some text appear, simply delete the text and type a single letter in the movie clip, it doesn’t matter what the letter is, the important thing is that you change the text to the font you want to use. If you want to use font variants then you will need to type another character and click the bold or italicize button. Once you have a single character for each of the font variants you want to use, click file and export the movie clip. The resulting .swf file is your font, this is what you need to upload and specify in the variable you created in the sifr-config.js file. If you don’t have flash on your pc you can download a whole bunch of sIFR font , for free at isarie.com

Well that’s an introduction to sIFR. I’ve read a couple of articles this week one about font replacement at sitepoint.com and one at the A List Apart about web fonts both are definatly well worth a read.

Quick Solution
(Chimp feeder has stopped Working)

Another Solution (Yahoo Pipes still Works well)

Simple and Working Solution (Feed Stitch)

I’ve been using facebook for a relatively short period of time but straight away I liked the the idea of being able to post articles from my blog on my facebook wall, automatically. This can be achieved easily with facebook notes, the only problem is facebook only allows you to link one RSS feed to your notes. At the moment I post articles on ambercouch.co.uk, in the news section and on wordpress-design.co.uk and I want both to appear on my facebook wall. I spent sometime looking for a facebook app that would do this but nothing really fitted the bill so I did a Google search for “Multiple RSS Feeds on your Facebook Profile” and I found some convoluted ways to do this using yahoo pipes, here’s an 8 minute video explaining how to connect multiple RSS using yahoo pipes but it seemed like to much effort for me, for something that should be simple. I haven’t used pipes before and I didn’t want to spend time looking into it. Then I stumbled across Chimpfeedr and ‘CHOMP!’ the problem was solved. Just enter the RSS feeds you want to combine click the ‘chomp chomp!’ button and your done.

Step by step this is what I did:-

What you need: -

1. More than 1 RSS feed that you want put on your facebook wall eg. a couple of blogs
2. A facebook account
3. The facebook notes application ( which i think is installed by default)

What to do:-

1. Go to www.chimpfeedr.com
2. Paste the URL of your first RSS feed into the box
3. Click the “+Add Feed” button
4. Repeat the first 2 steps for all your feeds
5. Click the ‘Chomp Chomp!’ button
6. You should then get a pop up box asking you to  ‘Name Your Mix’, Just type in a name and click the ‘Start mixing button’
7. You’ll now go to a page that says ‘Your mix can now be accessed at:’ followed by the URL of your feed. Copy the is URL. Keep it safe because there’s no way of retrieving it for Chimpfeedr.
8. Go to www.facebook.com and logo in
9. Click on your profile
10. Underneath the ‘whats on your mind’  box click the settings button
11. Click Blog/RSS
12. Paste the URL your chimpfeedr URL in the ‘Public URL’ flield and click the ‘Import’ button

There you go, Multiple RSS feeds on your facebook wall the easy way.