In this blog, we see how to add social media share icons in WordPress custom themes without adding a plugin.
To add social media share links to your WordPress custom theme,
you can use the following code:
function custom_social_share() {
// Get current page URL
$url = urlencode(get_permalink());
// Get current page title
$title = str_replace(' ', '%20', get_the_title());
// Get post thumbnail
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
// Get social media sharing links
$twitter_url = 'https://twitter.com/intent/tweet?url=' . $url . '&text=' . $title;
$facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' . $url;
$whatsapp_url = 'whatsapp://send?text=' . $title . ' ' . $url;
$instagram_url = 'https://www.instagram.com/myprograming?url=' . $url;
$linkedin_url = 'https://www.linkedin.com/shareArticle?mini=true&url=' . $url . '&title=' . $title;
$pinterest_url = 'https://www.pinterest.com/pin/create/button/?url=' . $url . '&media=' . $thumbnail[0] . '&description=' . $title;
// Output social media share links
echo '<div class="social-share">';
echo '<a href="' . $twitter_url . '" target="_blank"><i class="fab fa-twitter"></i></a>';
echo '<a href="' . $facebook_url . '" target="_blank"><i class="fab fa-facebook"></i></a>';
echo '<a href="' . $whatsapp_url . '" target="_blank"><i class="fab fa-whatsapp"></i></a>';
echo '<a href="' . $instagram_url . '" target="_blank"><i class="fab fa-instagram"></i></a>';
echo '<a href="' . $linkedin_url . '" target="_blank"><i class="fab fa-linkedin"></i></a>';
echo '<a href="' . $pinterest_url . '" target="_blank"><i class="fab fa-pinterest"></i></a>';
echo '</div>';
}
This code defines a function custom_social_share() that gets the current page URL, title, and thumbnail image (if available), and then generates social media sharing links for Twitter, Facebook, LinkedIn, WhatsApp, Instagram, and Pinterest. The function then outputs the links as HTML with Font Awesome icons for each social media platform.
You can call this function anywhere in your theme code where you want the social media sharing links to appear, for example:
<?php custom_social_share(); ?>
This will output the social media share links with icons on the current page. You can modify the HTML and CSS to style the links as desired.
Add this CSS to your style.css, which will style the social media icons, if you want to style differently, you can do so by adding custom styles.
.social-share{
height: 100px;
margin-top: 25px;
}
.social-share a{
padding: 20px 23px;
color: #000;
background-color: #f4f4f4;
border-radius: 50%;
height: 50px;
width: 50px;
margin: 5px;
}
Note:- If you added this function and the social media icon is not coming then you can add a link to font-awesome ( https://fontawesome.com/ ).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" integrity="sha512-DD6Lm09YDHzhW3K4eLJ9Y7sFrBwtCF+KuSWOLYFqKsZ6RX4ifCu9vWqM4R+Uy++aBWe6wD4csgQRzGKp5vP6tg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
