header image

When using the ‘Childishly Simple’ theme for WordPress there’s the option to add your own CSS (cascading stylesheets).

Go to the ‘Childishly Simple’ options page (‘Appearance > Childishly Simple options’).

Click the ‘plus’ sign on the left of ‘Add CSS, javascript or shortcode in the <head> </head>’ (the top options box)

The box opens out. You can put your CSS in any of the three boxes, but the top box is the most usual place.


You can read about internal stylesheets at http://www.w3schools.com/css/css_howto.asp

Or buy Elizabeth Castro’s ‘HTML, XHTML and CSS’.

CSS allows you to style your website – change the colors, change the border widths, change the fonts, make things larger or smaller, move them around the page etc.


Essentially you put all your CSS rules inside these two tags:


<style type=”text/css”>



An example rule might look something like this:


div.wrapper {

border:1px solid red;



This would create a red border round your website.

The end result would be:



<style type=”text/css”>
div.wrapper {
border:1px solid red;



You can put as many rules as you want inbetween the start tag and the end tag.



A post has the date on it and can be included in a multiple-post website page. It’s useful for blog posts.

A Page (capital ‘P’) doesn’t have the date, is standalone and isn’t included in a multiple-post website page. It’s useful for creating a ‘Contact’ or ‘About’ website page for example.

When you create a Page there are different Page templates: ‘Default Template’, ‘Page noindex, nofollow’ (asking search engines not to include it in their index), ‘Page without sidebars’, ‘Page without sidebars or a title’, ‘Page without sidebars, title or a space at the top’, ‘Page without a title’, ‘Page with date’, ‘Woocommerce with sidebars’, ‘Woocommerce without sidebars’ and ‘Landing Page’.

When writing a Page look for a small white box with the title ‘Template’ in the right hand side and click on the little drop down arrow on the right of that box to see the available templates.

The landing page is a completely blank page – the title won’t show, only the content (images, text etc.) that you enter. The landing page doesn’t have the header image that the rest of the site has.

If you use Woocommerce there are two Woocommerce Page templates. These are ONLY for two specific pages in the shopping cart, the ‘Terms and conditions’ page and the ‘Change Password’ page and they allow you to style the ‘Terms and conditions’ and ‘Change Password’ pages to fit in with the rest of the shopping cart. All other Woocommerce shopping cart pages are output either by woocommerce.php or page.php and by default have sidebars. If you don’t want sidebars in your Woocommerce shopping cart then paste the contents of woocommerce-without-sidebars.php into woocommerce.php and for those shopping cart pages that still have sidebars use the page template ‘Page without sidebrs’.

You can find both woocommerce.php and woocommerce-without-sidebars.php by going to Appearance / Editor

Note that all I’ve done is follow some very simple WooCommerce instructions on how to include WooCommerce in a theme. The actual functioning of WooCommerce is nothing to do with me. All WooCommerce features should work.

Click on Appearance / Header in the left sidebar of your admin page. Find ‘Choose an image from your computer’ and click ‘Browse’. Search your computer for the image that you want and then click ‘Upload’. You’ll then be taken to a new page which will show you your image.

On top of this image is a white box. You can ‘crop’ the image, meaning select the bit that you want to publish on your website, by pressing your left mouse button as you ‘drag’ one of the little white squares on each corner. You can also drag the whole box around and position it over your image by putting your mouse in the middle of the white box as you press the left mouse button.

If you don’t need to crop your image click ‘Skip cropping, publish as is’.

Once you’ve uploaded more than one image you also get an option to randomly display those images.

Make any changes that you want to a child theme and those changes won’t be affected by future updates to the parent (‘Childishly Simple’ or ‘Childishly Simple Premium’) theme.

If you’ve got several different color schemes and you want to switch between them you also need to paste those saved color schemes into a child theme otherwise those color schemes (‘Color scheme 01’, ‘Color scheme 02’, ‘Color scheme 03’ etc.) will be overwritten on every update.

The colors that you’ve chosen on the Childishly Simple options page are NOT overwritten on updates.

Here are two bare-bones child themes for the Childishly Simple Free or Premium theme.

Simply download the appropriate zip file to your computer then from within the Admin Screen (Appearance > Themes >Install Themes) install and activate it. As it’s technically a new theme you’ll need to reinstall your header (Appearance > Header), reset your menus (which should only take a second – Appearance > Menus > Manage Locations) and change some of the settings in your widgets. You shouldn’t notice any other differences. All your previously saved options (Appearance > Childishly Simple Options) should still be there.


For the free Childishly Simple theme – FREE childishly simple child


For the Childishly Simple Premium child theme – FREE Childishly Simple Premium child

And you can see the features and buy the Premium theme here 🙂



Advanced users: how a child theme works

Every file in the parent theme is automatically cross-referenced with the child theme. If the child theme has that same file then the child theme wins i.e. the child theme file is used instead of the parent theme. There are only two exceptions:


style.css – the child theme style.css is blank. But what it does do is import the parent theme’s style.css. If you want to add your own unique styles then add them to the bottom of the child theme’s style.css


Here’s how it looks:


Start child theme stylesheet
Very first thing parent theme stylesheet is automically imported
Add your own unique styles
End child theme stylesheet



functions.php – functions.php of the child theme is loaded first and then the functions.php of the parent theme is loaded as well.

A favicon is a small image that shows up in your web browser (FireFox, InternetExplorer, Chrome, Opera etc.) at the top of a web page. Your browser opens up web pages in ‘tabs’ and this is where the image appears.

How do you add a favicon to the ‘Childishly Simple’ theme?

If possible use a plugin. If you change your theme then using a plugin means that your favicon will still remain since plugins are independent of themes.

To find a plugin search using something similar to ‘WordPress Favicon Plugin’.

The following are some links to various Favicon Plugins:


http://wordpress.org/plugins/all-in-one-favicon/ Lots of downloads, good reviews



http://wordpress.org/plugins/easy-set-favicon/ Very simple but does its job


Usually you’re required to create and upload an image in ‘ico’ format named ‘favicon.ico’. You can try uploading images with different names and formats but Internet Explorer can’t cope so it’s best to stick with that.

How do you make such an image? In the past I’ve used tools.dynamicdrive.com/favicon quite successfully. But you can also search for ‘Favicon Generator’ and you’ll get plenty of other results. The idea is that you create a simple image (of any size) and the generator will ‘crunch’ it down to the right dimensions and give it the appropriate file format.

Of course, plugins can wither away (they don’t get maintained and eventually become obsolete) so if you DO want to upload the image manually and write in the appropriate code and not be dependant on a plugin then here’s how to do it:


Make your favicon.ico image. Log into WordPress and in the left sidebar click on ‘Media > Add New’. Upload your file. Once it’s uploaded you should see a thumbnail image and the word ‘Edit’. Click on ‘Edit’. You should now see a page which will have, probably in the top right corner, the phrase ‘File URL’. Copy the url beneath it (the address on your website where the image is which will look something like this: http://www.somebrilliantwebsite.com/wp-content/uploads/favicon.ico)

Now you have to get the following somewhere within the <head> </head> of every web page.

Go the Childishly Simple options page and paste the following into the very top options box (‘Add CSS,  javascript or shortcode in the head’) changing the url to the one that you’ve just found.


<link rel=”shortcut icon” href=”http://www.mybrilliantsite.com/wp-content/uploads/favicon.ico” type=”image/x-icon” />


And that’s it. Go to your web page and see if your favicon appears. If it doesn’t, refresh the page or try another browser and see if that works.


Nerd note: the official approved way can be found at http://www.w3.org/2005/10/howto-favicon using

<head profile=”http://www.w3.org/2005/10/profile”>

WordPress seems to prefer:

<head profile=”http://gmpg.org/xfn/11“>

However, ignoring the approved way seems to work well.

Currently there are three main factors for smaller sites to get decent rankings for decent keywords (words that users type into the search engines). They are links, usage data and on-page factors.


When people link to you that counts as a vote of confidence in your site. It’s a bit more complicated than that but not much. The more links the better, though you don’t want links from dodgy sites.

Links are now like money – no one wants to link to anyone else because it makes the other person ‘richer’. And as with money there are many scammy ways of getting you to part with your links.

At the unsubtle end are ‘reciprocal’ links – you link to them and in return they link to you, only one year later you check their site and find that their links are now all ‘nofollow’ed  meaning that they have little value. At the subtler end some nice boy or girl will flatter you as a local expert in some subject and ask you to write an article for their website, knowing that you will then point it out to your friends who will link to it. Watch out also for comment spam – read comments carefully before approving them. They often go along the lines of, ‘Your blog is brilliant, I’ve learnt so much from you’ but the website address they leave points to some commercial site. In the WordPress Admin area in Settings / Discussion make sure that ‘Before a comment appears an administrator must always approve the comment’ is checked.

How do you get links?

The more low-brow your site and the more it fits in with the world views of a large number of people the more links it will get. Politics and gossip always do well, though you’ll be competing against a vast number of other websites doing the same thing. But if you’ve got something genuinely unique to say or you’re too far ahead of the curve then you won’t get many links because it’s a popularity contest out there. Uniqueness is meant to be good but it’s rarely popular. It’s far better to say the same old crap as everyone else but add a unique twist to it.

The days of the small Mom and Pop websites holding their own against large businesses are long gone. Every website is competing for attention against all-comers and more established websites have more eyeballs and usually more money for advertising and the creation of popular content. As a newcomer you probably won’t have much money and your only resource will be time. Unique and fresh content is MEANT to help you rank highly but if you do create genuinely great content it’ll be copied, rewritten and posted on a more popular site than your own which will then rank higher than yours – therefore any content that you create, rather than being unique, has to be uniquely YOU because YOU, and the relationships that YOU create are difficult to copy.

Google doesn’t want you to do well at SEO – it wants you to buy its adverts (which can be found at the top of the search results pages). You’ll therefore always be competing against Google. It  has all sorts of tricks up its sleeves  e.g. always putting Wikipedia at the top (to push other results further down the page), making the adverts at the top of the page large (again pushing results down), cramming its own properties into the results (e.g. YouTube), favouring brands (which have money to buy those adverts) over non-brands (which don’t), muscling in on niche sites where it thinks it might one day make money (e.g. currency conversion) etc.

Usage data

There are tons and tons of ways that the search engines (okay, Google) check how users interact with your website. Google Chrome phones home, Google Analytics gives tons of data about your site to Google, and personalised search, Google Checkout, the Google toolbar, Adwords and Adsense give Google yet more data. Google will learn what search terms are typed in to Google, what search results are clicked on and how visitors engage with your site. This data will then be used against you in Adwords (suggested keywords) or in any other way that Google sees fit.

Bottom line – you need Google, Google doesn’t need you, make your site interesting to visitors and they’ll automatically communicate that they find it interesting by sticking around, coming back and leaving comments. This is why it’s vital to have logging software (I recommend Advance Logger) to see what your visitors get up to. Check it each day and if necessary change things around. Use a related posts plugin, try formatting your posts in different ways (lists, headlines, colors, paragraph length), try creating videos (time-consuming), try different ‘voices’ for your content (cynicism, humour, enthusiasm), try adding regular new content so that users come back (depressing if no one reads it and very time-consuming to create).

Ultimately YOU are probably going to be the only unique content on your site and that means revealing YOU, which might be a cost too high because once it’s out there it’s out there for good and who’s to say that the YOU that’s revealed is going to be popular?

On-page factors

You can help yourself with simple and descriptive navigation links, links from your pages to important pages on your own site, well-chosen title tags and meta descriptions (try the ‘WordPress SEO by Yoast‘ plugin), content that sticks to its subject and uses a wide variety of words related to that subject (synonmys), links to expert sites (it shows that you’re connected to the rest of the internet and value the experts in your field) and unique content (don’t allow your archives to be indexed, for example, as the search engines then have two identical posts – the original post and the archived post).

Don’t have too many adverts at the top of the page, make sure pages load quickly, give your images descriptive ‘alt’ tags, give your posts meaningful urls (e.g. mysite.com/look-please-rank-me), DON’T stuff your content with identical keywords (as a ranking signal it’s debatable if that EVER worked) and structure your content (which is a posh way of saying to have the important stuff with h1 headlines and the less important stuff with h2 or h3 headlines).


A few other factors (there are actually loads): the age of your website, the history of the domain it’s on (was it previously owned by a spammer?), whether or not you’re a Big Brand (big brands give out signals such as being searched for by name, being mentioned in social media, advertising on websites and on T.V etc.), social signals (Google +1, Facebook ‘likes’ , Tweets etc.), exact-match domains, rate of link growth (if you suddenly get a ton of links that’s usually dodgy) and Query Deserves Freshness (some search queries will get fresh content returned rather than older content).

Welcome to the world of SEO. 🙂


If you’ve got to the end of this simple but effective introduction to SEO I hope you haven’t found it too cynical. I could have fed you unicorns and fairy dust but by the time you figured out what was really going on you’d probably have got disheartened and given up. At least you now know what you’re getting into. 🙂

There are three ways to get saved color schemes into your Childishly Simple theme.


Method 1

This is the easiest and safest method if you don’t know much about websites. Download a free child theme. Unzip it. Open the folder ‘colorschemes’. Paste your color scheme into one of the files in that folder e.g. color-scheme-11.php. Zip the child theme. Go to ‘Appearance / Themes’ and upload the child theme. Activate it and then select ‘Color scheme 11’. Your website now has that color scheme. Select ‘Choose your own colors’ and you can then delete or deactivate the child theme.


Method 2

Log into your site. In the left sidebar find ‘Appearance’, click on it and then click ‘Themes’. Now go back to ‘Appearance’ and click on ‘Editor’. You’ll see a list of all your theme files on the right-hand side. Click on the color scheme file you want (e.g. color-scheme-01.php) and paste your code into it. If you’re not allowed to make changes (it’ll tell you near the bottom of the page ‘You need to make this file writable before you can save your changes’) you need to change file permissions. If changing file permissions isn’t working ask your host to change them for you or better still learn to use FTP (it’s easy).

Now go back to the options page (‘Appearance / Chidlishly Simple options’) and select your color scheme e.g. Color scheme 01. Check that everything’s worked. Now change the color scheme to ‘Choose your own colors’. This makes everything safe.

If you upgrade the theme then ‘Color Scheme 01’ will be overwritten with blank information but it won’t affect your site.


Method 3

FTP. This is all about opening up files on your website and uploading files TO your website. To do this you need some FTP software such as Filezilla (free). There’s a tutorial with pictures here about Filezilla and you can download it here (you should download ‘Filezilla client’).

You’ll need to have the following – your ‘host’ or site name (e.g. mybrilliantsite.com), username (ask the people who host your website for that) and your password (FTP password, again ask the people who host your website).  Enter these details  into the boxes at the top of the programme then press ‘Quickconnect”. Various folders on your website will then appear. Click on ‘public-html’ and then navigate to where you want. You can then open those files (usually right click and ‘open’ or something similar) or one of the windows in the FTP programme will show your computer files and you can find one and upload it. Again, there’s a tutorial with pictures here

If you’re using the ‘Childishly Simple’ theme and want to upload a color scheme this means clicking on something like public-html /mybrilliantsite.com/ wp-content/ themes/ childishly-simple/ colorschemes.  Find the file you want e.g. ‘color-scheme-01.php’. Right click and then click on ‘View/Edit’. You can then paste in the contents of your color scheme (that you copied from the bottom of the options page) and save it. Or you can just upload a copy of  ‘color-scheme-01.php’ from your computer that contains your saved color scheme.

Now go back to the options page (‘Appearance / Chidlishly Simple options’) and select your color scheme e.g. Color scheme 01. Check that everything’s worked. Now change the color scheme to ‘Choose your own colors’. This makes everything safe.

If you upgrade the theme then ‘Color Scheme 01’ will be overwritten with blank information but it won’t affect your site.


Child Theme

Method 2 and method 3 didn’t use child themes. However if you don’t want to repeat the steps in method 2 and method 3 every time you upgrade you should install a free child theme

Child themes are nearly blank themes which you upload like a normal theme (‘Appearance / Themes’) and then activate. Anything that you save in a child theme is protected from being overwritten when the main theme (either ‘Childishly Simple’ or ‘Childishly Simple Premium‘) is upgraded.


Tip: you can spend a long time changing the colors in your theme, save everything and then find that nothing’s changed. I still do that. The answer is that you have to select ‘Choose your own colors’.

If you’ve got a menu that’s appeared from nowhere and you don’t want it then go to ‘Manage Locations’ and select ‘Select a Menu’. Your menu should then disappear (theme version 3.14 on).

There are also a huge number of menu options that WordPress hides by default. Look in the top right corner for ‘screen options’ and click it. You will then see options that will allow you to easily add posts, tags, categories, links, Pages to your menus and for more advanced users CSS classes, descriptions and other stuff.


If you want simple general instructions on creating menus try http://codex.wordpress.org/WordPress_Menu_User_Guide


The following (rather complicated) instructions will tell you how to create two horizontal menus (with drop-downs) called ‘Top Navigation Links’ and ‘Bottom Navigation Links’.


Log into your site, look at the left hand side of the page and find ‘Appearance’. Click on it and then click on ‘Menus’. You’ll get taken to a new page.

On this page click the ‘create a new menu link’ near the top to add a new menu. You’ll get taken to another page where you can fill in a menu name e.g. ‘Top Navigation Links’. Click ‘Create Menu’.

Click the ‘create a new menu’ link once again but this time create a different menu name e.g.  ‘Bottom Navigation Links’. Click ‘Create Menu’.


At the top you’ll now see the text ‘Select a menu to edit’ followed by a dropdown box (with a little downwards pointing arrow on the right-hand side of it).  Clicking on that arrow will reveal either ‘Top Navigation Links’ or ‘Bottom Navigation Links’.

Click on whichever one you want to work on then press the ‘Select’ button to the right of that arrow.

On the left you’ll now see more more dropdown boxes comprising Pages, Posts, Links, Categories, Tags and Formats. Pressing the downwards pointing arrow on the right of each one will open it out. Select any Pages,  Posts, Links, Categories, Tags or Formats that you want to have in your menu (though you have to manually create a ‘Link’, I’ve written a little more about that below) and click ‘Add to Menu’.

Little boxes will magically appear in the middle of your screen.

You can drag these boxes up or down to create your menu layout and indent them left or right to create drop-down menus (keep the left mouse button pressed to drag them).


If you want to change any details of your menu items there’s a little downwards pointing arrow on the right hand side of each menu box. Click on it and the box will open up (you sometimes have to click many, many times for this to work. If all else fails try a couple of very rapid clicks one after the other).

There are more advanced options available (e.g. adding nofollow to your menu links) by clicking on the ‘Screen Options’ tab at the top right hand side of the page.

Click ‘Save Menu’ (on the right-hand side) when you’ve finished.


If you want to add  a link e.g. to your home page then you have to do it manually. Click on ‘Links’ (to the left of the page) and fill in the home address of your website in the ‘URL’ box e.g. http://www.mysite.com

Write the word ‘Home’ in the ‘Link text’ box. Then click ‘Add to menu’.


Finally you need to put each menu in the right place e.g. the ‘Top Navigation Links’ menu needs to be at the top of your website.


Towards the top left of your screen you’ll see ‘Manage Locations’. If you’re using the ‘Childishly Simple’ theme then you’ll see two more dropdown boxes beside the text, ‘Top Menu (Childishly Simple Theme)’ and ‘Bottom Menu (Childishly Simple Theme)’.

Click on the pointing down arrow on the right of ‘Top Menu (Childishly Simple Theme)’.

A little box will drop down. Select ‘Top Navigation Links’ and then click ‘Save Changes’.


Now click on the pointing down arrow on the right of ‘Bottom Menu (Childishly Simple Theme)’ and  select ‘Bottom Navigation Links’ from the drop down and click ‘Save Changes’.


The free version of the theme allows you to change the font size and font family of the whole site. The Premium theme allows you to change the font size and font family in over thirty places. It’s incredibly easy to add Google fonts. Simply choose your font(s), decide whether you want bold and italic versions as well, copy a couple of lines of code and add them into your theme from within the options page.


Click on the image below for a full size version (lightbox)



If you don’t want to use Google fonts read on!


What are fonts?

Fonts are the style of the letters and numbers in books, newspapers, adverts and websites. There are fonts that look like handwriting, fonts that evoke feelings of speed (on the side of trains?), fonts that evoke feelings of being scared (horror movie credits?), fonts that evoke feelings of action (super-hero comics?) etc.


What fonts can I use on my website?

When you look at someone’s website their website might say to your computer or mobile phone, ‘Please show this website page with this fancy font’ but your computer or mobile phone might go, ‘Hey! I can’t! I don’t have that font installed!

Furthermore your browser (FireFox, Internet Explorer, Chrome, Safari, Opera etc.) might also go ‘What? Never heard of it!’

So by default you’re limited in the choice of fonts that you use. They’re termed ‘web-safe’ fonts and in theory all computers, tablets, mobile phones etc. have this same limited set of fonts.

But that limitation can be changed (keep reading).


How do you add the web-safe fonts that you want to your website?

The simplest way is to add something like the following to the website stylesheet:


body {font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;}


What that says is, here’s a bunch of very similar fonts (font-family) that are pretty common to most computers and browsers – try the first one, and if that’s not available try the next one, and if that’s not available try the next one etc. etc.

You can get a list of ‘web-safe’ font-families at http://www.w3schools.com/cssref/css_websafe_fonts.asp

If you’re using the Childishly Simple theme and don’t know what a stylesheet is then paste something like this into the head section (top of the options page):


<style type=”text/css” media=”screen“>
body {font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;}


But I want fonts that aren’t web-safe – fonts that look NICE!

Of course there are only a limited number of fonts installed on computers and odds are that you won’t want one of them. And this is where the font-face rule comes in.

With this rule AND after uploading a set of scalable font images to your website (read more below) you can have any font that you want. This works in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

And here’s the rule to add to your stylesheet:


font-family: this-is-my-super-duper-font;
src: url(‘http://www.mygreatsite.com/images/Sansation_Light.ttf’),
     url(‘http://www.mygreatsite.com/images/Sansation_Light.eot’); /* IE9 */


Further down the stylesheet add something like this:


font-family: this-is-my-super-duper-font;


Okay, that looks tricky, where can I get these fonts from?

Good question.

Google has some open-source fonts at http://www.google.com/fonts/ but arguably ‘mea­sured by pro­fes­sional stan­dards the aver­age Google Web Font is just awful’.   However there are decent ones out there e.g.  these font reviews: 20 best Google fonts , showcase of best Google fonts and 10 Google fonts,

But let me add that the current Google user interface is RUBBISH.

Okay  – who else?

Here’s a comprehensive review (late 2010) of other places you can use to embed fonts in your website: http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

What you do is link to the fonts that these companies store on THEIR websites. You don’t upload them to your own site. Generally speaking there’s a slight delay whilst the fonts that you want are then fetched from their websites.

And here’s a list of the companies reviewed (but apart from Google they’re not free):


Fonts Live
Google Fonts


Screw that, it looks like hard work – I want a PLUGIN!

And well you might. Though you’ll have to pay for the services they use (except for Google).

Putting in fancy fonts should be easy. And with a plugin there’s a good chance that it WILL be easy. I tried wp-google-fonts (linked to below) and I hardly needed to think. 🙂

For TypeKit there’s http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/

For FontDeck there’s http://wordpress.org/extend/plugins/fontdeck/

For Google there’s http://wordpress.org/extend/plugins/wp-google-fonts/ (update:looks like it’s been abandoned)


I’m still not happy

I’ve bought fonts from http://www.ultimatefontdownload.com/, there’s a wide choice but they’re not organised, you have to search through them and there are LOTS. I’ve also found some fonts at http://www.kingthingsfonts.co.uk/, http://moorstation.org/typoasis/designers/klein/index.htm and  http://manfred-klein.ina-mar.com/

To search through fonts you need a font viewer and here’s a nice free one http://www.ampsoft.net/utilities/FontViewer.php Click on the  ‘Not installed fonts’ tab to start searching through your folders.


Thanks also to:




Just to throw a spanner in the works you might want to consider that the slightest delay in delivering a web page reduces traffic / conversions and that pretty sites aren’t always necessarily best:

‘Amazon found that +100ms in latency =>-1% in sales.
Google found that +500ms in generating the search page => -20% in traffic’

Source: http://www.csee.umbc.edu/~kalpakis/courses/441/notes/ImportanceOfLatency.pdf



WordPress ‘widgets’ are useful little things like calendars, your most popular posts, your latest posts, famous quotes, videos, slideshows, most recent comments etc. Your WordPress theme will have certain places where these can appear. In the ‘Childishly Simple’ Theme widgets can appear in the sidebars or in the footer.


How to add one of the widgets that comes as standard in every installation of WordPress

Log into your site and click on ‘Appearance’ in the left hand side and then click on ‘Widgets’. You’ll be taken to a new page. This page has loads of interesting widgets in the middle of it whilst to the right of the page are boxes that you’re going to drag your widgets into. Click on the downwards pointing arrow on the right of that box to open the box up and then drag your widget into the opened box (to ‘drag’ a widget put your mouse over the widget and hold down the left mouse button, then move the mouse). You can have as many widgets as you want in one of these boxes, one above the other, and you can reorder them at any time by dragging them up or down.

When you’ve done this and finished filling in details such as the widget’s title click ‘Save’ at the bottom of each widget. Then view your site to see what it looks like.


Adding a widget that you’ve found on the internet

The widgets that you find in Appearance/Widgets after first installing WordPress are only a very few of the many widgets that are available. To find new and interesting widgets use a search engine and search for something like ‘WordPress recent comments widget’, ‘WordPress video widget’ etc.

Nearly all widgets are free and can be added by logging into your site and clicking ‘Plugins’ in the left-hand side of the page. You’ll then be taken to a new page. Click on ‘Add New’ at the top of that page. Then paste in or type in the name of the widget that you’ve found using the search engines into the search box on that page. Now click ‘Search Plugins’. A list of widgets will appear. Hopefully your widget will be in that list. Once you’ve found your widget click ‘Install Now’ and after it’s installed (you might need an FTP password) click ‘Activate’.

If you now go to ‘Appearance / Widgets’ you should find your new widget somewhere in the middle of that page and you can then drag it into one of the boxes on the right.

You can drag more than one widget into each box so that they stack up above each other on your website and you can reorder them by dragging them up or down. You can also often add ‘shortcode’ to them (below).

Tip: you can use the ‘Text’ widget to add your own text, links etc. e.g. the following is a link to your home page that you could paste into a text widget, though you’ll have to change ‘mywebsite.com’ to your own website name: <a href=”http://www.mywebsite.com”>Home<a/>

What’s the difference between a widget and a plugin?

None really. They’re both useful bits of code that do useful things on your website. You even install them the same way – that’s right, to install a plugin go to Plugins/Add New, use the search box and click ‘Install Now’, then click ‘Activate’. Both plugins and widgets are shown on the Plugins page (Plugins/Installed plugins).

That said there ARE some differences. Widgets normally do visible things on your website, for example displaying your most recent comments. Plugins can do visible things AND invisible things such as blocking spam or improving your SEO.

The only other major difference is the way that you interact with Plugins and Widgets. Plugins normally have their own settings page and a link to it will magically appear in the left sidebar within the WordPress Admin when you add and activate a plugin. Widgets on the other hand are accessed via Appearance/Widgets, as described previously, and usually have their settings within the widget itself.

Both plugins and widgets can be activated, deactivated and deleted from Plugins/Installed Plugins


Widgets and child themes

If you have widgets installed on your parent theme and then switch to a child theme you may find that your widgets are now in the ‘inactive widgets’ section (Appearance/Widgets). Simply drag them back into the appropriate widget boxes.

It appears that a parent theme can have one set of widgets and a child theme can have another set of widgets – which sort of makes sense since a child theme and a parent theme are activated as separate themes.


What are shortcodes?

They usually look something like this:




or this:


[menu id=”345″ size=”medium”]


and you can add them into posts or Pages when you write them.


Many widgets and plugins (what are widgets and plugins?) come with shortcodes, often hidden away in the documentation. You could, for example, have a slideshow plugin. If you’ve created a slideshow you could copy and paste the shortcode for that slideshow into a post or Page and have that slideshow appear in your post or Page.

Tip: if copying and pasting shortcode gives strange results then write it in by hand.

For more advanced usage of shortcodes see the official WordPress documentation at http://codex.wordpress.org/Shortcode_API

So you want to have an accordion effect on your options page? Like this?


Demo of accordion effect – click here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu leo, imperdiet et auctor quis, suscipit vel turpis. Vivamus erat justo, sagittis a venenatis euismod, mollis at justo. Cras dapibus leo a ipsum lobortis et pulvinar dolor sagittis. Etiam nec imperdiet massa. Duis felis elit, rhoncus id ullamcorper ac, pellentesque eget diam. In hac habitasse platea dictumst. Nunc eros enim, porta non placerat eu, mollis sit amet mi. Etiam eu sollicitudin eros. Sed et ipsum odio. Mauris feugiat suscipit eros ac consequat. In in arcu venenatis dolor volutpat placerat. Vestibulum tempus nibh non elit commodo gravida. Curabitur volutpat tincidunt leo sit amet consectetur. Sed gravida dolor nec metus eleifend luctus. Nam non leo pharetra mi ultrices lacinia.


First, go to the WordPress codex where there’s this page about enqueueing scripts. This is just a fancy way of saying ‘fetching scripts in WordPress,’ which results in something like this within the <head></head> elements of an HTML document:

<script type=’text/javascript‘ src=’http://www.alchemweb.co.uk/wp-includes/js/jquery/jquery.js?ver=1.8.3‘></script>


At the bottom of the codex page is a whole list of scripts that are included in WordPress by default – including a link to ‘jQuery UI Accordion’. Click on that link and you get taken to http://jqueryui.com/accordion/


So – to backtrack for a moment – scripts that are included in WordPress by default AREN’T activated. There’s too many of them and they’d take ages to download and there’d probably be all sorts of conflicts as well, so we only activate the scripts that we need. We’re going to activate the accordion script.

Before we go any further if we want to activate ANY one of the pre-included scripts on the front-end (the website that the user sees) it’s pretty simple. We just need to include it / queue it, and we use the ‘name’ or ‘handle’ (on that codex page) that WordPress gives it to do that.

Like this:


function i_want_to_fetch_a_script () {

wp_enqueue_script( ‘jquery-ui-accordion’ ); // the name or ‘handle’ of the script bundled with WordPress – we found the name on the codex page


add_action( ‘wp_enqueue_scripts’, ‘i_want_to_fetch_a_script’ );


And if we want to fetch one of our OWN scripts for the front-end it’s also pretty simple. We just add something like this to functions.php:


function i_want_to_fetch_a_script () {
wp_register_script( ‘my-script’, get_template_directory_uri() . ‘/javascript/my_whizzy_script.js’ );
wp_enqueue_script( ‘my-script’ );

add_action( ‘wp_enqueue_scripts’, ‘i_want_to_fetch_a_script’ );


We registered a script, gave it a ‘name’ and then ‘queued’ it – this is the simple version, but it’s possible to change the order in which scripts are output in the head or footer of the page, but we won’t go into that.


One potential little ‘gotcha’
get_template_directory_uri() fetches the script from the parent theme’s directory
get_stylesheet_directory_uri() fetches the script from a child theme directory. If you’ve got your own custom script and the theme that you use is regularly being updated you’ll want a child theme, so you’ll want to store your script in that child theme and you’ll want to reference it using get_stylesheet_directory_uri()
Options Pages

However, if we want to either upload our own script or activate one of the pre-included scripts on a THEME OPTIONS PAGE ONLY it gets a bit more complicated. There’s a bunch of code again on that same codex page about how to do that, a little bit on this codex page http://codex.wordpress.org/Function_Reference/add_theme_page on how to create an options page, and Otto also has a good tutorial on creating an options page. But the basic principle of registering and enqueuing scripts and stylesheets still applies.

If you want the code I used in my Childishly Simple theme to create an options page and activate scripts with a couple of extra links thrown in for good measure you can see this example options page text file (scroll to the bottom for the good bit).


Let’s get onto the good stuff!

Back to the Jquery Accordion page. I’ve chosen to use ‘Collapse content’ (menu, right hand side) meaning that every header can be collapsed rather than one always being open and displaying content.


At the bottom of that JQuery Accordion page there’s a link to ‘View Source’. You’ll see something like this in the head section:


$(function() {
$( “#accordion” ).accordion({
collapsible: true


How do you get that into the head of your WordPress options page? Easy – you create a file called accordion.js (for example) and paste everything that’s between the script tags into it, upload accordion.js to your theme directory, enqueue it as described above in functions.php and then upload functions.php. The script tags are automatically added by WordPress.

So in functions.php we now have this:


function i_want_to_fetch_a_script () {

wp_enqueue_script( ‘jquery-ui-accordion’ ); // the name or ‘handle’ of the script bundled with WordPress

wp_register_script(‘accordion-js’, get_template_directory_uri() . ‘/javascript/accordion.js’); // Register our snippet of customiisation
wp_enqueue_script(‘accordion-js’); // Queue our snippet of customisation


add_action( ‘wp_enqueue_scripts’, ‘i_want_to_fetch_a_script’ );


However, there are a couple more ‘gotchas’.

First, WordPress uses JQuery in ‘no-conflict’ mode. I know very little about JQuery but I do know we have to change accordion.js like this:


$( “#accordion” ).accordion({
collapsible: true


The next ‘gotcha’ is that all the headers that we click on to cause the accordion effect have been given the ID ‘accordian’ #accordion

But IDs are only meant to be be used once on an HTML page, and we’re probably going to be using the accordion effect more than once – so we want to use a class instead.

So now that snippet becomes:


$( “.accordion” ).accordion({
collapsible: true


The markup on our HTML page needs to be in this format, as described in the JQuery accordion API:


<div class=”accordion”>
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>


Next thing – we want all our content areas to be closed on loading the page. So (from the JQuery API page again) the snippet of script in accordion.js becomes:


$( “.accordion” ).accordion({
collapsible: true,
active: false // We added this


We’d also like to show some flashy icons as background images to the left of the header that we’re going to click on – maybe a ‘+’ sign, and a ‘-‘ sign that will change when the content area slides down and slides up.

Here we go:


$( “.accordion” ).accordion({
icons: icons,// And now we’ve added this
collapsible: true,
active: false,


How do we display the icons? Using the ‘Inspect element’ tool that ships with FireFox we can see that they’re background images in some spans, with the spans having the classes of: ui-accordion-header-icon ui-icon

Where are these background images? Go to http://jqueryui.com/download/ and choose what components you want to download. I chose everything – otherwise you might have to play around later until you get the look that you want. Choosing everything has the disadvantage of larger file sizes for users to download (mainly the css files) but you don’t have to mess around discarding the bits that you don’t want. Hunt through the folders in your download and eventually you’ll find one called ‘images’. When you try and open some of the ‘sprites’ (lots of small images jumbled together in one big image) in a graphics programme they’re just blobs of color – I’m sure I’ll find out what’s going on eventually, but for now just upload the whole damned lot and have done with it.

So the sprites/images are uploaded to a folder called images in your theme directory.

Now find the style sheet in your accordion download. Save it somewhere and rename it – I like to start all my stylesheets with the word ‘style’, so for me it becomes style-accordion.css and that gets uploaded into the theme directory beside the theme style.css. This style-accordion.css also has to be enqueued, so now in functions.php we have this:


function i_want_to_fetch_a_script () {

wp_enqueue_script( ‘jquery-ui-accordion’ ); // the name or ‘handle’ of the script bundled with WordPress

wp_register_script(‘accordion-js’, get_template_directory_uri() . ‘/javascript/accordion.js’);

wp_register_style(‘my-copied-accordion-styles’, get_template_directory_uri() . ‘/style-accordion.css’); // Register the style sheet
wp_enqueue_style(‘my-copied-accordion-styles’); // Queue the stylesheet


add_action( ‘wp_enqueue_scripts’, ‘i_want_to_fetch_a_script’ );


But this still isn’t enough. We want that ‘+’ and ‘-‘ sign, remember? Where are they in those ‘sprites’?

Go to http://jqueryui.com/themeroller/ and you’ll see lots of small images (‘framework icons’) that can be moused over. When they’re moused over the tooltip shows a name e.g. .ui-icon-plusthick

Actually, it’s a class – because this is the class for a ‘thick’ (wide) plus sign. It’s actually the class that some spans are given by JQuery. The span with a class of .ui-icon-plusthick is styled in the stylesheet that we uploaded earlier.

Last thing. How do we give our accordion the class of .ui-icon-plusthick ?

Back to our snippet of JQuery in accordion.js

That snippet now becomes:


$( “.accordion” ).accordion({
icons: icons,
collapsible: true,
active: false,
var icons = {
header: “ui-icon-plusthick”, // Here we go – a class for our ‘plus’ sign
activeHeader: “ui-icon-minusthick” // And when hovered over the class changes


Obviously, with the information given here it’s also possible to easily create your own icons.


So now we have the default WordPress JQuery script activated, our snippet of customisation accordion. js uploaded to the theme’s ‘javascript’ folder, our copied and pasted stylesheet style-accordion.css uploaded to the theme folder, and both accordion.js and style-accordion.css registered and queued by this in functions.php :

function i_want_to_fetch_a_script () {

wp_enqueue_script( ‘jquery-ui-accordion’ ); // the name or ‘handle’ of the script bundled with WordPress

wp_register_script(‘accordion-js’, get_template_directory_uri() . ‘/javascript/accordion.js’); // Register our own little snippet of customisation
wp_enqueue_script(‘accordion-js’); // Queue that little snippet


wp_register_style(‘my-copied-accordion-styles’, get_template_directory_uri() . ‘/style-accordion.css’); // Register the styles that we copied and renamed
wp_enqueue_style(‘my-copied-accordion-styles’); // Queue the styles


add_action( ‘wp_enqueue_scripts’, ‘i_want_to_fetch_a_script’ );


accordion.js in the javascript folder

$( “.accordion” ).accordion({
icons: icons,
collapsible: true,
active: false,
var icons = {
header: “ui-icon-plusthick”,
activeHeader: “ui-icon-minusthick”

And in the images folder are all the images that we downloaded from http://jqueryui.com/download/



NOTE: if copying and pasting use this text file, where I’ve changed the single and double quotes (otherwise it won’t work).


For anyone who wants to put up a very simple website without hassle

Plenty of options for the more advanced user!

A very low cost Premium version of this theme is available here


Kickstart your imagination by clicking below for a live demo site (far left) or one of the many showcase sites!

3-col-content-middle-thumbShowcase siteShowcase siteShowcase siteShowcase site

Childishly Simple Theme (FREE)

Download from WordPress.

Premium version available!

For anyone who wants to put up a simple site without hassle. Easy to customise from one options page.

  • Change the colours of everything by clicking on a colour wheel beside each item.
  • Import and export (by copying and pasting) color schemes.
  • Change the site width and sidebar widths.
  • Choose 0, 1 or 2 sidebars.
  • Change the banner image across the top of the site.
  • Choose from a selection of items to show in each sidebar and in the footer or insert widgets into the sidebars and footer.
  • Choose fixed or flexible site width.
  • Choose miscellaneous items such as RSS feeds, rounded corners, copyright notice.
  • Choose from a selection of simple home pages
  • Includes threaded comments with comment ‘bubbles’.
  • Includes featured images
  • Includes basic post formats
  • All the options are on one long page with plenty of illustrations

Need a child theme for the Childishly Simple theme? Free child theme here!


There’s a lot of talk on the internet about how difficult it is to remove comments from PHP e.g. if you want to pass a comment-free file onto a client.

There are boring time-consuming PHP scripts to do the business for you, there’s  php_strip_whitespace, there’s regex, there’s tokenizer, there are obfuscators, there are endless people saying that you shouldn’t put things you don’t want read into the comments, there are others who say that removing comments is impossible, and all in all it’s a nightmare of copy-and-paste ‘me-too’ answers, none of which work well.


Google, in its infinite wisdom (sarcasm) promotes all these non-answers to the top of the SERPS because these non-answers are fresh and they’re on authority domains.

Nothing new there, then.

But – if you’re prepared to dig a little bit (no, dig a lot ‘cos the SERPS at the moment are rubbish) there is an answer.

It’s called ‘Extract or Remove Text Between Any Two Fields’ and you can buy this PHP comment removing software from Sobolsoft.

I have no affiliation with it.

I would suggest that if you want to remove single line comments at a later date you should put double slashes at the end of each comment \\, and that if there are multiple line comments that you want removed you enclose them thusly \**** some stuff ****\, leaving multi-line comments that you want to keep enclosed in the normal comment tags  \* more stuff *\

Couldn’t be simpler.


Here’s a dirty little secret.

When you land a jump in figure skates you’re effectively landing flat-footed on concrete in bare feet with weights attached to your legs.


If you want to get an idea of how damaging landing flat-footed on concrete is then try landing flat-footed on a carpet from a jump of a few inches (disclaimer: do this at your own risk).

If you tried that did you feel shock juddering through your body?

Imagine landing from a height of a foot or so onto concrete.

Ice, in case you hadn’t realised it, is the equivalent of concrete.


Let’s qualify that a tiny bit. When landing from a jump in ice-skates we land toe-first very slightly. But the blade, the boot and the bottom of the foot are rigid. The pivot point is ahead of the toes whereas when we land from a jump bare-footed we land on the ball of the foot (which is also the pivot point) and the rest of the foot is roughly at 45 degrees to the ground.

This means that when wearing ice-skates there’s hardly any distance for the foot to move to absorb the shock of landing and a major structure of the foot that’s meant to absorb that shock doesn’t come into play.

This has the effect of trashing male and female jumper’s knees. Ask former professionals from their mid twenties onwards what their joints are like (‘knackered but if I keep moving I’m okay’). In pairs skating where the woman is thrown it has the effect of trashing female hips. You might want to think about this when you next see your teenage daughter being hurled across the ice.

In what other sport are athletes’ feet encased so rigidly and treated with such disdain? Ice skates are effectively walking boots with lumps of metal stuck to the bottom of them.

Take a look inside any ice skate and see if there’s anything more than the most token of insoles. Feel the plastic used for the heel and sole and note how rigid it is.

Also, feel the weight of that skate. An adult’s skate can easily weigh 1.2 kg, the equivalent of our lead weights above.


Here’s another dirty little secret.

The secret is that no one will tell you any of this, not the person who sells you the skates, not the organisations that oversee ice skating and certainly not the manufacturers of ice skates.

There’s a culture of connivance and complicity that seeks to overlook uncomfortable (unprofitable?) truths and an unwillingness to stick heads above parapets.

It gets worse:

  • The upper part of a figure skate is horribly, primitively designed. The skate can, perhaps, be divided into two parts. The ‘bottom’ part wraps round the foot and is meant to be a tight fit. The ‘top’ part wraps round the ankle and gives largely theoretical support to the ankle – theoretical since unless you’re built with the ankle bones of a horse it’s impossible to tie the rigid leather tightly enough to the ankle to give support and allow flexibility. In reality many skaters leave a gap of about one finger’s width between their ankle and the top of the skate allowing the ankle to flex within a certain range. Beyond that range the ankle hits the leather and then gets ‘support’. It’s a bit like driving a car and having the steering wheel turn an inch either way before the wheels turn. There’s no real gradation of support over a range of movement e.g. so that the more the ankle is flexed the more support there is. Nor is there  much range of movement. The ankle hits the edge of the tube of rigid leather surrounding it and stops – painfully. The skate becomes a rigid, unforgiving thing stuck to the bottom of the leg.
  • The material used for the upper part of a figure skate is usually leather. This might be a wonderful material in some ways but in ice skates it’s usually used in one thickness only: ‘rock hard’. There might be variations of ‘rock hard’ but they’re still all rock hard. And skaters have to go through an idiotic and painful process of wearing in their boots until there’s some slight degree of flexibility in them.
  • There’s usually one lace to tie up the whole skate meaning that it’s either unbearably tight round the foot in order to be tight round the ankle or loose round the foot in order to be loose round the ankle. If it’s too tight it reduces flexibility and if it’s too loose it becomes dangerous.
  • The back of a figure skate goes part way up the ankle. This is meant to provide support after landing from a jump. If you’re unlucky enough to fall and land on your knees and your upper body goes backwards then your tendons are stretched to the point where something in your foot rips because your foot is unable to flex as it so desperately wants to. Been there, done that, hence this post (criminally stupid figure skate manufacturers 🙁 ).

Sid Broadbent, former researcher for the US Olympic Committee and manufacturer of the ‘Incredible Edger’ skate sharpening machines compares current ice-skates to walking boots, ‘a carry over from two centuries ago when the skater walked to the local pond and the skate had to fit the very boots he/she was wearing’ and says that manufacturers don’t want to admit ‘that their current manufacture (and that for the past two centuries) was less than optimum’ whilst distributors’ dominating concern ‘is understandably continuity of livelihood, new models are a hazard to their inventories, would it become obsolete, money locked up in unwanted stock’.

Cécile Däniker Rüsch, former skater:

‘The skating boot must be conceived as an extension of the lower leg. It must adhere to the lower calf muscles like a glove. To do this the leather at this level must be supple and the boot should be laced snugly around the leg, cut high enough to allow this. There is no boot today made in this way. The skater who achieves control of the foot and ankle in school figures will only need a slightly stiffer boot for free skating. He will certainly not need the present day boot which is cut too low and is so stiff that the ankle can never take a lateral movement nor can it extend to propel correctly the jumps. This alone is presently causing atrophy of the lower leg and foot and contributing to the plethora of leg and foot injuries: tendonitis, bursitis and bone spurs in skaters of all ages. It should also be noted that young skaters who have been training in these rigid boots have feet that are totally unable to fully extend in off ice movements.’



Protecting the joints

The most pressing problem is the damage that jumping in ice skates does to the joints, mainly the knees and hips. The impact of the landing needs to be absorbed so that this damage doesn’t occur.

  • A stop-gap measure for individual skaters until the ice skate manufacturers get their act together (after forever) is to use a couple of gel pads underneath each foot. It feels like skating on marshmallows for about six weeks but you get used to it.
  • Wedge-shaped gel pads might work where the thin end of the wedge fits under the ball of the foot and the thick end under the heel. If the heel is made of a softer gel than the toe then it might – possibly – create a slight toe-heel movement on landing.
  • Another alternative is to have gel pads that soften under specific impact loads (depending on the weight of the skater). Under normal conditions the gel pad is fairly firm. When landing from a jump it momentarily softens and absorbs the load. Bear in mind that even when not jumping the normal bumps and holes in an ice rink are transmitted directly through the ice skate and into the joints AND CAUSE DAMAGE TO THE JOINTS even if professionals are conditioned not to notice it and young children are unaware of it. A firm gel pad under the foot should be used by all skaters at all times as a bare minimum.
  • The sports bodies governing ice skating should make a certain level of absorption of impact by ice skates compulsory for anyone competing. Skaters would feel compelled to train in boots that conformed to these rules in order to familiarise themselves with the boots.  Manufacturers would have to wake up from their two hundred years of coma and stupidity. Different grades of competition would have different levels of absorption of impact e.g. at lower grades (usually children and young teenagers) the boots would absorb the most impact so that growing bones and joints aren’t damaged (as they almost CERTAINLY are damaged at present).
  • It shouldn’t be beyond the wit of ice skate manufacturers (well one can only hope …) to devise a blade that’s on some sort of absorbent bed (e.g. a leaf spring or a hydraulic piston) or better still to come up with a blade that flexes at one end. When a certain load is exceeded the blade retracts (in the first example) or flexes (in the case of the second example, images below). Different blades for different body weights and skill levels – think of the marketing opportunities! Think of the money! (How DO you wake organisations from their comas?)


Reducing the weight of skates

Figure skates are heavy. Really, really heavy given that skaters are meant to jump in them. ‘Modern’ figure skates appear to have been built in the 1940’s. They’re made of thick, heavy leather with a blob of steel bolted on underneath.


What can one say? Please, figure skate manufacturers, wakey wakey. Try some different materials. Just about ‘good enough’ isn’t good enough any more. Not in 2013. And start drilling holes in everything. Holes in the blade, holes in the heel, and why not holes in the leather (if you MUST still insist on using leather)?

Increasing the flexibility of skates

  • The idea that skates have to be ‘worn in’ is something out of the dark ages. If we have to buy primitive skates made of leather (you might have noticed that trainers are no longer made of leather) then put them on a machine and wear them in for us.
  • Use materials other than leather so that different parts of the boot can have different strengths and different flexibilities. Boot manufacturers appear to cut costs by using one sheet of rock-hard leather for the whole boot. No more – please! Wise up!
  • Have two laces, one for the bottom of the boot and one for the ankle support. That way the skater can adjust the tightness of the bottom of the boot and the ankle so-called ‘support’ separately and get the flexibility that she or he wants.

Making boots safer

Skis have release bindings to prevent injury during a fall. Figure skates that have high rigid backs should literally burst apart at the back if the force on them exceeds a certain level. Even the most witless manufacturer can cut a slit down the back of the figure skate and attach the two sides together with replaceable plastic ties that break under a certain load. Well duh!

Creating ankle support

What a skater needs is ankle support that increases gradually the further the ankle is flexed. And the ankle should be able to flex within it’s full natural range of movement (which it can’t in the present dinosaur generation of figure skates). When the ankle is in danger of exceeding safe limits the support should be at its maximum. That support should also be variable in different directions. Sideways support for example might be less than backwards support. Ideally it should be possible for the skater to adjust the ankle support as they wish because skaters have different body weights and different muscle strengths. Nike, if you’re reading this there’s a whole market here ready for your trainer-style marketing!

One way to achieve the above support – just to throw in an idea – could be to use modern materials that allow vertical metal or plastic rods to be inserted into tubes or channels in the fabric of the skate. Different grades of plastic or metal rod could have different flexibilities allowing the skater to adjust the flexibility that they want in any direction.

Some of the old-style ‘calf boot’ skates were also possibly a better design than ‘modern’ skates (a soft leather boot extended up the calf). I’ve never worn one but perhaps the calf section of the boot provided support for the ankle.

Soft leather … hey, what were they thinking of ? 🙂

Oh – and the high heels that skaters are meant to wear! WTF? Try walking in high heels never mind jumping on ice in them! Yes, they make legs look longer and more elegant but why not raise up the front of the skate as well as the heel?

An answer to the question

Ah, yes.

Why are figure skates so badly designed?

Because the designers of figure skates are frighteningly moronic.

And those in the upper echelons of the sport of ice-skating are too afraid of repercussions to rock the boat presumably because at the very very top there are narrow-minded vindictive committee men and women just as there are in most sports’ governing bodies.

Just a guess.


Further reading

A brief history of ice skating
What is left of the art of skating? The judging system, meant to eliminate cheating judges (not competitors) is a disaster.
Ice skating boots and blades
Skaters want change (2007)
Incidence of stress fractures in skaters
The Jackson Proflex ‘Stormtrooper’ boot,  official page here (it’s an unbelievably dire site for a major company and shows how completely out of touch they are with reality. Slow loading  screenshot from 2014, it’s actually quite sad ). Fashion-conscious teenage girls stayed away in their millions. The boot was discontinued with the manufacturer blaming customers for not supporting them rather than themselves for not meeting market needs.
Technical skills and jumps have replaced choreography and artistic interpretation.
Skating injuries (PDF, slow download)

I love this little utility and use it all the time. Having tried most of the stuff out there I ended up with Color Cop for several reasons:


It’s light and fast – there’s no need to wait ages for it to load
It’s small, taking up minimal screen room
It’s very easy to use and has an almost zero learning curve
It does exactly what I want it to do and no more – which is to pick a color from the screen and display the Hex code for it (though there are a few other options as well).
It has the Windows color picker integrated into it which I love for its ease of use – particularly when it comes to lightening or darkening colors.
It has an option to always stay on top of other applications.
Oh – and it’s free.


Downloading it’s easy – you can do it here

Once it’s downloaded (and unzipped if necessary) then right-click on ColorCop.exe, click  ‘Send to desktop’ and drag the desktop icon into the bottom taskbar. Clicking on the icon will start Color Cop.

What you’ll then see is the Color Cop window with an eyedropper icon.

Click on that eyedropper and drag it across the page. As it goes over different colors those colors are shown towards the top of the Color Cop window, whilst at the bottom of the window a zoomed-in version of the colors the eyedropper is going over is shown.

For large areas of identical color the color can be selected simply by letting go of the mouse button.

For colors that are only 1 pixel or so in size, get as close as you can, let go of the mouse button and and then move to the magnified area and select the color there (see below).

Instead of an eyedropper you can also use cross hairs – like this:

Towards the bottom of the color cop window is a magnifying glass icon. Clicking on the ‘plus’ sign will magnify the image that is being shown in color cop. You can then select your color from within that magnified image.

Towards the right of the window is the color history, showing the last seven colors clicked.

At the bottom left of the window is a palette of complementary colors (in relation to the last color hovered over). You can click anywhere on this palette and as you do so the displayed hex and RGB values are changed.

There are other options, too. To access them, right-click anywhere in the main body of the color cop window (you get a slightly different menu if you right click at the very top). Take a look at these (below):

Here’s a description of the various  options that were shown above:

  • Color. Websafe colors are almost irrelevant on modern monitors. I can’t see the point of the random color option either, but both the ‘reverse’ color and the ‘convert to grayscale’ options might have their uses. Having selected a color you just need to right click and select those menu items.
  • Mode. There’s quite a lot to choose from here:  HTML hex, Delphi hex, PowerBuilder, Visual Basic Hex, Visual C ++ Hex, RGB float, RGB int and Clarion hex. Most of which, in my color-ignorance, I’ve never heard of 🙂
  • Space. The color space to choose from – RGB or CMYK.
  • Sampling.  The area sampled can be changed between one, three and five pixels. For normal purposes one pixel is best as the other sizes give an average over a larger area.
  • Options. I’ll list them as they’re largely self-explanatory:  Autocopy hex to clipboard,  Omit hex symbol, Uppercase hex, Magnify while eyedropping,  Use cross hair cursor,  Put cursor over eyedropper on startup.
  • Application.  Another list: Always on top,  Easy move (drag by clicking anywhere on the screen), Expanded dialogue, Minimise to system tray, Minimise on startup, Allow multiple instances.

And, of course, there’s the Window color picker, accessed by clicking on ‘Custom’.


  • There are hot keys for various functions (see Application/Help).
  • There are x,y coordinates along the bottom of the screen to determine where the cursor or crosshairs are. By pressing the control key when using the eyedropper these can be reset to zero, and dragging the cursor or crosshairs will now display the width and height of the rectangular area covered.
  • Double-clicking on the magnified area copies it to the clipboard as a bitmap.

All in all this is a delightful little piece of software.


Fed up with monitor glare burning your eyeballs out? Can’t find an anti-glare screen for an LCD monitor (and SHELL-SHOCKED by the price of anti-glare screens anyway)?

You’ve probably tried manually adjusting your monitor brightness. That’s a pain.

DimScreen is a lovely little scrap of software that will do this for you with just one press of a hot-key.

Download DimScreen. Double-click on the icon in your downloads folder to start the programme. An icon should appear in your tray menu. Right-click on that and select ‘Settings’.  Select a hotkey textbox and press a key for dimming; do the same thing for brightening. From now on pressing either of those keys will brighten or dim the screen  incrementally.

To get the programme auto-starting in Windows right click on the icon in Windows Explorer and select ‘Create Shortcut’, go to Start/Programmes/Startup, right click on that and select ‘Explore’.

You should now have two Windows Explorer panes open. Drag the shortcut into the Startup folder.

Other tips for reducing monitor glare:

  • Have a dimmable light in the room where you work. Energy-saving fluorescent bulbs aren’t usually dimmable and are also pretty harsh on the eyes. You might struggle to find the ‘old-fashioned’ bulbs, but halogen bulbs can be dimmed.
  • For Word documents and text editor documents create a nice green background.
  • Sit as far back from the monitor screen as possible. You need two computer desks – one for the monitor, one for you.
  • Avoid any foods or drinks that make your eyes hurt – be aware of any discomfort that comes within minutes of eating or drinking a particular food or drink.
  • There’s a difference between being fascinated by a problem and busting your brains out on a problem that refuses to be solved. One is largely effortless, the other EATS up concentration. Recognise when you’re eating up concentration because that’s when your eyes will start hurting the most.

Update 2012:  you might like this Firefox AddOn (Color That Site, link to video) that allows you to change the background or foreground colors of any site.

Home of the ‘Childishly Simple’ theme for WordPress!

Now permenantly closed for business