How to Fix: Remove Social Icons (WordPress, Drupal, etc)

Infopackets Reader Suzanne V. writes:

" Dear Dennis,

I have a website that someone created for me a few years ago using the WordPress content management system (CMS). I want to remove social icons from WordPress so that they aren't displayed on my main page and other pages. Specifically, I want to remove the Google Plus social icon, as well as the RSS feed icon. I have logged into the WordPress administration page on my website but I cannot find how to disable or remove the social icons. Can you please help? I will hire you to fix this problem. "

My response:

Suzanne provided me the login information to her WordPress site so that I could have a closer look at the issue. Below I'll discuss my findings.

How to Fix: Remove Social Icons (WordPress, Drupal, etc)

When it comes to tweaking / configuring / making changes to any content management system (CMS), it can be overwhelming as to where to look to make a change. That's because settings are usually buried in menus within the CMS - oftentimes in places you would not expect. In Suzanne's case, the social icons could have been related to the template she was using, a widget, or a plugin.

Whenever I have to make a change that affects the layout of the site, the best place to start is by looking at the source code of the page. This is done by launching the web browser and visiting the page in question, then right click and on the site and select "View Source".

In Suzanne's case, the source code related to the social icons looked something like this:

<div><a id="logo" href="http: //example.com/" ><img title="" alt="" src="http: //example.com/wp-content/uploads/2015/03/somefile.png" /></a></div><div class="socials" id="sheader"> <a target="_blank" rel="nofollow" href="https: //plus.google.com/somenumber" class="socialicons social-GooglePlus" title="GooglePlus"><img alt="GooglePlus" src="http: //example.com/wp-content/themes/mantra/images/socials/GooglePlus.png" /></a> <a target="_blank" rel="nofollow" href="#" class="socialicons social-RSS" title="RSS"><img alt="RSS" src="http: //example.com/wp-content/themes/mantra/images/socials/RSS.png" /></a></div></div><div style="clear:both;"></div></div>

The hint is in the part that reads "class=socialicons social-GooglePlus". I then searched Google for "socialicons social-GooglePlus", which is when I came across a post that suggested that there is a widget / plugin called "Social Icons Widget - Jetpack".

I then accessed Suzanne's Widgets from within the WordPress menu and attempted to disable the Social Icons (Jetpack), but the changes I made didn't affect her page. I then went to the Jetpack menu on the left of her WordPress menu and disabled the "sharing" option, but the Google Plus icon and RSS feed icons were still being displayed.

After some more research, I discovered it is possible to prevent the icons from appearing on the page by modifying CSS source code (cascading style sheets) from within WordPress. Modifying the CSS to disable an option / prevent objects from appearing can be done on any content management system.

To remove the social icons (Google Plus, etc) in WordPress, do the following:

1. Login to WordPress page of the site in question.
    
2. On the WordPress left side bar menu, click Appearance -> Edit CSS.
   
   Using the HTML code example further up the page, I used the following CSS code to make it so that icons would disappear from the page:
   
   .social-RSS, .social-GooglePlus {
   display: none !important;
   }
   
   Modifying the CSS in this manner allowed me to preview the changes before actually setting the changes live on the site.
    
3. I then clicked the green "Publish" icon near the top left of the screen to make the changes permanent.

I hope that helps!

Once again, this same idea of modifying the CSS to override and remove an icon (or object) can be done on any content management system, including Drupal, Joomla, Magento, and similar.

Additional 1-on-1 Support: From Dennis

If you're having problems with your website design or need some programming work done - I can help using my remote desktop support service. Simply contact me, briefly describing the issue and I will get back to you as soon as possible.

About the author: Dennis Faas

Dennis Faas is the owner and operator of Infopackets.com. With over 30 years of computing experience, Dennis' areas of expertise are a broad range and include PC hardware, Microsoft Windows, Linux, network administration, and virtualization. Dennis holds a Bachelors degree in Computer Science (1999) and has authored 6 books on the topics of MS Windows and PC Security. If you like the advice you received on this page, please up-vote / Like this page and share it with friends. For technical support inquiries, Dennis can be reached via Live chat online this site using the Zopim Chat service (currently located at the bottom left of the screen); optionally, you can contact Dennis through the website contact form.