WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Two column Bottom widget area but single column content area (8 posts)

  1. jwswordpress
    Member
    Posted 3 years ago #

    Is it possible? I want two equally spaced widget areas at the bottom of my page above my footer but I want my content area to span the entire page above the widgets. All I have been able to get is a two column content area with widgets in each space. I'm thinking that it's just going to need to be a table of some sort that I place at the bottom of my single column no sidebar content area. Any ideas? It's for my home page. My Site Thanks in advance.

    -John

  2. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Yes - it's possible. Two widget-ready div areas floated left with a width of 50% each.

  3. jwswordpress
    Member
    Posted 3 years ago #

    Can you suggest some tutorials on how to do this? I'm pretty new to this stuff. Would this be done on the page itself or would I create the new widget areas in the functions.php file?

    If I have to call the widget areas in the template that I want them to appear and I use this template for multiple pages but I only want the custom widget area on one of these pages then I would have to create a new template correct?

  4. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Register a new widget area in functions.php in exactly the same way as you do for a sidebar. Then call the new widget area in the relevant template where you want it to appear. Have a look at the way in which Twenty Ten adds widget areas to the footer.

    I would have to create a new template correct?

    Correct.

  5. jwswordpress
    Member
    Posted 3 years ago #

    I think I have it close but I'm not seeing the widget areas in the widget settings under appearance?

    I'm using the Weaver theme and the TTW_Trans is how it's done in that theme. My two widget areas (similar to the footer widgets):

    // Area B1, located at the bottom left side of the page. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'The left bottom widget area', TTW_TRANS ),
    		'id' => 'left-bottom-widget-area',
    		'description' => __( 'The left bottom widget area', TTW_TRANS ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    
    	// Area B2, located at bottom right side of page. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'The right bottom widget area', TTW_TRANS ),
    		'id' => 'right-bottom-widget-area',
    		'description' => __( 'The right bottom widget area', TTW_TRANS ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );

    the code in my new template file near the bottom:

    </div><!-- #content -->
    			<?php weaver_put_wvr_widgetarea( 'left-bottom-widget-area','right-bottom-widget-area'); ?>
    		</div><!-- #container -->
    <?php get_footer(); ?>

    My site is still functional that's why I think I'm close... :)

  6. geobiro
    Member
    Posted 3 years ago #

    Hallo jwstimac

    Unfortunately, I can not help it but you can help me, because I'm on your side see exactly what I need ..
    I'm quite new to using WordPress. Actually I don't use yet. My website maker doesn't know how to put 3 pictures actually logos of partners on the bootom of each page. I assume that is any possibility toolbar such as bootombar that this be done. Please help me because the website is ugly, where the 3 images which should be at the bottom, are located everywhere, because not every site the same hight.

    Please tell me how to do it?

    Best regards
    geobiro from Slovenia

  7. jwswordpress
    Member
    Posted 3 years ago #

    <div style="float:left; width:33%;"><center><a href="Link to site"><img src="url" alt="" title="Logo name" width="98" height="91"/></center></a></div>
    
    <div style="float:left; width:33%;"><center><a href="Link to site"><img src="url" alt="" title="Logo name" width="98" height="91"/></center></a></div>
    
    <div style="float:left; width:33%;"><center><a href="Link to site"><img src="url" alt="" title="Logo name" width="98" height="91"/></center></a></div>

    This is three images spaced evenly. Not sure what kind of theme you have but I use the Weaver theme which is very customizable and there is place you can put the above code for your footer without editing the footer.php file.

  8. jwswordpress
    Member
    Posted 3 years ago #

    The original topic ended up having a pretty easy solution. Create a new template file. I just copied the One-column, no sidebar template from my Weaver theme and renamed it . I split the content up into two containers like this:

    <div id="maincontent"> <!--BTL change-->
    					<?php the_post(); ?>
    					<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    						<?php weaver_put_page_title('h1'); ?>
    						<div class="entry-content">
    						<?php the_content(); ?>
    						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', WEAVER_TRANS ), 'after' => '</div>' ) ); ?>
    						<?php edit_post_link( __( 'Edit', WEAVER_TRANS ), '<span class="edit-link">', '</span>' ); ?>
    						</div><!-- .entry-content -->
    					</div><!-- #post-<?php the_ID(); ?> -->
    					<?php comments_template( '', true ); ?>
    				</div> <!--End maincontent-->
    				<div id="widgetcontent" style="float:left; width:100%;"> <!--BTL change-->
    					<div class="halfwcontent" style="float:left; width:50%;"><!--Widget 1-->
    					<?php weaver_put_wvr_widgetarea('bottom-widget-area','ttw-bot-widget','ttw_hide_widg_pages'); ?>
    					</div>
    					<div class="halfwcontent" style="float:left; width:50%;"><!--Widget 2-->
    					 <?php weaver_put_wvr_widgetarea('sitewide-bottom-widget-area','ttw-site-bot-widget'); ?>
    					</div>
    				</div> <!--End widgetcontent-->
    			</div><!-- #content -->

    In the two areas I just copied the way Weaver calls widgets from a different template. I used widgets that I was not planning on using anywhere else on my site.

Topic Closed

This topic has been closed to new replies.

About this Topic