up vote 1 down vote favorite
share [g+] share [fb]

I'm having a custom sidebar called Footer. I'm displaying this sidebar using this code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>  
    (maybe I should do something in this line?) :)
<?php endif; ?>

This works smoothly, but almost every theme nowadays allow users to place their widgets in columns, just like there:

http://kaptinlin.com/themes/striking/

My markup looks like:

<footer>
   <li id="plugin-name" class="widget widget_name">[widget]</li>
   <li id="plugin-name" class="widget widget_name">[widget]</li>
   <li id="plugin-name" class="widget widget_name">[widget]</li>
</footer>

And I want it to look like:

<footer>
   <div id="column_1">
     <li id="plugin-name" class="widget widget_name">[widget]</li>
   </div>
   <div id="column_2">
      <li id="plugin-name" class="widget widget_name">[widget]</li>
   </div>
</footer>

How to achieve that? (btw I don't want to give width/height to my plugins, I want to create containers for them only)

I don't know what plugins will user activate so I'm not able to use direct plugin linking. I have to grab 1st plugin, 2nd plugin, 3rd plugin etc., but I see no code allowing me to in Codex.

link|improve this question
95% accept rate
1  
Not worried about the fixing the invalid HTML you're producing first? <li>(list) elements belong inside a <ul> or <ol>.. the elements that wrap a widget are determined by the registered sidebar and what it sets as before_widget and after_widget during registration.. – t31os Dec 22 '10 at 12:49
You can do this easily with CSS floats. Where's the 3rd widget in your example? – One Trick Pony Dec 22 '10 at 13:02
Why does it need to be an outer container, wouldn't the code work just aswell if the container was placed directly inside the widget's code? – t31os Dec 22 '10 at 13:29
Basically if you fix your invalid HTML you can do this. Target the ul's in your css by doing div#footer ul {width:300px; float:left;} Change the width so that all three will fix across so if your footer is 600 px wide with no padding inside the width of each ul will be 200px; – eileen.carpenter Dec 22 '10 at 14:19
Sorry, I have everything in <ul>, just made a mistake. Anyways all your answers seem to be wrong to me. Let's say my user wants to have one widget taking 2/3 of screen and the second one taking 1/3. After some time he decides to use four widgets using 1/4. Or no. Maybe one 100% wide. If I could only divide them like in the side above (and ALL the other sites using this technique) it will require about 5 lines o PHP code. CSS and container in widget's code are not helpful (what i user want to use different a widget?). CSS will require like 1000 variables attached for each widget... – Wordpressor Dec 22 '10 at 21:19
feedback

2 Answers

up vote 1 down vote accepted

Use three sidebars an let them float. Anything else will break depending on the widgets your users insert.

link|improve this answer
I believe that's the only right answer :/ But it's still not so elegant ;/ – Wordpressor Dec 22 '10 at 21:12
feedback
up vote 0 down vote

You would achieve that when you first registered your sidebar within your functions.php file.

    <?php $args = array(
    'name'          => sprintf(__('Sidebar %d'), $i ),
    'id'            => 'sidebar-$i',
    'description'   => '',
    'before_widget' => '<div id="column_%1$s"><li id="%2$s" class="widget %2$s">',
    'after_widget'  => '</li></div>',
    'before_title'  => '',
    'after_title'   => '' ); ?>

What this is going to do is create that wrapper for each widget that you wanted. Just call a single dynamic_sidebar call and wordpress will do the rest.

link|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.