what would be the proper way to implement the following mark up in footer.php

<footer class="footer">
    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>

  <p>This site is hosted by <a href="https://www.bluehost.com" target="_blank">Bluehost </a></p>

twentysixteen has a 'Social Links Menu' menu location. Below is the code from parent footer.php

<?php if ( has_nav_menu( 'social' ) ) : ?>
                <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
                                'theme_location' => 'social',
                                'menu_class'     => 'social-links-menu',
                                'depth'          => 1,
                                'link_before'    => '<span class="screen-reader-text">',
                                'link_after'     => '</span>',
                </nav><!-- .social-navigation -->
            <?php endif; ?>

Out of curiosity I added the above code in my child theme footer.php and created a new menu using custom links and font awesome classes asin my original markup however I am getting the following output:

enter image description here

I haven't tried to tweak wp_nav_menu so it outputs my markup as per above. The part that I can't figure out is if I remove menu label 'github' 'codepen' 'youtube' added via custom link the whole menu disappears from the footer.

  • Copy "footer.php" from parent theme and keep it in child theme. Then keep your above markup in that file as your wish. Apr 28, 2020 at 4:32
  • There are a few ways you could do, eg. create your own footer.php with footer-custom.php if it is used for different pages with different footer. If you want to reuse those codes in somewhere else, create a widget could help. See what kind of strategy that fits your purpose and expected result. If you means how to override original footer.php in theme, @NilambarSharma's suggestion will do. Any template in child theme will not be affected when theme is updated. Apr 28, 2020 at 4:32
  • The easiest way is to use a menu of custom link on appearance > Menus, and you can add the text in a widget in the footer. There's really no reason to hard code this in.
    – Joel Hager
    Apr 28, 2020 at 4:48
  • Hi Joel, I edited my question. I am curious if I can achive the desired menu output using twentysixteen 'Social Links Menu' feature
    – 810311
    May 5, 2020 at 4:18
  • @simongcc I edited my question. I am having some difficulty incorporating font awesome icons
    – 810311
    May 5, 2020 at 13:59

1 Answer 1


Either you should use "Widget" Or use Custom theme option plugin like this


  • I would prefer to keep my html intact because I already have my custom css which relies on that html. does it mean I can just copy and paste my html into footer.php in my child theme? I am not understanding which of the above suggestions is the best way to go...
    – 810311
    Apr 29, 2020 at 1:31
  • Hi Tanmay,I edited my question. Please take a look.
    – 810311
    May 5, 2020 at 4:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.