Bud's Tech Shed

Archive for June, 2009

I needed a navigation scheme to display categories below my main nav bar. After a lot of searching I found this navigation scheme for categories and it was pretty easy to integrate into my Artisteer theme.

First thing is to drop the following code into your header.php file just after the last closing div (at least on my theme it was the last one). You can put it anywhere you want, you just may have to play around with it bit to get it in the right div container.

    <div id="header3">
	<ul class="nav2"><?php wp_list_categories('title_li=&orderby=ID'); ?></ul><!-- nav2 close -->
</div>

Then add the following to the end of your style.css

/*START -- put this in the style.css */
#header3 {
clear:both;
background:#b5d1ea;/*if you want a background color */
font:10px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#000000;
height:100%;/* This works for my theme. You may want to make it 30px or something */
overflow:hidden;
}
.nav2 {
margin:0;
padding:0 12px;
list-style:none;
}

.nav2 li {
float:left;
font:10px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#000000;
}

.nav2 li a {
display:block;
padding:10px 8px 1px 8px;
line-height:100%;
color:#000000;
text-decoration:none;
}

.nav2 li a:hover {
text-decoration:underline;
}

/*END  */

That’s about it. Play around with the colors and padding to get it the way you want in your theme.

You can see it in action on my Artisteer theme here.

Have fun,

Bud

This tutorial is geared towards themes produced with Artisteer but will work with virtually any theme. It’s pretty straight forward with modifications to the functions.php and header.php files. Since everyone’s Artisteer generated themes are a little different your files might look a bit different but it shouldn’t be too complicated.

If it fails to work the first time check for typos. Also when you paste the code into your functions.php file make sure that you don’t break up any existing code blocks.

OK, let’s get started. Since we’re going to be modifying some files we need to backup functions.php and header.php. You can use your favorite text editor (not Word). Also I would recommend against using the theme edit function as it’s impossible to undo what you’ve done.

Open your functions.php file and scroll to the bottom. The last few lines might look like this

add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
if(!function_exists('wp_list_comments')) : // WP 2.7-only check
$file = TEMPLATEPATH.'/legacy.comments.php';
endif;
return $file;
}  

Add this chunk of code to the end of your functions.php file. You’ll want to change the size of your header area and the default color of your header text. The HEADER_IMAGE is the name of your default header image. There is a bunch of CSS styling for the header text. You may want to change it to match your theme. You can copy what you need from your style.css file.

If you don’t want to copy and paste the source code below you can download my Cool Blue theme and extract it from a working example.

<?php
// Admin Panel
//  Set some default values
define('HEADER_TEXTCOLOR', 'ffffff');//  Default text color
define('HEADER_IMAGE', '%s/images/Header.jpg');  // %s is theme dir uri, set a default image
define('HEADER_IMAGE_WIDTH', 998); //  Default image width is actually the div's width
define('HEADER_IMAGE_HEIGHT', 125);  // Same for height

function header_style() {
//  This function defines the style for the theme
//  You can change these selectors to match your theme
?>
<style type="text/css">
#header{
background: url(<?php header_image() ?>) no-repeat;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
#header h1, #header #desc {
display: none;
}
<?php } else { ?>
#header h1 a, #desc {
color:#<?php header_textcolor() ?>;
}
#desc {
margin-right: 30px;
}
<?php } ?>
</style>
<?php
}

function admin_header_style() {
?>
<style type="text/css">
#headimg{
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
padding:0 0 0 18px;
}

#headimg h1{
padding-top:40px;
margin: 0;
}
#headimg h1 a{
color:#<?php header_textcolor() ?>;
text-decoration: none;
border-bottom: none;
}
#headimg #desc{
color:#<?php header_textcolor() ?>;
font-size:1em;
margin-top:-0.5em;
}

#desc {
display: none;
}

<?php if ( 'blank' == get_header_textcolor() ) { ?>
#headimg h1, #headimg #desc {
display: none;
}
#headimg h1 a, #headimg #desc {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>

</style>
<?php
}

add_custom_image_header('header_style', 'admin_header_style');

?>
;

Save the functions.php file and open your header.php file.

Find the following lines near the end of the header.php file (yours may be slightly different than mine).

<div class="Header">
    <div class="Header-jpeg"></div>
<div class="logo">
    <h1 id="name-text" class="logo-name">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div id="slogan-text" class="logo-text">
        <?php bloginfo('description'); ?></div>
</div> 

</div>

Just comment them out for now. You can delete them later when you’re sure everything works.

Now add this code to replace the above…

<div id="header">
	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<p class="desc"><?php bloginfo('description');?></p>
</div>

That’s it.

Now for the big test. Go to your admin panel and you should now see “Custom Image Header” in the Appearance panel. If your them breaks and you get a PHP error check your functions.php file for typos. If all else fails you can always copy your backup file over.

If you see the new function, click on it and you should see something like this (of course it will have your header).

Note: This will work best with an image that doesn’t have a transparent overlay, such as an Artisteer generated header with round corners. Start out simple, make a theme with no radius and experiment.

Have fun with your new theme function. You can upload a large image and crop the section you want to use. If the image is exactly the same size it will use it as is. Another bonus is that all of the images that you crop will be put in the upload directory. So if you play with it a lot you may end up with a large quantity of files in your image gallery.

Disclaimer: Performing this mod to your theme could break it. It does work and is a core WordPress API that’s being called. If your easily frustrated or break out in a sweat when things don’t work right then pass on this enhancement or get someone else to help you out . Never work on your original files. Always make backups. Drink plenty of liquids. Your milage may vary.