We were asked to extend the logo tutorial to explain how we have three clickable areas in our header, we modified the workflow and removed the image and the conditional code, lets start with what we have in our header.

Overview

On the left over the CMS-Lite logo we have a clickable div region with a left float and a width of 145px, we could have made this 300px, this uses the same attributes as our logo tutorial, when you click the logo from any page it will direct you back to the home page.

-

Over on the right we have our second region, this has a float right and when you click on this region you are directed to the main Digital raindrops website, where you would find the forum and Free WordPress Themes.

-

Our adSense banner will show on all pages except the home page as we have a 320px x 250px advertisement that is often the same graphic, this was created following the adSense tutorial and setting the margin right to position it.

Tutorial

First we will add the style to our demo-custom.css or the themes style.css file, we have edited the names here to make them more identifiable.

/* change the left height width margin and float here */
/* header is 125px */
#demo-header-left
{
 position:absolute;
 float:left;
 height:115px;
 margin-top:5px;
 margin-left:10px;
 width:145px;
 overflow:hidden;
}
/* change the height width for clickable area here */
#demo-header-left a {
 position: absolute;
 display: block;
 height:115px;
 width: 145px;
}
/* change the right height width margin and float here */
/* header is 125px */
#demo-header-right
{
 position:relative;
 float:right;
 height:115px;
 margin-top:5px;
 margin-right:10px;
 width:150px;
 overflow:hidden;
}
/* change the height width for clickable area here */
#demo-header-right a {
 float:right;
 position: absolute;
 display: block;
 height:115px;
 width: 150px;
}

If you have followed any other of our tutorials you would know that we create include files rather than paste blocks of code into the themes main files, this makes our changes easy to manage.

Create a file in the directory of your theme paste in the code below and save it as demo-header-left.php, changing the target url to the value you want full url including a closing slash.

<div id="demo-header-left">
  <a href=<?php echo "'http://yoursite.com/'"; ?> ></a>
</div>

Create a file in the directory of your theme paste in the code below and save it as demo-header-right.php, changing the target url to the value you want.

<div id="demo-header-right">
  <a href=<?php echo "'http://yoursite.com/forum/'"; ?> ></a>
</div>

Next you need to add a call to the files in the header.php add the call just before the closing div for the header class

<!-- Start Raindrops header region left  -->
<?php if (file_exists(TEMPLATEPATH . '/demo-header-left.php')) include_once(TEMPLATEPATH . '/demo-header-left.php'); ?>
<!-- End Raindrops header region left  -->

<!-- Start CMS-Lite header region right  -->
<?php if (file_exists(TEMPLATEPATH . '/demo-header-right.php')) include_once(TEMPLATEPATH . '/demo-header-right.php'); ?>
<!-- End CMS-Lite header region right  -->

That is it, a relatively simple task to do, also adding more features to your themes and another tool to offer your clients from your toolbox.

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

this website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.