My first WordPress plugin for flexible widget styling…

Wordpress | Just Creative | Tamworth Web Design

Today, I set about trying to solve a problem I have faced many times whilst designing and developing websites and in doing so ended up creating my very first WordPress plugin.

I am fairly certain most have faced this particular issue at one stage, it’s the one that occurs when you have careful calculated the correct width, margin and padding for a group of widgets in a footer so they are nicely laid out, equally sized and spaced and then for some reason you then need to add additional ones or remove some, or a horizontal navigation bar with 7 items which changes to 8 and the last one doesn’t display properly, meaning the styling goes out of the window.

I would usually solve this issue by simply changing the relevant CSS, but today I thought different and decided on another approach.

I’m not a particularly advanced user of jQuery, but I know a few useful tricks and with the help of a colleague, google and some trial and error I came up with the idea of using jQuery to count the number of child elements within a the parent element, apply a class according to the count and whether or not the child was the last one.

This small snippet of code seemed to work very well so I then begin creating some CSS rules to style, size and space the children equally.

You can view a demo here…

At this point I would usually package this code up in one of my themes and leave it at that, but I must have felt brave today because I then decided it would be a good time to try and turn this small piece of code into a functioning WordPress plugin.

After carrying out some more research from various sources, I found out how to go about creating a plugin and began work. Within a short space of time I had made myself a working plugin that did the very basics of what I needed, it would detect how many widgets I had placed within a single sidebar and then apply classes that would style them to align horizontally. I was very pleased with this but thought if I found this useful, maybe others would too and thought about how I could improve this new plugin to be easier to use. I would need an admin panel.

The plugin worked in a static fashion and needed the end user to add classes to the areas of the template they wanted to target. For me this was fine, I had built the theme in question and had no issues with amending but maybe others would, it would need to be a little more dynamic.

In the end I created a very simple admin panel that allows the user to list the areas they want to target using CSS selectors. The plugin was now not only working but was manageable for the WordPress admin area too.

Download the plugin here…