Different Header images (3)for Home, all other pages, and Mobile on TwentyTwelve

Resolved

(@davidborrink)

Using this thread, I’m trying to set up a standard header for all pages in desktop mode, a special larger header just for the home page, and then a special version just for mobile.

Since that thread is older and closed, I need to ask if someone could verify this for me. I get color hinting but they’re not matching the same between the “home” and the “mobile” versions. Obviously I’m not doing something right.

Could I ask someone to take a second and see what I’m missing. I’m getting better at PHP but I still don’t know enough syntax to figure this out.

Thanks!

<?php $header_image = get_header_image();
		if(is_home()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="/wp-content/uploads/2016/01/Header-Full-setup-1.jpg" alt="" /></a>';
		elseif ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>;
        else(wp_is_mobile()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="/wp-content/uploads/2016/01/Header-Mobile.jpg" alt="" /></a>';
		<?php endif; ?>

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

David Borrink

(@davidborrink)

8 years, 3 months ago

I’m doing this in a child theme, fyi.

Thread Starter

David Borrink

(@davidborrink)

8 years, 3 months ago

FORGET THE ABOVE… let’s start over….

I’m testing this on a MAMP setup and I have a default header set up that is shorter vertically. For the “home” header I have a taller one, and for mobile I have a narrower one. In the code below you’ll see I have them specified.

<?php $header_image = get_header_image();
		if(is_home()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="/wp-content/uploads/2016/01/header-default-1200x280.jpg" alt="" /></a>';
		elseif ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>;
        else (wp_is_mobile()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="/wp-content/uploads/2016/01/header-mobile-600x140.jpg" alt="" /></a>';
		<?php endif; ?>

When tested, I get no header when I click on the blog title link, so my code sort of works because the default header doesn’t show. On all other pages I get the default header which is correct, but I get some code displayed below the header of ; else (wp_is_mobile()) : echo ''; . That’s from the mobile coding.

Mobile isn’t showing up when I narrow the page to test. So obviously I’ve got something wrong. The example code I received was supposed to work in TwentyTwelve but it’s not.

Could someone see what I’m missing?

Thread Starter

David Borrink

(@davidborrink)

8 years, 3 months ago

Made some adjustments after apparently copying the code wrong from the other thread I referenced.

This is getting me a different header for “home”. While all other pages are giving me the default header. I’m 2/3 the way there. Still trying to figure out the mobile part, because I’m getting the default header instead.

<?php $header_image = get_header_image();
		if(is_home()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="wp-content/uploads/2016/01/header-default-1200x280.jpg" alt="" /></a>';
		elseif(wp_is_mobile()) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="wp-content/uploads/2016/01/header-mobile-600x140.jpg" alt="" /></a>';
		elseif ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

Thread Starter

David Borrink

(@davidborrink)

8 years, 2 months ago

Solved.

Mistook that “wp_is_mobile” would work in the header. It doesn’t.

So I have the “front” and “inside” headers working, and I created an alternate version for mobile that works whenever the screen goes below 400, using CSS to swap them out.

So in the header.php file is this…

<div id="normal-header">
        		<?php $header_image = get_header_image();
		if (is_page ( 'home-page' ) ) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '"><img class="header-image" src="/wp-content/uploads/2016/01/Header-Full-setup-1.jpg" alt="" /></a>';
		elseif ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
</div> <!-- #normal-header -->

<div id="mobile-header">
        <img src="/wp-content/uploads/2016/01/Header-Mobile.jpg" alt="" />
</div> <!-- #mobile-header -->

And in the CSS, goes this…

/* hide mobile header when over 400px */
#mobile-header {
    display: none;
}

/* switch header displays at 400px */
@media screen and (max-width: 400px) {
    #normal-header {
        display: none;
    }   

    #mobile-header {
        display: block;
    }

    #mobile-header img {
    width: 100%;
    }

}

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Different Header images (3)for Home, all other pages, and Mobile on TwentyTwelve’ is closed to new replies.

Tags