• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

26 September - 2014 By Paal Joachim 1 Comment
Last updated on: October 27, 2014

Creating a social media menu

The following Social menu article is based on this tutorial by The Web Princess
It has been coded for Genesis themes but can also be readjusted for other themes.

It uses icons by fontawesome.io

 

The goal to create this social menu:

Social Media Menu

 

I added the new social menu to the header area of my web site.

In your Child Theme functions.php file add this code:

 

/** Enqueue Font Awesome from CDN if your theme hasn't already included Font Awesome **/

add_action( 'wp_enqueue_scripts', 'twp_enqueue_awesome' );
/**
* Register and load font awesome CSS files using a CDN.
*
* @link https://www.bootstrapcdn.com/#fontawesome
* @author The Web Princess
*/
function twp_enqueue_awesome() {
wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
/**
* Set up Social Menu Location */
 
function register_my_menu() {
 register_nav_menu('social',__( 'Social Menu' ));
}
add_action( 'init', 'register_my_menu' );
 
/** Add your Social Menu to genesis_header - you can use other hook locations as you wish **/
 
add_action( 'genesis_header','twp_genesis_add_social', 10 );
/**
* Set up Custom Menu for Social Icons.
 *
 * @link https://thewebprincess.com/new-genesis-social-icon-menu/
 * @author The Web Princess
 *
 * @return null Return early if menu does not exist.
*/
 
function twp_genesis_add_social() {
    if ( ! has_nav_menu( 'social' ) ) {
          return;
    }
   echo '<h4 class="social-title widgettitle widget-title">Connect</h4>';
   $nav_args = array(
         'theme_location' => 'social',
         'container' => 'div',
         'container_id' => 'menu-social',
         'container_class' => 'menu menu-social',
         'menu_id' => 'menu-social-items',
         'menu_class' => 'menu-items',
         'depth' => 1,
         'link_before' => '<span class="screen-reader-text">',
         'link_after' => '</span>',
         'fallback_cb' => '',
 );
 wp_nav_menu( $nav_args );
}

 

Here is the code I added to my CSS stylesheet to customize the menu.
You will of course need to adjust these to fit your theme.

 

/* Social Menu - https://thewebprincess.com/code-snippet/font-awesome-social-icons-menu/
--------------------------------------------- */
 
.social-title {
 float: right;
 display: none;
} 
 
.screen-reader-text {
 position: absolute;
 top: -9999em;
 left: -9999em;
}
 
.menu-social {
 float: right;
 margin-right: 5px;
 width: 140px;
 background: #fff;
 border: 1px solid #ccc;
 border-radius: 7px;
 box-shadow: 0px 1px 2px #444;
} 
 
.menu-social ul {
 list-style: none;
 text-align: center; 
}
 
.menu-social ul li {
 display: inline-block;
 position: relative;
}
 
.menu-social li a:before {
 content: '\f005';
 display: inline-block;
 
 margin: 0 5px 0 5px;
 font-family: 'FontAwesome';
 font-size: 24px;
 vertical-align: top;
 -webkit-font-smoothing: antialiased;
}
 
.menu-social li a[href*="facebook.com"]:before {
/* content: '\f09a'; */
 content: '\f082'; /* facebook-square */
 color: #3b5998;
}
.menu-social li a[href*="twitter.com"]:before {
 content: '\f099';
/* content: '\f081'; /* twitter-square */
 color: #33ccff;
}
.menu-social li a[href*="plus.google.com"]:before {
/* content: '\f0d5'; */
 content: '\f0d4'; /* google-plus square */
 color: #3b5998;
}
.menu-social li a[href*="linkedin.com"]:before {
/* content: '\f0e1'; */
 content: '\f08c'; /* linkedin-square */
 color: #3b5998;
}
.menu-social li a[href*="github.com"]:before {
 content: '\f09b';
/* content: '\f113'; /* github-alt */
/* content: '\f092'; /* github-square */
}
.menu-social li a[href*="youtube.com"]:before {
/* content: '\f167'; */ 
/* content: '\f16a';/* youtube-play */
 content: '\f166';/* youtube-square */
 color: #af2906;
}

 

The social Menu has now been added to Appearance -> Menus -> Manage Locations.

Create a new menu.
Add links. If Links box is not visible open Screen Options and select it. Add links to your various social media profiles.
IF you want the links to open in a new tab/window then through Screen Options select Link Target. It will under the Navigation Label add a checkbox to where you can have it open in a new window/tab.

Check the following screenshot as to how I added my social media links.

 

 

Social Media Menu area

 

I think that was it. If you followed and made the social media menu it should now be in place.

 

Share this:

  • Email

Categories: Genesis, How to, Themes, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. nguyendoxuan says

    15 July - 2016

    Thank you !

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.