WordPress: Adding widget areas to your theme’s footer
Tags: wordpress, tutorial, php, webdev
Published: 2019-04-28 18:52:07

---
title: WordPress: Adding widget areas to your theme’s footer
published: true
description: Tutorial into how to use widgets to manage different parts of your WordPress theme.
canonical_url: https://since1979.dev/wordpress-multiple-custom-templates-for-posts-and-custom-post-types/
cover_image: https://cdn-images-1.medium.com/max/1600/1*KjRT9b2cdmqK_kgtOrEZ_w.jpeg
tags: #wordpress, #tutorial, #php, #webdev
---


[Originally posted on medium.com on April 19 2019](https://medium.com/@vanaf1979/wordpress-managing-your-themes-footer-with-widgets-46f92c565afc)

### Adding widgets to your WordPress theme’s.

In this article I will show you how you can use [widgets](https://codex.wordpress.org/WordPress_Widgets) to manage your WordPress theme’s footer area’s from within the WordPress admin. However the techniques I will show you are not limited to your footer area’s and can be applied to many different sections of your theme.

Most websites have a footer area that is devided into multiple areas like shown in the [html code below](https://gist.github.com/vanaf1979/3a17cbdceb2fa94933f8fcc2752b7220). This basic example uses [PureCss](https://purecss.io/) to create a four collumn footer, but ofcourse you can change this to use [Bootstrap](https://getbootstrap.com/) or some other grid system.

{% gist https://gist.github.com/vanaf1979/3a17cbdceb2fa94933f8fcc2752b7220 %}

### Registering widget areas to the WordPress admin:

To get started we first need to register different widget area’s to the WordPress admin area. To do so we have to hook into WordPress.

Note: If you want to know all the nuts and bolts about WordPress hooks check out [this article](https://docs.presscustomizr.com/article/26-wordpress-actions-filters-and-hooks-a-guide-for-non-developers).

Copy [the code below](https://gist.github.com/vanaf1979/65234bb208862f509f842765e038ad33) to your theme’s _functions.php_ file.

{% gist https://gist.github.com/vanaf1979/65234bb208862f509f842765e038ad33 %}

Here we use the [_add_action()_](https://developer.wordpress.org/reference/functions/add_action/) function to add an action to the [_widgets_init_](https://developer.wordpress.org/reference/hooks/widgets_init/) hook, and register the callback function _register_widget_areas()._

This code doesn’t do much yet, so let’s add the first widget area.

Change the code in your _functions.php_ file to match [the code below](https://gist.github.com/vanaf1979/846387410d9d462f103193d6b0fb4d5a).

{% gist https://gist.github.com/vanaf1979/846387410d9d462f103193d6b0fb4d5a %}

From within the _register_widget_areas()_ function we now call the [_register_sidebar()_](https://developer.wordpress.org/reference/functions/register_sidebar/) function and pass it an array of options. These options are;

*   **name:** The name of your widget area as it will be displayed in the admin.
*   **id:** A unique id for the widget area. Must be all lowercase and no spaces.
*   **description:** The description of your widget area as it will be displayed in the admin.
*   **before_widget:** Some html that is placed before your widget. Usualy a opening continer tag like a div or a section tag.
*   **after_widget:** Some html that is placed after your widget. Usualy a closing continer tag like a div or a section tag.
*   **before_title:** Some html that is placed before your widget’s title. Usualy a opening heading tag.
*   **after_title:** Some html that is placed before your widget’s title. Usualy a closing heading tag.

Note: We use the _register_sidebar()_ function here because originaly widgets in WordPress where meant to be used in sidebars next to post contents. But there is no reason why we can’t register multiple area’s. But the name might be a little confusing in this context.

If you save the code above to your themes _functions.php_ file and go to _Appearance > Widgets_ in your WordPress admin you will notice a new Widget area called “footer area one” like shown below:

![](https://cdn-images-1.medium.com/max/1600/1*9B64kZzhbJ_vgOnStAXbDQ.png)

That’s great but we need four widget area’s for our footer so let’s extend what we have so far by adding three more calls the the _register_sidebar()_ function.

Change the code in your _functions.php_ to mach [the code below](https://gist.github.com/vanaf1979/db532934d79068881e062f6c71d81561):

{% gist https://gist.github.com/vanaf1979/db532934d79068881e062f6c71d81561 %}

Here we make three more calls the the _register_sidebar()_ function changing the options to match the index of the widget area’s like changing “footer area one” to “footer area two” etc…

If you save this code you should now have four different widget area’s in you admin like shown in the image below.

![](https://cdn-images-1.medium.com/max/1600/1*dhpBoU76kZtXhrGQfRFaQA.png)

### Displaying widget area’s in your WordPress theme’s:

At this point you could start filling your widget area’s from within the WordPress admin. But you still need a way to make them visible in your theme.

To show the contents of your widget areas you need to change the footer html code from the beginning of this article.

Change your footer html code to match [the code below](https://gist.github.com/vanaf1979/f57336fdd6ec69726c53af206e3d6ba2):

{% gist https://gist.github.com/vanaf1979/f57336fdd6ec69726c53af206e3d6ba2 %}

Here we use the [_dynamic_sidebar()_](https://developer.wordpress.org/reference/functions/dynamic_sidebar/) function to display the output of our widget area’s. The _dynamic_sidebar()_ takes one paramater being the unique id that you gave your widget area in the _register_sidebar()_ function. E.g. _footer_area_one_ or _footer_area_t_wo etc…

![](https://cdn-images-1.medium.com/max/1600/1*CyGGHxbyy_URVj-A73bRZA.png)

You can now start filling your widget area’s from within the WordPress admin. and see the result in your theme.

In the image above i added a text widget with some address information to widget area two. This will output [the html shown below:](https://gist.github.com/vanaf1979/b5b86f7c24b5c56e70aa56545599221b)

{% gist https://gist.github.com/vanaf1979/b5b86f7c24b5c56e70aa56545599221b %}

Note that the widget and its title are surrounded by the _before_widget_, _after_widget_, _before_title_ and _after_title_ values that we passed to the _register-sidebar()_ function earlier.

That’s it… Simple huh?

Remember this is not limited to your footer area’s and can be applied to many different sections of your theme.

### Tip: FunctionsPhp

As your theme grows in complexity so does your functions.php file and it can quickly become hard to maintain. For that reason i created [FunctionsPhp](https://github.com/vanaf1979/functionsphp): A Maintainable OOP WordPress functions.php boilerplate. Check it out on [GitHub](https://github.com/vanaf1979/functionsphp).

### Suggestions!?

I hope you liked this tutorial and found something usefull. If you have any questions or suggestions please get in touch via Twitter: [Vanaf1979](http://bit.ly/2RCf9eF), [my website Since1979.dev](https://since1979.dev) or right here om Dev.to.

####Happy theming.