You finally find the theme you fall in love for. Cool, but it does not fit 100% of your needs and you really want to add the perfect widget area to your WordPress ? As for example, there is no footer widget area in your theme and you do not want to recreate the same footer content in each page or post ?
Here is how to proceed to add a footer widget area to your prefered WordPress theme.
Declare a new widget area in your theme functions.php
At first, declare a new widget area in your theme to be able to drop widgets in this new widget area. Add the following code to your functions.php (Appearance > Theme File Editor > Select functions.php).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* * Register new footer widgetized area. */ function widgets_init() { register_sidebar( array( 'name' => 'Footer', 'id' => 'footer-widgets', 'before_widget' => '<div class="col-md-3">', 'after_widget' => '</div>', 'before_title' => '<h2 class="footer-title">', 'after_title' => '</h2>', )); } add_action( 'widgets_init', 'widgets_init' ); |
The complete documentation of this hook is available on the WordPress Developer Resources.
Once this piece of code has been added, you’re now able to see a new widget area in your WordPress admin page (Appearance > Widgets). You can also drag and drop widgets in the new Widgets Box.
Ok, but you see nothing when rendering the front-end for now !
PRO Tip : The before_ and after_ parameters allow to define HTML elements to include your widget content. If your theme use Bootstrap, you can define columns and size to organize your footer properly.
PRO Tip : Add CSS classes to ease styling if you know about CSS.
Add the new widgets section to your footer
To render the new widget area on the front-end, add the section in your theme. Locate the footer template (footer.php) in your Theme File Editor and try to find the footer HTML element.
It generally looks like this.
|
1 2 3 4 5 |
<footer id="footer" role="contentinfo"> <!-- stuff --> </footer> |
Then add the following piece of code to render your new widgetized footer. Note that footer-widgets is the id of the area declared earlier in the functions.php file.
|
1 2 3 4 5 |
<div class="row"> <?php dynamic_sidebar( 'footer-widgets' ); ?> </div> |