Adding logo images to the navbar and footer

Let's start by placing the markup for our logo image within the navbar-brand link. We'll find the markup for this in the header-top-navbar.php file in the templates folder:

  1. Open the header-top-navbar.php file inside the templates folder in your editor.
  2. Find the following element:
    <a class="navbar-brand" ...
  3. Delete the following tag, which places our site name within the navbar brand link:
    <?php bloginfo('name'), ?>
  4. Replace the previous line of code with the appropriate tag for our logo image:
    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" width="120" alt="Bootstrappin'">

    Tip

    Remember that the logo image is built large so that it appears crisp in a retina display. So, be sure to include the width attribute. Otherwise, it will appear much too large.

  5. Save your results.
  6. If you refresh your page, you should see the logo image appear as shown in the following screenshot:
    Adding logo images to the navbar and footer

Now for the footer.

Our social icons should be working. The default Roots copyright line will be below them. Let's remove that—at least for the purposes of these exercise files—and place our site logo above the icons.

We'll do this in the footer template file as shown in the following steps:

  1. Open the footer.php file in the template folder in your editor.
  2. I'll remove the following line of code as these exercise files aren't copyrighted:
    <p>&copy; <?php echo date('Y'), ?> <?php bloginfo('name'), ?></p>
  3. Then, create a new line above the dynamic sidebar as follows:
    [NEW LINE HERE ...]
<?php dynamic_sidebar('sidebar-footer'), ?>
  4. And add a link for our site logo as follows:
    <p><a href="<?php echo home_url(); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" width="80" alt="Bootstrappin'"></a></p>

    Tip

    As in the navbar, be sure here to include the width attribute; otherwise, the image will be much too large.

    We've employed the WordPress template tags for the home_url link and for the templates folder. I've wrapped it in a paragraph, but you could choose another element if desired.

  5. Save the file. Refresh your browser and you should see the following screenshot:
    Adding logo images to the navbar and footer

Our design is nearly complete. But let's not forget our favicon and touch icon.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset