How to Add Social Media Icons to WordPress Menus (Easy Way)

Adding social media icons to your WordPress menus is a smart, straightforward way to connect visitors with your social media profiles like Facebook, Instagram, Twitter, or LinkedIn. The best part? No coding skills are needed!

With the right tools, you can quickly enhance your website’s navigation with eye-catching icons. Whether you’re a blogger, business owner, or just starting out, this guide will walk you through both manual and plugin methods. Let’s make your website more social and engaging, step by step.

Why Add Social Media Icons to Menus?

Incorporating social media icons into menus offers several benefits:

• Easy Access: Visitors can easily find your social profiles.
• Trust Building: It builds trust and encourages followers.
• Professional Appearance: Adds a modern and professional look to your site.
• Increased Visibility: Improves brand visibility across platforms.

Icons in the menu stay visible at all times, making them especially easy to find on mobile devices. While placing them in the header or footer is common, putting them in the main menu adds extra value.

Method 1: Add Social Media Icons with a Plugin

This is the easiest method, especially for beginners who don’t have coding skills. Here’s how you can do it:

Step 1: Install the Plugin

1. Go to your WordPress dashboard.
2. Click on “Plugins” → “Add New.”
3. In the search box, type “Menu Image.”
4. Install and activate the Menu Image plugin.

This plugin allows you to add images or icons to your menu items.

Step 2: Add Social Links to Your Menu

1. Go to “Appearance” → “Menus.”
2. Create a new custom link for each social media page.
3. In the “URL” box, paste your social media link (e.g., a Facebook page link).
4. In the “Link Text,” write the name (e.g., Facebook).
5. Click “Add to Menu.”

Repeat this for each platform you wish to add, such as Twitter, LinkedIn, and Instagram.

Step 3: Add Icons to Menu Items

1. Click the dropdown on each social menu item.
2. You’ll now see new options for images/icons.
3. Upload a small icon image (e.g., a Facebook logo).
4. Adjust the image size and position (e.g., left, top, etc.).
5. Save the menu.

Method 2: Use a Social Icons Plugin

Another effective option is the Social Icons Widget & Block by WPZOOM.

Step 1: Install and Activate

1. Go to “Plugins” → “Add New.”
2. Search for “Social Icons Widget & Block by WPZOOM.”
3. Click install and then activate.

Step 2: Add Icons to Your Menu

This plugin creates a widget usable in menus with certain themes or page builders. If your theme supports widget-based menus, place the widget there:

1. Go to “Appearance” → “Widgets.”
2. Drag the “Social Icons” block to the desired area.
3. Add each social media link.
4. Choose from built-in icon styles.
5. Save changes.

Method 3: Add Social Media Icons Manually (Advanced)

This method requires basic HTML knowledge and is ideal if you’re comfortable editing theme files.

Step 1: Prepare Icon Images

First, obtain small icon images for Facebook, Twitter, and other platforms. Use PNG or SVG files and upload them to your Media Library.

Step 2: Create a Custom Menu

1. Go to “Appearance” → “Menus.”
2. Create custom links for each social media platform.
3. Paste your social profile link in the URL box.
4. Leave the link text empty (icons will replace it).
5. Add these links to your menu.

Step 3: Edit Menu with Custom HTML

Some themes let you add HTML or class names to menu items:

1. Enable “CSS Classes” from “Screen Options” (top right of Menu page).
2. Add a class name like “facebook-icon” to your Facebook link.
3. Use “Additional CSS” to add styling in “Appearance” → “Customize.”

.facebook-icon a {
  background-image: url('your-icon-link');
  background-size: 20px 20px;
  display: block;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
}

Do this for each icon. This method provides full control but requires careful implementation.

Use a Theme That Supports Social Icons

Some modern WordPress themes support social icons in menus by default, eliminating the need for a plugin. Examples include:

• Astra
• OceanWP
• Neve
• GeneratePress

Check under “Appearance” → “Customize” → “Menus” or “Header” for a “Social Menu” option. If available, add social links directly, and the theme will automatically add icons. If you’re considering a theme change, look for one with this feature.

Testing Your Social Icons

After adding icons, ensure everything works perfectly:

• Visit Your Website: Test each social icon link to ensure they direct correctly.
• Check Display on Devices: View your site on both desktop and mobile to ensure icons are visible and properly aligned.
• Ensure Links Open in a New Tab: Set each link to open in a new tab to keep your site open.
• Hover Effects: Verify hover effects, such as color changes or animations, are functioning.
• Adjust with Custom CSS: Fix size, spacing, or alignment issues using custom CSS if needed.

Conclusion

Adding social media icons to your WordPress menus is a simple yet powerful way to enhance user experience, connection, and trust. Whether you choose a manual method or use a plugin, the process is straightforward and caters to different skill levels. By thoroughly testing your icons on various devices, you ensure they display beautifully, potentially increasing engagement significantly.