Add more Widget zones in the Altitude Pro template on the Home

In this tutorial we will see how we can add more widget areas in the Altitude Pro template on the home page.

By default there are 7 zones but we are going to see how we can add as many as we want.

The process is not difficult, but you have to do it by editing some of the template files, so make a backup copy before starting, since any error when modifying the template can leave the website broken.

Before we start editing the template, let's note that, alternately, one widget goes with a photo image and the next widget doesn't. And so on.

We can see it in a simple way by going to customize the template –> Front Page Backgroun images:

As we can see only the odd widgets have a background image, later we will see how to add a background to the new widgets that we create.

Let's go to the mess 🙂

Video tutorial

Within our template we have to modify the following files:

• front-page.php
• functions.php
• customize.php
• output.php
• style.css

That is, the following:

front-page.php

If we look at the function of row 19, we find the existing widget areas listed, because here we simply add the ones we want, in my case two more, that is, 8 and 9.

In this same file below we have to add more code, specifically in the function altitude_front_page_widgets which is in row 77.

In my case, as I add two new widgets, I will add, I will copy the last two widgets that appear in this function and I will paste them below. Changing the widget number:

Note that the code for the odd widgets is different from the even widgets and that's because the odd widgets have a background image and the even widgets don't.

functions.php

As in the previous file, we look at where the widgets are referenced.

In this case we find from line 273 the register of the widget areas.
Here we add another two zones by copying the code of the existing ones and changing the zone number.

customize.php

This file is where we say which widgets have background images and we tell them in the function altitude_customizer_register in row 21

So we will have to add widget 9 so that it also has a background image:

output.php

As in the previous one we have to add the number of the widget that we want to have a background.

Let's go to the altitude_css function on line 20 and add it:

style.css

The functionality is fine now, now we need to make sure the layout is correct.

In this file we will find where the other widgets are referenced and we would add ours in the same place so that it has the same design.

Specifically we are going to modify the following parts:

Line 1434

Line 1451

Line 1961

Line 2278

If everything went well now when you go to the widgets you will see that you have 9 instead of 7:

Also if we go to customize the template –> Front Page Backgroun images, we will see that we can add a background to the widget 9

And of course on the main page they appear:

I hope you liked the tutorial 😉