This is the page where I’m recording my notes about building the blog.

Working out what gets done where

A lot of trial and error here. But getting the picture now.
Wordpress: the framework and functionality
Canvas: the basic design
Canvas child theme: the place to override settings in the previous two.

Place to edit the child-theme style.css and functions.php:

Order to do things in

Buy your domain name and hosting package.

Install WordPress through the hosting package.

Buy and download your theme (Canvas in this case).

Log in to your WordPress site and install the theme (Appearance > Themes) – you just navigate to the zip file on your hard disk and it does the rest.

Log in with ftp and find the Themes folder on your server (public-html > wp-content > themes) and add a folder called nameoftheme-child.

Make a css style sheet in a text editor (instructions here) and upload it to the child-theme folder.

In WordPress (Appearance > Themes) activate the child theme.

Getting the pictures to work on the desktop, the ipad and the iphone

I wanted pictures that were big enough to see on the home page, but not full-width ones. Using thumbnails is fine, but has the horrible text runaround.

Increasing the thumbnail size so it takes up about half the page stops the horrible text runaround, but you have to play to get it so that it fills the width of the iphone (300 x 300pixels worked, in Canvas/Dynamic images menu).

Then the ipad looked rubbish, because the text still ran round – so I reduced the number of words in the home page excerpt, which seems to do the trick. This needs a functions.php file in the child theme folder, with this code pasted in, where 35 is the number of words in the excerpt:

function custom_excerpt_length( $length ) {
return 35;
add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );


FTP is locked as standard; unlock it by logging into the eXtend Control Panel and choosing the unlock option on the right hand side.

to get rid of title case and other caps:

.post-more a:hover,
.post-meta a:hover,
.post p.tags a:hover {
text-decoration: none;
color: #5ee8f2;
text-transform: lowercase;

.post-more a,
.post-meta a,
.post p.tags a {
text-decoration: none;
color: #999;
text-transform: lowercase;

#navigation .nav li:first-child a {
text-transform: lowercase;

#sidebar {
text-transform: lowercase;

remove bullets:
#sidebar li {

author – date – time
to change which information appears:
Canvas > Filters
to get rid of the dotted line under the date:
abbr.published {
border: none;

text in page
change colour:
<span style=”color: #6c9796;”>text you want to colour here

so far have failed to track down how to get the right weight of font, so following Guardian style guidelines for now (ie no italics anyway. Hate it)

Activate the Akismet plug-in. Details at http://codex.wordpress.org/Plugins/Akismet

Powered by WordPress. Designed by Woo Themes