Add WordPress Share Button without Plugin

gistfile1.txt

Use the WordPress function and the CSS codes below to add share button to WordPress without a plugin.

SEE DETAIL GUIDE HERE: www.alphawebtips.com/add-wordpress-share-button-without-plugin

1. CODE TO ADD TO FUNCTIONS.PHP

//SHAREBUTTON SHORTCODE by www.alphawebtips.com
function social_share_buttons_shortcode() {
    ob_start();
    ?>
    <div class="post__content--share">
        <h6>Share on:</h6>
        <div class="share-buttons">
            <a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/twitter-icon.webp" width="20" height="20"/> Twitter</a>
            <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/facebook-icon.webp" width="20" height="20"/> Facebook</a>
            <a href="https://api.whatsapp.com/send?text=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/whatsapp-logo.webp" width="20" height="20"/> WhatsApp</a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('social_share_buttons', 'social_share_buttons_shortcode');

//ADD THE SHORTCODE AT THE END OF YOUR CONTENT
function append_social_share_buttons($content) {
    if (is_single()) {
        $social_share_buttons = do_shortcode('[social_share_buttons]');
        $content .= $social_share_buttons;
    }
    return $content;
}
add_filter('the_content', 'append_social_share_buttons');

2. CSS TO ADD
.content--share {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid grey;
}

.content--share .share-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.content--share .share-buttons a {
  color: dark;
  text-decoration: none;
  border: 1px solid grey;
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
}

.content--share .share-buttons a:hover {
  background-color: blue;
  color: white;
}

Learn more on how to add share button here