Those widget areas in the footer are so helpful in many WordPress Theme layouts. I use the term ‘multi widgets’ for lack of another term. By multi widgets I mean the user adds one, two or three (could be more) widgets in a particular widget area and then the theme displays the added widgets spread evenly across the width of the page. A few images will put this into perspective.

The user adds a single widget.

One widget added to multi-widget area

The user adds two widgets.

User adds two widgets to multi-widget area

The user adds three widgets.

User adds three widgets to multi-widget area

A quick word of warning before we get to the coding. This tutorial is for developers that are building new WordPress themes. If you are trying to customise an existing theme please do not add the code I am going to give into your theme templates, use a child theme instead. It is never a good idea to make customisations directly into an existing theme. If you do not heed this warning the sky could fall on your head.

You need to register the necessary widget areas in functions.php.

This code uses h3 headings, you might have to change this depending on the layout of your theme.

Now you need a function to make this all work. In my case this code gets added to template-functions.php.

The method I have shown here requires three different widget areas. It would most probably be nicer if we used only one widget area and then let the user decide just how many widgets they want to place within the area. This is something that I still have on my to-do list.

You now need to call the function you have just added in the place where you are adding the multi-widgets.

Now we need to style this lot.

The media break point used here might need changing.

That’s all you need, you now have your multi-widgets. Thanks for visiting, I would love to hear your take on doing something similar.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *