{"id":18402,"date":"2019-12-13T11:50:44","date_gmt":"2019-12-13T16:50:44","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=18402"},"modified":"2021-10-18T13:45:32","modified_gmt":"2021-10-18T17:45:32","slug":"how-to-create-a-social-media-menu","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-themes\/how-to-create-a-social-media-menu\/","title":{"rendered":"How to Create a Social Media Menu"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>If you are active on social media sites like Twitter or Facebook, you should consider adding these links to your website. Your customers will likely be on these social media sites more than yours. Giving them the opportunity to like and follow your page and post comments will increase user engagement.<\/p>\n<p>In this article we will show you how to add a social media menu to your <a href=\"https:\/\/www.boldgrid.com\/\">WordPress website<\/a> step by step.<\/p>\n<ol>\n<li>Open the <strong>Customizer<\/strong> and click on <strong>Menus &gt; Create New Menu.<\/strong><br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-41952 size-full\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/create-new-menu-wordpress-e1629472832252.jpg\" alt=\"Create a new menu in WordPress\" width=\"300\" height=\"291\"><\/li>\n<li>Give you new menu a name and select the <b>Menu Location<\/b> it should to appear in. The Menu Locations are set by the active theme. Click <b>+ Add Items<\/b>.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-41953\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/add-items-to-wordpress-menu.jpg\" alt=\"add links to WordPress menu\" width=\"300\" height=\"640\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/add-items-to-wordpress-menu.jpg 345w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/add-items-to-wordpress-menu-141x300.jpg 141w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<li>Select the <b>Custom Links<\/b> option.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-41954\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/custom-links-in-wordpress-menu.jpg\" alt=\"Add custom link to WordPress menu\" width=\"600\" height=\"679\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/custom-links-in-wordpress-menu.jpg 646w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/custom-links-in-wordpress-menu-265x300.jpg 265w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/li>\n<li>Fill out the <b>URL<\/b> and <b>Link Text<\/b> fields for your social media link. If the <b>URL <\/b>starts with a social media domain (like <a href=\"https:\/\/facebook.com\">https:\/\/facebook.com<\/a>, <a href=\"https:\/\/twitter.com\">https:\/\/twitter.com<\/a>, etc.), the text link will automatically convert to the social media icon in the live preview.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-41955\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/add-facebook-link-to-menu.jpg\" alt=\"Add Facebook link to WordPress menu\" width=\"300\" height=\"177\"><\/li>\n<li>Click <b>Publish <\/b>once you are done adding your social media icons.<\/li>\n<li>You will now see the icon for each social media site in the menu, an example is shown below.<br>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/social-media-menu-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-42096\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/social-media-menu-example.png\" alt=\"WordPress social media menu\" width=\"500\" height=\"64\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/social-media-menu-example.png 562w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/social-media-menu-example-300x38.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/li>\n<\/ol>\n<p>&nbsp;<br>\nMost social media websites will convert to the icon, including:<\/p>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<ul>\n<li>Facebook<\/li>\n<li>Twitter<\/li>\n<li>Instagram<\/li>\n<li>Pinterest<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-sm-4\">\n<ul>\n<li>Linkedin<\/li>\n<li>Yelp<\/li>\n<li>YouTube<\/li>\n<li>SoundCloud<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-sm-4\">\n<ul>\n<li>Vimeo<\/li>\n<li>Vine<\/li>\n<li>Snapchat<\/li>\n<li>Twitch<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h2 id=\"social-media-icons-in-wordpress\">Social Media Icons in WordPress<\/h2>\n<p>If you are using our <a href=\"https:\/\/www.boldgrid.com\/wordpress-website-builder\/\">website builder<\/a> Inspirations, you can create a social media menu during initial website creation. On the final step you can select from over 30 icons to create your social media menu.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/inspirations-social-media.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43916\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/inspirations-social-media.png\" alt=\"WordPress social media icons\" width=\"500\" height=\"266\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/inspirations-social-media.png 708w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/inspirations-social-media-300x160.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2 id=\"how-to-add-social-media-icons-to-a-wordpress-menu\">How to Add Social Media Icons to a WordPress Menu<\/h2>\n<p>If you&rsquo;d like to have a menu with both text links and social media icons, WordPress can do that! Only the links going to social media sites are converted to icons, all other links will use the Link Text set in the Customizer. The example shown here is a single menu in the WordPress Customizer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-42105\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/mixed-media-menu.png\" alt=\"mixed link type menu in WordPress\" width=\"500\" height=\"55\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/mixed-media-menu.png 594w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2019\/12\/mixed-media-menu-300x33.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2 id=\"open-a-menu-link-in-a-new-tab\">Open a Menu Link in a New Tab<\/h2>\n<p>You can make any menu item open in a new tab by enabling the Link Target setting in the Customizer.<\/p>\n<ol>\n<li>Open the Customizer and click on <strong>Menus<\/strong>.<\/li>\n<li>Click on the <strong>gear icon<\/strong> to show the advanced menu properties<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/03\/advanced-menu-properties-link-target.png\" alt=\"customizer menus advanced properties link target\" width=\"455\" height=\"324\"><\/li>\n<li>Check the box by the <strong>Link Target<\/strong> setting.<\/li>\n<li>Now open the menu with the links you&rsquo;d like to open in a new tab.<\/li>\n<li>Click the arrow on a menu item to expand the options. You should now see the <strong>Open link in a new tab<\/strong> option under the Navigation Label field. Check this box.<br>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/02\/menu-item-new-tab.png\" alt=\"open menu link in a new tab control\" width=\"335\" height=\"790\"><\/li>\n<li>Click <strong>Publish<\/strong> to save the changes.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>There are some social media platforms that are not automatically recognized by the theme framework and you can <a href=\"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/how-to-add-custom-social-media-icons\/\">create your own custom icons<\/a> for these outliers.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>If you are active on social media sites like Twitter or Facebook, you should consider adding these links to your website. Your customers will likely be on these social media sites more than yours. Giving them the opportunity to like and follow your page and post comments will increase user engagement. In this article we [&hellip;]<\/p>\n","protected":false},"author":880,"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 Create a Social Media Menu in WordPress","bgseo_description":"This article shows how you can add a social media menu to your WordPress website with links to Facebook, Twitter, Instagram, and more.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[208],"class_list":["post-18402","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes","tag-boldgrid"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18402","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\/880"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=18402"}],"version-history":[{"count":9,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18402\/revisions"}],"predecessor-version":[{"id":43917,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18402\/revisions\/43917"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=18402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=18402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=18402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}