Codium Extend Child Theme Headers: Taking Control

If you’re like me and you like using WordPress you may want to modify the themes that are commonly used and customise them to your own liking. The WordPress supplied themes TwentyTen, TwentyEleven are quite commonly used and there is a lot of support for them on WordPress’ own site but those suggestions won’t help if you are using a different theme: such as Codium-Extend that already includes a customisable header.

It is generally considered to be bad practice to modify existing themes mainly because their complexity sometimes leads to bugs that require patching/updating and hence your updates to the parent theme can be wiped out by a single careless “yes I’ll update that theme” moment one late night. Of course you could just resolve to NEVER update your theme but there may be a time when you really want that new feature or bug fix and you have to update the parent theme. In these cases and for best practice it’s best to create a child theme and update the style.css file as you see fit. In my case this wasn’t enough as there were functions called in my theme of choice that could not be over-ridden by modifying the style.css file.

Presented with the issue of updating the header of a codium-extend themed site I spent a lot of time both searching and learning how WordPress have implemented their PHP/CSS before I came up with the following solution - which I might add was not actually presented in full on any one site I found in my searching.

Before I go on I need to say that this is likely not the only solution nor is it necessarily the best solution I know only that it works well for me on my site.

The way codium-extend creates its custom header is by using the function add_custom_image_header() and it references two functions to do so: codium_extend_header_style() and codium_extend_admin_header_style(). These are all located in the functions.php file in the parent theme (codium-extend). Since you can’t redefine previously defined variables and since you can’t over-ride already defined functions neatly, it’s just easier to ignore those two functions created by codium-extend and simply create your own.

Start by copying the existing two header style functions from codium and renaming them to whatever you like. From there modify them as you see fit/require. Here’s what mine looked like after I had done this:

<?php
// gets included in the site header
function td_header_style() {
?><style type="text/css">
div#header {
	background: url("http://techdistortion.com/wp/wp-content/themes/codium-extend-td/TD-1090x120.png") no-repeat;
	height :120px;
	-moz-border-radius:6px;
	border-radius:6px;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
	h1.blogtitle,.description { display: none; }
<?php } else { ?>
	h1.blogtitle a,.description { color:#<?php header_textcolor() ?>; }
<?php
} ?>
</style><?php
}

// gets included in the admin header
function td_admin_header_style() {
?><style type="text/css">
#headimg {
	width:1090px;
	height:120px;
}
</style><?php
}
?>

After this we’ve now setup the two functions how we want them and it’s time to remove the existing image header for which WordPress provide a function appropriately called remove_custom_image_header(). In order to execute this and our two new functions we need to wrap them in an action that takes place after the theme has finished its setup (if we don’t we’ll be removing an image header that hadn’t been created yet = this is bad) as follows:

<?php
	add_action( 'after_setup_theme','remove_image_header', 100 );
	function remove_image_header() {
	remove_custom_image_header();
	add_custom_image_header('td_header_style', 'td_admin_header_style');
}
?>

Of course you can name your two new functions whatever you like but I prefixed mine with “td” after this site.

All of this is all very well and sedentary but the problem is that as of WordPress v3.4 (not released yet but will be soon) the add_customer_image_header is going to be deprecated. It’s advisable then to look into add_theme_support(‘custom header’); after that point. I’m assuming there will be an update to codium-extend to support add_theme_support at that time.

The same principles in this article can be used to create your own functions that are executed in a child theme to supplement functionality not present in the parent theme, without having to modify the parent theme.

TechDistortion

Codium Extend Child Theme Headers: Taking Control