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.

Improve this question
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
    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

Reset to default
1

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

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

Improve this answer
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
    Commented Apr 29, 2020 at 1:31
  • Hi Tanmay,I edited my question. Please take a look.
    – 810311
    Commented May 5, 2020 at 4:21

Your Answer

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

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