Display pictures instead of text in menus

Question

I am working on a custom theme. In that theme, I am creating a menu called "social" for links to the social sites, such as twitter, facebook, ...etc.

Now, Instead of text, I would like to display social media icons. How can I do that? Make every menu item an image?

Thanks.

Answer 1

This would be my solution to the problem if you want to make edits on the back-end(Admin area) in the site at any time. If you want a static menu just insert step 1 where you needed it and skip the rest. Hope it helps!

Your CODE will look similar to this:

Step 1) Create menu and insert images in images folder within your child theme

<ul id="social-links">
    <li><a href="https://facebook.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/facebook.png"></a></li>
    <li><a href="https://plus.google.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/google-plus.png"></a></li>
    <li><a href="https://twitter.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/twitter.png"></a></li>
</ul>

Step 2) Download "Widgets On Pages" plug in or an equivalent to it. Install and go to your Widgets on pages settings. Located in Settings > Widgets on Pages". Insert the name you want to, i will use "social-section". Go to the "Appearance > widgets" section and add a text widget in the our newly created widget(social-section). We will use this to change the menu on the fly and not have a static menu in our themes php files every time we need to add a social network.

Step 3) Open the file of where you want the menu to go. This can vary from theme to theme to theme. A developer friendly theme will provide hooks for the theme. . My example will use a my parents themes hook to insert the menu we create in step 1 in the desired location. If your theme doesn't have predefined hooks you can look in the wordpress codex for the default wp hooks.

Step 4) Using the child themes functions.php we will create a simple function that will call our widget on pages(social-section)that we created in step 2.

function add_social_menu(){ 
    //Custom function that will add our menu when called
 echo do_shortcode('[widgets_on_pages id="social-section"]') 
    //this will run our widget which will contain our social-links UL
}

add_filter('below_header_hook','add_social_menu'); 
//first parameter will be your hook and the second is the function you want to insert

Step 5) Save/Upload and edit the css to your linking. This is a little long but its a solution that you can edit in the backend. If you have any questions for this method please feel free to contact me.

Answer 2

Create menu items for social menu in your case called "social", add meaning full class name to it Examples : twitter-icon, facebook-icon and then using css declared in style.css as shown in the following code attach images to respective menu items.

.facebook-icon a{
    background: url("facebook-icon.png") no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 0;
    height: 10px;
    line-height: 0;
    text-indent: -9999px;
    width: 10px;
}