How-To Guides

Customize GeneratePress Theme with CSS – Complete Free Guide (2026)

- by HoorInfoPro - Leave a Comment
Customize GeneratePress Theme with CSS – Complete Free Guide (2026)

Introduction

In this guide, you will learn how to customize the GeneratePress theme using CSS in 2026 without spending any money. A clean website layout, quick loading speed, and proper structure are essential factors for both SEO rankings and Google AdSense approval. Your website’s design creates the first impression for visitors and also helps search engines understand your content better.

For most beginners starting a blogging journey, the first step is buying a domain and hosting. Thereafter, choosing and customizing the right theme becomes the most important task when building a professional website.

Why Use the GeneratePress Theme?

GeneratePress is widely known as one of the fastest and most lightweight WordPress themes available today. It is built with performance and SEO in mind, making it a strong option for bloggers who want an AdSense-friendly website.

Although the default layout of GeneratePress is clean and simple, many users prefer adding their own styling to match their brand or improve the website’s appearance. The easiest way to achieve this is by using custom CSS.

Advantages of Customizing GeneratePress with CSS

Custom CSS allows you to control your website’s design without installing extra plugins. Some key benefits include:

  • Improves the overall look and professional feel of the website
  • Creates a better user experience and easier navigation
  • Helps maintain strong SEO performance
  • Keeps the site lightweight and fast
  • Changes remain safe even after theme updates

How to Customize GeneratePress Theme Using CSS (Step-by-Step)

Follow these simple steps to apply custom CSS to your GeneratePress website:

  1. Login to your WordPress dashboard.
  2. Go to Appearance → Customize.
  3. Open the Additional CSS section.
  4. Copy your custom CSS code.
  5. Paste the code into the CSS editor box.
  6. Click Publish to save the changes.
  7. Please clear your website cache and reload the site to view the updates.
/* GeneratePress Site CSS */
.sidebar .widget,
.container-widget {
    box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
    border-radius: 4px;
}

/*Button Style*/
.read-more-bt,
a button,
.pagination-bt,
.wp-block-search__button,
input[type="submit"] {
    font-size: 14px;
    padding: 10px 20px;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    background-image: linear-gradient(to right, #1fa2FF , #12D8FA  51%, #1fa2ff
 151%);
    border-radius: 30px;
}


.wp-block-search_button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.read-more-bt:hover {
    background-position: right center;
    color: #359cf0;
    text-decoration: none;
}

a.button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

input[type="submit"]:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.pagination-bt:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.entry-content  h2, h3, h4, h5, h6 {
    font-weight: 500;
    padding: 10px 10px 10px 25px;
    background-image: linear-gradient(to right, #1fa2ff	
 0%, #12D8FA 51%, #1fa2ff 100%);
    border-radius: 10px;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
/* Entire Site Social Share Design by web insights*/

.webinsights-float-social-wrapper {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

.webinsights-float-social-sharing {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    min-height: 30px;
    font-size: 12px;
    padding: 14px 10px;
}


.webinsights-float-social-sharing:first-of-type {
    border-top-right-radius: 10px;
}

.webinsights-float-social-sharing:last-of-type {
    border-bottom-right-radius: 10px;
}

.webinsights-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);
}

.webinsights-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.webinsights-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.webinsights-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.webinsights-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.webinsights-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.webinsights-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.webinsights-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.webinsights-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.webinsights-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.webinsights-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.webinsights-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

/* After Post Social Share Design by web insights*/

.webinsights-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.webinsights-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.webinsights-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .webinsights-social-sharing {
        font-size: 17px;
        padding: 6px 17px;
        display: inline-block;
    }
	.webinsights-social-wrapper {
    margin: 30px 0px;
    font-size: 0;
}


}

.webinsights-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.webinsights-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.webinsights-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.webinsights-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.webinsights-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.webinsights-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.webinsights-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.webinsights-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.webinsights-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.webinsights-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}

.webinsights-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.webinsights-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.webinsights-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.webinsights-social-reddit {
    fill: #fff;
    background-color: rgba(255, 87, 0, 1);
}

.webinsights-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

Author Box Details HTML Code

An Author Box is a section displayed at the end of a blog post that shows information about the writer, including their name, profile picture, bio, and social media links. It helps build trust with your readers, improves credibility, and makes your content look more professional. Adding an Author Box also provides a better user experience and signals to search engines that your content is written by a real expert.

How to Add an Author Box in WordPress (Short Guide)

  1. Go to your WordPress dashboard.
  2. Navigate to Users → Profile.
  3. Please complete your biographical information (author bio).
  4. Upload your profile picture via Gravatar.
  5. Save/update your profile settings.
  6. Please paste your Author Box CSS code below this section to style it.

Author Details CSS Code

/* bloggingskill author box*/

.hoorinfopro-author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    box-shadow: rgb(23 43 99 / 30%) 0 5px 20px;
    border-radius: 25px;
}

.hoorinfopro-author-box .insights-avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
.hoorinfopro-author-box .insights-avatar img {
		border-radius: 100%;
	}
.author-title {
	margin-bottom: 0.1em;
	font-weight: 500;
	font-size:18px;
	font-weight:bold;
}
.author-description {
	line-height: 1.6em;
	font-size:16px;	
}
.author-links a {
	margin-top: -2em;
	font-size: 14px;
	line-height: 2em;
	font-weight:bold;
	color: #26BC00;
	float: left;
}
@media (max-width: 768px) {
	.hoorinfopro-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		margin-bottom: 60px;
		flex-direction: column;
		text-align: center;
	}
	.hoorinfopro-author-box .insights-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.hoorinfopro-author-box .insights-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of hoorinfopro author box*/
/* Pagination - GeneratePress */

.page-numbers {
  all: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
  background-image: linear-gradient(to right, #1fa2FF , #12D8FA 51%, #1fa2ff 151%);
  border-radius: 100%;
  transition: 0.3s;
}

/* Current page */
.page-numbers.current {
  transform: scale(1.1);
}

/* Next / Prev buttons */
.page-numbers.next,
.page-numbers.prev {
  width: auto;
  padding: 0 18px;
  border-radius: 25px;
}

/* Hover effect */
.page-numbers:hover {
  filter: brightness(1.1);
}

Author Details HTML Code

<div class="bloggingskill-author-box">
    <div class="insights-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="insights-author-info">
        <div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </div>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="https://hoorinfopro.com/contact-us/" title="Read more about this author">Contact Us</a>
       </div>
    </div>
</div>

Please copy this code and paste it onto the sidebar widget elements.

The sidebar is an important part of your website, as it displays widgets, recent posts, categories, and social links. With custom CSS, you can improve the sidebar’s appearance to match your website’s design, enhance readability, and create a professional look. Properly styled sidebars make it easier for visitors to navigate your site and find important content quickly.

<!-- wp:generateblocks/container {"uniqueId":"356d0541","isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","rowGap":"20px"} -->
<!-- wp:generateblocks/container {"uniqueId":"d8499018","isDynamic":true,"blockVersion":3,"marginTop":"10","marginBottom":"10","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","className":"container-widget"} -->
<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search....","buttonText":"Search"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"6a176ec8","isDynamic":true,"blockVersion":3,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","className":"container-widget"} -->
<!-- wp:generateblocks/container {"uniqueId":"63330cf4","isDynamic":true,"blockVersion":3,"variantRole":"button-container","display":"flex","flexDirection":"column"} -->
<!-- wp:generateblocks/button {"uniqueId":"f6aae181","hasUrl":true,"target":true,"relNoFollow":true,"blockVersion":3,"display":"inline-flex","alignItems":"center","alignment":"center","fontSize":15,"marginTop":"5","marginRight":"5","marginBottom":"5","marginLeft":"5","paddingTop":"10","paddingRight":"20","paddingBottom":"10","paddingLeft":"20","borderRadiusTopRight":"50","borderRadiusBottomRight":"50","borderRadiusBottomLeft":"50","borderRadiusTopLeft":"50","backgroundColor":"#1877f2","backgroundColorHover":"#156cdc","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true} -->
<a class="gb-button gb-button-f6aae181" href="https://www.facebook.com/" target="_blank" rel="nofollow noopener noreferrer"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg></span><span class="gb-button-text">Facebook</span></a>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"c0c430ff","hasUrl":true,"target":true,"relNoFollow":true,"blockVersion":3,"display":"inline-flex","alignItems":"center","fontSize":15,"marginTop":"5","marginRight":"5","marginBottom":"5","marginLeft":"5","paddingTop":"10","paddingRight":"20","paddingBottom":"10","paddingLeft":"20","borderRadiusTopRight":"50","borderRadiusBottomRight":"50","borderRadiusBottomLeft":"50","borderRadiusTopLeft":"50","backgroundColor":"#0ea2f8","backgroundColorHover":"#0b8edb","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true} -->
<a class="gb-button gb-button-c0c430ff" href="https://twitter.com/" target="_blank" rel="nofollow noopener noreferrer"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></span><span class="gb-button-text">Twitter</span></a>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"11d6ead1","hasUrl":true,"target":true,"relNoFollow":true,"blockVersion":3,"display":"inline-flex","alignItems":"center","fontSize":15,"marginTop":"5","marginRight":"5","marginBottom":"5","marginLeft":"5","paddingTop":"10","paddingRight":"20","paddingBottom":"10","paddingLeft":"20","borderRadiusTopRight":"50","borderRadiusBottomRight":"50","borderRadiusBottomLeft":"50","borderRadiusTopLeft":"50","backgroundColor":"#e60606","backgroundColorHover":"#ce0606","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true} -->
<a class="gb-button gb-button-11d6ead1" href="https://www.youtube.com/" target="_blank" rel="nofollow noopener noreferrer"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></span><span class="gb-button-text">YouTube</span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"1e20c17b","backgroundColor":"var(\u002d\u002dbase-3)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"useInnerContainer":true,"marginTop":"10","marginBottom":"10","paddingTop":"30","paddingRight":"20","paddingBottom":"30","paddingLeft":"20","className":"container-widget"} -->
<!-- wp:generateblocks/headline {"uniqueId":"838fca02","blockVersion":2,"alignment":"center","fontSize":24,"paddingTop":"7","paddingRight":"7","paddingBottom":"7","paddingLeft":"7","borderRadiusTopRight":"40","borderRadiusBottomRight":"40","borderRadiusBottomLeft":"40","borderRadiusTopLeft":"40","backgroundColor":"var(\u002d\u002daccent)","textColor":"var(\u002d\u002dbase-3)"} -->
<h2 class="gb-headline gb-headline-838fca02 gb-headline-text">Recent Posts</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"612787da","query":{"post_type":"post","per_page":"8"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"2d83fe74","columns":1,"verticalGap":10,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"41e9886c","isGrid":true,"isQueryLoopItem":true,"gridId":"2d83fe74","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"100%"},"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/grid {"uniqueId":"6976bfa4","columns":2,"horizontalGap":15,"verticalGap":10,"verticalAlignmentTablet":"center","isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"077353f5","isGrid":true,"gridId":"6976bfa4","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"33.33%","widthMobile":"33.33%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"743f9534","sizeSlug":"medium","widthMobile":"100%","objectFit":"cover","borderRadiusUnit":"%","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"277ca434","isGrid":true,"gridId":"6976bfa4","verticalAlignment":"center","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"66.66%","widthMobile":"66.66%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"a69df127","element":"h3","blockVersion":2,"fontWeight":"600","fontSize":14,"fontSizeMobile":14,"marginBottom":"5","backgroundColor":"","textColor":"","linkColor":"var(\u002d\u002dcontrast-2)","linkColorHover":"var(\u002d\u002daccent-hover)","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h3 class="gb-headline gb-headline-a69df127 gb-headline-text"></h3>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

PHP code for floating share button for entire site

Go to Appearance and then click on Elements and create new elements with Hooks; paste the code in the box.

<?php
$webinsightsURL = urlencode(get_the_permalink());
$webinsightsTitle = urlencode(get_the_title());
$webinsightsImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webinsights-social-wrapper"> <span class="hide-on-mobile">Sharing Is Caring:</span> <a class="webinsights-social-sharing webinsights-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webinsightsURL; ?>" target="_blank" rel="nofollow">
  <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>
  </a> 
	<a class="webinsights-social-sharing webinsights-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webinsightsTitle; echo " "; echo $webinsightsURL;?>" target="_blank" rel="nofollow">
  <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>
  </a> 
	
	<a class="webinsights-social-sharing webinsights-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webinsightsTitle;?>&amp;url=<?php echo $webinsightsURL;?>&amp;via=webinsights" target="_blank" rel="nofollow">
  <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>
  </a> <a class="webinsights-social-sharing webinsights-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webinsightsURL; ?>&amp;media=<?php echo $webinsightsImage;   ?>&amp;description=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
    <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/>
  </svg>
  </a> <a class="webinsights-social-sharing webinsights-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webinsightsURL; ?>&amp;title=<?php echo $webinsightsTitle; ?>&amp;mini=true" target="_blank" rel="nofollow">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
    <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
  </svg>
  </a> <a class="webinsights-social-sharing webinsights-social-reddit" href="https://reddit.com/submit?url=<?php echo $webinsightsURL;?>&title=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
    <path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/>
  </svg>
  </a> </div>

PHP code for post social share button in GeneratePress theme

Go to Appearance and then click on Elements and create new elements with Hooks; paste the code in the box.

<?php
$webinsightsURL = urlencode(get_the_permalink());
$webinsightsTitle = urlencode(get_the_title());
$webinsightsImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>

<div class="webinsights-float-social-wrapper hide-on-mobile hide-on-tablet">
	<a class="webinsights-float-social-sharing webinsights-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webinsightsURL; ?>" target="_blank" rel="nofollow"><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></a>
	
	<a class="webinsights-float-social-sharing webinsights-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webinsightsTitle;?>&amp;url=<?php echo $webinsightsURL;?>&amp;via=webinsights" target="_blank" rel="nofollow"><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></a>
	
	<a class="webinsights-float-social-sharing webinsights-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webinsightsURL; ?>&amp;media=<?php echo $webinsightsImage;   ?>&amp;description=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
	
	<a class="webinsights-float-social-sharing webinsights-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webinsightsURL; ?>&amp;title=<?php echo $webinsightsTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
	
	<a class="webinsights-float-social-sharing webinsights-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webinsightsTitle; echo " "; echo $webinsightsURL;?>" target="_blank" rel="nofollow"><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></a>
	
	<a class="webinsights-float-social-sharing webinsights-social-reddit" href="https://reddit.com/submit?url=<?php echo $webinsightsURL;?>&title=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>

Related Posts

How to Learn WordPress Step by Step (Beginner to Pro Guide 2026)

How to Learn WordPress Step by Step (Beginner to Pro Guide 2026)

How to Create a Payoneer Account in Pakistan (Step-by-Step Guide 2026)

How to Create a Payoneer Account in Pakistan (Guide 2026)

How to Create Animal Crossing Cartoon Animation in iClone (2026 Guide)

How to Create Animal Crossing Cartoon Animation in iClone (2026 Guide)

About HoorInfoPro

HoorInfoPro, founded by Jahanzaib Khan, is a trusted platform offering accurate insights and practical guides on Pakistani daily life & problem guides. Our mission is to simplify complex information with clarity and credibility.

View all posts by HoorInfoPro →

Leave a Reply

Your email address will not be published. Required fields are marked *