When we create a WordPress theme one of the major challenges comes into the picture is, How we can add widget area in a wordPress theme. Well adding widgets to wordPress theme very easy and you can add widgets anywhere in your site be it Header, Sidebar or Footer.
In the last article, we saw how to create Custom sidebar in your wordpress, where I explained about how to create a custom sidebar and How it works. Here, I will show you how to add widget area in your wordPress theme and How to create a custom responsive footer.
Below is the final outcome of this article, when you will add widget area successfully in WordPress Theme.
widget area:
widget area is used to show the widgets in wodpress site and normally placed in the sidebar of your wordpress theme. But as I said earlier you can add widgets anywhere on your site.
Now days most of the theme are widgetized So if you are creating a wordpress theme so it becomes important to have a widget area in your wordpress theme.
In order to create widget area, you need to understand how widget area works in wordpress. By default, wordpress calls widget area as aSIDEBAR.
In other words,
If I say: I want to add a widget area in wordpress theme.
In WordPress terminology: Oh! you want to add one more sidebar (If you already have one sidebar
).
So don’t get confused between sidebar of your theme and Widget sidebar I hope you are getting my point here.
Add widget area in WordPress Theme
Now, let me first add a widget area in our wordpress theme then I will explain how it works. To add widget area, Open functions.php file and find function your_theme_name_widgets_init()and in that function write below code,
register_sidebar( array(
'name' => esc_html__( 'Footer Widgets', 'my-theme' ),
'id' => 'sidebar-2',
'description' => 'This is Footer widgets',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
Please visit this link, where I have already talked about register_sidebar function like, what are these parameters and why do we use it etc, Go check it out.
Okay, I hope you visited above link and understoodregister_sidebar function how it works.
Now to go to Dashboard => Appearance => widgets You should see widgets area as shown in below Image.
If you see the above image after following these steps then, congratulations you have successfully registered a widget area in your wordpress theme.
Only registering widget area will not be enough to show the widgets on your site. You have to call that widget area to show the widgets.
Showing widgets on site:
1. Create a new .php file:
In this article, I will show you how to add widgets area in wordpress footer. Create a new .php file named as sidebar-footer.php and write below code.
In the below code, functionis_active_sidebar( 'sidebar-2' ) checks, is there a sidebar registered with id sidebar-2. If Yes then, control goes to the next line and if the result comes false than exit from the current file.
By using dynamic_sidebar( 'sidebar-2' ) function we show the widgets inside that widgets area. Indynamic_sidebar( 'ID_OF_WIDGET_AREA' ) we pass id of widget area.
sidebar-footer.php:
<?php
/*
* checking sidebar-2 is active or not, If not return from this file.
* Else show the sidebar -footer using dynamic_sidebar function.
*/
if ( ! is_active_sidebar( 'sidebar-2' ) ) {
return;
}
?>
<div id="container">
<div id="footer-widgets" class="footer-widgets widget-area clear" role="complementary">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #footer-sidebar -->
</div>
2. Call sidebar-footer.php file:
Now open footer.php file and add below function. This function calls sidebar-footer.php which is responsible for displaying widgets.
footer.php:
/*
* This function calls the sidebar-footer.php file.
*/
<?php get_sidebar('footer');?>
Now drop some widgets in Footer section and once again reload your site you should see the widgets in the footer section.
Styling footer section:
In this article, our aim was to create full responsive footer if you see your site’s footer section it has no styling. So we have to apply some CSS in order to make it responsive.
If you notice footer widgets has similar classes as we have in the sidebar section so they will automatically adapt style given to the sidebar widgets. So here am not writing CSS code for footer section you can find it in the style.css file when you will download the code.
As I said earlier It’s very easy to add widget area in wordpress theme and it is. But In this theme, I am showing Social menus in the footer section. So let’ s add the Social menus in our theme.
Adding social menu:
1. Registering the separate menu for Social Icon:
Now only one thing is remaining to add in the footer and i.e. Social Icons. The most efficient way I have found so far is to add one more Menu in wordpress for Social Menu. The Original Idea came from Justin Tadlock who first created this kind of social menus.
Okay, First we need to add menus in back-end than, we will place social menu in footer and style our social menu. To add a new menu, Open function.php file and findregister_nav_menus( ) in this function you can register your new separate menu.
write the below line in register_nav_menus( ) function to add a new menu.'social' => esc_html__( 'Social Menu', 'my-theme' ),
Now Go toDashboard => Appearance => Menus and click on the Manage locations you should see the new separate menu named as Social Menu as shown in below image.
Now add some menus in Social menu as shown below Image. Make sure You have selected Theme locationas Social Menu
Showing Social menus on the Site:
By just registering the new menus will not show the social icons We have to tell the wordpress where to show the menus.So for that open
So for that open template-tags.php which is located in INC folder of your theme and write the below function intemplate-tags.phpfile.
you can add that function wherever you want but I will prefer to add this function to the bottom of the file.
template-tags.php :
function my_theme_social_menu() {
if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => 'social-menu',
'container_class' => 'social-menu',
'menu_id' => 'social-menu-items',
'menu_class' => 'social-menu-items',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
)
);
}
}
Now just call themy_theme_social_menu() function where you want to display the Social Icons.So I will be calling this in footer.php file to show the social Icons as shown below.
footer.php:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package My_Theme
*/
?>
</div><!-- #content -->
<div class="social-area">
<?php
// calling my_theme_social_menu function to show the Social Icon
my_theme_social_menu();
?>
</div>
<footer id="colophon" class="site-footer" role="contentinfo">
<?php
//calling sidebar-footer.php file to show the widget area.
get_sidebar('footer');
?>
<!---Site information Here you can Copyright info or theme credit.--->
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'my-theme' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'my-theme' ), 'WordPress' ); ?></a>
<span class="sep"> | </span>
<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'my-theme' ), 'my-theme', '<a href="http://underscores.me/" rel="designer">Underscores.me</a>' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
To style your Social menus open style.css file and Find #Menus section and add the below styles in end of that section, here I am using Font-awesome to show Social Icons.
style.css:
/*--------------------------------------------------------------
## social-area
--------------------------------------------------------------*/.social-area{
padding: 10px;
margin-bottom: 1.5%;
text-align: center;
}
.social-menu-items{
margin: 0px auto !important;
}
.social-menu ul li{
display: inline-block;
width: 70px;
height: 70px;
padding: 17px;
margin: 0px 5px 0px 5px;
border:solid 1px #000;
}
.social-menu li a:before {
vertical-align: top;
font-family: 'Fontawesome';
font-size: 30px;
color: #000;
-webkit-font-smoothing: antialiased;
content: '\f0c0';
}
.social-menu li:hover > a{
border-bottom: 0px !important;
text-decoration: none;
}
.social-menu li:hover > a:before{
color:#fff !important;
}
.social-menu li:hover{
background-color: #000;
}
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
Okay, Now we have completed our footer section of the theme. I hope everyone understood the Idea behind how to add widget area and social menus.
With the end of this article, We have completed Header section, Sidebar section and Footer section If you have any suggestion Please let me know in comment section.
