WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Problems With Widget Placement in Footer (32 posts)

  1. ishan001
    Member
    Posted 5 years ago #

    I was adding a widget ready footer to my Theme. I found several tutorials but none of them worked, so I did a mix of them (I don't know anything about PHP, CSS etc!)

    Somehow, I made the footer Widget Ready, but the problem is that, when I add more than 1 Widget to any footer column, the Widget overflows (I mean moves to) next column and next column's content moves to column next to it and so on.... To see example, see my home page, Here The series widget has been added after the Recent Comments widget. But it moves to below column 1 (The one having Meta Content). In Widget page of admin panel, Series widget displays below Recent Comments)

    Here are changes and additions to the Files:

    Added following Code to Sidebar.php

    #subfooter {
    width:95%;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    height:300px;
    background-color:#f3f1e0;
    border: 1px solid #D9D6BC;
    clear:both;
    }  
    
    #subfooter .widget {
    width:24%;
    float:left;
    display:block;
    }  
    
    #subfooter .widget .inner {
    padding:5px;  
    
    }
    #subfooter ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #subfooter ul li {
      list-style-type: circle;
      margin: 0px 0px 2px 25px;
      padding: 1px 0px 0px 0px;
    }
    #subfooter ul li a, #sidebar ul li a:visited {
      font-size: 14px;
    }
    #subfooter
    
    .alignright { float: right; margin-left: 10px; }
    
    .aligncenter { margin-right: auto; margin-left: auto; }
    
    .alignleft { float: left; margin-right: 10px; }

    Added to Functions.php

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Footer Left','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Footer Center','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Footer Right','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Footer Extreme Right','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    Added to Footer.php

    <div id="subfooter">  
    
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Left') ) : else : ?>
    
    <?php endif; ?>
    
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Center') ) : else : ?>
    
    <?php endif; ?>
    
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Right') ) : else : ?>
    
    <?php endif; ?>
    
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Extreme Right') ) : else : ?>
    
    <?php endif; ?>

    No more changes to any files! I am using Wp Them.es Blue Theme.

    Can you help me with this problem? Better if you spoon-feed me changes/additions, I do not php and css, everything I did with if etc. was from web tutorials and copy pasting from other themes.

  2. ishan001
    Member
    Posted 5 years ago #

    No help? :-(

  3. ishan001
    Member
    Posted 5 years ago #

    Anyone please!

  4. giles
    Member
    Posted 5 years ago #

    I see you fixed it ... I am having the same issue .. sort of .. how did you fix it ?

    Giles

  5. ishan001
    Member
    Posted 5 years ago #

    Its not fixed yet! When I found no solutions, I just went and deleted extra widgets that caused others to shift. Now, I have only 4 widgets and that does not cause any problem with it!

  6. LJagermaster
    Member
    Posted 5 years ago #

    Did you place the code in specific areas of each file? I tried to re-create it on mine (been looking to put widgets in my footer for a while) and everything seemed to be going fine until I tried to add a widget to one of the footer sidebars (the Extreme Right one), and this is what happened:

    http://weareblogging.0fees.net/blogs/waw_blog
    (scroll to the bottom and you'll notice an obvious error)

  7. LJagermaster
    Member
    Posted 5 years ago #

    Ok, I've been playing around with it and seemed to have resolved that error (it was showing the additional code within the sidebar.php at the bottom of the sidebar, and the footer had completely disappeared), but something's still clearly not right as the footer isn't displaying in full, and neither is the widget I added to it.

  8. LJagermaster
    Member
    Posted 5 years ago #

    Bummer! I backed up all three files before editing, after it didn't work out I restored the backups, and... my blog is still distorted! Who'd have thought that removing the code wouldn't remove the problem?!

  9. LJagermaster
    Member
    Posted 5 years ago #

    It doesn't see, as if anyone's checking this topic, but just in case...

    I fixed the bug, but for some reason all plugins are appearing on top of each other (I've added 1 to three of the footer sidebars, and they all appear on the left hand side)... Can you run through where you placed the code in each file to see what I've did differently?

    Cheers :-)

  10. ishan001
    Member
    Posted 5 years ago #

    Sorry for late responce. The mistake was mine. I did not add anything to Sidebar.php but the code was in style.css I played around a bit but only last column displays multiple widgets. Here's the code:

    #subfooter {
    width:950px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    background-color:#f3f1e0;
    border: 1px solid #D9D6BC;
    clear:both;
    }  
    
    #subfooter .widget {
      margin-bottom: 10px;
      padding: 5px;
      float: left;
      width: 225px;
      display: block;
      position: relative;
    }  
    
    #subfooter .widget .inner {
      padding: 5px;
    }
    #subfooter ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #subfooter ul li {
      list-style-type: circle;
      margin: 0px 0px 2px 25px;
      padding: 1px 0px 0px 0px;
    }
    #subfooter ul li a {
      font-size: 12px;
    }
    #subfooter
    
    .alignright { float: right; margin-left: 10px; }
    
    .aligncenter { margin-right: auto; margin-left: auto; }
    
    .alignleft { float: left; margin-right: 10px; }
  11. LJagermaster
    Member
    Posted 5 years ago #

    Aha... **suddenly dust starts to clear from eyes**

    Cheers buddy, that seems to have sorted it. Now to figure a way to prevent the overflowing... I suppose the obvious way would be to use your method and add more sidebars to it, but I'm in no way brave (or techie) enough to try it just now...

    Plus I still need to find a way of making the title font in the footer smaller (changing the pre-defined font size in the CSS code, which in my theme is set at 14, doesn't seem to effect the footer widgets). Have you had any success with this?

    UPDATE: Just tried adding multiple (well two) widgets to a single footer sidebar, and they appear to be simply spread along in a row. So... Rather than trying to fix this, which would no doubt be painful (I've got a migraine just thinking about! (~_^) ), why not fill them one at a time. For example, remove your current widgets from all of them, then starting with the "Left" one, add what you want to appear at the very top of the footer, once it fills the row, start on the "Center" one (which would use up the second row), and so on...

  12. LJagermaster
    Member
    Posted 5 years ago #

    Hmm... Seems I can't edit that post again...

    I'm in the process of doing the "one sidebar at a time" thing, so check my blog footer to see my progress...

    http://www.wearewatching.co.nr/blog

  13. LJagermaster
    Member
    Posted 5 years ago #

    Ok... to prove experience is key to pretty much everything, I've gave my own suggestion a try and I'm now forced to concede that it doesn't work as I'd hoped. Starting off with the Left footer sidebar, I cautiosly added four widgets (which due to the size of the title text expands the footer wider than the rest of the blog, and removing widget doesn't restore the width of the footer), they spread across the footer as I'd hoped they would, I then moved onto the Center footer, and alas the first one starts off on the far right of the footer, and subsequent widgets simply pile up below the first one. Same thing happens when I try to place a single widget inside the remaining three footers, so it seems the maximum number possible with this widgetising method is 4, without seriously disfiguring the blogs layout. Huge bummer coz I'm a CSS novice and this is an awesome hack! :-)

  14. ishan001
    Member
    Posted 5 years ago #

    Seems like we two CSS novices are messing up here on this issue and experts are not listening. WP experts, where are you?

  15. LJagermaster
    Member
    Posted 5 years ago #

    Well I did manage to get one thing right... Using pure common sense I took another look at the CSS code you posted here, and sure enough there was an easy way to resolve the width issue, by changing the width value at the top (well, second line from the top) of the code. It now fits perfectly at the bottom of my blog, but is only wide enough for 3 widgets due to the size of the title text...

    I've no intention of giving up on this and I'm sure if anyone who knows how to help saw this thread they would, I guess we just need to be patient (since no one's actually getting paid to help us (~_^) ).

  16. ishan001
    Member
    Posted 5 years ago #

    Dump the experts. I think I have found the problem. I saw a free theme with widgetized footer and there's one little thing needed. Let me test it and then I will update!

  17. ishan001
    Member
    Posted 5 years ago #

    As I said, dump experts! I solved problem. We were adding Subfooter as widgetized area but the needed thing was 4 sidebars placed in it!

    Here's the working Style.css code;

    #subfooter {
    width:950px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    background-color:#f3f1e0;
    border: 1px solid #D9D6BC;
    clear:both;
    }  
    
    .FooterLeft {
    	width: 225px;
    	float: left;
    	}
    
    .FooterRight {
    	width: 225px;
    	float: left;
    	}
    
    .FooterCentre {
    	width: 225px;
    	float: left;
    	}
    
    .FooterExtremeRight {
    	width: 225px;
    	float: right;
    	}
    
    #subfooter .FooterLeft .widget {
      margin-bottom: 10px;
      padding: 2px;
      float: left;
      width: 220px;
      display: block;
      position: relative;
    }  
    
    #subfooter .FooterCenter .widget {
      margin-bottom: 10px;
      padding: 5px;
      float: left;
      width: 220px;
      display: block;
    }  
    
    #subfooter .FooterRight .widget {
      margin-bottom: 10px;
      padding: 2px;
      float: left;
      width: 220px;
      display: block;
    }  
    
    #subfooter .FooterExtremeRight .widget {
      margin-bottom: 10px;
      padding: 2px;
      float: left;
      width: 220px;
      display: block;
    }  
    
    #subfooter ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #subfooter ul li {
      list-style-type: circle;
      margin: 0px 0px 2px 25px;
      padding: 1px 0px 0px 0px;
    }
    #subfooter ul li a {
      font-size: 12px;
    }
    #subfooter
    
    .alignright { float: right; margin-left: 10px; margin-right: 2px;}
    
    .aligncenter { margin-right: auto; margin-left: auto; }
    
    .alignleft { float: left; margin-right: 10px; margin-left:2px;}

    Code added to Functions.php(Note: Article Sidebar is default for my theme, no need to add it!)

    <?php
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Article Sidebar','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    Code to Footer.php

    <div id="subfooter">
        <div class="FooterLeft">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterCenter">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?>        <?php endif; ?>
    	</div>	
    
        <div class="FooterRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterExtremeRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
    			<?php endif; ?>
        </div>

    Instead of help, this thread turned out to be a self-help discussion for two of us! And we learned a lot!

  18. ishan001
    Member
    Posted 5 years ago #

    Old problem still in "FooterCenter"! Looking to fix it. Others are working fine. Tested with 3 widgets in each!

  19. ishan001
    Member
    Posted 5 years ago #

    Looks like it was happening because I entered centre in style.css instead of center. Replaced it, now testing! WIll update will full code(new one)

  20. ishan001
    Member
    Posted 5 years ago #

    Finally, here's the working code(fully tested every footer sidebar with multiple widgets!)

    Code in Style.css:

    #subfooter {
    width:950px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    background-color:#f3f1e0;
    border: 1px solid #D9D6BC;
    clear:both;
    }  
    
    .FooterLeft {
    	width: 230px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterRight {
    	width: 230px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterCenter {
    	width: 230px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterExtremeRight {
    	width: 230px;
    	float: left;
            padding: 2px;
    	}
    
    #subfooter .FooterLeft .widget {
      margin-bottom: 10px;
      float: left;
      width: 225px;
      display: block;
      position: relative;
    }  
    
    #subfooter .FooterCenter .widget {
      margin-bottom: 10px;
      float: left;
      width: 225px;
      display: block;
    }  
    
    #subfooter .FooterRight .widget {
      margin-bottom: 10px;
      float: left;
      width: 225px;
      display: block;
    }  
    
    #subfooter .FooterExtremeRight .widget {
      margin-bottom: 10px;
      float: left;
      width: 225px;
      display: block;
    }  
    
    #subfooter ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #subfooter ul li {
      list-style-type: circle;
      margin: 0px 0px 2px 25px;
      padding: 1px 0px 0px 0px;
    }
    #subfooter ul li a {
      font-size: 12px;
    }
    #subfooter
    
    .alignright { float: right; margin-left: 10px; margin-right: 2px;}
    
    .aligncenter { margin-right: auto; margin-left: auto; }
    
    .alignleft { float: left; margin-right: 10px; margin-left:2px;}

    Code added to Functions.php:

    <?php
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Article Sidebar','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    Code added to Footer.php

    <div id="subfooter">
        <div class="FooterLeft">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterCenter">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?>        <?php endif; ?>
    	</div>	
    
        <div class="FooterRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterExtremeRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
    			<?php endif; ?>
        </div>
    
    </div>

    Just change color values according to your theme and it will work!

  21. LJagermaster
    Member
    Posted 5 years ago #

    Awesome buddy... Or it would be if the code for functions.pph didn't cause a 500 Internal Server Error (in my dashboard, not my blog). I know it's the functions code because I've entered each seperately to find out which was causing it (process of elimination), and it's only when I enter the functions.php code that the error occurs (it's bizarre as that particular piece of code appears to be identical to the previous one, so the combination may only be compatible with some themes...or at least not with mine :-( ).

    Glad you got yours working though :-)

    Oh, and as for the size of the footer widgets title text, it appears to be linked to the size of the font used for post titles, so seems we're stuck with huge footer titles unless we shrink the size of our post titles (or take a crash course in advanced CSS).

    UPDATE: My mistake... I took for granted that the code was ready to use "as is", without taking into consideration that I already have a sidebar implemented (your default sidebar appears to contained withing the first two lines of the functions.php code, whereas mine is already at the top of the functions.php file).

    Awesome fix man!! :-D (oh, and thanks! :-D )

  22. ishan001
    Member
    Posted 5 years ago #

    Titles can be easily fixed. I liked my theme titles, so retained it. Here's a bit on change:

    Here's how a sidebar declaration goes:
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',

    Notice h2 tags here? They control footer titles. If you want to change, just lower them( h3,h4,h5 )! I have learned some HTML and CSS is not much different! Glad the fix helped you! :-D

  23. LJagermaster
    Member
    Posted 5 years ago #

    Shweeeeet! I should have realised, I've been working HTML for 8 years and that part (the Hx tag) is pure HTML, I just assumed style changes would be contained with the styles file, but nope (good ol' WP, confusing us all for the greater good :-p ).

    Cheers buddy :-D

  24. npa
    Member
    Posted 5 years ago #

    Hi ishan001, I have a problem with the code, wondering if you can help. It works but every time I go to update or save the changes in wordpress I get this error message ( Warning: Cannot modify header information - headers already sent by..... /pluggable.php on line 850 ) Now I'm able to save my changes but I always get this error message. I am using the Jynxed Theme and the function code goes something like this...

    This is the Function.php:

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'sidebar',
    'before_widget' => '<div class="sidebar-box"><div class="sidebar-top"></div><div class="sidebar-middle">',
    'after_widget' => '</div><div class="sidebar-bottom"></div></div>',
    'before_title' => '<h1>',
    'after_title' => '</h1>',
    ));
    ?>

    This is the Footer:

    <div id="footer">
    <div class="navbar-top">
    </div>
    <div class="footer-mid">
    © <?php the_time('Y');?> "><?php bloginfo('title'); ?>. Design by Ralph Damiano.
    This free theme is sponsored by Online Article Publishing and Bridesmaid Speeches.
    </div>
    <div class="navbar-bottom">
    </div>
    </div>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>

    I'm new to coding wondering if you can help me out.

    Thanks

  25. LJagermaster
    Member
    Posted 5 years ago #

    Your code looks completely different to what we're both using. Have you tried copying/pasting it exactly as is (except for the functions code, where the reference to the Article_Sidebar should be removed)?

    Also, you refer to "pluggable.php", where is that file contained, is is a plugin or is it a part of your theme?

    UPDATE: I've had header errors in the past, and it turned out to be caused by my host (at the time) having Safe Mode turned off. You might want to ask yours if they have it on or off (having Safe Mode on will seriously restrict a large number scripting functions, even some basic ones employed by WordPress, such as using the ThickBox - the box which appears when you click the Add Image button while creating a post/page) - to upload images).

  26. npa
    Member
    Posted 5 years ago #

    Hi there The Living Legend, thanks for responding to my question, much appreciated!

    To answer your question yes all the codes were implemented on all three php files as is except for the functions code, where the reference to the Article_Sidebar was removed. And is as follows:

    FUNCTIONS.PHP

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'sidebar',
    'before_widget' => '<div class="sidebar-box"><div class="sidebar-top"></div><div class="sidebar-middle">',
    'after_widget' => '</div><div class="sidebar-bottom"></div></div>',
    'before_title' => '<h1>',
    'after_title' => '</h1>',
    ));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    ?>


    And the footer was implemented as such:

    <div id="footer">
    <div class="navbar-top">
    </div>

    <div id="subfooter">
    <div class="FooterLeft">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
    <?php endif; ?>
    </div>

    <div class="FooterCenter">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?> <?php endif; ?>
    </div>

    <div class="FooterRight">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
    <?php endif; ?>
    </div>

    <div class="FooterExtremeRight">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
    <?php endif; ?>
    </div>

    </div>

    <div class="footer-mid">

    © <?php the_time('Y');?> "><?php bloginfo('title'); ?>. Design by Ralph Damiano.
    This free theme is sponsored by Online Article Publishing and Bridesmaid Speeches.
    </div>
    <div class="navbar-bottom">
    </div>
    </div>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>

    <!--End Footer-->

    Safe Mode is off and the actual error message is as follows:

    Warning: Cannot modify header information - headers already sent by (output started at /home/public_html/wp-content/themes/Skin/functions.php:22) in /home/public_html/wp-admin/theme-editor.php on line 70

    Maybe it's got something to do with the sidebarphp. below, or something I'm doing wrong with placement of the codes. ????

    SIDEBAR.PHP

    <div id="sidebar">
    <!-- TABS--> <?php include (TEMPLATEPATH . '/tab-code.txt');?> <!-- /TABS-->
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>
    <div class="sidebar-box">
    <div class="sidebar-top">
    </div>
    <div class="sidebar-middle">
    <h1>Widgetized Sidebar</h1>

    • Don't forget, this sidebar is widgetized.
    • You can add whatever you like here from the Design > Widgets tab.
    • Don't worry about this message.
    • It'll go away once you have at least one widget.

    </div>
    <div class="sidebar-bottom">
    </div>
    </div>
    <?php endif; ?>
    </div><!-- End SIDEBAR -->
    <div class="clear"></div>
    </div> <!-- End MAIN -->
    <!-- /sidebar -->

    Thanks in advance.

  27. LJagermaster
    Member
    Posted 5 years ago #

    I have a feeling it may be an issue with your theme, but I can't be sure without trying it myself (I'll try to give it a go over the next day or so).

    As for the code placement, I placed the CSS code at the bottom of the file, the footer code directly below the default footer code (below the <?php wp_footer(); ?> call), and added the functions code to the pre-defined sidebar code (if you haven't edited the Article_Sidebar code you should be able to replace it completely with the code in this thread).

    This is what I ended up with:

    Footer.php:

    <div class="clear"></div>
    
    </div>
    
    <div id="footer_bg">
    
    <div id="footer">
    
        <div id="footer_left">
    
            - &copy; Copyright 2009 - <a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a> -
    
            <a href="<?php bloginfo('rss_url'); ?>"><img style="vertical-align:middle" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('rss_url'); ?>">&nbsp;News Feed</a>
    
            <a href="<?php bloginfo('comments_rss2_url'); ?>"><img style="vertical-align:middle;margin-left:10px;" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('comments_rss2_url'); ?>">&nbsp;Comments RSS</a>
    
            - Design by <a href="http://www.wp-them.es" title="free premium wordpress themes" target="_blank">wp-them.es</a> -
    
        </div>
    
        <div id="footer_right">
    
            <a class="wplogo" href="http://wordpress.org/" title="wordpress" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/wp.png" alt="Blog Tool and Publishing Platform" /></a>
    
        </div>
    
    <div class="clear"></div>
    
    <?php wp_footer(); ?>
    
    <div id="subfooter">
        <div class="FooterLeft">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterCenter">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?>        <?php endif; ?>
    	</div>	
    
        <div class="FooterRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterExtremeRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
    			<?php endif; ?>
        </div>
    
    </div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

    Functions.php:

    <?php
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'Article Sidebar','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
     if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    It's been working fine for me but I will try your theme when I get the chance and hopefully get to the bottom of this :-)

  28. npa
    Member
    Posted 5 years ago #

    Thank you Living Legend, I look forward to the solution. Much appreciated. I'm going to try the code above.

  29. npa
    Member
    Posted 5 years ago #

    UPDATE:

    I used the code that you provided, customized it and it worked! It gave me the error message the but stopped doing so after the second time. This is what it looks like:

    FOOTER

    <div id="footer">
    <div class="navbar-top">
    </div>
    
    <div class="clear"></div>
    
    <?php wp_footer(); ?>
    
    <div id="subfooter">
        <div class="FooterLeft">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterCenter">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?>        <?php endif; ?>
    	</div>	
    
        <div class="FooterRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
    			<?php endif; ?>
        </div>	
    
        <div class="FooterExtremeRight">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
    			<?php endif; ?>
        </div>
    
    </div>
    
    <div id="footer_bg">
    
    <div id="footer">
    
                <div class="footer-mid">
                    &copy; <?php the_time('Y');?> <a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('title'); ?></a>.  Design by <a href="http://ftlthemes.forthelose.org">Ralph Damiano</a>.<br />
    				This free theme is sponsored by <a href="http://www.edubook.com/">Online Article Publishing</a> and <a href="http://edu.udym.com/tips-for-a-bridesmaid-in-giving-a-wedding-speech/">Bridesmaid Speeches</a>.
                </div>
                <div class="navbar-bottom">
                </div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

    Note: the nav top and bottom div classes are rounded cornered elements that contain the footer with a transparent black bg like the theme in the CSS code.

    I had issues with the footer_extreme_right column always showing up in the footer_right column but I thinks it's got to do with CSS properties, which I'm currently trying to work out.

    Other then that, THANK YOU T.L.L. AND Ishan001, It's not everyday that people are willing to help one another. I'll check back to see how yours turned out.

    FUNCTION:

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'sidebar',
    'before_widget' => '<div class="sidebar-box"><div class="sidebar-top"></div><div class="sidebar-middle">',
    'after_widget' => '</div><div class="sidebar-bottom"></div></div>',
    'before_title' => '<h1>',
    'after_title' => '</h1>',
    ));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'FooterExtremeRight','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
    ?>

  30. npa
    Member
    Posted 5 years ago #

    UPDATE: Finally got the CSS properties to the theme's specification. They are as follows:

    #subfooter {
    width:910px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    background: url(images/black-1.png);
    clear:both;
    }  
    
    .FooterLeft {
    	width: 220px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterRight {
    	width: 220px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterCenter {
    	width: 220px;
    	float: left;
            padding: 2px;
    	}
    
    .FooterExtremeRight {
    	width: 220px;
    	float: left;
            padding: 2px;
    	}
    
    #subfooter .FooterLeft .widget {
      margin-bottom: 10px;
      float: left;
      width: 205px;
      display: block;
      position: relative;
    }  
    
    #subfooter .FooterCenter .widget {
      margin-bottom: 10px;
      float: left;
      width: 205px;
      display: block;
    }  
    
    #subfooter .FooterRight .widget {
      margin-bottom: 10px;
      float: left;
      width: 205px;
      display: block;
    }  
    
    #subfooter .FooterExtremeRight .widget {
      margin-bottom: 10px;
      float: left;
      width: 205px;
      display: block;
    }  
    
    #subfooter ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #subfooter ul li {
      list-style-type: circle;
      margin: 0px 0px 2px 25px;
      padding: 1px 0px 0px 0px;
    }
    #subfooter ul li a {
      font-size: 10px;
    }
    #subfooter
    
    .alignright { float: right; margin-left: 10px; margin-right: 2px;}
    
    .aligncenter { margin-right: auto; margin-left: auto; }
    
    .alignleft { float: left; margin-right: 10px; margin-left:2px;}

Topic Closed

This topic has been closed to new replies.

About this Topic