As a professional WordPress developer, I’ve helped countless clients integrate social media icons into their websites. Social media icons are essential for any modern website, providing visitors with easy ways to connect with your brand across platforms and share your content with their networks.
In this expert guide, I’ll walk you through multiple methods to add social media icons to your WordPress site – from using plugins to custom code solutions. Whether you’re a beginner or an advanced user, you’ll find the perfect approach for your needs.
Why Social Media Icons Matter for Your WordPress Site
Before diving into implementation, let’s understand why social media icons are crucial for your website:
- Brand Consistency: They extend your brand presence across platforms
- Increased Engagement: They encourage visitors to connect with you on their preferred platforms
- Social Proof: They showcase your social following, building credibility
- Content Sharing: They make it easy for visitors to share your content
- Traffic Generation: They create additional pathways for visitors to find your site
According to research, websites with prominent social media icons typically see 30% higher engagement rates. When implemented correctly, social media icons can significantly boost your website’s performance metrics.
Where to Place Social Media Icons on Your WordPress Site
The strategic placement of social media icons can dramatically impact their effectiveness. Here are the most common (and effective) locations:
1. Header Area
Placing icons in your header ensures they’re visible on every page. This works well for brands where social media is a key part of their strategy.
The footer is the most common location for social icons. It’s non-intrusive yet accessible throughout the site.
3. Sidebar
Sidebar placement keeps your social profiles visible while visitors consume your content, encouraging mid-browse engagement.
4. Author Bio Section
For multi-author blogs or magazine WordPress themes, including social icons in author bios helps readers connect with individual writers.
5. Floating Social Bar
A floating bar that stays visible as users scroll can increase engagement but should be implemented carefully to avoid disrupting the user experience.
6. Within Content
Strategically placing share icons within or at the end of your content encourages readers to share specific articles or products.
Method 1: Adding Social Media Icons Using WordPress Plugins
For beginners or those who prefer a no-code solution, plugins offer the simplest approach. Here are the top plugins for adding social media icons:
Option A: Social Icons Widget & Block by WPZOOM
This popular plugin offers both a widget and a Gutenberg block for adding social icons.
Key Features:
- 100+ social networks supported
- Customizable icon styles and colors
- Responsive design
- Drag-and-drop ordering
- Both widget and block options
Installation and Setup:
- Go to Plugins > Add New in your WordPress dashboard
- Search for “Social Icons Widget & Block by WPZOOM”
- Click “Install Now” and then “Activate”
- To add icons as a widget:
- Go to Appearance > Widgets
- Drag the “Social Icons by WPZOOM” widget to your desired widget area
- Add your social profile URLs and customize settings
- To add icons using the block editor:
- Create or edit a page/post
- Add the “Social Icons by WPZOOM” block
- Configure your icons and settings
This plugin focuses on both profile links and social sharing functionality.
Key Features:
- 200+ social sharing and follow networks
- Multiple icon designs and animations
- Share counts display option
- Floating sidebar option
- Mobile-friendly design
Installation and Setup:
- Go to Plugins > Add New
- Search for “Social Media Share Buttons & Social Sharing Icons”
- Click “Install Now” and then “Activate”
- Navigate to the plugin settings at Settings > Social Media Share Buttons
- Configure your social profiles and display settings
- Choose your preferred locations (header, footer, etc.)
If your primary goal is to encourage content sharing rather than profile following, Shared Counts is an excellent lightweight option.
Key Features:
- Clean, minimal design
- Fast loading with minimal impact on page speed
- Share count tracking
- Multiple button styles
- Customizable positioning
Installation and Setup:
- Go to Plugins > Add New
- Search for “Shared Counts”
- Click “Install Now” and then “Activate”
- Go to Settings > Shared Counts to configure
- Select your preferred networks and button style
- Choose automatic placement or use shortcodes for manual placement
Plugin Considerations
While plugins offer convenience, they come with considerations:
- Performance Impact: Social media plugins can affect page loading speed. Choose lightweight options and consider using WordPress cache plugins to mitigate this.
- Maintenance Requirements: Plugins need regular updates for security and compatibility.
- Design Limitations: Some plugins may not perfectly match your site’s design aesthetic.
Method 2: Adding Social Media Icons Using Theme Options
Many modern WordPress themes include built-in options for social media icons. This approach offers a good balance between ease of use and site performance.
Using Theme Customizer
- Go to Appearance > Customize in your WordPress dashboard
- Look for sections like “Social Media,” “Social Icons,” or “Header/Footer Options”
- Enter your social media profile URLs in the provided fields
- Save your changes
Popular themes like Astra, GeneratePress, OceanWP, and many free WordPress themes for blogs include built-in social media options.
Using Theme Settings Page
Some themes place social media options in a dedicated settings page:
- Look for a theme-specific menu item in your dashboard (e.g., “Theme Options,” “Theme Panel”)
- Find the social media section
- Enter your profile URLs
- Save your settings
Using Theme Widgets
Many themes also include custom social media widgets:
- Go to Appearance > Widgets
- Look for a widget named something like “[Theme Name] Social Icons”
- Add it to your desired widget area
- Configure your social profiles
- Save your changes
Method 3: Adding Social Media Icons Using Elementor
If you’re using Elementor (one of the most popular page builders), adding social icons is straightforward:
Using the Social Icons Widget
- Edit your page or template with Elementor
- Search for the “Social Icons” widget in the elements panel
- Drag it to your desired location
- Click on the widget to access its settings
- Add your social profiles and customize appearance
- Save your changes
Creating a Global Widget for Consistent Placement
To ensure consistency across your site:
- Add and configure the Social Icons widget as described above
- Right-click on the widget and select “Save as Global”
- Give your global widget a name (e.g., “Footer Social Icons”)
- You can now add this pre-configured widget to any Elementor template
For site-wide placement:
- Go to Templates > Theme Builder in Elementor
- Create or edit a Header or Footer template
- Add the Social Icons widget
- Configure display conditions (where the template should appear)
- Publish your template
Method 4: Adding Social Media Icons Using Custom HTML/CSS
For developers or those comfortable with code, custom implementation offers maximum flexibility and minimal performance impact. Here’s how to add social media icons using HTML and CSS:
Step 1: Choose an Icon Library
You have several options for icon sources:
Option A: Font Awesome
<!-- Add in your theme's header or use a plugin like "Header and Footer Scripts" -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Option B: SVG Icons
Download SVG icons from sources like:
Step 2: Create the HTML Structure
<div class="social-icons">
<a href="https://facebook.com/yourpage" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/yourhandle" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://youtube.com/yourchannel" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
</div>
Step 3: Add CSS Styling
.social-icons {
display: flex;
gap: 15px;
justify-content: center;
margin: 20px 0;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f5f5f5;
color: #333;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icons a:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Platform-specific colors on hover */
.social-icons a:hover .fa-facebook-f {
color: #1877F2;
}
.social-icons a:hover .fa-twitter {
color: #1DA1F2;
}
.social-icons a:hover .fa-instagram {
color: #E4405F;
}
.social-icons a:hover .fa-linkedin-in {
color: #0A66C2;
}
.social-icons a:hover .fa-youtube {
color: #FF0000;
}
Step 4: Add to Your Theme
You have several options for implementing this code:
Option A: Using a Widget
- Go to Appearance > Widgets
- Add a “Custom HTML” widget to your desired area
- Paste the HTML code
- Add the CSS to your theme’s Customizer (Additional CSS section) or using a child theme
Option B: Editing Theme Files
For header implementation:
- Create a child theme if you haven’t already
- Edit the header.php file to add your HTML code where appropriate
- Add the CSS to your child theme’s style.css
For footer implementation:
- Edit the footer.php file in your child theme
- Add the HTML code before the closing
</footer>tag - Add the CSS to your child theme’s style.css
Option C: Using Hooks (for Advanced Users)
// Add to functions.php in your child theme
function add_social_icons_footer() {
?>
<div class="social-icons">
<!-- Your HTML here -->
</div>
<?php
}
add_action('wp_footer', 'add_social_icons_footer');
// Add CSS
function add_social_icons_styles() {
?>
<style>
/* Your CSS here */
</style>
<?php
}
add_action('wp_head', 'add_social_icons_styles');
Method 5: Creating a Custom Social Icons Menu
WordPress allows you to create a custom menu specifically for social icons, which offers a flexible solution with minimal coding:
Step 1: Create a Social Menu
- Go to Appearance > Menus
- Create a new menu (e.g., “Social Links”)
- Add custom links with your social profile URLs
- Set the “Link Text” to the platform name (e.g., “Facebook”)
- Save your menu
- Don’t assign it to a menu location yet
Step 2: Add CSS to Style the Menu as Icons
Add this CSS to your theme’s Additional CSS section or child theme:
/* Hide text, show icons */
.social-navigation a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
background: #f5f5f5;
color: transparent;
overflow: hidden;
position: relative;
}
.social-navigation a::before {
font-family: 'Font Awesome 5 Brands';
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 18px;
line-height: 40px;
color: #333;
}
/* Define icons for each service */
.social-navigation a[href*="facebook.com"]::before {
content: '\f39e';
color: #1877F2;
}
.social-navigation a[href*="twitter.com"]::before {
content: '\f099';
color: #1DA1F2;
}
.social-navigation a[href*="instagram.com"]::before {
content: '\f16d';
color: #E4405F;
}
.social-navigation a[href*="youtube.com"]::before {
content: '\f167';
color: #FF0000;
}
.social-navigation a[href*="linkedin.com"]::before {
content: '\f0e1';
color: #0A66C2;
}
.social-navigation a[href*="pinterest.com"]::before {
content: '\f231';
color: #BD081C;
}
/* Hover effects */
.social-navigation a:hover {
background: #333;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.social-navigation a:hover::before {
color: #fff;
}
Step 3: Display the Menu
Option A: Using a Widget
- Go to Appearance > Widgets
- Add a “Navigation Menu” widget to your desired widget area
- Select your “Social Links” menu
- Add a CSS class: “social-navigation”
- Save the widget
Option B: Using Custom Code
Add this to your theme’s template files where you want the icons to appear:
<?php
if (has_nav_menu('social')) {
wp_nav_menu(
array(
'theme_location' => 'social',
'menu_class' => 'social-navigation',
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'depth' => 1,
)
);
}
?>
Option C: Register a Menu Location (in functions.php)
// Add to functions.php in your child theme
function register_social_menu() {
register_nav_menu('social', __('Social Links Menu'));
}
add_action('after_setup_theme', 'register_social_menu');
Then update your theme templates to display this menu location.
Sharing icons differ from profile links, as they enable visitors to share your content on their social accounts. Here’s how to add them:
Using Custom Code
Add this function to your child theme’s functions.php:
function add_social_share_buttons($content) {
// Only add to posts
if(is_singular('post')) {
// Get the current page URL
$url = urlencode(get_permalink());
// Get the page title
$title = urlencode(get_the_title());
// Construct sharing links
$facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' . $url;
$twitter_url = 'https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url;
$linkedin_url = 'https://www.linkedin.com/sharing/share-offsite/?url=' . $url;
$pinterest_url = 'https://pinterest.com/pin/create/button/?url=' . $url . '&media=' . urlencode(get_the_post_thumbnail_url()) . '&description=' . $title;
// Create the buttons
$share_buttons = '
<div class="social-share-buttons">
<h4>Share This Post</h4>
<a class="share-facebook" href="' . $facebook_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-facebook-f"></i> Facebook
</a>
<a class="share-twitter" href="' . $twitter_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-twitter"></i> Twitter
</a>
<a class="share-linkedin" href="' . $linkedin_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-linkedin-in"></i> LinkedIn
</a>
<a class="share-pinterest" href="' . $pinterest_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-pinterest-p"></i> Pinterest
</a>
</div>
';
// Append after content
$content .= $share_buttons;
}
return $content;
}
add_filter('the_content', 'add_social_share_buttons');
Add the accompanying CSS:
.social-share-buttons {
margin: 40px 0;
padding: 20px;
background: #f9f9f9;
border-radius: 5px;
text-align: center;
}
.social-share-buttons h4 {
margin-top: 0;
margin-bottom: 15px;
}
.social-share-buttons a {
display: inline-block;
margin: 5px;
padding: 10px 15px;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-size: 14px;
transition: opacity 0.3s ease;
}
.social-share-buttons a:hover {
opacity: 0.9;
}
.share-facebook {
background: #1877F2;
}
.share-twitter {
background: #1DA1F2;
}
.share-linkedin {
background: #0A66C2;
}
.share-pinterest {
background: #BD081C;
}
@media (max-width: 768px) {
.social-share-buttons a {
display: block;
margin: 10px 0;
}
}
Creating a Shortcode for Flexible Placement
For more flexibility, create a shortcode:
function social_share_shortcode() {
// Get the current page URL
$url = urlencode(get_permalink());
// Get the page title
$title = urlencode(get_the_title());
// Construct sharing links
$facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' . $url;
$twitter_url = 'https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url;
$linkedin_url = 'https://www.linkedin.com/sharing/share-offsite/?url=' . $url;
$pinterest_url = 'https://pinterest.com/pin/create/button/?url=' . $url . '&media=' . urlencode(get_the_post_thumbnail_url()) . '&description=' . $title;
// Create the buttons
$share_buttons = '
<div class="social-share-buttons">
<h4>Share This Post</h4>
<a class="share-facebook" href="' . $facebook_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-facebook-f"></i> Facebook
</a>
<a class="share-twitter" href="' . $twitter_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-twitter"></i> Twitter
</a>
<a class="share-linkedin" href="' . $linkedin_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-linkedin-in"></i> LinkedIn
</a>
<a class="share-pinterest" href="' . $pinterest_url . '" target="_blank" rel="noopener noreferrer">
<i class="fab fa-pinterest-p"></i> Pinterest
</a>
</div>
';
return $share_buttons;
}
add_shortcode('social_share', 'social_share_shortcode');
Use the shortcode [social_share] anywhere in your posts or pages.
Method 7: Adding Animated Social Media Icons
For more engaging social icons, you can add animations with CSS:
/* Pulse Animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.social-icons a:hover {
animation: pulse 1s infinite;
}
/* Bounce Animation */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.social-icons.bounce a:hover {
animation: bounce 1s;
}
/* Rotate Animation */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.social-icons.rotate a:hover i {
animation: rotate 0.5s;
}
/* Fade In Animation */
@keyframes fadeIn {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
.social-icons.fade a {
opacity: 0.5;
}
.social-icons.fade a:hover {
animation: fadeIn 0.5s forwards;
}
Add the appropriate class to your social icons container to apply these animations.
Method 8: Adding Social Media Icons to Specific WordPress Elements
Adding to Author Bios
Add this to your child theme’s functions.php:
function add_social_to_author_bio($author_bio) {
// Get author ID
$author_id = get_the_author_meta('ID');
// Get social URLs (assuming you store these as user meta)
$facebook = get_user_meta($author_id, 'facebook', true);
$twitter = get_user_meta($author_id, 'twitter', true);
$instagram = get_user_meta($author_id, 'instagram', true);
// Create social icons HTML
$social_html = '<div class="author-social-icons">';
if($facebook) {
$social_html .= '<a href="' . esc_url($facebook) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>';
}
if($twitter) {
$social_html .= '<a href="' . esc_url($twitter) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>';
}
if($instagram) {
$social_html .= '<a href="' . esc_url($instagram) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>';
}
$social_html .= '</div>';
// Append to bio
return $author_bio . $social_html;
}
add_filter('get_the_author_description', 'add_social_to_author_bio');
You’ll need to add custom user meta fields for the social URLs. You can use a plugin like Advanced Custom Fields for this.
Adding to Comments
function add_social_to_comments($comment_text, $comment) {
// Only add to approved comments
if($comment->comment_approved == '1') {
// Get comment author email
$email = $comment->comment_author_email;
// Get Gravatar URL
$gravatar = get_avatar_url($email, array('size' => 40));
// Add social sharing for this comment
$comment_url = get_comment_link($comment);
$social_html = '<div class="comment-social">
<span>Share this comment:</span>
<a href="https://twitter.com/intent/tweet?text=Comment by ' . $comment->comment_author . '&url=' . urlencode($comment_url) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode($comment_url) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
</div>';
return $comment_text . $social_html;
}
return $comment_text;
}
add_filter('comment_text', 'add_social_to_comments', 10, 2);
Best Practices for Social Media Icons on WordPress
To ensure your social media icons enhance rather than detract from your site:
1. Maintain Brand Consistency
Choose icon styles that match your brand aesthetic. For architecture WordPress themes or minimal designs, simple monochrome icons often work best, while more playful brands might use colorful, animated icons.
2. Ensure Accessibility
Always include proper aria labels and text alternatives:
<a href="https://facebook.com/yourpage" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Facebook">
<i class="fab fa-facebook-f"></i>
<span class="screen-reader-text">Facebook</span>
</a>
Add this CSS for screen readers:
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
3. Optimize for Performance
Social media icons can impact page load times if not implemented efficiently:
- Use SVG icons when possible (they’re smaller and scale perfectly)
- Consider using icon fonts selectively, loading only what you need
- Implement lazy loading for below-the-fold icons
- Minimize HTTP requests by combining icon resources
4. Test Across Devices
Ensure your icons display correctly on all devices and screen sizes. Use responsive design principles:
/* Adjust icon size on small screens */
@media (max-width: 768px) {
.social-icons a {
width: 35px;
height: 35px;
}
.social-icons i {
font-size: 16px;
}
}
/* Further adjustments for very small screens */
@media (max-width: 480px) {
.social-icons {
gap: 10px;
}
.social-icons a {
width: 30px;
height: 30px;
}
}
5. Use Security Best Practices
When linking to external sites:
- Always use
rel="noopener noreferrer"for security - Consider implementing SSL if you haven’t already
- Be cautious with third-party social plugins, as they may introduce vulnerabilities
6. Respect Privacy Regulations
If your social sharing buttons use tracking cookies or scripts, ensure you’re compliant with GDPR and other privacy regulations. Consider:
- Adding notices about tracking in your privacy policy
- Implementing cookie consent mechanisms
- Using privacy-focused sharing solutions
Troubleshooting Common Social Media Icon Issues
Icons Not Displaying Correctly
Problem: Icons appear as squares or missing characters.
Solution:
- Verify the icon font or SVG is properly loaded
- Check for CSS conflicts in your theme
- Try a different icon library or format
Icon Colors Not Working
Problem: Icons won’t take on the colors specified in CSS.
Solution:
- Check if the icons are SVGs or font icons (they require different coloring approaches)
- For font icons, ensure you’re targeting the correct element
- For SVGs, use
fillproperty instead ofcolor
Social Sharing Count Issues
Problem: Share counts are inaccurate or not displaying.
Solution:
- Be aware that many platforms (like Facebook) have restricted access to share count APIs
- Consider using a specialized plugin for accurate counts
- Consider whether share counts are truly necessary for your site
Mobile Display Problems
Problem: Icons are too small or too large on mobile devices.
Solution:
- Use responsive CSS with media queries
- Test on actual devices, not just browser simulations
- Consider a mobile-specific layout for social icons
Advanced Social Media Integration for WordPress
For those looking to go beyond basic icons:
1. Social Login Integration
Allow users to register and log in using their social accounts:
- Use plugins like Nextend Social Login or WordPress Social Login
- For custom implementation, use OAuth libraries specific to each platform
2. Social Feed Integration
Display your social media feeds directly on your site:
- Use platform-specific plugins like Instagram Feed or Custom Twitter Feeds
- Consider performance implications, as these can slow down your site
- Implement caching to minimize API calls
3. Social Commerce Integration
For e-commerce WordPress sites, consider integrating social shopping features:
- Instagram Shopping tags
- Pinterest buyable pins
- Facebook Shop integration
4. Social Proof Integration
Display social media engagement as social proof:
- Show follower counts next to social icons
- Display testimonials from social platforms
- Integrate reviews from social channels
Conclusion
Adding social media icons to your WordPress site is an essential step in creating a connected online presence. Whether you choose plugins, theme options, or custom code depends on your specific needs, technical comfort level, and performance requirements.
For beginners, plugins offer the simplest solution. For those seeking better performance and customization, custom code approaches provide more control. Whichever method you choose, ensure your social media icons align with your brand, function correctly across devices, and enhance rather than detract from the user experience.
Remember that social media integration goes beyond just adding icons—it’s about creating meaningful connections between your website and your social presence. By strategically implementing social media icons and sharing functionality, you can boost engagement, increase your social following, and create more pathways for users to discover and interact with your content.
If you need professional help implementing social media integration on your WordPress site, consider hiring a WordPress expert who can create a tailored solution that perfectly matches your brand and technical requirements.
For more WordPress tips and tutorials, explore our guides on WordPress page speed optimization, WordPress security best practices, and how to create a child theme.
Jackober is a seasoned WordPress expert and digital strategist with a passion for empowering website owners. With years of hands-on experience in web development, SEO, and online security, Jackober delivers reliable, practical insights to help you build, secure, and optimize your WordPress site with ease.