How to Add Widgets to the Footer • WordPress Help

Lately it is even usual to find blogs where there are widgets in the footer they are practical because it adds a area in which include information blocks that would not look good on the sidebar anyway.

It's interesting to have widgets at the bottom of the blog for example, to put links to other articles in the blog. blog or perhaps to add information about yourself. In this tutorial we are going to create 3 widget areas in the footer that can be edited from the admin panel. We'll use the default WordPress template: Kubrick .

Step 1 Create the CSS

The first thing we have to do is create the CSS of the footer area . Open the file " style.css " of the template Kubrick in your code editor to add the following code, we will call it subfooter :

The above code creates an area called subfooter and a class widget in the code HTML, in which we will add the three instances of the widget class and with the option float: left; they will be aligned next to each other .

Step 2 The HTML

Open the file " footer.php " and add the following code before the code

:

Now, if you look at the blog pod You will see at the bottom of the page something that looks like this:

Step 3 Making it admit Widgets

At this time it is not yet ready for widgets which means that you would have than manually add code in each widget in the file "footer.php". In this step we are going to see how to make it support widgets so you can add them from the " Design -> Widgets " section of your admin panel. To do this we will use the file " functions.php " as we have seen in other occasions. Open this file in your code editor.

You will see in the upper part of the file " functions.php " the following:

What we have done is register 3 sidebars called subfooterleft subfootercenter and subfooterright which will correspond to the left, middle and left widgets right of the subfooter .

Next we must make the footer "widget ready". For that we will also add, instead of what was mentioned in point 2, the following:

We replaced Widget 1 with …