CODEWITHSUNDEEP
phphtmlcsswordpresswordpress-theming
user1752759
user1752759

Reputation: 643

Styling Wordpress Widgets Horizontally

I’m currently working on putting together a child theme off of the new Twenty Twelve Wordpress website. The site has a fluid/liquid structure for its responsiveness (using percentages as opposed to fixed widths in pixels - which would relate to how I may have to style my widgets).

At the top of my template I would like to include a widgetized area where the user/admin can drag and drop items from the available widgets in the list provided.

Ideally, as the design and layout of the site for this section is on a horizontal plane, three widgets would visually look nice in terms of space.

However, if the user would like to add more, I take it that I would need to work with PHP or JavaScript to calculate if there is a certain amount of divs/classes/ids within a section tag for example, change the CSS widths from 33.33% (3 widgets) to 25% (4 widgets) or 50% is there is two etc. ?

How would I be able to accommodate an equally spaced width for each widget and place them next to each other?

Upvotes: 3

Views: 1218

Answers (2)

Mustaasam Saleem
Mustaasam Saleem

Reputation: 166

This can be done using Bootstrap Grid View.
Complete details can be found HERE.

The theory is, Bootstrap grid is having 12 columns by default.
If you want 3 columns in a row, you'll divide 12 by 4.
It will produce 3 columns in a row. You can see example on Bootstrap Grid Link.

Upvotes: 0

maiorano84
maiorano84

Reputation: 11980

A little messy, but here's a start:

<?php
$widgets = wp_get_sidebars_widgets();
$percentage = !empty($widgets['header-widget-area']) ? floor(100/count($widgets['header-widget-area'])) : 100;
?>
<style type="text/css">
hgroup .widget{
    width:<?php echo $percentage; ?>% !important;
    float:left;
}
</style>

Upvotes: 1

Related Questions