{"id":17965,"date":"2019-09-12T21:18:04","date_gmt":"2019-09-13T01:18:04","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=17965"},"modified":"2021-08-04T19:37:48","modified_gmt":"2021-08-04T23:37:48","slug":"how-to-add-custom-social-media-icons","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/how-to-add-custom-social-media-icons\/","title":{"rendered":"How to Add Custom Social Media Icons"},"content":{"rendered":"\n

Please note, the following article is targeted toward developers, designers, and webmasters comfortable with writing basic custom PHP. Making a mistake when writing PHP can cause fatal errors that may bring your site down until you can resolve the coding error. Ensure that you have a backup of your WordPress website<\/a> before proceeding.<\/p><\/blockquote>\n
\n<\/iframe>\n<\/div>\nOne of the coolest features of the BoldGrid Theme Framework and our <a href=\"https:\/\/www.boldgrid.com\/website-builder\/\">WordPress website builder<\/a> is the ability to “automagically” create a menu featuring your social media profiles, represented by their brand icons, quickly and easily through the WordPress-native menu feature. This is accomplished by creating a menu with “Custom Link” items, with URL’s linking to the most popular social media platforms.<\/p>\nThe<a href=\"https:\/\/www.boldgrid.com\/docs\/configuration-file#available-icons\"> built-in Social Media platforms<\/a> include the big ones, such as Facebook, Twitter, Instagram, and Pinterest. It also includes niche platforms like StackExchange, Yelp, and GitHub. However, some advanced users may want to add additional icons that are not included in the default icon set.<\/p>\n<h2 id=\"add-code-snippet\">Add Code Snippet<\/h2>\nThis requires creating a WordPress filter with the value specifying the URL to search for in the Custom Link, as well as the Font Awesome code for the icon you wish to replace the text with. You can do this in a <a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-create-a-child-theme-to-customize-your-wordpress-website\/\">child theme’s functions.php file,<\/a> or by using the popular <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\">Code Snippets<\/a> plugin. These steps will assume you’re using Code Snippets,<\/strong> but the same code can be used in your functions.php file if you’re creating a child theme.<\/p>\n<ol>\n<li>If you haven’t already, install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\">Code Snippets<\/strong> plugin<\/a>.<\/li>\n<li>Navigate to Snippets -> Add New.<\/strong><\/li>\n<li>Paste the following code, and customize it as needed: (don’t save it yet)<\/strong>\n<pre>function bgsc_add_custom_social_network_imdb( $networks ) {\r\n\t$networks['imdb.com'] = array(\r\n\t\t'name' => 'IMDB',\r\n\t\t'class' => 'imdb',\r\n\t\t'icon' => 'fa fa-imdb',\r\n\t\t'icon-sign' => 'fa fa-imdb-square',\r\n\t\t'icon-square-open' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-square' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle-open-thin' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle-open' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle' => 'fa fa-imdb fa-stack-1x',\r\n\t\t);\r\n\treturn $networks;\r\n}\r\nadd_filter( 'boldgrid_social_icon_networks', 'bgsc_add_custom_social_network_imdb' );<\/pre>\n<\/li>\n<\/ol>\n<figure id=\"attachment_17970\" aria-describedby=\"caption-attachment-17970\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-17970\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-1024x564.png\" alt=\"Adding a custom social media icon for IMDB\" width=\"1024\" height=\"564\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-1024x564.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-300x165.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-768x423.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-610x336.png 610w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-250x138.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-550x303.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-800x441.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-327x180.png 327w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-545x300.png 545w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153-908x500.png 908w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/09\/Selection_153.png 1075w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-17970\" class=\"wp-caption-text\">A Social Media menu with a link to imdb.com, along with its new icon.<\/figcaption><\/figure>\n<h3 id=\"code-explanation\">Code Explanation<\/h3>\nLet’s break down this code line-by-line.<\/p>\n<ol>\n<li>\n<pre>function bgsc_add_custom_social_network_imdb( $networks ) {<\/pre>\nThis is the function declaration for the filter callback function. This should be a unique function name, so it’s a good idea to prefix it with something unique to your website. In this example, we used bgsc_ for BoldGrid Support Center.<\/p><\/li>\n<li>\n<pre>$networks['imdb.com'] = array(<\/pre>\nThis first part of line 2 takes the $networks array that was passed from the BoldGrid Theme Framework’s includes\/class-boldgrid-framework-social-media-icons.php and adds a new entry to that array. The name of the element of the array, in this case, imdb.com<\/strong>, will also serve as the search term when the framework is replacing link text with icons. So in this case, any Custom Link menu item with imdb.com in the URL will be replaced with the custom social media icon.<\/p><\/li>\n<li>\n<pre>\t\t'name' => 'IMDB',\r\n\t\t'class' => 'imdb',\r\n\t\t'icon' => 'fa fa-imdb',\r\n\t\t'icon-sign' => 'fa fa-imdb-square',\r\n\t\t'icon-square-open' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-square' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle-open-thin' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle-open' => 'fa fa-imdb fa-stack-1x',\r\n\t\t'icon-circle' => 'fa fa-imdb fa-stack-1x',\r\n\t\t);<\/pre>\nThis second part of line 2 is where you define the CSS classes and other properties for the icon. The name<\/strong> field will display when users hover over the icon, so make sure to specify that, in case your visitors are not familiar with the icon. Every Font Awesome icon must have the class fa, and then fa-(iconname). Some additional classes are added, depending on its specific use-case. For most purposes, you only need to worry about replacing fa-imdb<\/strong> with fa-(iconname). A full list of icon names can be found on the <a href=\"https:\/\/fontawesome.com\/cheatsheet\/free\">Font Awesome Cheat Sheet<\/a>.<\/p><\/li>\n<li>\n<pre>return $networks;<\/pre>\nAs the last part of the function, return the new array back to the BoldGrid Theme Framework, with your new item.<\/p><\/li>\n<li>\n<pre>add_filter( 'boldgrid_social_icon_networks', 'bgsc_add_custom_social_network_imdb' );<\/pre>\nFinally, use the WordPress add_filter() function to register your new function using the boldgrid_social_icon_networks hook provided by the BoldGrid Theme Framework.<\/p><\/li>\n<\/ol>\n<h3 id=\"use-only-run-once-for-safety\">Use Only Run Once for Safety<\/h3>\n<blockquote>Before you save your code snippet, check the option for Only run once.<\/strong> If your website does not crash, you can safely check Run snippet everywhere<\/strong> and save again. This will prevent you from needing to <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/#help!%20i%20just%20activated%20a%20snippet%2C%20and%20my%20whole%20site%20broke!\" target=\"_blank\" rel=\"noopener noreferrer\">enable Code Snippets Safe Mode<\/a> to recover your website.<\/p><\/blockquote>\n<h2 id=\"adding-an-envelope-email-icon\">Adding an Envelope Email Icon<\/h2>\nHere’s one more example that might be useful. By default, links with mailto:<\/strong> are replaced by the Envelope icon. However, if you don’t want your email address publicly available, you might instead opt to use another page on your website with a contact form that your users can fill out. You can use the page slug of your contact page as a search term, and replace that link with the same envelope icon:<\/p>\n<pre>function bgsc_add_custom_social_network_email_form( $networks ) {\r\n\t$networks['\/contact-us\/'] = array(\r\n\t\t'name' => 'Contact Us',\r\n\t\t'class' => 'envelope',\r\n\t\t'icon' => 'fa fa-envelope',\r\n\t\t'icon-sign' => 'fa fa-envelope-o',\r\n\t\t'icon-square-open' => 'fa fa-envelope fa-stack-1x',\r\n\t\t'icon-square' => 'fa fa-envelope fa-stack-1x',\r\n\t\t'icon-circle-open-thin' => 'fa fa-envelope fa-stack-1x',\r\n\t\t'icon-circle-open' => 'fa fa-envelope fa-stack-1x',\r\n\t\t'icon-circle' => 'fa fa-envelope fa-stack-1x',\r\n\t\t);\r\n\treturn $networks;\r\n}\r\nadd_filter( 'boldgrid_social_icon_networks', 'bgsc_add_custom_social_network_email_form' );<\/pre>\nThis example presumes that your contact form page URL contains the string \/contact-us\/<\/em>, and then replaces links to that page with the custom envelope icon.<\/p>\n<h2 id=\"add-the-tiktok-icon\">Add the TikTok Icon<\/h2>\nHere’s another example for adding the TikTok network to your social media menu. Please note that you will also need the <a href=\"https:\/\/wordpress.org\/plugins\/font-awesome\/\" rel=\"noopener\" target=\"_blank\">official Font Awesome plugin<\/a> to get the newest set of icons.<\/p>\n<pre>\r\nfunction bgsc_add_custom_social_network_tiktok( $networks ) {\r\n\t$networks['tiktok.com'] = array(\r\n\t\t'name' => 'TikTok',\r\n\t\t'class' => 'tiktok',\r\n\t\t'icon' => 'fab fa-tiktok',\r\n\t\t'icon-sign' => 'fab fa-tiktok-square',\r\n\t\t'icon-square-open' => 'fab fa-tiktok fa-stack-1x',\r\n\t\t'icon-square' => 'fab fa-tiktok fa-stack-1x',\r\n\t\t'icon-circle-open-thin' => 'fab fa-tiktok fa-stack-1x',\r\n\t\t'icon-circle-open' => 'fab fa-tiktok fa-stack-1x',\r\n\t\t'icon-circle' => 'fab fa-tiktok fa-stack-1x',\r\n\t\t);\r\n\treturn $networks;\r\n}\r\nadd_filter( 'boldgrid_social_icon_networks', 'bgsc_add_custom_social_network_tiktok' );\r\n<\/pre>\nCongratulations! Now you know how to add custom social media icons to your BoldGrid website.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"Please note, the following article is targeted toward developers, designers, and webmasters comfortable with writing basic custom PHP. Making a mistake when writing PHP can cause fatal errors that may bring your site down until you can resolve the coding error. Ensure that you have a backup of your WordPress website before proceeding. One of […]<\/p>\n","protected":false},"author":1294,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Add Custom Social Media Icons in BoldGrid","bgseo_description":"The BoldGrid Theme Framework includes social media menus with icons, instead of link text. Use these instructions to add new custom social media icons to your BoldGrid website.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[146],"tags":[],"class_list":["post-17965","post","type-post","status-publish","format-standard","hentry","category-boldgrid-inspirations-plugin-product-guide","experience-level-advanced"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/1294"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=17965"}],"version-history":[{"count":19,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17965\/revisions"}],"predecessor-version":[{"id":41360,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/17965\/revisions\/41360"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=17965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=17965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=17965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}