Different Header for FrontPage

eddieb (Member)
Posted 1 year ago | Permalink

i would like to insert a couple extra divs inside hybrid_header() only on the frontpage.

whats the recommended way to do this?

A) make the custom page template (frontpage.php) call a different header.php ?
B) I include a conditional statement ( is_front_page() ) inside header.php so that it calls a different/custom hybrid_header() ?
C) hand code the extra stuff in frontpage.php, but isnt this a bit sloppy ?
D) is it possible to create an alternate hybrid_header(), that only gets sent to the browser when is_front_page(), inside functions.php ?
E) ???

there are so many different ways to go about it. covering all the pros and cons of each method is quite a task.

what would YOU do?
John Myrstad (Member)
Posted 1 year ago | Permalink

F. Use a hook and Hybrid Hook plugin using a conditional statement ( if possible )

hybrid_header
Makes up the content of div#header

http://themehybrid.com/themes/hybrid/hybrid-hook

I have never tried though...

Craig (Member)
Posted 1 year ago | Permalink

If it is a different header image and styling then you can try this in functions.php and change the image names or conditions.

<?php

add_action('wp_head', 'my_custom_header');

function my_custom_header() {

	$style = '<style type="text/css">';

	if(is_home()) :
		$style .= '#site-title a { background: url(/wp-content/themes/leviathan/images/header.png) no-repeat 0 0; 	display: block; width: 960px; height: 242px; margin: 0 0 0 0;}';

	elseif(is_page('About')) :
		$style .= '#site-title a { background: #d9dcc5 url(/wp-content/themes/leviathan/images/header2.png) no-repeat 0 0; display: block; width: 960px; height: 242px; margin: 0 0 0 0; }';

	elseif(is_page('Manhattan')) :
		$style .= '#site-title a { background: url(/wp-content/themes/leviathan/images/header3.png) no-repeat 0 0; display: block; width: 960px; height: 242px; margin: 0 0 0 0; }';

	elseif(is_category('9')) :
		$style .= '#site-title a { background: url(/wp-content/themes/leviathan/images/header4.png) no-repeat 0 0; display: block; width: 960px; height: 242px; margin: 0 0 0 0;}';

	else :
		$style .= '#site-title a { background: url(/wp-content/themes/leviathan/images/header5.png) no-repeat 0 0; display: block; width: 960px; height: 242px; margin: 0 0 0 0; }';

	endif;

	$style .= '</style>';

	echo $style;
}

?>

Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
eddieb (Member)
Posted 1 year ago | Permalink

i tried to follow john's way. i checked the allow PHP box in hybrid hook 0.1 but it didnt process the php - everything got displayed on screen. using hybrid .6, wp 2.8 & a mod of leviathan.

so i put the code in functions.php and it worked as intended. great, but why was the hybrid hook plugin even mentioned as a part of the solution in this case? John, did you mean to say CRAIGs solution would be the one?

thanks
Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
John Myrstad (Member)
Posted 1 year ago | Permalink

As I said, I have not done this, but know its a possible solution using php syntax as Justin points out.
eddieb (Member)
Posted 1 year ago | Permalink
i did use (<?php and ?>) tags around the code in HOOK>HEADER. it didnt work even w/o conditional tags. is this supposed to work from within the plugin?

or do i need to place it in functions.php? the inconvenience is that inside functions.php unicode chars like "á" get displayed as a "?" inside a diamond shape.
```
<?php
add_action( 'hybrid_header', 'my_header' );

function my_header() {
		echo 'content';
}
?>
```
Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
eddieb (Member)
Posted 1 year ago | Permalink

all right, all is good and clear now.

for future reference: if you use the plugin instead of functions.php method you do NOT need to use entities to represent unicode characters.

thanks to everyone who contributed.
eddieb (Member)
Posted 1 year ago | Permalink

suggestion: add a condition box to every hook available in the hybrid hooks plugin, a la "widget logic".
Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
eddieb (Member)
Posted 1 year ago | Permalink

hmmm, i thought Hybrid Hook would be the more advanced one, since it allows for php code...
but i see what you mean by conditions in Hybrid Hook settings being incompatible with multiple code sets.

i guess we still dont have the best of both worlds: multiple conditions possible + PHP allowed + no need to use HTML entities (a big one if you language requires such chars)

eddieb (Member)
Posted 1 year ago | Permalink

so i added the code above to hybrid_hook. all is fine.

how do I swap the css?

#header-container gets a different bg img
#header has a diff height and gets no bg img

thanks

#header-container {
	overflow: hidden;
	width: 100%;
	background: url(images/home_bar_bg.png) repeat-x bottom left;
	}
#header {
	position:relative;
	overflow: hidden;
	width: 960px;
	height: 261px;
	margin: 0 auto;
	padding: 0 0;
	background: url(images/home_banner.jpg) no-repeat bottom left;
	}

Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
eddieb (Member)
Posted 1 year ago | Permalink

sorry, i should have been more clear.

#header-container gets a different bg img
#header has a diff height and gets no bg img

should only take place if is_front_page() is not true, hence the question.
Justin Tadlock (Administrator)
Posted 1 year ago | Permalink

You must be a logged-in exclusive member to view this reply.
eddieb (Member)
Posted 1 year ago | Permalink

yep that does it! thank you justin.

Reply

You must log in to post.

Different Header for FrontPage

Reply

Limited Access

Community Forums

Support Forums