There are so many social media icons plugins available in the WordPress plugins repository. But installing plugins can hurt your site speed and also has security risks too. That’s why it is better to add social media icons without plugin.
Social media icons help you to add links to your social media accounts such as Facebook page, Twitter, and Youtube. It provides a path for your visitor to get connected with you on social media.
In this article, I will show you how to add social media icons without plugin in your WordPress theme. I will help you to add social media icons to the WordPress top bar and footer.
Through this article, you can make social media links easily customizable too. You can make changes on social media links later without entering in code.
Table of Contents
How to Add Social Media Icons Without Plugin?
We’ve to add a large number of codes to add social media icons and links. But don’t worry I will make this job easier by breaking the task into different steps. So don’t skip even a single step.
Step1: Enqueue Font Awesome CDN in WordPress
First, we should add Font Awesome CDN in WordPress theme. So copy the CDN link from Font Awesome site and paste it in the “header.php” file.
Or, You can directly paste the following code in your functions.php or enqueue.php file where you or your theme developer has enqueued all the CSS & JS files.
wp_enqueue_style('font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');Note: If you have enqueued CSS & JS files in a separate file then make sure it is included in functions.php.
Step2: Make Social Media Links Easily Customizable
It is necessary to make social media link easily customizable so that you can change social media links later without entering inside code.
First, create a folder “inc” in your theme’s directory. Then, create a file “customizer.php” inside the “inc” folder.
Now copy and paste the following code to link the customizer.php file with functions.php.
require_once get_template_directory() . '/inc/customizer.php';Finally, we will add customization code in customizer.php. If you already have a customizer function in customizer.php or functions.php file then you can skip the above explained process and append the following code in the existing function.
function beshar_customizer($wp_customize)
{
$wp_customize->add_section(
'social_icons_sec',
array(
'title' => __( 'Social Icons', 'BesharNews' ),
'description' => 'Social Icon Section'
)
);
$wp_customize->add_setting(
'social_facebook',
array(
'default' => '',
'sanitize_callback' => 'esc_url_raw'
)
);
$wp_customize->add_control(
'social_facebook',
array(
'settings' => 'social_facebook',
'section' => 'social_icons_sec',
'type' => 'url',
'label' => __( 'Facebook', 'BesharNews' )
)
);
$wp_customize->add_setting(
'social_twitter',
array(
'default' => '',
'sanitize_callback' => 'esc_url_raw'
)
);
$wp_customize->add_control(
'social_twitter',
array(
'settings' => 'social_twitter',
'section' => 'social_icons_sec',
'type' => 'url',
'label' => __( 'Twitter', 'BesharNews' )
)
);
$wp_customize->add_setting(
'social_youtube',
array(
'default' => '',
'sanitize_callback' => 'esc_url_raw'
)
);
$wp_customize->add_control(
'social_youtube',
array(
'settings' => 'social_youtube',
'section' => 'social_icons_sec',
'type' => 'url',
'label' => __( 'Youtube', 'BesharNews' )
)
);
}
add_action('customize_register', 'beshar_customizer');Step3: Create Action Hooks
We will create two separate action hook functions to add social media icons in the top bar and footer. Inside these two functions, we will echo out the icon and link passed through the customizer.
First, create a file “extras.php” inside the “inc” folder. Copy and paste the following code in functions.php file to include code added inside extras.php.
require_once get_template_directory() . '/inc/extras.php';Now add the following code in extras.php file.
<?php
if( !function_exists('social_links') ){
function social_links(){
$facebook = get_theme_mod('social_facebook');
$twitter = get_theme_mod('social_twitter');
$youtube = get_theme_mod('social_youtube');
if($facebook)
echo '<li><a href="'.esc_url( $facebook ).'" target="_blank"><i class="fa fa-facebook"></i></a></li>';
if($twitter)
echo '<li><a href="'.esc_url( $twitter ).'" target="_blank"><i class="fa fa-twitter"></i></a></li>';
if($youtube)
echo '<li><a href="'.esc_url( $youtube ).'" target="_blank"><i class="fa fa-youtube"></i></a></li>';
}
}
function footer_social_links(){
$facebook = get_theme_mod('social_facebook');
$twitter = get_theme_mod('social_twitter');
$pinterest = get_theme_mod('social_pinterest');
$youtube = get_theme_mod('social_youtube');
if($facebook)
echo '<li><a href="'.esc_url( $facebook ).'" target="_blank"><i class="fa fa-facebook"></i></a></li>';
if($twitter)
echo '<li><a href="'.esc_url( $twitter ).'" target="_blank"><i class="fa fa-twitter"></i></a></li>';
if($youtube)
echo '<li><a href="'.esc_url( $youtube ).'" target="_blank"><i class="fa fa-youtube"></i></a></li>';
}
add_action( 'left_topbar', 'social_links', 10);
add_action( 'footer_col_1', 'footer_social_links');
?>Or, you can directly add the above code in functions.php file without creating a separate file.
Step4: Add Social Media Icons to WordPress Top bar
In the third step, we have added two separate add_action() hooks in extras.php. In this step, we are going to place the do_action() function into the header.php file.
On the basis of the design of your header, add the following code in the header.php file. In my case, I am adding social media icons on the right side of the top bar.
<div>
<ul class="social-icon">
<?php do_action('left_topbar'); ?>
</ul>
</div>In extras.php file, we have listed icon code inside the “<li>” tag so in the header.php file we have to place the do_action() hook inside “<ul>” tag.
Step5: Add Social Media Icons to WordPress Footer
Similarly, we are going to place the do_action() hook in footer.php file.
In the footer.php file also, we have to place the do_action() hook inside the “<ul>” tag.
<ul class="social-icon footer">
<?php do_action('footer_col_1'); ?>
</ul>Step6: Styling the Social Media Icons
In the last step we are going to add some CSS code to give a stylish look with hover effect in social media icons.
The last step is so easy, copy and paste the following code in style.css file. The following CSS code works for both top bar and footer social media icons.
ul.social-icon{
margin-top: 13px;
}
ul.social-icon > li {
display: inline-block;
padding: 0;
text-align: center;
margin-left: 6px;
}
ul.social-icon > li a {
border: 1px solid #fff;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
background-color: #fff;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
display: table-cell;
vertical-align: middle;
}
ul.social-icon li:nth-child (1) a {
color: #3b5998;
border-color: transparent;
}
ul.social-icon li:nth-child (2) a {
color: #00aced;
border-color: transparent;
}
ul.social-icon li:nth-child(3) a {
color: #dd4b39;
border-color: transparent;
}
ul.social-icon li:nth-child(1) a:hover {
background: #3b5998;
color: #fff;
border-color: transparent;
}
ul.social-icon li:nth-child(2) a:hover {
background: #00aced;
color: #fff;
border-color: transparent;
}
ul.social-icon li:nth-child(3) a:hover {
background: #dd4b39;
color: #fff;
border-color: transparent;
}
/***Social Icon Footer***/
.social-icon.footer {
padding: 0;
}
.social-icon.footer li {
margin-right: 10px;
}
.social-icon.footer li a {
font-size: 30px;
width: 50px;
height: 50px;
}Step7: Customizing Social Media Icons
Customizer code added in the second step helps you to add or modify the link of social media. Social media icons in top bar and footer will be visible only after you add link of social media accounts.
First, log in to your WordPress dashboard, go to Appearance, and click to Customize. You will see the “Social Icons” section in customizer.
Inside the social icons section, add links to the Facebook page, Twitter account & Youtube channel and click on the publish button.
Once you add the link of your social media accounts through the WordPress customizer, it will work for top bar and footer social media icons. Our final social media icons in the top bar look like this.
Our final social media icons in footer look like this.
Conclusion
I hope you have successfully added social media icons in your WordPress site. If you have any problems while adding the code materials then feel free to start a conversation in the comment section.
