33 Responses

  1. James
    James Published |

    Nice, simple yet effective!

    Reply
  2. Sami Keijonen
    Sami Keijonen Published |

    You make it sound so easy and simple. Well basically it is:)

    Reply
  3. Joen A.
    Joen A. Published |

    This makes me happy, yay GPL!

    One quick note, though — I notice you’re setting the icons to a 1.125rem font-size. Depending on your surrounding CSS, that’s likely going to blur the icons more than necessary. The icons, when shown at 1x, were designed to be pixel-precise at a 16x16px grid (i.e. font-size 16px). A font size that’s just a little bit off, will cause the antialiasing to add blur. Here’s an example of the text icon, shown at 16px on the left, 17px on the right:

    http://f.cl.ly/items/0I2a0o1i3E0B2j1U010Z/comparison.png

    Reply
  4. Wisely Woven
    Wisely Woven Published |

    Awesome! Thanks for sharing!

    Reply
  5. Social navigation menu with Genericons : Post Status
  6. Jamie Thompson
    Jamie Thompson Published |

    This is good stuff!

    Reply
  7. James
    James Published |

    I noticed your Dashboard has an “almost flat” design – what Dashboard theme are you using?

    Reply
    1. RJ Webb
      RJ Webb Published |

      Looks like he’s using the MP6 plugin. Great little thing.. can’t wait for it to be a part of core. =)

      Reply
  8. Silvan Hagen
    Silvan Hagen Published |

    Thanks for sharing this great little piece of code Justin. Our designers and clients will love it a lot, because it makes social links so damn easy.

    Reply
  9. Mika E. (Ipstenu)
    Mika E. (Ipstenu) Published |

    I need to link back to this from my plugin for Genericons.

    One alternative, I’ve been using a custom class for my menu items: ‘social-icons’

    That lets me style with li.social-buttons a::before instead of defining #menu-whatever, which has the added benefit of being fancy easy for mixed media menus, where I may go with icons for some of the items.

    Reply
  10. Damon Cook
    Damon Cook Published |

    One could use the following for a clickable mobile phone number:
    1. put this in your WP Menu for URL: tel://1-555-555-5555
    2. use this CSS to style:

    #menu-social li a[href^=tel]::before {
        	content: '\f437';
        	color: #55B0D4;
    }
    Reply
  11. Mathew Porter
    Mathew Porter Published |

    Great little tutorial guys, saves on alot of load that many plugins generally have in them.

    Reply
  12. Chris Urbano
    Chris Urbano Published |

    Thank you for this!! It’s what I’ve been searching for for days! I just have one quick question. Is there a way to get the links to open in a new window? I tried everything and I cannot get that to work…

    Reply
  13. Chris Urbano
    Chris Urbano Published |

    One final question…. I’m not sure if I’m going about this the correct way, but I am trying to get a hover effect using the “::before” & “::after” elements and I’m struggling. My goal is to have the color of each of the icons a faded version of the one in your supplied example and as the mouse hovers over each they become fully colored as you’ve done. Any suggestions?
    Sorry for the stupid questions, but you’re the only one who’s done what I’ve been trying to and I am just so close having this the way I want!! :-)

    Chris

    Reply
    1. David Williamson
      David Williamson Published |

      Chris

      I was trying to figure out the same thing and figured it out. Put the hover in between the two colons, so it should be “a:hover:before” or “a:hover:after”.

      Reply
  14. Technique For Creating Portable Social Menus In WordPress Themes
  15. A New Genesis Social Icon Menu - The Web Princess
  16. Fred
    Fred Published |

    So what if I wanted to add these social icons to a current menu that I already have instead of a separate one? What code would I need to change? This is good stuff by the way.

    Reply
  17. WP-Forge Updated to v5.1.0 - ThemeAwesome.com
  18. E. Pit-Larson
    E. Pit-Larson Published |

    Excellent. Just what I was looking for. Most plugins only allow for one link per social network. This allows multiple links of your choice. I had done them earlier as a text widget, but this is much better.

    Reply
  19. Swimbi
    Swimbi Published |

    Beautifull thanks for sharing. Such an easy solution.

    Reply
  20. Ricky Buchanan
    Ricky Buchanan Published |

    This is awesome and so easy!

    I added two to your list, for my own purposes:

    menu-social li a[href*="/feed"]::before {
    content: '\f413';
    color:   #ff6600;
    }
    
    menu-social li a[href*="subscribe"]::before {
    content: '\f410';
    color:   #34ad00;
    }

    The email one just redirects to a page with the subscription form, which happens to be named ‘subscribe’. That’s probably suboptimal but it’s easy to do, at least!

    Reply
  21. Tim Nicholson
    Tim Nicholson Published |

    I’ve got a theme on WordPress.org (called “link”) that implements a very similar solution. You build the “social” menu like this, but my theme has a way to add font-awesome icons to any menu. I see now that Genericons are built into WordPress core. So clearly that is the way to go for consistency across all themes.

    So my questions are:

    Has this been widely adopted by any theme shops and/or the general WordPress community yet?

    Will you be issuing a “Part 3″ that refactors the code to use the built-in WordPress core Genericons?

    Reply
  22. Tomas M.
    Tomas M. Published |

    Hi, Justin,

    I plan to implement your approach in my theme and I have a question. Let’s say I want theme users to pick their own place for this menu, like any text widget. What would be the best (and safe) method to add this menu to a text widget, or perhaps as a special widget?

    Would it be same:

    <?php get_template_part( 'menu', 'social' ); ?>

    Thank you!

    Reply
    1. Tomas M.
      Tomas M. Published |

      Simple and brilliant :D

      Thank you!

      Reply
    2. Tomas M.
      Tomas M. Published |

      Justin, everything worked fine except one – when using default widget, I could not find a way to make it use the menu-social.php template. Without this menu looses its accessibility.

      Is there any way to make WP use this template, when called from the default NAV widget?

      Thanks a lot!

      Reply
  23. Scott
    Scott Published |

    Works great, including adding the bits in the comments. But I have a small issue, how can I add “Follow Us:” to come before the icons?

    Reply
  24. Shekh farid
    Shekh farid Published |

    If I want to open this social menu links to a new tab, then what I should to do? Actually I want to know how I can add target=”_blank” attribute to link tag.

    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php