How To Add Social Media Icons In WordPress Without A Plugin?

add social media icons in wordpress without a plugin

Most of the people use the plugins to add social media icons on their website. Are you also one of them? Are you using any plugin and increasing the plugin number? Are you seeking how to add social media icons in WordPress without a plugin?

Well, this can be done using a simple HTML code. You may be thinking how is it possible? In this post, I am going to show you to add social media icons of any color, any type.

You would decide the look of the media icons.

Add Social Media Icons in WordPress Without A Plugin.

As you may have seen that people provide a bunch of the codes to add in the functions.php file of your website. But it won’t be the perfect solution because the code provided by many developers isn’t responsive and can increase the page loading time.

Here, you will use the images to create the social media icons. It will give you the freedom to create the icons of your choice. Are you surprised?

There is nothing to get surprised. I am going to provide the HTML code which can help you.

Step 1:- Choose the icon images from anywhere you want. If you want then you can create the images using any tool. It’s important to match the color combination with the layout of your website.

Step 2:- Upload all the images of the icons in WordPress media library. Just go for media>>add new for all the icons.

Step 3:- After uploading, you would notice the URL of the images which is stored in WordPress. This URL will be used in the further process to connect these icons and to show them anywhere in your website.

how to add social media icons in wordpress without a plugin

Step 4:- Link the images with the URL of your social networking profiles. Here we are making the image as the links to reach to your social networking profiles.

Step 5:- The HTML code is here:

<div class=”social-buttons”><a href=”twitter profile URL” target=”_blank”><img src=”Twitter icon URL” class=”sb”></img></a>

<a href=”Facebook page URL target=”_blank”><img src=”Facebook icon URL” class=”sb”></img></a>

<a href=”Google+ profile URL” target=”_blank”><img src=”Google+ icon URL” class=”sb”></img></a>

<a href=”LinkedIn profile URL” target=”_blank”><img src=”LinkedIn icon URL” class=”sb”></img></a>

<a href=”Pinterest profile URL” target=”_blank”><img src=”Pinterest icon URL” class=”sb”></img></a>

</div>

In this code replace the profile URL from your social networking profiles. As I have shown that in place of the “Twitter Profile URL” you have to add the URL of the profile you have on Twitter so that the when people click on the image then they can reach to your profile.

The icon URL is the URL of the images you have uploaded in WordPress library. Copy the URL of the images and paste it along with each social networking profile.

Step 6:- Now put the HTML code in the text box in the widgets area of WordPress and place the text box where you want to show the icons.

add social sharing icons in wordpress without a plugin

After adding all the URLs,the images will be showing combined. So you will need to a little bit of CSS code.

Step 7:- As you can see that all the images are give one class=”sb”. You have to target that class to separate the icons.

div.social-buttons img.sb { margin: 3px; }

Place this code in the style.css file of your theme. The value of the margin will vary according to the size of the icons and the width of the layout.

You can add social media icons in WordPress without a plugin in the footer area or the sidebar of your website.

It will depend on the theme you are using.

Can You Now Add Social Media Icons In WordPress Without A Plugin?

There are many people who dwell into the codes to create the social icons and fret a lot. It seems a kind of complicated to add social media icons in WordPress without a plugin.

But as you can see that HTML has done the job and the CSS played its part. You can add any an image in WordPress sidebar using HTML.

You can create horizontal form using CSS. Both the languages can help you a lot. If you face any problem while adding the icons then feel free to ask.

by Ravi Chahar

A WordPress Professional, web developer and designer who intends to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

4 comments

    1. Hey Umesh,

      You are right Umesh, you won’t need to search any plugin to add the icons on your website. You can use the images as the hyperlinks. Most of the people seek for the codes to generate the icons.
      Thanks for stopping by.
      ~Ravi

  1. Hi Ravi,

    This is great info to have, especially for those plugins that don’t have all the networks you need. I’m saving this for future reference, and of course passing it along.

    Great tutorial!

    Bren

    1. Hey Bren,

      As I have mentioned that most of the people are reliable on plugins. But if you can do it without plugins that what’s the need to put the burden on your WordPress site.

      Just a simple HTML code and you will have the social media icons of your choice.
      Thanks for being here.

      Have an awesome day.
      ~Ravi

Leave a Reply

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

CommentLuv badge