Learning Curve

Having had to learn a whole bunch of new frameworks and other libraries recently it occurred to me that in reality learning curves for adults are nothing like those nice curves we're used to seeing and I've come with a bit of a less 'curvy' graph just because I felt I had to document it! :D

Forget Twentyten - use Thematic!!! (Clickable header image 2.0)

I've given more time that I usually like to give to new-ish things to having a go with the Twentyten WP theme. After all it has proven not quite flexible enough to clean pure child-theme customization (i.e.: not changing the parent theme code directly at all). So I've gone back to using Thematic - not only does it come in a more basic form than 2010 it also provides a great number of filter and action hooks making it far more child-theme-friendly than any other theme out there that I've come across (granted not that many, but carefully considered every time a new project is started).

Now, here's a (far better than in the previous post) way to make the header image clickable on your WP pages that I've found somewhere and now for the life of me cannot remember where :*( but nonetheless am grateful to the original poster. (This takes me back to the reason behind this blog - sort of organize clever solutions that I've already found and would very probably need to use again in the future).


#blog-title a {
background:url(images/header.png) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}


The text-indent line get's rid of that unsightly Blog Title text that would appear on top of your pretty header image. Naturally, you should replace the XX with your actual image dimensions.

More WordPress - make header image clickable

Another common issue seems to be making the header image clickable once you've managed to remove that mess of a clickable title that was cramping your style. A whole bunch of solutions are simple enough but require for you to edit the header.php file - which is a pretty bad idea if you're making a child theme (in my case it's a child of Twenyten).

Here's a cleaner solution that only requires for you to add a few lines to your child theme's functions.php file. We'll use the JavaScript and JQuery to attach a click() event to the custom header image.

First add this function:


<?php
function make_header_clickable()
{
//get our site's URL from the WP database
$opts = get_option('siteurl');
//add some jquery to make the header image clickable
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language='javascript' type="text/javascript">
$(document).ready(function(){
$("#branding img").click(function(){
window.location.href='<?php echo $opts; ?>';

});
});
</script>

<?php
}
?>


In the case of 2010 template #branding img is the identifier of the custom header image so you might have to change that according to your base theme.

Now make sure to add the action hook for the function to execute once the WP finished loading:


add_action( 'wp_loaded', 'make_header_clickable');


And Voila! Your header now functions as a HOME link.

WordPress! - change the header image in your child theme of twentyten

I've finally arrived at the WordPress users' orbit. With it came all the trials and retributions of mod'ing other people's templates into something that I want the site to actually look like. TwentyTen is the now standard basic template that ships with the default WP install and while making a child theme off of it turned out to be remarkably easy getting it to look like something else is not so much.

Here's a solution that turned out to be clean and simple to provide your own header image instead of the one of several that come with 2010.

Put the following code into your child theme's functions.php file:



$siteurl=get_option('siteurl');
define( 'HEADER_IMAGE', $siteurl.'/wp-content/themes/mychildtheme/images/header.png' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 965 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 160 ) );


First line gets us the url of the site and the rest of the values on the second line is the way to get to the subdirectory containing your child theme's header image thus building the image URI without hard-coding anything in.

The remaining two lines override the header image size for the 2010 template to reflect your header's dimensions.

All Done.