change top banner content on specific page

Question

I have a static top banner on my website build like this :

<div class="row-fluid top-banner">
        <div class="container">
            <div class="banner-overlay"></div>
            <?php 
            $logo = of_get_option('logo', '' );
            if ( !empty( $logo ) ) { ?>
                <a class="brand brand-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><h1><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
            <?php }else{ ?>
                <a class="brand brand-text" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><h1><?php bloginfo( 'name' ); ?><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
            <?php } 
            if(of_get_option('disable_description')){ $top_banner_fix = 'style="top:15px;"'; }else{ $top_banner_fix = ''; }
            ?>

        </div>
    </div>

Now, I've created a "Contact Us" page and here I want to have other content inside the top banner.

What is the simplest solution for achieving this?

Do I need to create a page template for this ? Thanks!

Answer 1

The simplest way is to use conditional tags is_page(),

For example

<div class="row-fluid top-banner">
<div class="container">
    <div class="banner-overlay"></div>
    <?php 
    $logo = of_get_option('logo', '' );
    if ( !empty( $logo ) ) { ?>
        if ( is_page( 'contact' ) ) {
            <a class="brand brand-image" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="contact"><img src="<?php echo $newsource; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><h1><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
        } else {
            <a class="brand brand-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><h1><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
        }
    <?php }else{ ?>
        <a class="brand brand-text" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><h1><?php bloginfo( 'name' ); ?><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
    <?php } 
    if(of_get_option('disable_description')){ $top_banner_fix = 'style="top:15px;"'; }else{ $top_banner_fix = ''; }
    ?>

</div>

In the conditional tag is_page( 'contact' ) you can see i have added a new image source which would show a new image in the contact page.

You can also use ids, slugs of the page and also can pass an array.

http://codex.wordpress.org/Function_Reference/is_page

Hope it helps!