Web

I build beautiful websites in hand-crafted, standards-compliant XHTML, CSS and JavaScript, often using WordPress as a platform. I have excellent comprehension of the landscape and key technologies of the web, from the cloud and server operating systems through database-driven (SQL Server, MySQL) websites and server-side scripting (ASP/ASP.NET, PHP), web services and data feeds (XML, RSS, JSON) down to client-side languages, mark-up and technologies (HTML/XHTML, XML, CSS & JavaScript).

Web strategy fascinates me: I understand that a website is nothing without ongoing maintenance, updating, analysis, improvement and marketing so I always build sites optimised for user experience, search and social media. I have experience with e-commerce, APIs such as Google Maps and extensive practice with SEO/SMO.

Check out my portfolio and blog posts below. My portfolio archive is here.

Portfolio

Directline Holidays Blog

An exciting build for a household brand.

Directline Holidays Blog Directline Holidays Blog

Ciptex

A great-looking site, specified and designed from scratch.

Ciptex Ciptex

Da Costa Coaching

A simple but elegant site, designed by Joshua Vanderbroek and realised as a custom Wordpress theme.

Da Costa Coaching Da Costa Coaching

Our Solar Future

A fast-turnaround site to support the UK solar industry's campaign for increased government support for photovoltaic electricity production.

Our Solar Future Our Solar Future

The Pure Package

This site was by far and away the most challenging website I've ever built. The theme itself was medium complex, but the challenge here was to replicate a bespoke service ordering system with off-the-shelf WordPress components. Completed using Gravity Forms, PHPurchase (fixed and modified) and a lot of thinking.

The Pure Package The Pure Package

White Pepper

Designed by a top London designer and built with love for an old friend, this project was primarily about design, but does also feature a Flickr widget, custom post types and a custom menu. Check the site out to see this beautiful design in action.

White Pepper White Pepper

D3O

This site required not only pixel-perfect build, but also a very lateral approach to delivering the solution that the client needed. The solution was developed as a custom child theme for Thematic, and features Salesforce web-to-lead integration and custom post types.

D3O D3O

TSR Insight v2

Phase 2 for a valued and exciting client. This site was a particular challenge in terms of design where one pixel out of place would have ruined the design (it's even IE6 compatible!). Having been involved with the strategy and planning aspect of this build too, I was very pleased with the end result: a lightweight, content-focussed site that allows TSR Insight to generate traffic through genuinely interesting content, and then drive that traffic to their key calls to action.

TSR Insight v2 TSR Insight v2

Bags of Luxury

This was an unusual project, completed over a short timescale from brief to go-live. My client had previously commissioned a London agency to build the site for her based on design work previously done, but was very dissatisfied with both their service and quality of work. I then stripped the website's assets, took a full backup of the site, compiled a list of reasons why the website provided was not fit for purpose and then re-factored the website as a child theme for Thematic on top of WordPress.

Bags of Luxury Bags of Luxury

I love talking web development and strategy. Contact me about your project today!

web Blog Posts

24th January 2012

Customising the 'Via' in Tweet Button for AddThis WordPress Plugin

This one had me scratching my head for ages, and it was only some good investigation by @domsoar that found the answer, here: http://thenorthernedge.ca/blog/how-customize-addthis-for-your-website-or-blog-3559/.

The answer is to use a custom button and this sort of code:

 

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like"></a>

<a class="addthis_button_tweet" tw:via="YOURHANDLE" tw:related="YOURHANDLE "></a>

<a class="addthis_button_google_plusone"></a>

<a class="addthis_counter addthis_pill_style"></a>

</div>

The bit that actually fixes the 'via' reference in the Tweet is emboldened above. I had tried with the 'via' reference previously with no success, but the tw:related argument fixed it!

Hope this helps someone 🙂

 

4th November 2011

The importance of keeping WordPress (and plugins) updated

It is very important that WordPress and any plugins and themes are kept up-to-date for several reasons:

  1. Security - this is the most important reason. WordPress is a huge target for hackers and other malicious online types - being able to hack WordPress means instant access to over 50 million websites and the ability to read their secure content, insert dodgy links or do other bad things. WordPress is continually identifying and fixing security risks and holes. These fixes are released as WordPress updates. If you don't update your WordPress, you're leaving known security risks in place, which means that sooner or later your site will probably be hacked. This could have serious impact on your business, as well as costing you time, effort and money to fix.
  2. Performance - the WordPress team put a lot of time and effort into making WordPress faster and more efficient. Keeping your WordPress updated means that your site is performing as well as it can.
  3. Features -  Major releases of WordPress typically include improved functionality and tools to allow you to get more from your site.
  4. User experience - Most updates to WordPress make the content management system quicker, easier and generally nicer to use, encouraging you to interact with your site more.
  5. Future-proofing -  at some point, you're bound to want changes made to your site. Those changes might require the latest version of WordPress (for example to use a particular plugin that only works with newer versions). By updating frequently, you pick up small changes and errors that need to be attended to on an ongoing basis, keeping your site reasonably up-to-date with the core of WordPress development. If you don't update for a year or two, you're far more likely to suffer major disruption when you do, because all of those small and minor issues have become intertwined, making diagnosis and fixing harder and more time-consuming (and expensive).

These are the main reasons I can think of to keep WordPress updated, but there's also a broader, more fundamental reason. Good Housekeeping. Why use the world's leading publishing platform and then not keep it updated? It's like buying a Mercedes and not getting it serviced. So: keep your WordPress installation up-to-date. It's more than just software, it's part of your business.

3rd October 2011

Thematic Snippet: Show full content / enable $more link in archives

I can never find this incredibly useful snippet when I need it, so I'm blogging it.

If you child-theme Thematic, you'll notice that archive and search results pages only return the excerpt rather than the full content. This snippet changes that to give your archive pages the full impact:

// Make sure thematic_content is always set to full to enable the more link
function childtheme_content($content) {
	if (is_home() || is_front_page()) {
			$content = 'full';
		} elseif (is_single()) {
			$content = 'full';
		} elseif (is_tag()) {
			$content = 'full';
		} elseif (is_search()) {
			$content = 'full';
		} elseif (is_category()) {
			$content = 'full';
		} elseif (is_author()) {
			$content = 'full';
		} elseif (is_archive()) {
			$content = 'full';
		}
	return $content;
}
add_filter('thematic_content', 'childtheme_content');

Hope someone else finds this useful!

22nd July 2011

Cufón for Thematic with no plugins - improved

Since I wrote the original 'Cufon for Thematic with no plugins' post, I've learnt how to use script queueing, rather than hard-coded links. Here's the official WP page about script queueing: http://codex.wordpress.org/Function_Reference/wp_enqueue_script if you want to find out more.

Here's the improved version of that post, also featuring a little function to convert the doctype into XHTML Strict, which Cufon needs in order to observe CSS line-height declarations:

// Enqueue Cufon and Font JS files
if ( !is_admin() ) { // instruction to only load if it is not the admin area
// register scripts
wp_register_script('cufon-yui',
get_bloginfo('stylesheet_directory') . '/js/cufon-yui.js',
array('jquery'),
false,
false
);
wp_register_script('font-yourfont',
get_bloginfo('stylesheet_directory') . '/js/YourFont.font.js',
array('jquery', 'cufon-yui'),
false,
false
);
// enqueue scripts
wp_enqueue_script('cufon-yui');
wp_enqueue_script('font-yourfont');
}

// Cufon needs strict doctype for line-height
function childtheme_create_doctype($content) {
$content = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
$content .= "\n";
$content .= '<html xmlns="http://www.w3.org/1999/xhtml"';
return $content;
}
add_filter('thematic_create_doctype', 'childtheme_create_doctype');

// Add extra scripts to head
function childtheme_head() { ?>
<!-- Cufon -->
<script type="text/javascript">
Cufon.replace('h1, h2', { fontFamily: 'YourFont' });
</script>
<?php }
add_action('wp_head', 'childtheme_head');

// Load Child Theme js file, Google Analytics
function load_childtheme_js() {?>
<script type="text/javascript"> Cufon.now(); </script>
<?php }
add_action('thematic_after','load_childtheme_js');

Any comments or corrections, please shout in the comments!

22nd July 2011

I'm organising WP-Brighton!

I'm organising my first business event!

WP-Brighton - a WordPress event for everyone. Working with Michael Bailey and Paul Bunkham to organise this exciting event, which aims to bring together Brighton's digital and business communities.

I won't go on about it here, but if you want to check it out, here's the website: www.wp-brighton.org.uk

27th June 2011

Configuring WPML to work with Thematic WordPress theme

Hope this'll save someone the same painful process of Google searching leading to broken page links and out of date instructions/screenshots.

So, you've got WordPress installed, Thematic as your theme or parent theme and you've installed WPML (I'm using v2.3.2), selected your languages and options and are now in 'Theme and Plugins Localisation' in the WPML menu in the CMS.

Follow these steps:

  1. Choose 'Translate by .mo files', but don't select the 'automatically load' checkbox underneath.
  2. Save
  3. You'll see a table below with a list of translation files that the plugin is looking for with 'File not found' everywhere.
  4. Go to 'Theme Localisation' on the WPML site
  5. Download the language .mo files you want and save them to /wp-includes/languages
  6. Now that's the WordPress languages done - hopefully if you now refresh the CMS page we're on, you'll see 'File exists'. Ah, that feels good.
  7. Now for the Thematic language files.
  8. Go into thematic/library/languages and copy the .mo files you want to the root thematic folder
  9. Again, refresh the WPML settings page and BOOM! you should now see that all files exist.
  10. Wipe sweat from furrowed brow

I'm using WPML for a custom Thematic child theme, so I'll post back any further findings of interest.

17th June 2011

WordPress Function to Redirect All Incoming Domain Requests to the Primary Domain Variant

This is something that has bugged me for ages. Surely there's a way to redirect domain.com, *.domain.com, www.domain-variant.com, etc to the primary WordPress domain, www.domain.com using a WordPress function? Something that I can simply copy and paste for all my theme development without having to worry about the eventual web hosting environment or domain host.

We're assuming here that we need to do this within WordPress because:

  • The domain host doesn't provide enough web forwarding control
  • We're on shared hosting where we can't do an .htaccess redirect
  • We want to do it within WordPress for any other reason

I'm also assuming that all the domains and variants are already pointing at the correct server/virtual host.

I put a shout out to the http://www.wp-brighton.org.uk/ WordUp! mailing list to see what approaches people take. My favourite answer was from Tom Barrett, who suggested:

add_action('setup_theme', 'check_my_host');
function check_my_host(){
// Check host in _SERVER
// Find site_url
// Check protocol http/https
// String together pieces to compare with host
// Parse PATH_INFO (to deal with installs in sub directories)
// Use wp_redirect() and exit.
}

Now, I'm not as clever as Tom, so my code isn't as thorough as his, but as I don't tend to do sites that use SSL anyway, I decided to keep things simple and ignore that!

Here's my variant, totally inspired by Tom:

// Redirect all site requests to this virtual host to the siteurl address
function check_my_host() {
// Check host in $_SERVER
$incomingHost = 'http://' . $_SERVER['HTTP_HOST'];
$incomingQuery = $_SERVER['REQUEST_URI'];
// Find site_url
$primaryHost = get_bloginfo ( 'siteurl' );
$redirectTarget = $primaryHost . $incomingQuery;
// Compare incoming and primary hosts
if ( strtolower( $incomingHost !== $primaryHost ) ) {
// If they're not equal, use wp_redirect() and exit
wp_redirect( $redirectTarget, 301 ); exit;
}
}
add_action('template_redirect', 'check_my_host');

I've tested it and it seems to work solidly for redirecting both domain root and domain + query requests.

I've got no doubt this can be improved (to account for http/https protocols and various other clever checks) so please do leave comments and I'll update this function (with credits where appropriate).

22nd February 2011

CSS Cache Buster for WordPress Themes

A little while ago, I expressed my joy at being able to avoid CSS cacheing-related issues on websites that could result in poor user experience, by using the CSS Cache Buster plugin.

Unfortunately, this has stopped working for me 🙁 Not sure if it's the version of WordPress, or because I use child theming now. Either way, the demand for this fix maintained, so I've developed my own function for achieving this (leaning heavily on snippets from around the web, as always).


// Add date-modified query to stylesheet to prevent CSS caching when CSS has changed.
function wpi_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){

if (!defined('STYLESHEETPATH'))
define('STYLESHEETPATH', get_stylesheet_directory());

$csslastmodified = filemtime(STYLESHEETPATH.'/style.css');

if (!$csslastmodified == '') {
return $stylesheet_dir_uri.'/style.css?' . $csslastmodified;
} else {
return $stylesheet_dir_uri.'/style.css';
}
}
add_filter('stylesheet_uri','wpi_stylesheet_uri',10,2);

As always, very happy to to be corrected, or for this to be improved upon, but it works great for me 🙂

10th February 2011

Gravity Forms validation and jQuery watermark conflict

Using Gravity Forms for a client's website (not live yet), the design dictated that watermarks were used instead of labels.

No problem - I've used the jQuery watermark plugin before (for example on the Brandwatch site www.brandwatch.com/). Everything worked fine, until I submitted a form that failed validation. I had chosen the AJAX option for the GF form and on submission, the form validation removed the watermarks, leaving it impossible to tell which field was for what data.

Simple fix: turn AJAX off for the form - watermarks reappear. Hope this saves someone some time!

3rd February 2011

WordPress Highlight Search Terms Plugin and Cufon Conflict Fix

Whilst implementing Highlight Search Terms (HLST) plugin for a client's website that also uses Cufon font replacement, I found that whenever the HLST plugin kicked in, the Cufon'd text disappeared.

The symptom was that Cufon fonts flash up but it looks like they then go 'invisible' when the HLST JS kicks in. I guessed that the insertion of the <span class="hilite"> element breaks Cufon's ability to manipulate the DOM (or something!)?

Tried a quick fix. Whacked Cufon.refresh(); in just before the end of the jQuery document.ready function - i.e. before the last })); in both compressed and uncompressed versions of the plugin's JS file.

Cross-posted from: http://wordpress.org/support/topic/plugin-highlight-search-terms-this-plug-in-create-problem-with-cufon-font-replacement?replies=8#post-1921792

Hope this helps someone!

1st November 2010

Adding a Pause Button to jCarousel (slight fix)

I was recently asked by a client to add a pause button to the jCarousel-powered carousel on their site.

To do this, I used this post by Jeremy Mikola (thanks Jeremy). Here's his code:


$(document).ready(function(){ 
  $('#jcarousel').jcarousel({ 
    vertical: true, 
    scroll: 1, 
    auto: 5, 
    initCallback: function(jc, state) { 
      if (state == 'init') { 
        // Insert a play/pause button between the prev/next buttons 
        $('div.jcarousel-prev-vertical').after('<div class="jcarousel- 
toggle-vertical" style="display:block;"></div>');   

        /* Override the internal startAuto() method, which is called 
after 
         * animations complete, to prevent next/prev buttons from 
reactivating 
         * the timer while in the pause state. 
         */ 
        jc.startAutoOrig = jc.startAuto; 
        jc.startAuto = function() { 
          if (!jc.paused) { 
            jc.startAutoOrig(); 
          } 
        } 

        jc.pause = function() { 
          $('div.jcarousel-toggle-vertical') 
            .removeClass('jcarousel-play-vertical') 
            .addClass('jcarousel-pause-vertical'); 
          jc.paused = true; 
          jc.stopAuto(); 
        }; 

        jc.play = function() { 
          $('div.jcarousel-toggle-vertical') 
            .removeClass('jcarousel-pause-vertical') 
            .addClass('jcarousel-play-vertical'); 
          jc.paused = false; 
          jc.startAuto(); 
        }; 

        // Click event for playback toggle button, conditionally calls 
play/pause 
        $('div.jcarousel-toggle-vertical').click(function(){ 
          if (this.timer === null) { 
            jc.play(); 
          } else { 
            jc.pause(); 
          } 
        }); 
      } 

      jc.play(); 
    } 
  }); 
});

However, I had a bit of trouble with it and had to make a change, as follows:


For some reason, "this.timer === null" wasn't working for me. 

I replaced that section with: 

jQuery('div.jcarousel-toggle').click(function(){ 
        if (jc.paused) { 
                jc.play(); 
        } else { 
                jc.pause(); 
        } 
}); 

Seemed logical and seems to work... 

Hope that helps someone. 

I did try to post this as a comment on Nabble, but it's still pending, so I'm posting here for now.

12th October 2010

WP Maintenance Mode and Contact Form 7

Just a really quick post to say that I've wasted about a day trying to get these two plugins to work together and just can't do it.

An epiphany last night: just create a separate WP install with a very simple theme that shows a holding page with a contact form, then switch between the sites using Apache in order to achieve the maintenance page effect. Simple! Obviously this will only work if you:

  1. Have the ability to host more than one WP install at the same IP address
  2. Can play with Apache's vhosts.conf (or equivalent) to switch between sites
  3. Have a 'spare' URL pointing at the site which you can use whilst its in maintenance mode (and can swap the Home and SiteURL fields over in PHPMyAdmin)

I use a great little VPS so can achieve this. It's definitely not as much fun as just using WP Maintenance Mode, but it's definitely more fun than sweating over how to get it working with Contact Form 7!

So, if you're trying to get WP Maintenance Mode and Contact Form 7 to play nicely together - I wish you luck and if you achieve it, I'd love to learn how 🙂

1st September 2010

WP-Newsletter Activation Causes Wampserver to Crash

Having paid for wp-newsletter, I've just spent three hours trying to get it to activate from the WordPress admin panel. When I first tried, I simply got a 404 error page and a Microsoft Windows (I'm on Vista 32bit Ultimate using Wampserver 2.0i) notification that Apache had crashed with the following details:

Problem signature:
Problem Event Name: APPCRASH
Application Name: httpd.exe
Application Version: 2.2.11.0
Application Timestamp: 493f5d44
Fault Module Name: php_mysql.dll
Fault Module Version: 5.3.0.0
Fault Module Timestamp: 4a492311
Exception Code: c0000005
Exception Offset: 00004a2a
OS Version: 6.0.6001.2.1.0.256.1
Locale ID: 2057
Additional Information 1: c7db
Additional Information 2: ae42b9a901477bc30e02003a5e74faf8
Additional Information 3: d49a
Additional Information 4: 762910875005615186a3604064d40157

I tried everything I could find. I set the max memory limit to half a GB. I went to the latest versions of Apache, PHP and MySQL through the wampserver menu. I tried installing the new 'unofficial' wampserver release. Nothing worked and in the end I've simply had to go back to the official wampserver and I'll find a different newsletter plugin.

Anyone else having this problem? Any chance anyone has a fix?

Cheers!

19th July 2010

WordPress 3 Custom Menu Support in Thematic

More thematic child theme functions goodness 🙂

Having read the comments on this page: http://themeshaper.com/wordpress-menu-tricks/ I couldn't find a definitive copy and paste guide - looks like the HTML and PHP tags were being stripped out. So, leaning heavily on Tony L's work (thanks Tony!), here is a copy-paste-edit example. Simply add this to your Thematic child theme's functions.php file and you should find that you can then use the 'Menus' tab under WP's Appearance menu in the CMS.


// Add support for WP3 custom menus
add_theme_support( 'nav-menus' );

// Remove Thematic default menu
function remove_thematic_menu() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_menu');

// Register the custom menu with the theme
function register_custom_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
add_action( 'init', 'register_custom_menu' );

// Output the new menu to the thematic header
function childtheme_access(){
wp_nav_menu( array('primary-menu', 'menu_class' => 'sf-menu' ) );
}
add_action('thematic_header', 'childtheme_access', 4);

Any mistakes, omissions or bugs are my own and I'd love to hear your feedback in the comments. Thanks for reading 🙂

Update

George Irwin kindly sent me an improvement on the 'Output the new theme to the thematic header' function, as follows:


// Output the new 3.0 menu to the thematic header
function childtheme_access(){?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_nav_menu( array('primary-menu', 'menu_class' => 'sf-menu' ) ); ?>
</div><!-- #access -->
<?php
}
add_action('thematic_header','childtheme_access',4);

As George rightly points out, this keeps the new custom menu in line with the original as defined by Ian Stewart in the Thematic header-extensions.php file so that you don't need to change your CSS. Much better George, thanks 🙂

Update 2

Thanks to skarab and Manxstef, there's a further improvement to this code 🙂


// Output the new 3.0 menu to the thematic header
function childtheme_access(){?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_nav_menu( array('primary-menu', 'container_class' => 'menu', 'menu_class' => 'sf-menu') ); ?>
</div><!-- #access -->
<?php
}
add_action('thematic_header','childtheme_access',9);

These tweaks ensure that the custom menu is created on the page in exactly the same place and with the same DOM as the default Thematic menus. Thanks both!

29th June 2010

Easy Thematic Favicons

Continuing with my modest efforts to post some useful Thematic/WordPress snippets, here's some code to provide favicons for WordPress sites using Thematic child themes. Simply add this code to your child theme's functions.php page:


// Add favicons to the child theme
function childFavicons() { ?>
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_16x16.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_32x32.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_64x64.png" />
<?php }
add_action('wp_head','childFavicons');

Here's a variation to provide different favicons for two different versions of the same site, for example for staging and live sites:


// Add favicons to the child theme
function childFavicons() {
//detect if is live site
if (strtolower($_SERVER["HTTP_HOST"] == "www.domain.com"))
{ ?>
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_16x16.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_32x32.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/favicon_64x64.png" />
<?php } elseif (strtolower($_SERVER["HTTP_HOST"] == "stg.domain.com"))
{ ?>
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/stg_favicon_16x16.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/stg_favicon_32x32.png" />
<link rel="icon" type="image/png" href="/wp-content/themes/childtheme/images/stg_favicon_64x64.png" />
<?php }
}
add_action('wp_head','childFavicons');

Should work OK - let me know in the comments if you have any probs.

11th June 2010

Cufón for Thematic with no plugins

UPDATE: a new, improved version of this post is available here: http://www.divydovy.com/2011/07/cufon-for-thematic-with-no-plugins-improved/

I like Cufón. As long as the page loads and the JavaScript executes quickly, it's a really slick solution to using any font you want (and have a license for) on your website. I haven't really used it for body text, but I used it on the Brandwatch site for headers, and I'm currently using it for another site (to be added to the portfolio soon).

Both times I've used it, I've initially relied on plugins: WP-Cufon and All-In-One Cufon, as they've seemed the only viable options. However, I've never been able to make All-In-One Cufon work, and WP-Cufon seems really unreliable. Often it would detect my font in the /fonts/ folder, but would not then add the font as a JavaScript call to the DOM. Obviously, without that, the Cufon didn't work.

I'm still using Thematic/child themes for most of my WordPress development and I realised by looking at what the plugins did to the DOM that it wouldn't be hard to do manually. So, in the end I decided just to use my child theme's functions.php file to add the necessary JavaScript. Turns out it's not that hard. Here it is:

// Cufon
	//Load Header JS files and stylings
	function load_cufon_js() {?>
	    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon-yui.js"></script> //Loads the main Cufon JS file
	    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/vegur.font.js"></script> //Loads the font JS file
		<script type="text/javascript"> //Various arbitrary text replacement statements
			Cufon('h1#blog-title a', { hover: { color:'red' } });
			Cufon.replace('h1', { fontFamily: 'Vegur' });
			Cufon.replace('h2', { fontFamily: 'Vegur' });
		</script>
	<?php }
	add_action('wp_head','load_cufon_js'); //add the function to the head

	//Load Footer function call
	function load_cufon_call_js() {?>
	    <script type="text/javascript"> Cufon.now(); </script> //This shortens the conversion delay in IE
	<?php }
	add_action('thematic_after','load_cufon_call_js'); //Add it just before the body ends

Remember that any hover statements need to come FIRST, as described here.

Just copy and paste all that into your child theme's functions.php, then add the JS files to the right folder in your child theme.This worked straight away for me and seems simple and lightweight. No reliance on plugins that'll need to be updated (even when you can get them to work)!

If this helps, leave me a comment. It'll encourage me to post more juicy Thematic functions...

27th May 2010

Thematic: Custom Meta Descriptions without a Plugin

I'm really getting into developing child themes for Thematic. It's a really powerful theme framework.

I'll try to post some of the more interesting bits of code I write to help the Thematic community at large.

Here, I've used a nice little meta-description function from Life On Mars's WordPress SEO 101 article and turned it into a function that you can simply add to your childtheme's functions.php file:

// Add a custom meta-description
function childtheme_meta_description() { //divydovy: put the Life On Mars code in a wrapper function ?>
ID, "MetaDescription", true);
// checks to see if the custom field MetaDescription is not empty
if ($custommeta !=='') {echo $custommeta;}
// check if excerpt exists for the post and output it if it does
elseif (!empty($post->post_excerpt)) {the_excerpt();}
// if there's no custom field or excerpt output the post title
else {single_post_title('', true);}
}
// if category page output the category description
elseif (is_category()) {echo category_description();}

// if it's any other page display this generic description
else { echo 'add your generic description here';}
?>"
/>
add_action('wp_head', 'childtheme_meta_description'); //divydovy: add this function to the wp_head hook

Hey presto! A customisable meta-description facility with redundancy for your Thematic child theme 🙂

Props to Life On Mars.

14th April 2010

Cufon :hover Fix

Just a quick post. I have implemented cufon for a client's website to replace the titles with a nice new non-web-safe font.

This code worked perfectly to replace the titles with the new font.


Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });

However, the client then asked for one of the titles (which was a link within an h3) to have a hover effect to show that it was a link. Fortunately cufon now supports :hover, so I was pleased to be able to implement this without resorting to separate JavaScript.

However, for the life of me I couldn't get the hover effect to work!


Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});

I had the right selector, the right syntax, everything. Finally, as a last resort, I scrapped the original code (top code excerpt to leave just the :hover replacement). Finally, it worked. So, I simply re-added the title replacement under the link :hover replacement, as below:


Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});
Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });

Hey presto - it worked 🙂 It seems that cufon works back up your list of rules in reverse, so the h3 general replacement was overwriting the specific h3 anchor hover lines! It took me a while to work this out, so hopefully this'll help someone else.

Add a comment if you like - I'm sure the code above could be further optimised.

UPDATE

According to Rein (see comments below), cufon hover will only work on anchor (<a>) tags. I haven't tested that theory myself, but worth a note here - don't want to be the cause of lost time!

17th March 2010

WordPress XPertMailer Fails to Send to Gmail SMTP on Local WAMP Install

I can't begin to tell you how frustrating this one was.

So, local WAMP install on Vista 32bit. Using XpertMailer plugin to use Gmail as SMTP host for outgoing WordPress emails. Something I've done with no problem on my VPS.

On my local machine, I just couldn't get the XpertMailer plugin past the submission 'Loading...' dialogue.

I made sure I could telnet to smtp.gmail.com on the right ports (465/587). I tried everything. Everything! Except making sure that the Open_SSL PHP extension was enabled in WAMP. This post made me think to check: http://www.vishalkumar.in/2009/06/php-mail-using-gmail-smtp-tutorial/

As soon as I enabled it, everything worked perfectly 🙂

Posting this because I didn't find the answer using any of my initial search terms. Hope it helps someone.

3rd March 2010

iPhone, Twitter & Smugmug

I would love an app that let me use Smugmug as a Twitter photo service.

Or, an iPhone->Smugmug photo uploader that automatically posts a link to Twitter.

Posterous - I'm looking at you. Smugmug - I'm keeping a hopeful eye open.

29th January 2010

VPS: Hosting WordPress and Flat Websites Together with Apache #2

I did say...

*Disclaimer: I’m not (and don’t claim to be) an expert. This could break things, upset your granny or otherwise not do what you want. I’m happy to receive corrections or improvements – or thanks if it works for you!*

Turns out I was overcomplicating things a bit. I assumed that something in the .htaccess file was over-riding my VirtualHosts settings in httpd-vhosts.conf: hence the .htaccess modifications.

In a classic bit of carelessness, it turns out I was editing the wrong httpd-vhosts.conf file - there are two in different folders :S

So, the following steps from the first post are still valid:

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

to

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Now, edit httpd-vhosts.conf to include a VirtualHost for your domain, e.g.

#
# Use name-based virtual hosting.
#

NameVirtualHost *:80

<VirtualHost *:80>
ServerAdmin <[email protected]>
ServerName theflatdomain.com
ServerAlias *.theflatdomain.com theflatdomain.co.uk *.theflatdomain.co.uk
DocumentRoot “www/flatsites/thisflatsite/”
</VirtualHost>

But, not instead of editing the .htaccess file, we just need to make a further entry in the httpd-vhosts.conf file, ABOVE the flat site virtual host(s):

<VirtualHost _default_:80>
DocumentRoot "www/wordpress/"
</VirtualHost>

You can then simply add further VirtualHosts UNDER your default catch-all VirtualHost for each flat site you need to host. This will leave the WordPress installation to deal with any domain names that aren't explicitly declared as separated flat sites. Note that I'm using Strider's Virtual Multiblog for WordPress to host lots of different blogs/domains at once.

Sweet 🙂 Leave a comment if this was useful for you?

27th January 2010

VPS: Hosting WordPress and Flat Websites Together with Apache

UPDATE: Um. Turns out this isn't the best way to do this. See my second attempt here.

I have my own Virtual Private Server (VPS) on which I use the excellent Virtual Multiblog (d'oh - still haven't finished that post) to host multiple WordPress sites on one server. I then wanted to consolidate some other sites I'm responsible for onto this VPS and save some hosting fees. I didn't want to rewrite them as WordPress blogs though, and that left me trying to figure out how to host both types of site on one server using WAMP.

I couldn't find a tutorial to do this anywhere, so here's a go. I'm using Apache v2.2.11, and distinguishing between domain names, rather than IP addresses.

*Disclaimer: I'm not (and don't claim to be) an expert. This could break things, upset your granny or otherwise not do what you want. I'm happy to receive corrections or improvements - or thanks if it works for you!*

First, in Apache's httpd.conf, enable the VirtualHosts include by changing:

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

to

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Now, edit httpd-vhosts.conf to include a VirtualHost for your domain, e.g.

#
# Use name-based virtual hosting.
#

NameVirtualHost *:80

<VirtualHost *:80>
ServerAdmin <[email protected]>
ServerName theflatdomain.com
ServerAlias *.theflatdomain.com

15th September 2009

URL Shorteners and SEO/PageRank

Whilst browsing around on Twitter last night when I should really have been browsing the inside of my eyelids, I saw an interesting question from @euan:

Wondering if shortened url's count towards Google page rank ....

http://twitter.com/euan/status/3982135076

Now my immediate thoughts were (1) no of course they can't, because otherwise nearly every website in the world would be getting an SEO bump and that doesn't make any sense and (2) If (for example) bit.ly has a PageRank of say 7, then that PageRank would be split between millions of URLs, so it wouldn't actually be worth anything anyway.

My response:

@euan RE: shortened URLs/PageRank. Negligible effect if any. Their PR juice is spread amongst ALL outgoing links. Like PR/1,000,000

http://twitter.com/divydovy/status/3989799032

One day I WILL learn to think things through thoroughly before twittering. Then I thought some more and realised that if shortened URL links didn't confer any SEO value, the search engines would be missing a lot of the power of social media. Now, I know that search engines strive to keep their algorithms as simple as possible - i.e. they include as few exceptions and special rules as possible. So, how could they judge the value of an incoming shortened URL?

Duh - by looking at the page it comes from. Somehow, the SEO value of the link must 'bypass' the shortened URL to be conferred to the target URL. How does this usually happen with websites? A webmaster's best friend: the 301 redirect. In fact, that's exactly how all the URL shorteners I've tested so far work (bit.ly, is.gd and tinyurl - not the most comprehensive testing I know).

Try it yourself - put a shortened URL into: http://www.webconfs.com/redirect-check.php - I bet it comes back as a search engine friendly redirect.

So, in answer to @euan's original question - shortened URLs DO count towards SEO/Google PageRank, but they amount to which they do so depends entirely on the page(s) where the shortened URL is found. It's the only way it could work really.

A final aside: when I've previously used 301 redirects to confer PageRank from one domain to another, it's taken anything up to 3 months for that PageRank to have visibly transferred. I'm guessing that this is an artefact of the fact that the big G only updates PageRanks every few months, not continually. I bet that the SEO value is conferred almost immediately, both in domain redirect 301s and shortened URL 301s.

Was this all totally obvious? Am I wrong? Let me know in the comments.

29th July 2009

Seamless CSS Updates

If you run a website, sometimes you need to make changes to the (X)HTML/CSS to fix or improve your website's styling.

Sometimes these changes can be pretty drastic in terms of layout changes. Browsers commonly cache CSS files. If a visitor's browser has cached the old version of your CSS file, they may see a very ugly version of your site, applying the old stylesheet to the new markup.

There's a cunning way to make sure that visitors always see your site using the latest CSS (I guess this would work with any other cached files e.g. JavaScript too). I ran across it here: http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/ whilst in the world of wordpress.

The principle is simple. just use a query string on your CSS call - e.g.

<link href="/css/your.css?date" type="text/css" rel="stylesheet" />

Every time you update the CSS file, simply change the query string to that date. This forces any browser to download the new file, which it will cache until the next time you update your query string, or until something else makes the cache expire.

Cool trick!

26th June 2009

First Post - Installing WordPress Multiblog on WAMP

- this post is under construction! -

I've been using a wordpress.com site up until now, but I've recently got a nice VPS of my own from www.bizarc.com and I've just finished installing Virtual Multiblog for WordPress on this WAMP-configured server. These are the steps I took to get here, standing on the shoulders of giant geeks 😉

1. Install WAMP as here: http://wordpressgarage.com/good-blogging-practice/how-to-set-up-wordpress-on-a-wampserver/
2. Uninstall IIS
3. Edit root directory + dependents in Apache to the root of the wordpress folder
4. Edit datadir in C:\wamp\bin\mysql\mysql5.1.33\my.ini
5. Create new database - 'wordpress'
6. Create new user for the database
7. Follow these instructions: http://striderweb.com/wp-content/multiblog/multiblog-readme.htm
8. Set-up VHOSTS to the hostnames
9. Install MySQL Service and Start it: http://forge.mysql.com/wiki/Error2003-CantConnectToMySQLServer and http://dev.mysql.com/doc/refman/5.1/en/windows-start-service.html (C:\wamp\bin\mysql\mysql5.1.33\bin\mysqld --install)
10. It actually works.

6th May 2009

ASP.NET, RSS feeds, Validation, Misconfigured servers and Content-Length

A very frustrating problem! We've had an RSS feed available at www.lowcarboneconomy.com/GetRSS.xml for ages to syndicate our news feed. I monitor it daily using Netvibes to ensure that it's working. The other day, I created a LinkedIn and FriendFeed page for LowCarbonEconomy.com and neither would accept the RSS feed.

So, W3 validator to the rescue again. Or not. I got a 'misconfigured server' error. I couldn't find any info on this via Google, so tried a different validator. This time, I got a couple of warnings, but a valid feed result 🙂

So, to cut a long story short, I narrowed it down to some kind of HTTP Header or compression problem and asked Andre to check it out. I'll leave him to pick up the story: http://drayblog.gotdns.com/...

(SPOILER: In case his blog goes offline, it's all about IIS compression and setting a Content-Length in the header to avoid chunked compression by turning the content from dynamic into static)

3rd February 2009

Windows Live Mesh - Website Folder Sync Workaround

See this thread: http://social.microsoft.com/Forums/en-US/LiveMesh/thread/de97cae2-1ab6-481c-be9d-311dff79b8f7/?ffpr=0 for more details, but the simple solution is...

Right click the website folder, choose the customize tab, and change the icon back to a normal folder icon. That's it. Your website will still work as such, but now it will sync too 🙂

23rd January 2009

Send Email to Gmail Groups - Why no UK support?

I've read a couple of posts online about how to send email to contact groups in Gmail. Apparently this is quite possible in Australia and the US (or at least it was at some point). Why can't we do it in the UK? Don't you trust us Google?

If somone sends me a funny that I want to send on to my friends, I have to copy the message, go to my contacts, find the group, select to email them, then paste the email/attachments in and send. It would be nice to be able to click 'forward', type the group name and go.

Would love to know any quick ways to do this, or any idea from the Gmail team as to when and if this is coming to the UK?

*UPDATE 11/02/09*

W00t! It just worked for me - thanks Gmail team!

*UPDATE 09/03/09*

Gah! It's stopped working again now. I'm not sure whether I'm trying to do it differently this time, or whether they've taken support away again - I'll keep looking and post if I find anything.

*UDPATE 01/03/10*

OK - so it seems to me some kind of intermittent problem. On dodgy connections, I often find that the group send functionality isn't available. But, if I sign out and back in, it reappears. Perhaps it's a JavaScript issue. Either way, a good old sign out/in seems to be the fix.

9th January 2009

Multiple Accounts for Delicious in Firefox 3

Despite too much looking, I couldn't find a Firefox extension or combination of extensions that managed to allow me to post bookmarks to two different delicious accounts without logging in and out of the delicious website.

In the end I've gone for my work delicious account on Firefox 3 with the official delicious add-on, and Google Chrome with a bookmarklet for my personal account. Bit of a pain, but a decent workaround.

Why on earth no one has updated Firefox Complete for FF3 I don't know.

12th December 2008

Digsby Failed to Connect to Gmail

Just a quick one really. Restarted my computer after some standard Windows Update installs and since I started my computer today my Digsby won't connect to Gmail.

It had trouble connnecting to twitter too, but got there in the end.

From the Digsby forums it looks like a restart might solve the problem. I'll post back if it does.

UPDATE

Digsby announcement - it's gmail's servers apparently. Looking forward to getting the update.

UPDATE 9th Jan 09

I thought I'd updated this post :S Digsby update came out quickly, worked great - well done Digsby.

3rd December 2008

Google Sites and HTM/HTML files

I recently wrote a couple of UWA widgets that allow users to display photos from a SmugMug feed on their netvibes/iGoogle/Vista sidebar.

I was trying to find somewhere I could host the .htm widget files and was hoping to be able to use Google Sites (because I'm cheap and it's free).

Frustrated to find that after setting everything up, you can't upload .htm files to your Google Site 🙁

6th November 2008

Troublesome Opacity in IE7

So, you've worked out that IE7 isn't standards-compliant WRT the opacity property in CSS, so you've used the 'filter:alpha' method - and the opacity's still not working?

IE7 needs an element to be positioned before opacity will work. If you don't want to use positioning, apply zoom:1; to the element in CSS (both standard and :hover) and that should get it working...