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

<footer class="footer">
  <ul>
    <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>
  </ul>

  <p>This site is hosted by <a href="" target="_blank">Bluehost </a></p>
</footer>

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' ); ?>">
                    <?php
                        wp_nav_menu(
                            array(
                                '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:

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.

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

<footer class="footer">
  <ul>
    <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>
  </ul>

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

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' ); ?>">
                    <?php
                        wp_nav_menu(
                            array(
                                '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:

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.

• footer

• Copy "footer.php" from parent theme and keep it in child theme. Then keep your above markup in that file as your wish. – Nilambar Sharma Commented 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. – 西門 正 Code Guy - JingCodeGuy Commented 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 Commented 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 Commented May 5, 2020 at 4:18
• @simongcc I edited my question. I am having some difficulty incorporating font awesome icons – 810311 Commented May 5, 2020 at 13:59

1 Answer 1

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

https://wordpress/plugins/option-tree/