GermWorks - Web Design & Life

The Problem

How do you get the widgets that by default align vertically on the sidebar to vertically align for example along the bottom of your website using WordPress? I came across this problem in my latest WordPress based website I am building currently titled “Warriors for Christ (W4C)” (still in development).

Default code

The default code for the widgets to be displayed is usually in a list. These examples are from using the sandbox theme which is what I personally use and is probably the best developers WordPress theme to use and develop with.

The problem is the list (bolded) around the php script calling the widget from your functions.php file.
<div id="primary" class="sidebar">
<ul class=”xoxo”>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

<?php endif; // end primary sidebar widgets ?>
</ul>
</div>

New code to horizontally align widgets

To solve this problem we need to use something else besides lists. I first tried floating the lists but that vertically aligned every level of the list instead of just the sections. The best solution I came up with is using a div instead of a list.

So it would look like:
<div id="primary" class="sidebar">
<ul>
<div class=”xoxo”>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

<?php endif; // end primary sidebar widgets ?>
</div>
</ul>
</div>

Problems

However this does have one main problem. To vertically alignin the widgets you need to use multiple sidebar widgets instead of dragging all the widgets in the one sidebar widget. On the example W4C website I have four columns which means four sidebar widgets.

So this requires you to go into the functions.php file and change how many sidebars you want. This article over at ‘Blog Herald - Enabling sidebar widgets for your WordPress theme’ is a great resource to explain this.

Help in WordPress widgets

Widgets on WordPress are a great idea and I am just scratching the surface of what I could do with them. Over at WordPress’s help section they have a good write up including list of available widgets for you to use.

If you have a better way of solving this problem, please tell me as I am sure there could be. Even if you just have a good widget or resource please also post it hear.

edit 9/8 = You need to include the ul tag on either side of the if statement. I did not do it originally and had errors when I went to validate it.

Popularity: 6% [?]

Like what you see? Subscribe to my RSS feed and get daily updates!
Or hear for an explanation about RSS, thank you for visiting.