In this article, we are going to add social icons for WordPress without any plugins. When clicked on the icons, they will redirect the user (in a new tab) to the respective social pages like Facebook, Twitter, Instagram, Youtube, Snapchat, Reddit, etc.
It isn’t mandatory to use social icons only. You can also use any icons like phone/ email etc. So, when clicked on the icons, the user will be redirected to Email or Phone App. There might be some minimum modification in the CSS needed to fit your taste.
First copy the below HTML to the clipboard.
<div class="social-links-sidebar">
<a class="social-icons" href="https://youtube.com/c/?????" target="_blank" rel="noopener noreferrer">
<span class="dashicons dashicons-youtube"></span>
</a>
<a class="social-icons" href="https://twitter.com/?????" target="_blank" rel="noopener noreferrer">
<span class="dashicons dashicons-twitter"></span>
</a>
<a class="social-icons" href="https://instagram.com/?????" target="_blank" rel="noopener noreferrer">
<span class="dashicons dashicons-instagram"></span>
</a>
<a class="social-icons" href="https://fb.com/?????" target="_blank" rel="noopener noreferrer">
<span class="dashicons dashicons-facebook-alt"></span>
</a>
</div>Now, go to Appearance > Widgets, and add a new ‘Custom HTML’ Widget like below and paste the copied code.
Remember to update each of your links in the pasted code. (The ones inside the href=”……..link…….”)
For any reason, Dashicons are not showing in the front end (for non-admins), it is because that Dashicons are disabled for all non-admins. In case you have not added this code previously, add the below lines to theme functions directly or through the code snippets plugin.
/* Load WordPress Dashicons FrontEnd */
add_action( 'wp_enqueue_scripts', 'wpclimax_load_dashicons_front_end' );
function wpclimax_load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
/* End Load WordPress Dashicons FrontEnd */Once the code is added, you can see the icons will be displayed in the sidebar. Now let us add some CSS and make those icons look attractive. Add the below code to the Customizer options.
/* Sidebar Social Icons */
.social-links-sidebar {
display: flex;
justify-content: space-evenly;
}
.social-links-sidebar .social-icons {
padding: 3px;
margin-right: 10px;
text-decoration: none;
}
.dashicons {
font-size:30px;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.dashicons-youtube{
background: #FF0000;
}
.dashicons-twitter{
background: #1DA1F2;
}
.dashicons-instagram{
background: #DD2A7B;
}
.dashicons-facebook-alt{
background: #3B5998;
}
/* End Sidebar Social Icons */If you would like to have some Hover effect, add this CSS below the above one.
/* Hover Zoom Effect */
.dashicons:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/* End Hover Zoom Effect */If any further modification of this code is needed, or to add any extra features, let us know in the comments.