How to Add Social Sharing Buttons in GeneratePress without Plugin?

In this video tutorial I will show you how to add Social Sharing Buttons in GeneratePress Free and Pro theme without using plugins.

Important: In the below PHP Code you will find this line $twitter_account_name = ‘your_twitter_username’; You have to replace ‘your_twitter_username’ with your own twitter account name.

GeneratePress Free: Social Sharing PHP Code

function wpframer_social_share_func() {
	if(!is_singular()) return;
	$twitter_account_name = 'your_twitter_username';
	$wpf_page_url = urlencode(get_the_permalink());
	$wpf_page_title = urlencode(get_the_title());
	$wpf_page_image = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));

	$facebook_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M380.001 120.001h99.993V0h-99.993c-77.186 0-139.986 62.8-139.986 139.986v60h-80.009V320h79.985v320h120.013V320h99.994l19.996-120.013h-119.99v-60.001c0-10.843 9.154-19.996 19.996-19.996v.012z"/></svg>';
	$whats_app_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M546.704 91.89C486.526 31.584 406.482-1.582 321.229-1.582 145.609-1.583 2.67 141.368 2.67 317.118c0 56.139 14.705 111.05 42.567 159.297L.001 641.595l168.959-44.34c46.595 25.382 99.013 38.835 152.222 38.835h.13C496.944 636.09 640 493.14 640 317.401c0-85.182-33.166-165.179-93.344-225.463l.047-.047zM321.323 582.315c-47.599 0-94.218-12.827-134.895-36.957l-9.697-5.788-100.265 26.257 26.776-97.726-6.272-10.04C70.312 415.965 56.4 367.244 56.4 317.13c0-146.082 118.832-264.96 265.066-264.96 70.713 0 137.328 27.65 187.302 77.622 49.996 50.127 77.493 116.588 77.493 187.42-.118 146.187-118.95 265.066-264.96 265.066l.024.036zM466.541 383.85c-7.913-4.028-47.115-23.233-54.39-25.89-7.276-2.658-12.58-4.028-17.977 4.027-5.268 7.914-20.587 25.89-25.252 31.265-4.666 5.28-9.284 6.035-17.197 2.008-7.914-4.028-33.674-12.426-64.064-39.568-23.634-21.095-39.662-47.221-44.328-55.134-4.665-7.914-.52-12.308 3.532-16.193 3.661-3.544 7.925-9.284 11.941-13.95 4.028-4.665 5.28-7.925 7.925-13.31 2.658-5.28 1.359-9.946-.637-13.95-2.008-4.015-17.977-43.217-24.485-59.185-6.39-15.603-13.063-13.43-17.965-13.701-4.665-.237-9.945-.237-15.2-.237-5.257 0-13.95 1.996-21.225 9.933-7.276 7.914-27.898 27.26-27.898 66.45 0 39.201 28.512 77.009 32.516 82.407 4.027 5.267 56.162 85.784 136.029 120.238 18.98 8.161 33.803 13.063 45.355 16.854 19.098 6.024 36.425 5.15 50.126 3.13 15.32-2.256 47.115-19.229 53.788-37.831 6.662-18.615 6.662-34.536 4.666-37.831-1.89-3.544-7.158-5.504-15.201-9.58l-.06.048z"/></svg>';
	$twitter_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>';
	$pinterest_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 2599 3333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M576 3333c185-165 312-400 374-641 25-95 127-484 127-484 66 127 261 234 466 234 614 0 1056-564 1056-1267C2599 502 2050-1 1344-1 465-1-1 589-1 1231c0 298 159 670 413 788 38 19 59 10 68-28 6-29 41-166 57-231 5-20 3-39-14-59-84-102-152-290-152-464 0-449 340-884 919-884 500 0 850 340 850 828 0 551-278 933-640 933-200 0-350-165-301-368 58-242 169-503 169-677 0-156-83-286-258-286-205 0-368 211-368 495 0 180 60 302 60 302s-202 853-239 1012c-41 176-25 423-7 584l18 158z"/></svg>';
	$linkedin_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M228.582 205.715h126.462v64.832h1.83c17.611-31.595 60.675-64.832 124.892-64.832C615.303 205.715 640 288.818 640 396.926v220.219H508.116V421.93c0-46.536-.969-106.442-68.576-106.442-68.67 0-79.194 50.658-79.194 103.052v198.605H228.581v-411.43zM137.152 91.43c0 37.855-30.721 68.576-68.576 68.576-37.855 0-68.587-30.721-68.587-68.576 0-37.855 30.732-68.576 68.587-68.576 37.855 0 68.576 30.721 68.576 68.576zM-.011 205.715h137.163v411.43H-.011v-411.43z"/></svg>';
	$reddit_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M160.018 360.052c0-22.087 17.918-40.004 40.004-40.004 22.087 0 39.993 17.917 39.993 40.004 0 22.087-17.906 40.004-39.993 40.004-22.086 0-40.004-17.917-40.004-40.004zm239.991 0c0-22.087 17.918-40.004 40.004-40.004 22.087 0 40.005 17.917 40.005 40.004 0 22.087-17.918 40.004-40.005 40.004-22.086 0-40.004-17.917-40.004-40.004zm1.949 85.477c10.323-8.114 25.252-6.366 33.366 3.957 8.115 10.323 6.367 25.252-3.956 33.367-28.678 22.606-72.403 37.205-111.32 37.205-38.906 0-82.631-14.599-111.356-37.205-10.323-8.115-12.071-23.044-3.957-33.367 8.114-10.323 23.044-12.07 33.367-3.957 16.523 13.005 49.193 27 81.945 27 32.765 0 65.446-13.996 81.958-27h-.047zM640 280.055c0-44.209-35.8-80.008-79.997-80.008-30.083 0-56.245 16.606-69.922 41.126-41.115-22.477-91.206-37.04-145.797-40.394L392 93.58l91.347 26.362c8.245 23.327 30.438 40.076 56.611 40.076 33.119 0 60.001-26.883 60.001-60.001 0-33.119-26.882-60-60-60-22.843 0-42.733 12.755-52.844 31.57l-101.8-29.41c-11.398-3.283-23.48 2.316-28.288 13.158l-64.843 145.62c-53.197 3.768-102.037 18.13-142.266 40.158-13.689-24.52-39.839-41.126-69.922-41.126-44.21 0-79.997 35.8-79.997 80.009 0 32.681 19.63 60.804 47.705 73.194-5.031 15-7.724 30.673-7.724 46.807 0 110.434 125.352 199.987 279.996 199.987 154.644 0 279.996-89.552 279.996-199.987 0-16.122-2.681-31.795-7.725-46.807 28.123-12.39 47.706-40.513 47.706-73.194l.047.059zM539.995 77.588c12.449 0 22.536 10.075 22.536 22.524 0 12.438-10.087 22.524-22.536 22.524-12.437 0-22.524-10.086-22.524-22.524 0-12.449 10.087-22.524 22.524-22.524zM40.015 280.055c0-22.04 17.954-40.004 39.993-40.004 15.97 0 29.73 9.354 36.166 22.914-20.93 15.85-38.233 34.17-51.036 54.201-14.728-5.929-25.122-20.315-25.122-37.11zm279.997 272.507c-128.4 0-232.515-68.268-232.515-152.518 0-84.249 104.068-152.529 232.515-152.529 128.387 0 232.503 68.28 232.503 152.53 0 84.248-104.068 152.517-232.503 152.517zm254.86-235.397c-12.802-20.079-30.106-38.35-51.035-54.201 6.437-13.512 20.197-22.914 36.166-22.914 22.04 0 40.004 17.965 40.004 40.005 0 16.795-10.406 31.205-25.134 37.11z"/></svg>';
	
	echo '<div class="wpf-social-share">';
	echo '<a class="wpf-share-button wpf-facebook" href="https://www.facebook.com/sharer.php?u='.$wpf_page_url.'" target="_blank" rel="nofollow">'.$facebook_icon.'</a>';
	echo '<a class="wpf-share-button wpf-twitter" href="https://twitter.com/share?text='.$wpf_page_title.'&url='.$wpf_page_url.'&via='.$twitter_account_name.'" target="_blank" rel="nofollow">'.$twitter_icon.'</a>';
	echo '<a class="wpf-share-button wpf-pinterest" href="https://pinterest.com/pin/create/button/?url='.$wpf_page_url.'&media='.$wpf_page_image.'&description='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$pinterest_icon.'</a>';
	echo '<a class="wpf-share-button wpf-linkedin" href="https://www.linkedin.com/shareArticle?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$linkedin_icon.'</a>';
	echo '<a class="wpf-share-button wpf-whatsapp" href="https://api.whatsapp.com/send?text='.$wpf_page_title. ' ' .$wpf_page_url.'" target="_blank" rel="nofollow">'.$whats_app_icon.'</a>';
	echo '<a class="wpf-share-button wpf-reddit" href="https://reddit.com/submit?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$reddit_icon.'</a>';
	echo '</div>';
}

add_action( 'generate_after_entry_title','wpframer_social_share_func' );

GeneratePress Pro: Social Sharing PHP Code

<?php
function wpframer_social_share_func() {
	if(!is_singular()) return;
	$twitter_account_name = 'your_twitter_username';
	$wpf_page_url = urlencode(get_the_permalink());
	$wpf_page_title = urlencode(get_the_title());
	$wpf_page_image = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));

	$facebook_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M380.001 120.001h99.993V0h-99.993c-77.186 0-139.986 62.8-139.986 139.986v60h-80.009V320h79.985v320h120.013V320h99.994l19.996-120.013h-119.99v-60.001c0-10.843 9.154-19.996 19.996-19.996v.012z"/></svg>';
	$whats_app_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M546.704 91.89C486.526 31.584 406.482-1.582 321.229-1.582 145.609-1.583 2.67 141.368 2.67 317.118c0 56.139 14.705 111.05 42.567 159.297L.001 641.595l168.959-44.34c46.595 25.382 99.013 38.835 152.222 38.835h.13C496.944 636.09 640 493.14 640 317.401c0-85.182-33.166-165.179-93.344-225.463l.047-.047zM321.323 582.315c-47.599 0-94.218-12.827-134.895-36.957l-9.697-5.788-100.265 26.257 26.776-97.726-6.272-10.04C70.312 415.965 56.4 367.244 56.4 317.13c0-146.082 118.832-264.96 265.066-264.96 70.713 0 137.328 27.65 187.302 77.622 49.996 50.127 77.493 116.588 77.493 187.42-.118 146.187-118.95 265.066-264.96 265.066l.024.036zM466.541 383.85c-7.913-4.028-47.115-23.233-54.39-25.89-7.276-2.658-12.58-4.028-17.977 4.027-5.268 7.914-20.587 25.89-25.252 31.265-4.666 5.28-9.284 6.035-17.197 2.008-7.914-4.028-33.674-12.426-64.064-39.568-23.634-21.095-39.662-47.221-44.328-55.134-4.665-7.914-.52-12.308 3.532-16.193 3.661-3.544 7.925-9.284 11.941-13.95 4.028-4.665 5.28-7.925 7.925-13.31 2.658-5.28 1.359-9.946-.637-13.95-2.008-4.015-17.977-43.217-24.485-59.185-6.39-15.603-13.063-13.43-17.965-13.701-4.665-.237-9.945-.237-15.2-.237-5.257 0-13.95 1.996-21.225 9.933-7.276 7.914-27.898 27.26-27.898 66.45 0 39.201 28.512 77.009 32.516 82.407 4.027 5.267 56.162 85.784 136.029 120.238 18.98 8.161 33.803 13.063 45.355 16.854 19.098 6.024 36.425 5.15 50.126 3.13 15.32-2.256 47.115-19.229 53.788-37.831 6.662-18.615 6.662-34.536 4.666-37.831-1.89-3.544-7.158-5.504-15.201-9.58l-.06.048z"/></svg>';
	$twitter_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>';
	$pinterest_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 2599 3333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M576 3333c185-165 312-400 374-641 25-95 127-484 127-484 66 127 261 234 466 234 614 0 1056-564 1056-1267C2599 502 2050-1 1344-1 465-1-1 589-1 1231c0 298 159 670 413 788 38 19 59 10 68-28 6-29 41-166 57-231 5-20 3-39-14-59-84-102-152-290-152-464 0-449 340-884 919-884 500 0 850 340 850 828 0 551-278 933-640 933-200 0-350-165-301-368 58-242 169-503 169-677 0-156-83-286-258-286-205 0-368 211-368 495 0 180 60 302 60 302s-202 853-239 1012c-41 176-25 423-7 584l18 158z"/></svg>';
	$linkedin_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M228.582 205.715h126.462v64.832h1.83c17.611-31.595 60.675-64.832 124.892-64.832C615.303 205.715 640 288.818 640 396.926v220.219H508.116V421.93c0-46.536-.969-106.442-68.576-106.442-68.67 0-79.194 50.658-79.194 103.052v198.605H228.581v-411.43zM137.152 91.43c0 37.855-30.721 68.576-68.576 68.576-37.855 0-68.587-30.721-68.587-68.576 0-37.855 30.732-68.576 68.587-68.576 37.855 0 68.576 30.721 68.576 68.576zM-.011 205.715h137.163v411.43H-.011v-411.43z"/></svg>';
	$reddit_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M160.018 360.052c0-22.087 17.918-40.004 40.004-40.004 22.087 0 39.993 17.917 39.993 40.004 0 22.087-17.906 40.004-39.993 40.004-22.086 0-40.004-17.917-40.004-40.004zm239.991 0c0-22.087 17.918-40.004 40.004-40.004 22.087 0 40.005 17.917 40.005 40.004 0 22.087-17.918 40.004-40.005 40.004-22.086 0-40.004-17.917-40.004-40.004zm1.949 85.477c10.323-8.114 25.252-6.366 33.366 3.957 8.115 10.323 6.367 25.252-3.956 33.367-28.678 22.606-72.403 37.205-111.32 37.205-38.906 0-82.631-14.599-111.356-37.205-10.323-8.115-12.071-23.044-3.957-33.367 8.114-10.323 23.044-12.07 33.367-3.957 16.523 13.005 49.193 27 81.945 27 32.765 0 65.446-13.996 81.958-27h-.047zM640 280.055c0-44.209-35.8-80.008-79.997-80.008-30.083 0-56.245 16.606-69.922 41.126-41.115-22.477-91.206-37.04-145.797-40.394L392 93.58l91.347 26.362c8.245 23.327 30.438 40.076 56.611 40.076 33.119 0 60.001-26.883 60.001-60.001 0-33.119-26.882-60-60-60-22.843 0-42.733 12.755-52.844 31.57l-101.8-29.41c-11.398-3.283-23.48 2.316-28.288 13.158l-64.843 145.62c-53.197 3.768-102.037 18.13-142.266 40.158-13.689-24.52-39.839-41.126-69.922-41.126-44.21 0-79.997 35.8-79.997 80.009 0 32.681 19.63 60.804 47.705 73.194-5.031 15-7.724 30.673-7.724 46.807 0 110.434 125.352 199.987 279.996 199.987 154.644 0 279.996-89.552 279.996-199.987 0-16.122-2.681-31.795-7.725-46.807 28.123-12.39 47.706-40.513 47.706-73.194l.047.059zM539.995 77.588c12.449 0 22.536 10.075 22.536 22.524 0 12.438-10.087 22.524-22.536 22.524-12.437 0-22.524-10.086-22.524-22.524 0-12.449 10.087-22.524 22.524-22.524zM40.015 280.055c0-22.04 17.954-40.004 39.993-40.004 15.97 0 29.73 9.354 36.166 22.914-20.93 15.85-38.233 34.17-51.036 54.201-14.728-5.929-25.122-20.315-25.122-37.11zm279.997 272.507c-128.4 0-232.515-68.268-232.515-152.518 0-84.249 104.068-152.529 232.515-152.529 128.387 0 232.503 68.28 232.503 152.53 0 84.248-104.068 152.517-232.503 152.517zm254.86-235.397c-12.802-20.079-30.106-38.35-51.035-54.201 6.437-13.512 20.197-22.914 36.166-22.914 22.04 0 40.004 17.965 40.004 40.005 0 16.795-10.406 31.205-25.134 37.11z"/></svg>';
	
	echo '<div class="wpf-social-share">';
	echo '<a class="wpf-share-button wpf-facebook" href="https://www.facebook.com/sharer.php?u='.$wpf_page_url.'" target="_blank" rel="nofollow">'.$facebook_icon.'</a>';
	echo '<a class="wpf-share-button wpf-twitter" href="https://twitter.com/share?text='.$wpf_page_title.'&url='.$wpf_page_url.'&via='.$twitter_account_name.'" target="_blank" rel="nofollow">'.$twitter_icon.'</a>';
	echo '<a class="wpf-share-button wpf-pinterest" href="https://pinterest.com/pin/create/button/?url='.$wpf_page_url.'&media='.$wpf_page_image.'&description='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$pinterest_icon.'</a>';
	echo '<a class="wpf-share-button wpf-linkedin" href="https://www.linkedin.com/shareArticle?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$linkedin_icon.'</a>';
	echo '<a class="wpf-share-button wpf-whatsapp" href="https://api.whatsapp.com/send?text='.$wpf_page_title. ' ' .$wpf_page_url.'" target="_blank" rel="nofollow">'.$whats_app_icon.'</a>';
	echo '<a class="wpf-share-button wpf-reddit" href="https://reddit.com/submit?url='.$wpf_page_url.'&title='.$wpf_page_title.'" target="_blank" rel="nofollow">'.$reddit_icon.'</a>';
	echo '</div>';
}
wpframer_social_share_func();
?>

Social Sharing CSS Code

/* Social Share Plugin - Begins */
.wpf-social-share {
  margin: 20px auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.wpf-share-button {
	flex: 1;
	padding-top: 10px;
}
.wpf-social-share .wpf-facebook {
	background-color: #3b5998;
	fill: #ffffff;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
}
.wpf-social-share .wpf-facebook:hover {
	background-color: #627aad;
}
.wpf-social-share .wpf-twitter {
	background-color: #000000;
	fill: #ffffff;
}
.wpf-social-share .wpf-twitter:hover {
	background-color: #222222;
}
.wpf-social-share .wpf-pinterest {
	background-color: #c8232c;
	fill: #ffffff;
}
.wpf-social-share .wpf-pinterest:hover {
	background-color: #ca3949;
}
.wpf-social-share .wpf-linkedin {
	background-color: #0072b1;
	fill: #ffffff;
}
.wpf-social-share .wpf-linkedin:hover {
	background-color: #627aad;
}
.wpf-social-share .wpf-whatsapp {
	background-color: #25D366;
	fill: #ffffff;
}
.wpf-social-share .wpf-whatsapp:hover {
	background-color: #51dc85;
}
.wpf-social-share .wpf-reddit {
	background-color: #ff4500;
	fill: #ffffff;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
.wpf-social-share .wpf-reddit:hover {
	background-color: #ff7933;
}
/* Social Share Plugin - Ends */

How to Deactivate Some Social Media Buttons

If you want to deactivate some social media buttons –

  • First, select the line of code which is used to display the social media (Facebook, WhatsApp etc) button.
  • Next, add // in front as shown in the image below.
  • Hit Save Button.

11 thoughts on “How to Add Social Sharing Buttons in GeneratePress without Plugin?”

Leave a Reply to murtza Cancel reply