How to remove Jetpack sharing buttons from Bento theme’s grid page

A step-by-step guide to identifying and hiding an unwanted WordPress page element.

Jetpack plugin’s sharing buttons are a useful feature to provide a quick sharing option for your readers but isn’t it annoying when you see them everywhere? While Jetpack makes it possible to not show the buttons on specific pages or posts, it doesn’t help you when you’re dealing with a post grid page created by a theme unrelated to Jetpack.

This was my problem while testing out Bento theme’s grid layout. As you can see on Bento’s demo page, the grid layout creates a great method for displaying and organizing your posts. But when I added it to a page, I noticed that the sharing buttons appeared right after the post intro for all posts where the buttons were enabled. This resulted in a messy look and nearly turned me away from the grid idea.

Sharing buttons (highlighted) are part of the grid.

Solution: Hide the buttons with CSS.

You can use the same method for any type of page element you’d like to remove from your page, not just Jetpack sharing buttons.

Step 1: Inspect the HTML

First, we’ll have to identify the class that Jetpack is using to display these buttons. Following instructions are for Chrome but will be applicable in other browsers.

  1. Preview your grid page in a browser.
  2. Right-click on the page and choose Inspect.
  3. Find the culprit. Look within the body of the HTML. Your browser will highlight for you the section that particular div tag refers to. Keep expanding the arrows until you find the div tag that highlights only the sharing buttons.
Identifying what class to reference in the CSS

4. In the case of these sharing buttons, the tag was:

     <div class="sharedaddy sd-sharing-enabled">

Both “sharedaddy” and “sd-sharing-enabled” identify the classes that refer to this element. We’ll need only one: “sharedaddy” – write it down.

Now, that we know what to reference in our custom CSS, we still have to ensure that we hide sharing buttons on this page only.

We can isolate our changes to a specific page by finding the page id. WordPress creates a unique number for each post or page you create. You can find it by inspecting the HTML code again. Look within the <body> tag.

Body tag contains the unique page id

In the case of this page, we found page-id-1367. Your page will likely have a different number. Write it down.

Step 2: Modify custom CSS

Now, that we know the class and the page id, we can modify the CSS code. Within WordPress, navigate to Appearance, then Editor. The stylesheet for your active theme is usually displayed first. If it isn’t, navigate to your theme and style.css file.

Add the following code to style.css file (change the page id to the one you found in the body tag):

.page-id-1367 .sharedaddy{ 
    display:none; 
}
Modifying style.css in WordPress

Click Update File button and that’s it. Yes. It was that easy.

Step 3: View your changes

As soon as you hit the “Update File” button, the changes you made are in effect. Go to your grid page again and refresh it to confirm that the sharing buttons are gone. Click on one of the posts where the sharing buttons were enabled to ensure that you didn’t accidentally hide them from the individual posts.


Changes not showing?

It can prove to be frustrating when you make changes but they are not reflected. It’s time to troubleshoot. Start by diagnosing what file your browser is referencing. Following instructions are for Chrome but will be applicable in other browsers.

  1. Go back to your grid page, right-click and Inspect.
  2. Find the Sources tab. 
  3. Look for your custom style.css file. There may be more files called the same, check each one.
  4. If you can’t find the file at all, it’s possible that you’re experiencing the same issue I did initially – browser does not see your child theme’s stylesheet – use the instructions from this article for help.
  5. If the stylesheet is there with all the changes you made to it, then something else is wrong. Confirm your CSS code is correct (correct class and page id). There might be a conflicting style clashing with it. This will require further investigation.
  6. If your custom stylesheet is there but it does not display the changes you have just made to it, you might be having a caching issue.

Here’s a useful WordPress article to help you troubleshoot some of the above issues.

The last issue (caching) was what I experienced this time. Chrome was displaying an old version of my style.css file – the version before I inserted the code that would hide the sharing buttons. Notice the highlighted “home page slider” notes right after the .sticky-note code. I removed it all from the stylesheet since I no longer needed it but somehow it was still there.

To confirm that my browser cache was at fault, I loaded my grid page in Safari. Following the same steps, right-click, Inspect Element, Resources tab, I went through the stylesheet files and found my custom CSS file. You can see the difference immediately. Safari shows the changes I made in the style.css file. Chrome’s caching was at fault after all.

To confirm that my changes worked, I previewed my grid page in Safari. Finally, the stubborn sharing buttons were gone. The grid looked much better.

Leave a Reply