Making A Horizontal Sidebar In Footer

[keydin]

I am putting together a wordpress theme and I wanted to create a dynamic sidebar in the footer. I want to be setup where each widget sits next to each other with a list under the title. While I can get the widgets to set beside each, I can make the content of the widget left align under the title.

Here is the link to the theme (http://steveeller.com/wordpress)

Here is what I have in the sidebar:

<ul class="footbar">


<li><?php dynamic_sidebar(3); ?></li>

</ul>

In the style sheet:

.footbar {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */

}
* html .footbar {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
}
.footbar li {
display:table-cell;
padding-left:20px;
text-align:left; /* ignored by IE */
}

* html .footbar li {
display:inline; /* for IE only */
}
.footbar a, .footbar a:visited {
display:block; /* for all browsers except IE */
text-align:left;
color:#fff;
text-decoration:none;
}
* html .footbar a, * html .footbar a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}
.footbar a:hover {
color:#FF6600;

}

[gnomeontherun]

Can I see your sidebar/footer php? I think your issue is with some of the code there. I see an extra <li> tag which had no closing tag. It was the first list element. There appears to be some other excess or erroneous code like extra </p>

[keydin]

This is all of what is in the footer:

<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<!-- end #container --></div>
<div id="footer">
<div id="footcontainer"><ul class="footbar">


<li><?php dynamic_sidebar(3); ?></li>

</ul>
</div><div><p></p></div>

<!-- end #footer -->

</div>
</body>
</html>

[gnomeontherun]

Ok couple things. I can't test this without the rest of your installation files, but I think I've figured out some things.

First, your footer file.

<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<!-- end #container --></div>
<div id="footer">
<div id="footcontainer">
<?php dynamic_sidebar(3); ?>
<div class="clearfloat"></div>
</div><div><p></p></div>

<!-- end #footer -->

</div>
</body>
</html>

functions.php - if you have any existing code that has similar settings, override it with this

if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widgets">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

css file - override any footbar code with this

.widgets {
display:table; /* ignored by IE */
padding:0;
width: 200px;
float: left;
list-style-type:none;
white-space:nowrap; /* keep text on one line */

}
* html .widgets {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
}
.widgets li {
display:table-cell;
padding-left:20px;
text-align:left; /* ignored by IE */
}

* html .widgets li {
display:inline; /* for IE only */
}
.widgets a, .widgets a:visited {
display:block; /* for all browsers except IE */
text-align:left;
color:#fff;
text-decoration:none;
}
* html .widgets a, * html .widgets a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}
.widgets a:hover {
color:#FF6600;
}

You may have to alter the css to get it to display like you want, but basically the function changes the way the widgets are displayed from being wrapped in <il> to <div>, so we can float them and then the internal LI will work like normal.

Best wishes - Jeremy

[keydin]

That didn't work. I tried it a couple different times, and everything was way out of whack. I could give you the files if you want to take a look at it. I will sent you a private message with the link.

[gnomeontherun]

http://www.jeremywilken.com/blog

Is this what you are trying to do? It hasn't been fully styled, but the important part is the layout.

[keydin]

Exactly! What did you do?

[gnomeontherun]

functions.php - this is the only thing that should be in your file.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widgets">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
?>


footer.php

<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<!-- end #container --></div>
<div id="footer">
<div id="footcontainer">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
<div class="clearfloat"></div>
</div><div><p></p></div>

<!-- end #footer -->

</div>
</body>
</html>

sidebar.php - need to remove some code - you can edit this however you like but the sidebar was getting called multiple times and thats not helpful!

<ul id="sidebar">
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/swfobject.js"></script>

<div id="mssHolder">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("<?php bloginfo('template_directory') ?>/monoslideshow.swf", "mss", 388, 269, "7", "#ffffff");
so.addVariable("dataFile", "<?php bloginfo('template_directory') ?>/slideshow.xml");
so.write("mssHolder");
</script> <p></p>

<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
</ul>

Include the styles above into your css file.

Ok what this does is move the dynamic_sidebar to the footer. Before you were trying to create multiple sidebars, and that was getting hairy. In this case, I added custom code to the sidebar_register function that sets the widgets to be wrapped in <div class="widget"></div>, and float them left. So now that widgets are wrapped in divs, the UL inside of the divs will layout vertically by default. Modify the css to style it as needed, and modify the sidebar.php to add links and pages.

You can use different wordpress php functions to get the blogroll to display in the sidebar, but your dynamic sidebar is moved to the footer now. Also make sure that in your administration, put the three modules you want in the footer into the widgets panel of presentation tab.

I think thats everything I did!

[gnomeontherun]

Hmm maybe there becomes an issue with the functions.php file when trying to get into the administration...let me know.

[keydin]

The only thing is that I want the sidebar in the right column AND footer to be widget enabled. Actually there are three if you include the a different one for single post pages.

[gnomeontherun]

Ok so I just took out the widget sidebar on the right column and had only one bar for the footer. I did not know exactly how you wanted the page to layout, but ok let me check on that.

[keydin]

Thanks

[gnomeontherun]

Check if this is what you are talking about

http://www.jeremywilken.com/testblog

[keydin]

That's the ticket!

[gnomeontherun]

Ok I was close in my last task, I just had to put the extra sidebars back.

functions.php - I forgot an 's' on the end of the function name...silly me, make sure there are no extra blank spaces in this file outside of the <?php ?> tags.

<?php
if ( function_exists('register_sidebars') )
register_sidebars(3, array(
'before_widget' => '<div id="%1$s" class="widgets">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
?>

single.php - this is only the first part, should be almost the same.

<?php get_header(); ?>


<div id="mainContent">

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(3) ) : ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>
</p>

</div>

styles.css - Delete all of the .footbar stuff and the old widget stuff - put this instead

.widgets {
color: #FFFFFF;
padding:0;
width: 200px;
float: left;
list-style-type:none;
}
.widgets li {
padding-left:20px;
text-align:left; /* ignored by IE */
}
.widgets a, .widgets a:visited {
text-align:left;
color:#fff;
text-decoration:none;
}
.widgets a:hover {
color:#FF6600;
}

footer.php - no big changes just making sure it calls the right sidebar here

<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<!-- end #container --></div>
<div id="footer">
<div id="footcontainer">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
<div class="clearfloat"></div>
</div><div><p></p></div>

<!-- end #footer -->

</div>
</body>
</html>

sidebar.php - added the code back for widget sidebar

<ul id="sidebar">
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/swfobject.js"></script>

<div id="mssHolder">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("<?php bloginfo('template_directory') ?>/monoslideshow.swf", "mss", 388, 269, "7", "#ffffff");
so.addVariable("dataFile", "<?php bloginfo('template_directory') ?>/slideshow.xml");
so.write("mssHolder");
</script> <p></p>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2) ) : ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>

In your admin panel, the first widget box is the footer, the second is the sidebar sidebar, and the third is for single. The real key of all of this is the functions.php file, which is really the only significant difference in the end, plus making sure its referenced correctly in other files.

Best wishes and hope this works for real this time. Very nice template too, did you make it? Honestly this is only the second time I've worked with a WP template so forgive my fumbling!

[keydin]

Everything looks good but I get this when I try to go to the admin panel:

Warning: Cannot modify header information - headers already sent by (output started at /home/steveell/public_html/wordpress/wp-content/themes/LifeChurch Theme/functions.php:11) in /home/steveell/public_html/wordpress/wp-includes/pluggable.php on line 391

Was this what you were talking about in a previous post?

[gnomeontherun]

Make sure there is no extra blank space in the footers.php file after the closing ?> tag. It sees an 11th line, meaning you have 2 extra blank lines.

[keydin]

Everything seems to be working ok, but if I try to insert an image that is over the 200px widget width everything start stacking up. See http://steveeller.com/wordpress The reason I want to do this is that the guy who is using this wants to insert images the same width as the slideshow.

It is sooo close to being there.

[keydin]

I think I fixed it. I took the width out of the widget, and added some padding to the right of each widget.

[gnomeontherun]

Yeah, I did a little styling, but thats up to you how they work. So do you understand how the fix works and got it under control?

[keydin]

I think so. Thanks so much!