Adding an Appearance sub-menu on Wordpress Admin


I dove head-first into the Wordpress a few month ago and have been swimming along with varied results ever since. Recently I've run into an annoying issue that I think is worth documenting for next time I need the solution to it.

The problem I've encountered requires adding a sub-menu page to the WP Admin built-in Appearance menu. There are vast amounts of information on adding option pages, new menu pages and even sub-pages. When you search for something like 'wordpress admin add sub-menu' (or anything else to that extent mentioning 'sub-menu' as it is the keyword in question) you'd probably end up with a bunch of tutorials and function reference pages guiding you to use the add_submenu_page function. Codex reference page for the function states that general usage being

add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );


you just need to use an appropriate parent_slug for the desired WP Admin menu and

7. For Appearance: add_submenu_page('themes.php',...) 

Well, guess what... nothing happens when you do that. I've stumbled across a line of code on one of the many tutorials that was a small unexplained aside followed by the full tutorial that was a lot like numerous others. However, adapting that 'aside' line to my code did the trick!!

The solution:
instead of

add_submenu_page('themes.php',...)  

use

add_theme_page('your-theme-name',...) 

where 'your-theme-name' is, in fact, just the name of the theme you are adding the page for. The rest of the meat filling is the same as for any of the add_xxx_page functions.

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.