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

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points
Posted by Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

From Bootstrap to Wordpress; Adding Logo to Nav Bar

Howdy folks,

So I've followed through all of the course and have it all working so you know what stage I am at. However I'd like to put my logo in the nav bar, I've seen how to do this on another TH course but that was just using HTML and CSS.

My confusion in this case is coming the additional PHP code in the place where I think I would put the code to display my logo. I've tinkered, and I can't seem to get it to work.

Here's my header.php code:

//

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico">

<title>
  <?php wp_title( '|', true, 'right' ); ?>
  <?php bloginfo( 'name' ); ?>
</title>

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a>
    </div>

    <div class="navbar-collapse collapse">

      <?php 
        $args = array(
          'menu'        => 'header-menu',
          'menu_class'  => 'nav navbar-nav',
          'container'   => 'false'
        );
        wp_nav_menu( $args );
      ?>

    </div><!--/.navbar-collapse -->

  </div>
</div>

//

Looking forward to finding out how to do this!

Eric Muhlbach
Eric Muhlbach
6,322 Points
Eric Muhlbach
Eric Muhlbach
6,322 Points

You need an image in your link:

ie this:

img src="<?php bloginfo('url');?>/wp-content/themes/YOUR THEME/YOU IMG FOLDER/IMAGE.png"

in <>

2 Answers

Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

Darren,

I'm not sure if this is the best practice, but the following code will work.

<img src="<?php echo get_bloginfo('template_directory');?>/pathToImage/myAwesomeImage.png">