Putting the footer content in place

Roots comes with a built-in footer widget area, which we can use to place the markup for our social icons:

  1. In your WordPress Dashboard, go to Appearance | Widgets.
  2. On the far right, beneath the Primary widget area, you'll see a widget area for the Footer.
  3. Click on it to expand it.
  4. Drag a Text widget into it.
  5. Now, copy the markup for our social icons from the original index.html file as shown in the following code snippet:
    <ul class="social">
  <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
  <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
  <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
  <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
  <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>
  6. Paste this block of markup into the large text area.
    Putting the footer content in place
  7. Do not give it a title.
  8. Do not check the Automatically add paragraphs checkbox.
  9. Click on the Save button.
  10. Refresh the Home page.

    Recall that we've structured the icons in an unordered list. We've not yet added our custom styles nor our icon font, so you will likely see only the bullets of our unordered list appear.

    Putting the footer content in place

Now, at last, it's time to put our custom site assets in place!

Before we swap out the Roots assets, let's pause to observe what's there. It will help the next steps make more sense.

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

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