0

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.com" 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:

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.

5
  • 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 Apr 28 '20 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. – simongcc Apr 28 '20 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 '20 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 '20 at 4:18
  • @simongcc I edited my question. I am having some difficulty incorporating font awesome icons – 810311 May 5 '20 at 13:59
1

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

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

2
  • 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 '20 at 1:31
  • Hi Tanmay,I edited my question. Please take a look. – 810311 May 5 '20 at 4:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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