Having planned to do the work to combine my two previous blogs together, I thought I’d take the opportunity to upgrade to the very latest WordPress 3.0 version, which includes the all new default theme TwentyTen.
This is already a very nice theme – a much improvement over the last default. It’s also very easy to customise to your own preference, for instance you can change the background colour and add a picture to the background and change the header image all with a few clicks of the mouse. It also makes a very nice base theme.
I wanted to make a few improvements of my own, so – as is the (very clever) wordpress way – I made a child theme based on TwentyTen. This is incredibly easy to do. Just make an empty folder in the the themes folder and add a css file named “style.css” then add a comment at the top that points back at the parent theme:
- /*
- Theme Name: Twenty Ten Akademy
- Description: Akademy's Child theme of Twenty Ten
- Author: Matthew Wilcoxson
- Template: twentyten
- */
Once done you can overwrite styles, functions and even whole files.
My changes, amongst others, consisted of a semi transparent background for the main section, a nice border and some rounded corners, so I just appended these to the “style.css” file.
- #wrapper {
- background-color: #eee; /* Old browser */
- background-color: rgba( 255,255,255,0.7);/* Modern browser */
- border: 10px solid #fafafa;
- border-radius: 10px 10px 0 0;
- }
I also wanted the headers to change randomly so that I could show off some of my photos, to do that I just added the HungryCoders little plugin (here). This rotates around the selection of headers that come with the default theme, which isn’t quite what I wanted. To pick up a list of my own headers I create a file called functions.php that overwrites the function twentyten_setup(). This is basically identical but reads in files from a folder, see the following code that replaced the original static array.
- $headers = array();
- if ($handle = opendir( STYLESHEETPATH . '/images/headers/') )
- {
- while (false !== ($file = readdir($handle)))
- {
- $pos = strrpos( $file, '.' );
- if( $pos !== false && $pos > 0 )
- {
- $file_name = substr( $file, 0, $pos );
- if( strpos( $file_name, "-thumbnail" ) === false )
- {
- $file_ext = substr( $file, $pos+1 );
- $file_ext_low = strtolower( $file_ext );
- if( $file_ext_low == "jpg" || $file_ext_low == "jpeg" )
- {
- $headers[$file_name] = array (
- 'url' => '%s/images/headers/' . $file,
- 'thumbnail_url' => '%s/images/headers/' . $file_name . "-thumbnail." . $file_ext,
- 'description' => __( $file_name, 'twentyten' ) );
- }
- }
- }
- }
- closedir($handle);
- }
- register_default_headers( $headers );
The extra PHP code scans a folder at STYLESHEETPATH/images/headers/ . It looks for jpeg files. Once found it adds these to the header collection, with a thumbnail, the thumbnail has “-thumbail.” in (e.g. myheader.jpg and myheader-thumbnail.jpg). The name of the file will also be used as a description. Now when you go to any blog page, the plugin will pick one of your images. To use it just add your header images, in jpeg format, in to the images/headers folder of the child theme.
If you’d like to get hold of the files download the files here and unzip into your theme folder.
Hi I am trying to get a 20-10 rotator working and have downloaded your script but I get the following error when trying to activate the theme. I must be doing something stupid. Any suggestions
Fool I am, did not paste the error:
Fatal error: Cannot redeclare twentyten_page_menu_args() (previously declared in /var/www/vhosts/by-rob.com/subdomains/shooting/httpdocs/wp-content/themes/twentyten-akademy/functions.php:317) in /var/www/vhosts/by-rob.com/subdomains/shooting/httpdocs/wp-content/themes/twentyten/functions.php on line 217
Hi Rob,
I’m afraid the package contains the wrong functions.php file, must have selected the wrong one.
Replace it with the new zip file I’ve just uploaded from the same place. Thanks for catching that one!
Mat