Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Atulesh Kumar
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points

Different navigation style from the homepage (front-page) and inner pages

In my website, I am using two different navigation style. The homepage navigation is different than the inner pages. You can take a look at the demo site here: http://atulesh.com/beta. When you click on the About Me page, you will notice a different behavior of the navigation.

Now, i want to put a condition for the navigations to appear as such. When the page is front-page.php (i.e the static homepage) it should load the nav with 'x' class. But when there is other page than the front-page, it should load the nav with 'y' class.

Can someone help me to achieve this through the functions.php. I dont want to do any hardcoding or something that can disturb the website.

Looking for some positive solution on this, since I am not an expert and very new to wordpress with little knowledge of php. I am just trying to build my website by myself.

Help appreciated.

Atulesh Kumar
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points

Sorry, I wanted to ask this through the Bootstrap to Wordpress course. I am new on Treehouse. I dont know how to delete the post. However still looking for the answer. Regards.

2 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You can put the home header in a different php file. Name it header-home.php. Then in your header.php you can do something like this:

<?php

if (is_home()) {
    get_header( 'home' );
} else {
    // Code for header for pages that aren't the homepage goes here
}

 ?>
Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Apparently is_home() won't work if you have a static page set as your front page. If that is the case, try using the code below. In the is_page() function, replace 'home' with whatever the slug of your static homepage is.

<?php 
if (is_page('home')) {
    get_header( 'home' );
} else {

    // Code for header for pages that aren't the homepage goes here
}

 ?>
Atulesh Kumar
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points

Hi Collin, thanks a lot for your help. Please see my comment below. This forum usability is testing my nerves now.

Atulesh Kumar
seal-mask
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points
Atulesh Kumar
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points

Thanks Collin. I used your second code and it worked. Since I am a beginner in the php language, i wasnt sure what code I needed to put where you say // Code for header for pages that aren't the homepage goes here. Since I was quite hesitant to ask again, I used the following format to make it work.

I made another header-home.php and pasted in the navigation code for the homepage that I wanted to appear. And in the header.php (below code) I mentioned the codes for other pages than the homepage. Everything seems working except that the toggle navigation in the mobile view is not working. The menu opens, but it doesnt close if clicked again.

Not sure what went wrong or if I am doing things incorrectly. Please check. 

<?php 
if (is_page('home')) {
    get_header( 'home' );
} 
else { ?>

<section class="inner-nav">
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">

           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png"></a>
            <h1><?php bloginfo('name'); ?></h1>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php 
              $args = array(
                'menu'     => 'header-menu',
                'menu_class' => 'nav navbar-nav',
                'container'  => 'false'
              );

              wp_nav_menu( $args ); 
            ?>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
</section>

<?php } ?>
Atulesh Kumar
.a{fill-rule:evenodd;}techdegree
Atulesh Kumar
iOS Development Techdegree Student 2,139 Points

Never mind, I figured out the main issue. I believe bootstrap in wordpress always wants to enqueue its base javascript file (bootstrap.min.js) on top from all other. And since I kept it below, that was not being picked up correctly.

Definitely a good lesson for future. :)