Tag: Simple Social Icons

Categories
Genesis Tutorials

Simple Social Icons In Altitude Pro Themes Header

This tutorial provides the simple step by step instructions to add the Simple Social Icons widget to the Altitude Pro themes header area on desktop and mobile screens as seen in the following gallery images :

Perfectly aligned on mobiles and desktops, you can displays your icons inline with your site title or centered underneath on mobile devices.

Demo Video

Shows the Simple Social Icons widget added to the custom Social Icons widget in the header of the Altitude Pro child theme by StudioPress.

Note : This demo includes the code from another tutorial which removes the shrink header however the CSS included in the download folder will work with or without the shrink header.

Installation Steps

Step 1 : Copy and paste the PHP code to the end of your child themes functions file.

Step 2 : Copy and paste the CSS to the end of your child themes style.css file ( NOT the custom CSS in the customizer ) and clear caching.

Step 3 : Install the Simple Social Icons plugin and configure the plugin settings. This demo used 20px.

Download Folder

Categories
Genesis Tutorials

Add SVG Icons To Custom Nav Menu In Genesis

This code enables you to add simple SVG icons to a custom nav menu named Social in any Genesis child theme.

The code is written to detect the social network from the URL you add to a custom menu link. It then loads the SVG icon based on the social media link.

Genesis SVG Social Icons

Demo Video

Shows you how to add SVG icons for your social media accounts to a custom Genesis nav menu.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 4 – 5 steps :

  1. # Upload the files named class-genesis-svg-icons.php & icon-functions.php to your child theme folder like this :

    2.  

  2. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

    3.  

  3. # Copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.

    4.  

  4. # Create a new menu named Social and add custom links for each social site.

    5.  

Step 5 – This step is only needed if using a newer version of a Genesis child theme which includes a config > theme-supports.php file. If your child theme does include this file, make sure you add a additional line for your social menu like what you see in the following screenshot :

Then you won’t need to include the line in functions.php for add-theme-support located on line 10.

Download Folder

Position

By default, the genesis_do_social_nav function located on line 12 of functions.php hooks the social menu to the genesis_footer hook. Swap out genesis_footer to any other Genesis hook to change the position in your theme.

Categories
Genesis Tutorials

Add Header Right Widget For Simple Social Icons In Infinity Pro

This tutorial shows you how to add the header right widget back in the header of Infinity Pro. In this example, we add the Simple Social Icons widget to the header right widget area, align the icons to the right and vertically centre the icons within the widget area.

Simple Social Icons Header Widget Infinity Pro

Demo Video

Shows the header right widget area added back to the Infinity Pro child theme by StudioPress. Adds the the widget for the Simple Social Icons plugin in the header right widget area.

Tested using the Infinity Pro child theme by StudioPress.

Installation Steps

There’s 2 steps :

  1. # Modify the PHP code in the functions.php file according to the screenshot for step 1 located inside the download folder.

    2.  

    Step 1

  2. # Copy & paste the CSS from the style.css file to the end of your Infinity Pro themes style sheet and clear caching.

    3.  
    Step 2

You can also rename the header menu to after header menu if you like on line 41 of config > theme-supports.php like this :

Primary Menu

Download Folder

Off Screen Menu

If using this, modify the CSS rule for desktops to this :

.header-widget-area {
    grid-area: widget;
    justify-self: end;
    padding-right: 50px;
}
Categories
Genesis Tutorials

Add Header Right Widget For Social Icons To Essence Pro

This download folder includes the code which adds a widget area to the header right position. In this case, we add the Simple Social Icons widget in the Header Right widget area to display social icons to the right of the search function like this :

This solution enables you to display your social icons or anything you put in the header right widget area to the left or right of the search form.

Demo Video

Shows the simple social icons widget added to a custom widget area added to the right of the header area in the Essence Pro child theme by StudioPress.

Installation Steps

There’s 2 steps :

  1. # Upload the modified header-functions.php file your Essence Pro themes lib folder replacing the default file.

    2.  
    Step 1

  2. # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.

    3.  
    Step 2

Download Folder

Categories
Genesis Tutorials

Add No Follow To Links In Simple Social Icons Widget

The code in this post provide different ways to add the rel="no-follow" attribute to all links output by the Simple Social Icons plugin developed by StudioPress.

Here’s the before and after HTML for the links generated by the Simple Social Icons widget :

The image on the left shows the default link and the image on the right shows no-follow added to the link.

Demo Video #

Shows rel="no-follow" attribute added to the HTML for each simple social icon link.

Tested using the Simple Social Icons plugin with the Genesis Sample child theme by StudioPress however works in any Genesis child theme without modification.

Installation Steps #

Only 1 step – Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file.

Download Folder

Categories
Genesis Tutorials

Add Social Icons After Header Right Widget Nav Menu

This solution enables you to add social icons after the Navigation Menu widget in the Header Right widget area like this :

On smaller screens, the social icons are centered after the menu like this :

On mobiles, the icons are displayed before the toggle menu like this :

Assumes the Navigation Menu & Simple Social Icons widgets added to the Header Right widget area in this order :

Also assumes Simple Social Icon size of 30px :

Watch Demo Video #

Shows the Simple Social Icons display to the right of the Navigation Menu widget in the header right widget area of the Parallax Pro child theme. Shows the site title, menu and social icons centered on iPad sized screens and the social icons displaying before the mobile responsive menu on the smallest mobile devices.

Tested using the Parallax Pro child theme by StudioPress, May need modification for use in other Genesis child themes.

Installation #

Copy & paste the CSS from the style.css file in the download folder and paste at the end of the Parallax Pro themes style sheet. Clear caching.

Register or login to access the download folder :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Add Social Icons Before Header Right Widget Nav Menu

This tutorial provides 2 solutions which enable you to add the Social Icons widget perfectly vertically aligned centre before the navigation widget in the header right widget area like this :

On mobiles it centre’s each widget under the site title like this :

Tested using the Parallax Pro child theme by StudioPress. May need modification for use in other Genesis child themes.

Watch Demo Video #

Shows the Simple Social Icons vertically aligned with the WordPress navigation widget in the Header Right widget area of the Parallax Pro child theme. Shows the site header, social icons and nav menu centered on smaller screens.

Installation #

Copy & paste the CSS from either of the files in the download folder named solution-1.css or solution-2.css and paste at the end of the Parallax Pro themes style.css file. Clear caching.

This CSS only works with the following widget configuration in the Header Right widget area of Parallax Pro :

Also requires the icon size set in the Simple Social Icons widget settings is 30px. otherwise, you will need to change the value for the margins.

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Altitude Pro – 2 Ways To Add Simple Social Icons To Nav Menu In Site Header

This tutorial provides the code for solutions which enable you to add the Simple Social Icons next to the primary or secondary nav menu in the header of the Altitude Pro child theme by StudioPress.

The header right widget area has been removed from the theme so you can’t add the widget easily. If you want to add the Simple Social Icons inline with the nav menu, you’ll need to add some PHP code to the Altitude Pro themes functions file. You’ll also need to add some CSS to the style sheet.

Here’s the code for both solutions:

Register for full access

Update : Try this new tutorial if using the newer versions of the Altitude Pro child theme by StudioPress.

Categories
Genesis Tutorials

Infinity Pro Responsive Title Menu Social Widget in Site Header

This tutorial contains the code which enables you to display your site title, nav menu and the simple social icons widget inline on desktops and responsive on iPads and iPhones exactly like you see in the video demonstration. Tested using the Infinity Pro child theme by StudioPress.

Demo Video 1

Here’s how the site title, nav menu and social icons behave on smaller screens when using a video as the background to the front page 1 widget area:

Demo Video 2

And here’s how the 3 header elements display inline on desktop computers and responsive on smaller screens when using a image as the background to the front page 1 widget area:

Installation Instructions

There’s 2 simple steps:

  1. Follow this Infinity Pro tutorial to add the Simple Social Icons widget to the header right widget area.
  2. Copy & paste CSS to the end of the Infinity Pro child themes style.css file.

Clear any server/browser/plugin caching of needed.

Here’s the CSS for logged in members:

Register for full access

Categories
Genesis Tutorials

Add Social Icons To Infinity Pro Themes Nav Menu

This tutorial enables you to add social icons inline with the header menu in the Infinity Pro child theme by StudioPress.

Here’s the result:

You can see the icons added inline with the header menu and floated to the right in the above image.

The infinity Pro theme by StudioPress doesn’t include a header right widget area. The widget has been unregistered so you can’t add the simple social icons widget to the left or right of the header menu in this theme without adding the widget back.

Step 1 : On line 85 of the Infinity Pro child themes functions.php remove the following line of code.

//* Remove header right widget area
unregister_sidebar( 'header-right' );

Step 2 : Install & activate the Simple Social Icons plugin and drag the simple social icons widget into the header right widget area.

You’ll then need to position the icons inline with your the header menu. The CSS for this will vary depending on the size of your icons: In this example, the size has been set as 26px.

Step 3 : Here’s the CSS you can add to the end of the Infinity Pro child themes style.css file and modify.

.simple-social-icons {
    float: right;
    margin-top: 20px;
}

Adjust the value for the margin-top property in the above CSS rule to change the position of the icons inline with your header menu.

Assumes the use of the default location for the header menu.

Media Queries – Mobile Screens

Step 4 : You can use CSS wrapped in a media query to position the icons left, right or center on smaller screens. Here’s some sample CSS for Media Queries you can extend and add at the end of your style sheet:

@media only screen and (max-width: 800px) {

/* Add Your CSS Rule(s) Here

}

Related Tutorials

Categories
Genesis Tutorials

2 Ways To Add Social Icons After Your Site Title in Genesis

This code enables you to display your social follow icons after your site title in Genesis.

Here’s the result without any CSS for styling added:

icons-after-title

The code in this download provides 2 different solutions you can choose from.

Tested using the Simple Social Icons plugin by StudioPress.

Here’s the code you simply paste in your child themes functions file:

Register for full access

Categories
WordPress Plugins

Change Simple Social Icons Background & Hover Color

In this post, i’ll give you the CSS code which you can use to change the background and hover colors of each button when using the Simple Social Icons plugin.

Patrick asked:

Hi, does anyone know if there is a way to change the color and hover color of each icon individually for Simple Social Icons? That is, I’d like each icon to be its traditional colors instead of all being the same color.

Simple Social Icons

Simply add this CSS at the end of your child themes style.css file and change the hex color codes to suit your own styling preferences.

.simple-social-icons .social-facebook a {
    background-color: #4965a0 !important;
}

.simple-social-icons .social-facebook a:hover {
    background-color: orange !important;
}

.simple-social-icons .social-gplus a {
    background-color: #dd4b39 !important;
}

.simple-social-icons .social-gplus a:hover {
    background-color: black !important;
}

.simple-social-icons .social-twitter a {
    background-color: #00abf0 !important;
}

.simple-social-icons .social-twitter a:hover {
    background-color: grey !important;
}

Float Icons Left or Right

.simple-social-icons {
    float: right;
}

Please check the FAQ on the plugin site for more details about which icons you can use.

The plugin has been developed by the lead developer of Genesis, Nathan Rice and StudioPress themes.