Add Social Icons

ReadMe.md

#Add Social Icons and Customize Contact Fields in Admin User Profile

---

This snippet is for manualy creating and adding social icons in the Genesis Framework and pull the links to the social media accounts from custom contact link fields in the admin user profile.

This snippet related to the Genesis Framework, though the majority of the code can be adjusted to work outside of genesis, and the code for modifying the User profile_fields is not Genesis specific.

I wanted a simple way to manualy add in social media links within the websites and particulerly in the primary menu (which menu is targeted can be changed). This would allow the social icons to be adaptive and collaps and expand within the menu. I also wanted the links to those social media accounts to be easily updatable so I customized the admin User contact feilds and draw the links from their. As written, the code would need to be manualy updated to add additional social media links (though this could be changed and the unused links conditionaly left out). But for my case, simple was better.

For additional customizable permeates, see the codex links under References.

---

Example

<div class="social-icons">
   <span><a class="icon-facebook icon" href=" ' .get_the_author_meta('facebook',1). ' " target="_blank"></a></span>
   <span><a class="icon-instagram icon" href=" ' .get_the_author_meta('instagram',1). ' " target="_blank"></a></span>
   </div>

---

#Refrance:

Notes:

• http://my.studiopress.com/snippets/nav-extras/
• http://fontello.com/

Codex:

• https://codex.wordpress.org/Function_Reference/get_the_author_meta

contact-fields.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Add Contact Fields to Admin profile_field
//* We will use the data from these fields to populate the social media links in our code.
//* I'll add two social media link fields, one for facebook and instigram, and will remove the field for google+ to clean things up.
//**********************

add_filter('user_contactmethods', 'pb_add_contact_methods');
function pb_add_contact_methods($profile_fields) {
	// Add contat or social media fields
	// To retrieve the data in this field use get_the_author_meta
	// https://codex.wordpress.org/Function_Reference/get_the_author_meta
	$profile_fields['facebook'] = 'Facebook URL';
	$profile_fields['instagram'] = 'Instagram URL';
	// Remove old or unused contact or social media fields
	unset($profile_fields['googleplus']);
	return $profile_fields;
}

social-icons.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Add Social Icons to Menu
//* This original snippet is from Studio Press and then customized for my needs.
//* The links are added in under the $menu string. See the note field for more info.
//* The icons from the social media accounts are added using FontAwesome icons generated through icomoon to reduce size.
//**********************

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
 * Filter menu items, appending either a search form or today's date.
 *
 * @link http://my.studiopress.com/snippets/nav-extras/
 *
 * @param string   $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function theme_menu_extras( $menu, $args ) {
	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;

		//* Insert social media icons with link retrieved from user_contactmethods
		$menu .= '<div id="social-icons">
		<span><a class="icon-facebook" href=" ' .get_the_author_meta('facebook',1). ' " target="_blank"></a></span>
		<span><a class="icon-instagram" href=" ' .get_the_author_meta('instagram',1). ' " target="_blank"></a></span>
		</div>';

	return $menu;
}

style.sass

//* This is a basic styaling to meet my needs, modufy as needed.
// ##Social Icons
/*--------------------------------------------- */

.social-icons
	clear: both
	display: inline-block
	width: 100%
	text-align: center
	padding: 30px 0

	a.icon
		display: inline-block
		padding: 0 10px
		font-size: 1.125em

		&:before
			margin: 0