How to Add Social Media Icons to WordPress

WordPress offers multiple ways to add social media icons—from one-click plugins to custom code. The best method depends on your technical comfort level and customization needs.

After implementing social icons on hundreds of WordPress sites, I've found that most users benefit from plugins for speed, while developers often prefer manual implementation for control. This guide covers all three major approaches with honest pros and cons.

Three Ways to Add Icons to WordPress

Method	Setup Time	Skill Required	Flexibility	Best For
Plugin	5-10 min	Beginner	Good	Most users
Widget	2-5 min	Beginner	Limited	Theme users
Manual Code	15-30 min	Intermediate	Complete	Developers

Method 1: Using a WordPress Plugin

Plugins are the easiest way to add social icons to WordPress. Here are the most popular options:

Top Social Icon Plugins

1. Simple Social Icons

Best for: Beginners wanting simple, clean icons.

Installation:

1. Go to Dashboard → Plugins → Add New
2. Search "Simple Social Icons"
3. Click Install, then Activate
4. Go to Appearance → Widgets
5. Drag "Simple Social Icons" to your sidebar or footer
6. Add your social media URLs and customize

Pros:

• Very simple interface
• Lightweight and fast
• Widget-based placement
• Free version is fully functional

Cons:

• Limited customization in free version
• Basic styling options only

2. Social Icons Widget by WPZOOM

Best for: Users who want extensive customization options.

Features:

• 60+ social networks supported
• Multiple icon styles (rounded, square, etc.)
• Color customization
• Drag-and-drop ordering

3. Monarch by Elegant Themes

Best for: Advanced users wanting share buttons plus follow icons.

Note: Requires Elegant Themes membership (paid).

Method 2: Using Built-in Theme Widgets

Many modern WordPress themes include social icon functionality built-in. Check if your theme has this before installing a plugin:

How to Check for Built-in Icons

1. Go to Appearance → Customize
2. Look for "Social Media" or "Social Icons" section
3. Check Widgets for social-specific widgets
4. Review theme documentation

Common Themes with Built-in Social Icons

• Astra: Social icons in header and footer options
• GeneratePress: Elements module includes social icons
• OceanWP: Built-in social widget
• Kadence: Header and footer social icon settings

Pros:

• No extra plugin needed
• Designed to match your theme
• Usually faster load times
• Integrated with theme customizer

Cons:

• Limited to theme's design choices
• May lose icons if you change themes
• Customization options vary by theme

Method 3: Adding Icons with Manual Code

For developers or those wanting complete control, adding icons manually provides maximum flexibility.

Step 1: Choose Your Icon Source

You can use Font Awesome, custom SVGs, or generate HTML with a tool like NiftyButtons.

Step 2: Add Code to Functions.php

Create a widget area for your social icons:

// Add to your theme's functions.php
function register_social_icons_widget() {
    register_sidebar(array(
        'name' => 'Social Icons',
        'id' => 'social-icons',
        'before_widget' => '<div class="social-icons-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ));
}
add_action('widgets_init', 'register_social_icons_widget');

Step 3: Add to Footer Template

Edit your footer.php file (or use a child theme):

<?php if (is_active_sidebar('social-icons')) : ?>
    <div class="footer-social-section">
        <?php dynamic_sidebar('social-icons'); ?>
    </div>
<?php endif; ?>

Step 4: Add CSS Styling

Style your icons in your theme's style.css or Customizer:

.footer-social-section {
    text-align: center;
    padding: 2rem 0;
}

.social-icons-widget {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icons-widget a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    transition: all 0.3s ease;
}

.social-icons-widget a:hover {
    background: #4ade80;
    transform: translateY(-3px);
}

Where to Place Social Icons in WordPress

Common Placement Locations

1. Website Footer

Best practice: Use Appearance → Widgets to add icons to footer widget area.

• Visible on every page
• Doesn't interfere with content
• Expected location for users

2. Header/Navigation Area

Best practice: Use theme customizer or menu settings if available.

• High visibility
• Good for brand awareness
• Can clutter navigation if not done carefully

3. Sidebar

Best practice: Add via Widgets to sidebar area.

• Visible on blog posts and pages
• Easy to add with widgets
• Less common but still effective

4. Below Blog Posts

Best practice: Use plugin or add to single.php template.

• Encourages sharing
• Contextually relevant
• Good for content-heavy sites

Step-by-Step: Adding Icons with Simple Social Icons

Here's a complete walkthrough for beginners:

Step 1: Install the Plugin

1. Log into WordPress admin dashboard
2. Navigate to Plugins → Add New
3. Search for "Simple Social Icons"
4. Click "Install Now" on the correct plugin
5. Click "Activate" after installation completes

Step 2: Add the Widget

1. Go to Appearance → Widgets
2. Find "Simple Social Icons" in available widgets
3. Drag it to your Footer widget area (or preferred location)

Step 3: Configure Settings

1. Add title (optional - can leave blank)
2. Enter URLs for each social network
3. Choose icon size (40px recommended)
4. Select alignment (center for footer)
5. Pick icon style and colors
6. Click "Save"

Step 4: Verify Display

1. Visit your website in a new tab
2. Scroll to footer (or wherever you placed icons)
3. Verify all icons display correctly
4. Test each link opens correct social profile
5. Check mobile display

Common WordPress Icon Issues

Icons Not Appearing

• Check widget area: Ensure you added widget to active widget area
• Theme compatibility: Some themes may override widget styling
• Plugin conflicts: Temporarily disable other plugins to test
• Cache: Clear WordPress cache and browser cache

Icons Look Wrong on Mobile

• Check responsive settings in plugin
• Reduce icon size for mobile (32-36px)
• Verify theme's mobile CSS isn't conflicting

Icons Break Theme Design

• Try different plugin styling options
• Add custom CSS to override plugin styles
• Switch to simpler icon style
• Consider using theme's built-in option instead

Performance Best Practices

Next Steps

The best method for adding social icons to WordPress depends on your needs:

• Beginners: Start with Simple Social Icons plugin
• Theme users: Check for built-in options first
• Developers: Manual code provides most control

Whichever method you choose, keep icons limited to platforms you're active on, test on mobile, and ensure they match your overall site design. Social icons should enhance your WordPress site, not clutter it.