Tomorrow is our Grade 8 Student Voice Forum at Gatestone Elementary school in support of their transition to Saltfleet Secondary in the coming year. The principal of Gatestone, Bill Torrens, has been working on the site with me and Dave Weir and I recalled a few tweaks he wanted to make: changing the colour of the title to blue and the background to green to match Gatestone’s colours. Should be simple right? Unfortunately not so much. Now, the background is relatively easy – just go inside your Dashboard > Appearance > Background and choose a preferred colour. In this case I chose #00a153 – the hexadecimal code for a shade of green used in Gatestone’s identity. There are many ways and tools to do this – I’m particularly fond of the free photo editor Pixlr (http://pixlr.com/editor/). I downloaded the banner to my computer, uploaded to Pixlr, and used the colour picker to determine the shades of blue and green to use for my customization (for more complex jobs I’d use Photoshop):

blue: #0a3f8f
green: #00a153

…yes, those are the exact colours represented by those numbers:-)

Gatestone Pixlr

Now, customizing the blog title colour is not so easy. In order to do this you have to customize some code in the CSS file. Say what? I know, that doesn’t sound too user friendly and it really isn’t. I have no idea why this isn’t an option as it certainly is a popular request if you Google and check the message boards. One thing I learned a long time ago is that it is easiest and best to customize a WordPress theme by creating a child of it. The concept is relatively simple: create a folder with a simple style.css file and any other file that you would like to use to override or add on to certain features of the original theme. OK, I just re-read that. I don’t think that clarifies anything, does it?

The other thing that I wanted was for the front page to feed one category only. It is possible to set the home page to a static page (Dashboard > Settings > Reading) but there is nothing inherently built in to allow for posting one category only to the front page. In order to do this, we need to add come custom code to the functions.php file that will exclude all categories except the one I wish to appear there – “Principal’s Blog” (slug=principals-blog). Oh, another thing, you have to find the category ID # in order to do this. This site clarifies this procedure –> http://www.wpprohelp.com/wordpress-tutorial/find-wordpress-category-id/

OK – so here are the links and snippets of code I found to help me accomplish what I wanted to do for the Gatestone blog. 

How to Create a Child Theme

http://codex.wordpress.org/Child_Themes

A video to help:

This one’s pretty nice to follow too

http://mr49online.wordpress.com/2011/12/27/how-to-create-wordpress-child-theme/

So, to create a customized version of a WordPress theme you need to know exactly what it is you wish to accomplish and search for code to help you do just that.

In this case, I wanted:

  • To customize the colours of the menu bar below the banner image to the blue and green shades indicated above
  • Change the Colour of the Blog Title to blue (#0a3f8f)
  • Allow only the category “Principal’s Blog” (slug=principals-blog) to feed the home page versus all of Bill’s recent posts

Here are the sites and snippets of code I found to help me….

Changing Menu Bar Link Colours and Rollovers

thanks @hallluke –> http://wordpress.org/support/topic/exclude-multiple-categories-from-home-page-2

#access li:hover > a, #access ul ul:hover > a {background:#f00; color:#f0f;}

#access ul ul a {background:#0f0;}

#access a {color:#00f;}

Changing the Colour of the Blog Title

thanks @hallluke –> http://en.forums.wordpress.com/topic/twenty-ten-theme-change-color-amp-font-of-title

#site-title a {color:#f00; font-family:courier; font-size:1.3em;}

PS: This is how to write code in your posts like I did above.

Excluding Categories from the Home Page

thanks @pshero –> http://wordpress.org/support/topic/exclude-multiple-categories-from-home-page-2

 …and here is how I did it:

I opened Notepad and typed the following code…

/*
Theme Name: Gatestone Elementary School Theme
Description: Child theme for the Twenty Ten Theme
Author: Aaron Puley
Author URI: http://bloggucation.learninghood.ca
Template: twentyten
Version: 1.5
*/

@import url(“../twentyten/style.css”);

I saved this file as “style.css” (change the file type to “All Files” before saving or it will save as a .txt file and won’t work). The key to the above code is the theme template to be used for all primary information and functioning (‘twentyten’) and the version (1.5). Everything else is only for information except for the last key feature – the importing of the template file’s css. This calls on the original file and then adds anything from our child theme to it.

THEN I added the following tweaks to change the menu bar colour, the title colour, and the the link colours:

Gatestone Style CSS Code

Next, I created another file in Notepad, ‘functions.php’. I pasted the code shared at the top of this post and added my custom colours and coding to exclude all category ID #s except for the one associated with the slug ‘principals-blog’.

Gatestone's Function PHP Code

At this point, I had two small 1KB files

Gatestone Files

….in a folder called ‘Gatestone Twenty Ten Theme’. I right-clicked the folder and ‘Send To > Compressed (Zipped) Folder’ (files have to be in a .zip format to upload), uploaded as a new theme, and activated it.

In all, about 20 minutes work – it took me longer to write this blog post.

Check it out at http://gatestone.commons.hwdsb.on.ca and follow along with the Grade 8 Student Voice Forum tomorrow from 2:00-3:00 PM on the blog and on Twitter #HWDSBvoices