Support » Theme: Twenty Twelve » Making the secondary front page area contain three widgets

  • Hi there

    I’ve created a Twenty Twelve child-theme.

    I’d like to add an extra widget to what I believe is the secondary widget area, so it in effect becomes three columns.

    Has anyone else done this? I imagine they have. If so I’d be grateful of advice.

    I assume it would be along the same lines as the approach to adding a three column footer by Zeaks ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • I’d like to add an extra widget to what I believe is the secondary widget area, so it in effect becomes three columns.

    If you are referring to the First and Second Front Page Widget Areas, I would assume you could locate their coding, reduce them to make room and then add a third.

    Michael

    (@alchymyth)

    Forum Moderator

    Zeak’s tutorial is different in the way that he creates three new widget areas to appear in all templates, not just the front-page template; however the general coding will be very similar.

    edit sidebar-front.php in the child theme;
    add another section like this to the code:

    <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    	<div class="third front-widgets">
    		<?php dynamic_sidebar( 'sidebar-4' ); ?>
    	</div><!-- .third -->
    	<?php endif; ?>

    also change the conditional code near the top;
    full file: http://pastebin.com/yVZWmyfp

    edit functions.php in the child theme;
    add:

    function twentytwelvechild_widgets_init() {
    	register_sidebar( array(
    		'name' => __( 'Third Front Page Widget Area', 'twentytwelve' ),
    		'id' => 'sidebar-4',
    		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => '</aside>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    }
    add_action( 'widgets_init', 'twentytwelvechild_widgets_init', 15 );

    for compatibility with the case that only one or two footer widgets are used, I would add this to functions.php:

    add_filter( 'body_class', 'twentytwelvechild_body_class', 15 );
    
    function twentytwelvechild_body_class( $classes ) {
    	if ( is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' ) && is_active_sidebar( 'sidebar-4' ) ) {
    		$classes[] = 'three-sidebars'; //if all three footer widgets are active//
    		foreach($classes as $key => $value) { if ($value == 'two-sidebars') unset($classes[$key]); }
    	 }
    	if ( !( is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' ) && is_active_sidebar( 'sidebar-4' ) ) && ((is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-4' )) || (is_active_sidebar( 'sidebar-3' ) && is_active_sidebar( 'sidebar-4' ))) )
    		$classes[] = 'two-sidebars';
    
    	return $classes;
    }

    this adds the new body_class .three-sidebars and removes the .two-sidebars class if necessary.

    some styles: http://pastebin.com/4UaXGzsu

    (not too much tested)

    Thanks very much Alchmyth, I’ll give that a go and let the forum know how I get on.

    Hi there

    I changed the CSS slightly to make it work for me:

    /*three footer widgets for sidebar-front.php styles*/
    @media screen and (min-width: 600px) {
    .template-front-page.three-sidebars .widget-area .widget {
     width: 100%; }
    .template-front-page.three-sidebars .widget-area .first.front-widgets,
    .template-front-page.three-sidebars .widget-area .second.front-widgets,
    .template-front-page.three-sidebars .widget-area .third.front-widgets {
           float: left;
            margin-right: 3.7%;
            width: 30.85%;}
    .template-front-page.three-sidebars .front-widgets + .front-widgets + .front-widgets {
     margin-right: 0;}

    So I’ve added a bit of CSS from Zeaks. Looks great in FireFox and Chrome. But not IE8.

    Is this part of wider issues with IE8 or perhaps specific to the code you’ve created Alcymyth? I’ll have to experiment bit more and read up on IE8 issues.

    I ended up with this that works. Whether or not it’s optimal I don’t know:

    /*three front page widgets for sidebar-front.php styles*/
    @media screen and (min-width: 600px) {
    .template-front-page.three-sidebars .widget-area .widget {
     width: 100%; }
    .template-front-page.three-sidebars .widget-area .first.front-widgets,
    .template-front-page.three-sidebars .widget-area .second.front-widgets,
    .template-front-page.three-sidebars .widget-area .third.front-widgets {
           float: left;
            margin-right: 3.7%;
            width: 30.85%;
    		}
    .template-front-page.three-sidebars .front-widgets + .front-widgets + .front-widgets {
     margin-right: 0;}
    
     }
    .ie .template-front-page.three-sidebars .widget-area .widget {
     width: 100%; }
    .ie .template-front-page.three-sidebars .widget-area .first.front-widgets,
    .ie .template-front-page.three-sidebars .widget-area .second.front-widgets,
    .ie .template-front-page.three-sidebars .widget-area .third.front-widgets {
           float: left;
            margin-right: 3.7%;
            width: 30.85%;
    		}
    .ie .template-front-page.three-sidebars .front-widgets + .front-widgets + .front-widgets {
     margin-right: 0;}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making the secondary front page area contain three widgets’ is closed to new replies.