MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add text menu to Rosemary's footer


If you'd like to insert a simple horizontal text menu into your footer area, it's simple to do with some basic HTML and CSS! 

Navigate to WP Dashboard > Appearance > Editor > and open the "footer.php" file. 

From approximately lines 18 - 19, you should see:

<p class="copyright left"><?php echo wp_kses_post(get_theme_mod('sp_footer_copyright_left')); ?></p>
<p class="copyright right"><?php echo wp_kses_post(get_theme_mod('sp_footer_copyright_right')); ?></p>

On blank line 20, beneath the "copyright right" line of code, paste in the following code:


<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
<li><a href="LINK-URL">Menu Item 4</a></li>
</ul>
</div>



In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to as well as changing the "Menu Item" titles to whatever title you want your link to have. 

If you want more menu items than the 4 examples above, copy and paste additional lines.
Otherwise, if you don't require 4 menu items, feel free to delete any lines you don't need. 

Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu {
display: block;
clear: both;
}
#footer-menu ul li {
display: inline-block;
margin-right: 15px;
}
#footer-menu ul li a {
font-size: 12px;
letter-spacing: 1px;
}

Be sure to save changes when finished.