Making A Child Theme of Twenty Ten
I realized after a recent upgrade to WordPress 3.0 and after changing my blog’s address that I was tired of my old blog’s look. I was really impressed with the new default theme for 3.0: Twenty Ten. It’s simple, aesthetically pleasing, and supports all the new features of 3.0.
Since my new job requires me to learn a lot of PHP and HTML I’ve used some of my new skills in developing a child theme for Twenty Ten. Child themes are great! They allow you to basically extend and customize an existing theme in a way that won’t break if the theme gets an update.
The notable changes I made to Twenty Ten include adding the Twenty Ten Header Rotator plugin, using custom images for the header, adding some Twitter/RSS buttons at the top, adding a snazzy search bar and putting my contemplative face in the header.
To use my own images for the Twenty Ten header I borrowed some code provided by Matthew on the Twenty Ten Header Rotator plugin site. I replaced the following code in functions.php
register_default_headers( array(
'berries' => array(
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Berries', 'twentyten' )
),
'cherryblossom' => array(
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Cherry Blossoms', 'twentyten' )
),
'concave' => array(
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Concave', 'twentyten' )
),
'fern' => array(
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Fern', 'twentyten' )
),
'forestfloor' => array(
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Forest Floor', 'twentyten' )
),
'inkwell' => array(
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Inkwell', 'twentyten' )
),
'path' => array(
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Path', 'twentyten' )
),
'sunset' => array(
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Sunset', 'twentyten' )
)
));
which is a static array, with this while loop:
if ($handle = opendir( STYLESHEETPATH. '/images/headers/') )
{
$headers = array();
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_enhanced/images/headers/' . $file,
'thumbnail_url' => '%s_enhanced/images/headers/' . $file_name . "-thumbnail." . $file_ext,
'description' => __( str_replace( "_", " ", $file_name ), 'twentyten' ));
}
}
}
}
closedir($handle);
register_default_headers( $headers );
}
Notice on line 16 and 17 I had to append “_enhanced” to the $s variable in order to get it to work since I am storing the images in my child theme’s images folder instead of the parent directory. $s appears to refer to the theme directory url and in my case adding “_enhanced” works since my theme is in the twentyten_enhanced folder. Additionally I used STYLESHEETPATH instead of TEMPLATEPATH. STYLESHEETPATH refers to the child theme’s directory while TEMPLATEPATH refers to the parent theme directory.
In order to add the Twitter/RSS buttons in the header I added the following div right below the div with id “site-description” in the header.php file:
<div id="twitter-rss">
<a href="rss"><img alt="Subscribe to RSS" src="http://theblawblog.com/wp-content/icons/rss.png" /></a>
<a href="http://twitter.com/bradford"><img alt="Follow me on twitter!" src="http://theblawblog.com/wp-content/icons/twitter.png" /></a>
</div>
That won’t look pretty without some css to go along with it so I added these css rules to style.css:
#twitter-rss {
float: left;
}
#branding img.twitter-rss {
border-top: 0px;
border-bottom: 0px;
display: inline;
}
I also added the following style rules to the site description and site title to position it around the image of my thoughtful visage and include a hidden link in the site description:
#site-title {
margin: 10px 0 18px 110px;
width: 462px;
}
#site-description {
float: left;
margin: 25px 10px 18px 0;
text-align:right;
}
#branding a.no_u {
text-decoration: none;
}
#branding a.no_u:link {
color: #666;
}
#branding a.no_u:visited {
color: #666;
}```
The last 3 groups of code refer to a class called “no\_u” so when I made the link in my site description I had to make sure to reference the class “no\_u” like this:
```xml
<div id="site-description">
<a class="no_u" href="http://en.wikipedia.org/wiki/Prayer_of_Saint_Francis#Prayer"><?php bloginfo( 'description' ); ?></a>
</div>
Next I included a snazzy hidden search box as well. This was a little more involved but still quite simple if you understand a few basics of PHP. First, I added the search form element in the header.php file right below the php line that gets the menu array, I’ll just include it as a point of reference:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<?php $search_text = ($_REQUEST["s"]=='')?"...search":'Search for: '.$_REQUEST["s"];?>
<div class="search-form">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>" name="s" id="s" onblur="if (this.value == '')
{this.value = '<?php echo $search_text; ?>';}" onfocus="if (this.value == '<?php echo $search_text; ?>')
{this.value = '';}" /><input type="hidden" id="searchsubmit" />
</form>
</div>
Line 2 above is PHP code that sets a variable $search_text to “…search” IF we aren’t in the middle of a search, and “Search for: whateveryousearchedfor” if we have just performed a search. That makes the content of the form below it dynamic. Below on lines 3-9 is the search form. If just this code is added to your header you’ll have a search box floating somewhere in your header. To style it I used CSS rules:
.search-form input {
width: 210px;
color: #AAA;
background: #000000;
border: none;
display: block;
margin: 8px 8px 0 0;
text-align: right;
float: right;
}
.search-form input:focus {
width: 150px;
background: #FFFFFF;
color: #666;
text-align: left
}
These two rule blocks define two states of the search-form class. The first state is the default state. It’s colored black with no border, its text is white, and its margin and float rules define where it is in the header – aligned to the right.
The second block defines how it changes when it’s in focus. Its width changes, its background becomes white and its text color becomes black. It’s quite simple and it makes for an attractive and subtle search box for the Twenty Ten theme.
I also added an image of myself at the top. This was really simple by just adding the following css rules:
#header {
background-image:url('http://theblawblog.com/wp-content/themes/twentyten_enhanced/images/watermark_cropped.png');
background-repeat:no-repeat;
}
I’m still in the process of customizing my child theme, I’m not sure what I’ll be doing next but this is a great start.
Resources:
Comments
Kimberly
So you lost me with all the PHP CSS mumbo jumbo devil tongue, but I think your blog looks great!
If you felt like changing mine, I would be elated. (Especially since I don't have a clue what it requires to actually do it myself). If ever you need something more to do with your time, feel free! :)
bradford
Hah! You’re hosted on blogspot which makes it harder to do cool stuff like this but it’s possible! Let me know what you want to change and I can help you do that.
Shafina
Hey ya Bradford,
Thanks a lot for the tutorial. I learned a lot regarding inserting the RSS Feed and Twitter button. They're really cool. But I don't really understand the whole div id="twitter-rss and the #twitter-rss. How do I know what label to use for the div id? is it up to our own creativity?
I customized this blog for my client. It's using TwentyTen, too.
yourmatch-mypoint.com
Give it a peek and let me know what you think.
Thanks.
Shafina
bradford
Thanks Shafina,
Your blog looks great! I like how you used the background. Sometimes it is hard to pull that off but you did it beautifully. The `div id="twitter-rss"` in the HTML is giving that div element an id of `twitter-rss`. The id should be unique, meaning there should only be one element with that id. Then, in CSS, you use `#twitter-rss` to change the element's style. The `#` in css indicates that you want to style an id. There's more information here: http://www.tizag.com/cssT/c...
It looks like you're doing some cool stuff with TwentyTen though, keep up the good work!
Bradford