Cimy Header Image Rotator and a Twenty Ten Child Theme

The previous post about rotating the header images in the Twenty Ten theme has been quite popular

but it was bad advice because as soon as you update your WordPress and/or theme files your changes are overwritten and lost. The solution is to move the changes into a child theme where they will overwrite the files in the original theme even when updating.

To make a child theme we simply create a folder in the WordPress themes folder (in the wp-content folder) and give it a name: mychildtheme (or whatever you want to call it).

We then save a plain text file called style.css into the mychildtheme folder. The style.css file reads:

/*
Theme Name: mychildtheme
Template: twentyten
*/

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

#cimy_div_id {
clear: both;
border-top: 4px solid #000;
border-bottom: 1px solid #000;
width: 940px;
height: 198px;
}

Where the Theme name and Template are required to indicate the parent and the child. The import URL grabs the original style.css file to be altered by our style.css file. We then include the #cimy_div_id section that we had originally used in the header.php file.

Create a new plain text file and copy the contents of the header.php file into it. Replace the

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

code with the


<div id="cimy_div_id">

<noscript>
<img id="cimy_img_id" src="http://yourDomain.com/somePicture.jpg" alt="" />
</noscript>

</div>

as before (we no longer need the styling here as it is in the style.css file), and then save this as header.php into the mychildtheme folder.

We can now preview and activate our mychildtheme as you would any other theme within WordPress. Our modified header.php will be used instead of the default header.php and our style.css will be used to make changes to the default styling. You can add further changes to the styling by adding to the style.css file in the child theme. The Firebug extension for the Firefox browser is a quick way to experiment with making changes before adding the code to your style sheet.


5 responses to “Cimy Header Image Rotator and a Twenty Ten Child Theme”

  1. Thanks for your efforts. Followed your instructions but the preview shows me a totally changed theme. I can send you some screenshots if needed.

  2. […] The best idea is to create a child theme indeed, someone already tried it: http://blog.duncanmoran.net Share this:TwitterFacebookLike this:LikeBe the first to like this […]

  3. Yeah it got me nowhere as well. You should be more informative on every step as most people who visit this page are newbies.

  4. but a much appreciated post.

  5. In case somebody else encountered Binti’s problem: Most likely the parent style.css is not imported. Check the spaces in your child style.css file. Do not copy-paste from this page.

All original content may be freely copied. Illustration on packaging may not match content.
Batteries not included. Suitable for vegetarians. Open at the other end.