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.
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 :
- # Upload the files named class-genesis-svg-icons.php & icon-functions.php to your child theme folder like this :
- # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
- # Create a new menu named Social and add custom links for each social site.
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.
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.
Was This Tutorial Helpful?