How to Display WordPress Link Manager Links Horizontally

wordpress link managerhorizontal linksfooter.phpcss stylingfriend links
Published·Modified·

Since the WordPress 3.5 version, the official "Links" option was removed, likely to encourage users to add friend links in a way that better adapts to their themes. However, to assist users who are not familiar with coding, the official Link Manager plugin is still provided to restore the friend links option.

Installing this plugin is very simple. Go to Dashboard > Plugins > Add New, search for the plugin, and install it. After enabling the plugin, a new "Links" button will appear, as shown in Figure 1-1, making it very convenient for beginners to add friend links.

Figure 1-1: WordPress Friend Links Figure 1-1: WordPress Friend Links

1. How to Use This Plugin

This article does not provide a detailed introduction on how to use the plugin; you can search online for specific instructions. When using this plugin to add friend links, you may find that some themes display them vertically, which might not look aesthetically pleasing. If you need to display them horizontally, locate the footer.php file in your theme directory (Appearance > Theme File Editor > footer.php) and add the following code in an appropriate location. Please make a backup before modifying.

<!--Friend Links-->
<?php if (is_home()) { ?>
<div id="footer_info">Friend Links
        <ul><?php wp_list_bookmarks('title_li=&categorize=0&orderby=name&show_images=0'); ?></ul>
    </div>
    <?php } else {?>
       <?php } ?>
<!--End of Friend Links-->

2. Add the Following Styles to Your Theme's style.css

Add the following CSS code to the bottom of your theme's style.css file (Appearance > Theme File Editor > style.css):

/*Friend Links Stylesheet*/
#footer{border-top:1px solid #ccc;margin-top:10px;padding-top:10px;overflow:hidden;}
#footer_info{width:960px;margin:0 auto;margin-bottom:20px;overflow:auto;}/*The width can be modified according to your theme, default is 960px*/
#footer_info ul{float:left;margin:2px; }
#footer_info li{list-style:none;float:left; width:60px; }

3. Final Step

After completing the above steps, refresh your page to see if the links are now displayed horizontally. If you encounter any issues during the process, feel free to leave a comment below. Xiao Z will do their best to answer your questions. Thank you for your support! ^_^