How to add social media icons to WordPress menu? Well, to understand this, you must comprehend a few points. A photo is said to be worth a thousand words, and this saying has always been true. There may be many disagreements on how many there are, but no one can dispute their power or ease of use for social media.
What about the stylized square camera, the round-cornered red rectangle with the play symbol, and the lovely bluebird in flight? You already know what they represent. The most famous images in history are the social media logos.
We’ll show you how to add social media icons to WordPress menu in a few minutes. But first, let’s discuss why you want your social media logos on your menu in the first place.
Why Do I Need A Social Media Icon In My WordPress Menu?
There are only a few icons that may clog up your interface, particularly on mobile devices. Simply avoid this by putting them on a menu. Users are accustomed to searching for them in menus, therefore adding icons to the menu makes it more appealing and user-friendly.
With only a few social media symbols, you may construct a unique social menu and place it in any widget-ready location on your website to allow visitors to obtain your social media material with a single click. Mobile users will be ecstatic.
Qode Themes: Top Picks
- Varied Creative WordPress Theme: A Theme That Is Multi-Conceptually Realistic
How To Add Social Media Icons To WordPress Menu To Header Or Footer?
It’s simple to add social icons to your header or footer menu if you’re using our adaptable Bridge theme. There’s also a handy widget for it!
Scroll down if you select reading your lessons in text form. We’ll take you to step by step through everything you must do. In general, the footer sections function similarly to the header menu, but rather than a footer menu, we will demonstrate to you how to accomplish it for your header menu.
The widgets that you can use in the Bridge demo you’re testing will be determined by the bridge. There are no social icons in the demo’s header.
To repair it, go to Appearance/Widgets from the left-hand menu of your WordPress dashboard.
The next step is to select the proper widget region. We’d like our social icons near the menu, and they’re in the Header Bottom Right area in this Bridge demo. Simply drag a Qode Social Icon widget anywhere you want it to go within a widget zone.
The last thing to do is turn on the widget. Select the Circle icon type (you may alter this based on your website’s design and look), Font Elegant’s Icon pack (also supported is Font Awesome), and Facebook’s icon from the dropdown menu, then pick 10 pixels for Custom Size.
We’ll use the Plugin_Activation event’s Variable as a parameter, which we’ll give our Facebook page’s hyperlink (of course, yours). Also, set the Mark to New Window and provide it with the plugin.
The Qode Social Icon widget gives you a number of design alternatives that we won’t get into right now. Suffice it to say that the plethora of size, color, and border settings allows for a lot of customization and flexibility.
If you want, you may repeat this composition with a few more social Icons in the same area, as we have done here.
In the WordPress.org dashboard, go to Appearance and then Widgets to change your header image. In order for your header image to show, click Edit next to it in the Header Image box. The position (left-to-right) of the social icons in your header is determined (and displayed) by the ordering.
How To Add Social Media Icons To WordPress Menu Using Bridge?
Do you want to link social Icons to menu items in your store? You may do this with other themes, but we’ll guide you on how it’s done using ours.
Start by searching your site’s top navigation menu in Appearance/Menas. The name here is Mega Menu, as you can see. Finally, as shown in Step 5 of the tutorial below, you must add a link to your Twitter account.
To add a Custom Link option to your menu, go to the Add section of the Menus page. In the Custom Links item on the Add menu items menu, type in your URL.
Simply enter Our Twitter into the Link Text field and choose the Add to Menu option for our Twitter in the Settings window.
Your menu is now displayed to the right of your top navigation menu, which means it will appear to the right of the bottom line. It’s where we want it, but you’re free to arrange them however you want.
Customize the element by expanding it. Because this is the sole menu item type that will have an icon in Bridge, you must pick wide with icons for Type. Font Awesome and fa-twitter will also be utilized in our Icon and Icon Pack, respectively.
You may select the Font Elegant icon set and your preferred social media profile icon, of course. After scrolling a bit farther down, click the Save Menu button.
You should already have a social media connection on your menu. You can include as many of these social connections as you like, and you may also give icons to other selections on the menu, but that is not the objective of this lesson.
How To Add Social Media Icons To WordPress Menu Using A Plugin?
The easiest approach to make a difference is to utilize a theme’s built-in capabilities for a specific purpose. If the feature you require isn’t available in the theme you’re using, you may instead use a plugin.
We’ll be utilizing the Menu Image plugin to include photographs in our menu. After the plugin is installed and activated, you will be prompted to turn on notifications (which we will ignore), and you will be directed to the Settings page following that.
You may modify the icon sizes to suit your website’s aesthetic. We’ll just Save and Go, thanks.
Finally, choose Appearance/Menus and your main navigation menu, the Mega Menu. Choose Custom Links from the Add menu items menu on the left side, then make any customizations you like.
We’ll add our Instagram profile URL to the URL field, with a caption of Our Instagram in the Link Text area before clicking the Add to Menu button (while you may choose whichever social network and icon you like).
A Custom Links element will be placed at the end of your Menu structure, which means it will emerge at the far right of your menu. You may arrange your menus however you like, but we’ll stop there for now.
To change it, you’ll need to extend the component first. Set the Title Position to After and select an image from your Media Library or upload one by clicking Set picture to show the icon to the left of the Navigation Label.
We’ve included a free Instagram symbol in our Media Library. You may use whatever photo you like for each menu item, but we’ll stop there since we want our social icon to be recognized right away.
You may also select a different icon version for an on-hover image by using the Set picture on the hover button. Finally, click the Save Menu button after you’ve made your selections.
Our top navigation menu was also updated to include our new Instagram profile link as the main element!
Conclusion
It’s simple and quick to add images to your menu items, as we’ve shown. You can let your website visitors know about your social media presence in a matter of seconds, whether you use the features built into your theme or a plugin. In today’s competitive market, are you willing to take the risk?
Read More…