Below snippet adds social share icons at the end of each post. We are using the is_single() function to make it work only on posts. If you want to enable social sharing on pages as well, you should use is_singular() instead. Please note that we are not using any WordPress default Dashicons. Using SVG makes the site load faster.
Add the below code to your child theme’s functions.php. You can also add or remove social share channels. We have included only WhatsApp, Facebook, Twitter and Email.
function wpfilters_social_share_icons($content) {
global $post;
if(is_single()) {
$wpfiltersURL = urlencode(get_permalink());
$wpfiltersTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$whatsappURL = 'https://api.whatsapp.com/send?text='.$wpfiltersURL;
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$wpfiltersURL;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$wpfiltersTitle.'&url='.$wpfiltersURL.'&via=wpfilters';
$emailURL = 'mailto:?Subject='.$wpfiltersURL.'&title='.$wpfiltersTitle;
$content .= '<div class="wpfilters-social">';
$content .= '<p class="share-post">Share and Support</p>
<a class="wpfilters-link wpfilters-whatsapp" href="'. $whatsappURL .'" target="_blank" aria-label="Whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg><span class=button-text>Whatsapp</span></a>';
$content .= '<a class="wpfilters-link wpfilters-facebook" href="'.$facebookURL.'" target="_blank" aria-label="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg><span class=button-text>Facebook</span></a>';
$content .= '<a class="wpfilters-link wpfilters-twitter" href="'.$twitterURL.'" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg><span class=button-text>Twitter</span></a>';
$content .= '<a class="wpfilters-link wpfilters-email" href="'.$emailURL.'" target="_blank" aria-label="Email"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z"/></svg><span class=button-text>Email</span></a>';
$content .= '</div>';
return $content;
}else{
return $content;
}
};
add_filter( 'the_content', 'wpfilters_social_share_icons');Add the below CSS. If you aren’t using any lines, just delete them. If you want to enable button text, use the commented code and remove the general view code. You can also customize according to screen width, i.e., for Mobile and Desktop screens.
/* General View */
.wpfilters-link {
padding: 10px 12px 10px 12px !important;
border-radius: 5px;
margin: 4px 3px 4px 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.wpfilters-link span.button-text {
display: none;
}
/* Desktop View- Enable if you want to show Button Text in Desktop View
@media (min-width: 769px) {
.wpfilters-link {
padding: 3px 10px 4px 10px !important;
font-size: 19px;
border-radius: 2px;
margin: 4px 5px 4px 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.wpfilters-link span.button-text {
padding-left: 6px;
}
}
*/
/* General CSS */
a.wpfilters-link {
text-decoration: none !important;
color: white !important;
}
/* Icon Background */
.wpfilters-twitter {
background: #08a0e9 !important;
}
.wpfilters-twitter:hover,.wpfilters-twitter:active {
background: #36d8ff !important;
}
.wpfilters-facebook {
background: #3B5998 !important;
}
.wpfilters-facebook:hover,.wpfilters-facebook:active {
background: #1877f2 !important;
}
.wpfilters-whatsapp {
background: #075e54 !important;
}
.wpfilters-whatsapp:hover,.wpfilters-buffer:active {
background: #25d366 !important;
}
.wpfilters-email {
background: #bb001b !important;
}
.wpfilters-email:hover,.wpfilters-buffer:active {
background: #ea4335 !important;
}
/* Share Text */
.share-post {
font-size: 20px;
margin-bottom: 5px;
}
/* Align Block */
.wpfilters-social {
text-align: center;
margin-bottom: 20px;
}
.wpfilters-link svg {
fill: white;
}