1

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.

Improve this question
5
  • 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, 2010 at 12:49
  • You can do this easily with CSS floats. Where's the 3rd widget in your example?
    – onetrickpony
    Dec 22, 2010 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, 2010 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;
    – eileencodes
    Dec 22, 2010 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, 2010 at 21:19

2 Answers 2

Reset to default
1

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

Improve this answer
1
  • I believe that's the only right answer :/ But it's still not so elegant ;/
    – Wordpressor
    Dec 22, 2010 at 21:12
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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