Resources 4 Bloggers

You may wish to change the Banner Logo on your theme via the Wordpress WP-Admin.  Why? It’s easier! Especially if you’re a theme designer who wans to give their users an easy way of managing their site.

It is used as the foundation theme of our “£799 Website” offering. This service aims to allow our customers to do as much for themselves once we’ve got them up and running; this includes the ability to add the banner logo (at the top of each page) via WP-Admin Appearance Tab.  We made use of the add_custom_image_header function built into Wordpress!

So how did we add this functionality?

Before we tell you, there are some prerequisites: always back-up the files you are editing!

Done? Let’s continue…

Step One FUNCTIONS.PHP

In your theme’s directory, open functions.php

Scroll down to the bottom of the file and find the last line – it should be ?> which tells the software that the PHP code has finished.

Immediately above it paste…

// Admin Panel
//HEADER
//  Set some default values
define('HEADER_TEXTCOLOR', 'ff6700');//  Default text color
define('HEADER_IMAGE', '%s/images/main-logo.png');  // %s is theme dir uri, set a default image
define('HEADER_IMAGE_WIDTH', 960); //  Default image width is actually the div's width
define('HEADER_IMAGE_HEIGHT', 178);  // 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">
#logo{
background: url(<?php header_image() ?>) no-repeat;
width: 960px;
height: 178px;
margin: 0 0;
padding: 0 0;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
#logo h1, #logo #desc {
display: none;
}
<?php } else { ?>
#logo 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');

Step Two HEADER.PHP

Our example places a head with the diminesions 960 x 178 pixels as the banner logo.

Open up header.php and search for where the logo is manually programmed into the file and replace it with

 <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Why? Well if your don’t upload a logo, then at least you’ll have the text information about your blog displayed!

Step Three – Apply the Changes

Once functions.php and header.php are saved, ensure you original backup copies are safe and upload them, via your favourite FTP Client, to your theme directory.

Log-off your site and go back into WP-Admin and the Appearance Tab should have a new sub-tab called Custom Header.

This is where you can upload that banner image! It’s all as simple as that!

Technorati Tags: Wordpress, WP-Admin, Change banner, add_custom_image_header