A different custom header for the WordPress

giantbonsai comments:

Thank you, yes, I would like it all to be in the functions file if possible - here is the existing code that is in my function file:

// Take Away Default Thematic Header
function new_header() {
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'new_header');

// Insert Custom Header
function custom_header() { ?>


<script type="text/javascript" src="http://www.plasticarmy.com//global/mootools.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
//-vertical


var mySlide = new Fx.Slide('vertical_slide').show();

$('toggle').addEvent('click', function(e){
e = new Event(e);

mySlide.toggle();

e.stop();
});


});
</script>

<div id="branding">
<div id="notestext">
<ul id="notestextmenu">
<li id="ahart"><a href="http://www.plasticarmy.com/art/"></a></li>
<li id="ahprojects"><a href="http://www.plasticarmy.com/projects/"></a></li>
<li id="ahmusic"><a href="http://www.plasticarmy.com/music/"></a></li>
<li id="ahnotes"><a href="http://www.plasticarmy.com/notes/"></a></li>
<li id="ahlove"><a href="http://www.plasticarmy.com/love/"></a></li>
<li id="ahminus"><a href="/" id="toggle" title="hide header"></a></li>
</ul>
</div>

<div id="vertical_slide"> <!-- header start -->
<div id="sevenpix">

<div id="notesiconrollover">
<div class="notesiconrollover"><a href="http://www.plasticarmy.com/"></a> </div>
</div>

<h1 class="banner"><a href="http://localhost:8888/">notes</a></h1>

<div id="barcoderollover">
<div class="barcoderollover"><a href="http://www.plasticarmy.com/"></a> </div>
</div>

</div> <!-- sevenpix end -->

</div> <!-- header end -->

<div id="tophr"> <!-- --> </div>
</div> <!-- branding end -->


<?php }
add_action('thematic_header','custom_header');
add_action('thematic_header','thematic_access');


Buzu B comments:

I looked at the links you provided to the thematic forums. I see now how you are adding you rcustom header.

I assume you now have something like this:


function custom_header() { ?>
<div id="bloginfo">
<h1 id="blog-title"></h1>
<div id="blog-description"></div>
</div><!-- #bloginfo -->
<div id="navigation"></div>
<?php }
add_action('thematic_header','custom_header');


along with the code that removes the actions.

Now, you will have to change your function to look like this:

function custom_header() {
if(is_single()){
?>
<style type="text/css">

#wrapper {

margin: 0 auto;

width: 850px;

text-align: left;

}



a {

outline:medium none;

}





#toptext {

margin: 7px 0 0 0; border: 0; padding: 0;

}



#toptextmenu {

width: 850px;

height: 25px;

background: url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif);

background-repeat: no-repeat;

margin: 0; padding: 0;

position: relative;

}



#toptextmenu li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}



#toptextmenu li, #toptextmenu a {height: 25px; display: block;}

#bahart {left: 25px; width: 60px;}

#bahprojects {left: 142px; width: 60px;}

#bahmusic {left: 258px; width: 60px;}

#bahnotes {left: 374px; width: 60px;}

#bahlove {left: 490px; width: 60px;}



#bahart a:hover {background: transparent url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif) -25px -25px no-repeat;}

#bahprojects a:hover {background: transparent url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif) -142px -25px no-repeat;}

#bahmusic a:hover {background: transparent url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif) -258px -25px no-repeat;}

#bahnotes a:hover {background: transparent url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif) -374px -25px no-repeat;}

#bahlove a:hover {background: transparent url(http://www.plasticarmy.com/globalgraphics/ttextrollovernotes.gif) -490px -25px no-repeat;}



#bbanner {

width: 850px;

height: 85px;

margin: 8px 0 0 0; position: relative;

background-color: #eeefef;

padding: 0px;

}



#bthreediconrollover {

width: 85px; height: 85px;

margin: 0; padding: 0;

position: absolute;

z-index: 1;

background: url(http://www.plasticarmy.com/globalgraphics/notesinsiderollover.gif);

}



div.bthreediconrollover a {

display: block;

margin: 0; padding: 0;

width: 85px; height: 85px;

background: url(http://www.plasticarmy.com/globalgraphics/notesinsiderollover.gif);

background-repeat: no-repeat;

position: absolute;

}



div.bthreediconrollover a:hover {

background: transparent url(http://www.plasticarmy.com/globalgraphics/notesinsiderollover.gif) 0px -85px no-repeat;}



h1 {

font-family: "Gill Sans", Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 3.1em;

letter-spacing: .2em;

display: inline;

color: #739838;

padding: 0 0 0 158px;

margin-top: 10px;

position: absolute;

}



.extended {

font-style:italic;

letter-spacing: .07em;

}





#bbarcoderollover {

width: 306px; height: 53px;

margin: 0; padding: 0;

position: absolute; left: 544px;

background: url(http://plasticarmy.com/globalgraphics/pa-barcode-logo.gif);

}



div.bbarcoderollover a {

display: block;

margin: 0; padding: 0;

width: 306px; height: 53px;

background: url(http://plasticarmy.com/globalgraphics/pa-barcode-logo.gif);

background-repeat: no-repeat;

position: absolute;

}



div.bbarcoderollover a:hover {

background: transparent url(http://plasticarmy.com/globalgraphics/pa-barcode-logo.gif) 0px -53px no-repeat;}

</style>



<div id="wrapper">



<div id="toptext">

<ul id="toptextmenu">

<li id="bahart"><a href="#"></a></li>

<li id="bahprojects"><a href="#"></a></li>



<li id="bahmusic"><a href="#"></a></li>

<li id="bahnotes"><a href="#"></a></li>

<li id="bahlove"><a href="#"></a></li>

</ul>

</div>



<div id="bbanner">

<div id="bthreediconrollover">

<div class="bthreediconrollover"><a href="#"></a></div>

</div>

<h1 class="bbanner"> <span class="extended">(more) </span>notes</h1>





<div id="bbarcoderollover">

<div class="bbarcoderollover"><a href="#"></a></div>

</div>

<?php
}else{
?>
<div id="bloginfo">
<h1 id="blog-title"></h1>
<div id="blog-description"></div>
</div><!-- #bloginfo -->
<div id="navigation"></div>
<?php }
}
add_action('thematic_header','custom_header');

Replace this:

<div id="bloginfo">
<h1 id="blog-title"></h1>
<div id="blog-description"></div>
</div><!-- #bloginfo -->
<div id="navigation"></div>

with the code you already use to print the header. Now when you navigate to a single post you should see a different header.

Buzu B comments:

Ok, lets do it again because the code is kind of too messy.

I will not put the CSS or HTML to print the header. I will assume you know what to put because I see you have no CSS in your function, that makes me think the CSS is being taken care of outside the function.

I'll just outline the function so you can see where to put your code. The changes are to be done in custom_header() The other code is all right the way you have it.

function custom_header(){
//If there is code you want printed regardless of the page put it here.
//That code can be Javascript that needs to be present in both cases, CSS, etc.
if(is_single()){//this line checks if the current page is a single post.
//PUT the code you want printed out when they are seeing a single post.
// That is, when they clicked the "more" link
}else{
//HERE put what you want printed out when they are seing something else, like the fron page.
}
}

I hope that clarifies things a bit.

Buzu B comments:

Hi. Were you able to do it? do you need more in-detail help?

giantbonsai comments:

Hi Buzu B. I just tried it out, and I need more in-detail help. Here is the link to the site as it now looks:
[[LINK href="http://embassylane.com/notes/"]]http://embassylane.com/notes/[[/LINK]]

On the plus side, both banners are showing up, but on the minus side, they are showing up on the same page : (

What I did is I tried to implement just your final suggestion, and ignored everything above. My CSS is in my style.css file.

Here is the relevant portion of the functions file, and how I changed it in my effort to follow your instructions: (I have to go out for a few hours, but I will be back to this at around 9pm Eastern Time U.S. Thanks for your help so far.


// Take Away Default Thematic Header
function new_header() {
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'new_header');

// Insert Custom Header
function custom_header() { ?>
if(is_single()){
<div id="toptext">
<ul id="toptextmenu">
<li id="bahart"><a href="#"></a></li>
<li id="bahprojects"><a href="#"></a></li>
<li id="bahmusic"><a href="#"></a></li>
<li id="bahnotes"><a href="#"></a></li>
<li id="bahlove"><a href="#"></a></li>
</ul>
</div>

<div id="bbanner">
<div id="bthreediconrollover">
<div class="bthreediconrollover"><a href="#"></a></div>
</div>
<h1 class="single"> <span class="extended">(more) </span>notes</h1>


<div id="bbarcoderollover">
<div class="bbarcoderollover"><a href="#"></a></div>

}else{
<script type="text/javascript" src="http://www.plasticarmy.com//global/mootools.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
//-vertical


var mySlide = new Fx.Slide('vertical_slide').show();

$('toggle').addEvent('click', function(e){
e = new Event(e);

mySlide.toggle();

e.stop();
});


});
</script>

<div id="branding">
<div id="notestext">
<ul id="notestextmenu">
<li id="ahart"><a href="http://www.plasticarmy.com/art/"></a></li>
<li id="ahprojects"><a href="http://www.plasticarmy.com/projects/"></a></li>
<li id="ahmusic"><a href="http://www.plasticarmy.com/music/"></a></li>
<li id="ahnotes"><a href="http://www.plasticarmy.com/notes/"></a></li>
<li id="ahlove"><a href="http://www.plasticarmy.com/love/"></a></li>
<li id="ahminus"><a href="/" id="toggle" title="hide header"></a></li>
</ul>
</div>

<div id="vertical_slide"> <!-- header start -->
<div id="sevenpix">

<div id="notesiconrollover">
<div class="notesiconrollover"><a href="http://www.plasticarmy.com/"></a> </div>
</div>

<h1 class="banner"><a href="http://localhost:8888/">notes</a></h1>

<div id="barcoderollover">
<div class="barcoderollover"><a href="http://www.plasticarmy.com/"></a> </div>
</div>

</div> <!-- sevenpix end -->

</div> <!-- header end -->

<div id="tophr"> <!-- --> </div>
</div> <!-- branding end -->

}

}



<?php }
add_action('thematic_header','custom_header');
add_action('thematic_header','thematic_access');


giantbonsai comments:

I would also like to add (in terms of your instructions)
--The two headers are totally different so there is no code that should print regardless of the page.

Buzu B comments:

The problem is you left the if() statement out of the php block, so php is not interpreting it. That is why you get both header. I modified it. Here is the code. It should work perfect now. Here is the whole code the way I have it now. Meke sure you put it within a php block i.e. surrounded by <?php and ?>


// Take Away Default Thematic Header

function new_header() {
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
remove_action('thematic_header','thematic_access',9);
}

add_action('init', 'new_header');

function custom_header() {
if(is_single()){
?>
<div id="toptext">
<ul id="toptextmenu">
<li id="bahart"><a href="#"></a></li>
<li id="bahprojects"><a href="#"></a></li>
<li id="bahmusic"><a href="#"></a></li>
<li id="bahnotes"><a href="#"></a></li>
<li id="bahlove"><a href="#"></a></li>
</ul>
</div>
<div id="bbanner">
<div id="bthreediconrollover">
<div class="bthreediconrollover"><a href="#"></a></div>
</div>
<h1 class="single"> <span class="extended">(more) </span>notes</h1>
<div id="bbarcoderollover">
<div class="bbarcoderollover"><a href="#"></a></div>
<!-- BUZU syas: I think you are missing a </div> here -->
<?php
}else{
?>
<script type="text/javascript" src="http://www.plasticarmy.com//global/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
//-vertical
var mySlide = new Fx.Slide('vertical_slide').show();
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
<div id="branding">
<div id="notestext">
<ul id="notestextmenu">
<li id="ahart"><a href="http://www.plasticarmy.com/art/"></a></li>
<li id="ahprojects"><a href="http://www.plasticarmy.com/projects/"></a></li>
<li id="ahmusic"><a href="http://www.plasticarmy.com/music/"></a></li>
<li id="ahnotes"><a href="http://www.plasticarmy.com/notes/"></a></li>
<li id="ahlove"><a href="http://www.plasticarmy.com/love/"></a></li>
<li id="ahminus"><a href="/" id="toggle" title="hide header"></a></li>
</ul>
</div>
<div id="vertical_slide"> <!-- header start -->
<div id="sevenpix">
<div id="notesiconrollover">
<div class="notesiconrollover"><a href="http://www.plasticarmy.com/"></a> </div>
</div>
<h1 class="banner"><a href="http://localhost:8888/">notes</a></h1>
<div id="barcoderollover">
<div class="barcoderollover"><a href="http://www.plasticarmy.com/"></a></div>
</div>
</div> <!-- sevenpix end -->
</div> <!-- header end -->
<div id="tophr"> <!-- --> </div>
</div> <!-- branding end -->
<?php
}
}

add_action('thematic_header','custom_header');
add_action('thematic_header','thematic_access');



If you have any trouble adding it, just let me know. I will be happy to send you my email address so you can send me your functions.php file and I'll be happy to add the code for you.

giantbonsai comments:

Thanks so much Buzu B - works like a charm now. And a much simpler solution than I realized.

Just out of curiosity, if I wanted a different header a single page, is there a simple line I can add to the if/then statement to make that happen?

Anyway, I suppose you don't have to answer that, I really appreciate all your help and working with me to ensure I understood what to do. (You were right about that missing </div> too!)

Thanks!! (And thanks to wpquestions too, this is a great service),.