How To Create Social Sharing Buttons In GeneratePress?

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

In this tutorial, we will look at How To Create Social Sharing Buttons In GeneratePress?

This would undoubtedly help you in enhancing your blog post’s cross-channel promotion. That in turn will increase your web presence.

I am going to show you how to construct sticky social sharing buttons that float on the front end of your blog entries. Meaning, they will always be visible to your audience.

We can achieve this via a plugin, but the best part is to construct them manually. That way you know you’re avoiding adding JavaScript (kills website performance) on your site.

This lesson requires you to have GeneratePress premium, as we are going to use the Elements module.

Create Social Sharing Buttons In GeneratePress Without Plugin

Create Social Sharing Buttons In GeneratePress

Creating social sharing buttons in GeneratePress theme without plugins demands you to know about SVG icons.

SVGs are Scalable Vector Graphics. They are open standard visuals (mainly used as icons) developed by W3C (World Wide Web Consortium) (World Wide Web Consortium).

Benefits of Using SVGs

  • They have a tiny file size that never affects site speed.
  • You may easily add hyperlinks to SVG icons.
  • They are easily modifiable with any vector graphics software.
  • SVG icons are resolution independent, making them excellent for desktop, tablet and mobile view.
  • SVG pictures are more SEO-friendly compared to conventional images.

We will use the SVGs from Iconmonstr. Meaning, not only the icon but the icon with its XML code as well.

Step 1: Add Social Sharing Buttons Code To GeneratePress Elements Hook

For accomplishing this, you will first need to create a New Element in GeneratePress. Go to your WordPress Dashboard, under Appearance, Click on Elements. This will open the Elements page, click on Add New Element.

As soon as you’ve clicked on Add New Element, GeneratePress will show a dialog window. Click on Hook. That’s accurate, you need a GeneratePress custom hook for this action.

Give a name to the new Element and add the code.

Select the hook as generate after header, execute PHP, and set the display rules to Posts – All Posts.

Since we need the social sharing icons to float on our screen viewport. It is best advised to select Generate After Header Hook.

The reason we have chosen display settings as All Posts is because you would like your users to share your content on their social sites.

Do not forget to hit the Publish button.

Copy the following code to implement the same on your website.

Step 2: Perform CSS Styling To Social Sharing Icons

To do so, go to WordPress dashboard, under Appearance, click on Customize.

This will open the GeneratePress theme customizer. Here go all the way down and click on Additional CSS.

Paste the following CSS code for comparable styling. You are allowed to adjust CSS as per your requirements.

Step 3: Final outcome of Social Sharing Buttons In GeneratePress

Finally, here is how the social sharing icons should look like on your website. Remember that we have made them floating from the top at 70% of the screen viewport.

Benefits of Social Sharing Buttons In GeneratePress (Without Plugin) (Without Plugin)

Use of SVGs from Iconmonstr makes your icons very lightweight
There isn’t any kind of JavaScript code involved.

By using this strategy, you do not install any 3rd party plugin
It is responsive.

All the buttons will work incredibly fast for sharing purpose.

Conclusion: How To Create Social Sharing Buttons In GeneratePress?

Now you have discovered how to construct social sharing buttons in GeneratePress utilizing code and plugins.

Use the option which is easy for you and that which meets your requirement. Please feel free to edit the PHP and/or CSS code from the article.

Diksha Dutt

A graduate of the IIMC, Diksha enjoys talking about self-growth and online learning platforms. Diksha has a passion for education and entrepreneurship, and she has been involved in both fields for over a decade. She aims to help others make more informed decisions about the best online resources, courses, and education platforms. She writes about online learning platforms and online courses on, where she reviews and recommends the best resources for different skill levels and goals. When Diksha is not working, she enjoys reading books, playing chess, and traveling with her husband and two kids. You can follow her on LinkedIn and FaceBook.

Leave a Comment