How to add a fourth footer widget area to twenty eleven

  • Resolved cgrray

    (@cgrray)


    12 years ago

    I’m using a child theme of twentyeleven. I used the code in alchymyth’s post (BELOW) and the sidebar-footer.php code from pastebin. The fourth footer are shows up in my dashboard and I can add content to it but the new style isn’t being picked up. The widget areas are still using the width from #supplementary.three .widget-area so the fourth area wraps. If I change the width in #supplementary.three .widget-area in twentyeleven style.css to 22.18% the four widget areas are displayed across in one line correctly.
    I tried adding the style for the fourth widget area to the twentyeleven style.php but that style isn’t recognized; the width is still 30.85% as is used in the three widget areas.
    Any help will be much appreciated.

    This was posted by alchymyth in this post: https://www.ads-software.com/support/topic/twenty-eleven-footer-alterations-functions-or-footer-css?replies=8

    additional widget column in Twenty Eleven child theme footer:
    (I had the code already in my test blogs)
    in functions.php of the child theme:

    //add a fourth footer widget area//
    add_action( ‘widgets_init’, ‘register_fourth_footer_widgets’, 20 );
    function register_fourth_footer_widgets() {
    register_sidebar( array(
    ‘name’ => __( ‘Footer Area Four’, ‘twentyeleven’ ),
    ‘id’ => ‘sidebar-6’,
    ‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => “</aside>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
    ) );
    }

    some extra sections in sidebar-footer.php:
    the new full file:
    https://pastebin.com/aGsS7UrT

    addition to style.css of the child theme:

    /* Four Footer Widget Areas */
    #supplementary.four .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 22.18%;
    }
    #supplementary.four .widget-area + .widget-area + .widget-area + .widget-area {
    margin-right: 0;
    }

    I’m using a child theme of twentyeleven. I used the code in alchymyth’s post (above) and the sidebar-footer.php code from pastebin. The fourth footer are shows up in my dashboard and I can add content to it but the new style isn’t being picked up. The widget areas are still using the width from #supplementary.three .widget-area so the fourth area wraps. If I change the width in #supplementary.three .widget-area in twentyeleven style.css to 22.18% the four widget areas are displayed across in one line correctly.
    I tried adding the style for the fourth widget area to the twentyeleven style.php but that style isn’t recognized; the width is still 30.85% as is used in the three widget areas.
    Any help will be much appreciated.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Michael

    (@alchymyth)

    please post a live link to your site to illustrate the state of the fourth footer widget.

    Thread Starter cgrray

    (@cgrray)

    I can’t give you a live look because we don’t want the fourth column wrap on our public site. I put up a page with two screen shots from a test. the top image is what it looks like as I described above with the style change in the child style.css file. The second image is after I did all the changes and changed the width in #supplementary.three .widget-area in twentyeleven style.css to 22.18%
    I really appreciate your help.
    if you absolutely need to the the problem live I will change the site to show it.

    Michael

    (@alchymyth)

    I can’t give you a live look

    then you are basically on your own with troubleshooting.

    screenshots are nice but not really useful because they do not reveal the html structure and the css classes, and do not allow to investigate the formatting.

    check if:

    – the css classes are added properly to the four widget sections;

    – the css styles get applied to those widget sections.

    try working with a browser inspection tool such as Firebug.

    Thread Starter cgrray

    (@cgrray)

    If put the changes on our live site. I looked at the page with firebug and the class for the footer shows up as <div id=”supplementary” class=”three”> but the fourth widget area shows up as a sub div.
    I’m feeling stupid about not being able to figure this out.
    Here’s the url: http:yogasoleil.com.

    Thread Starter cgrray

    (@cgrray)

    I found this code in the twentyeleven function.php file:

    * Count the number of footer sidebars to enable dynamic classes for the footer
 */
function twentyeleven_footer_sidebar_class() {
	$count = 0;

	if ( is_active_sidebar( 'sidebar-3' ) )
		$count++;

	if ( is_active_sidebar( 'sidebar-4' ) )
		$count++;

	if ( is_active_sidebar( 'sidebar-5' ) )
		$count++;*/

	$class = '';

	switch ( $count ) {
		case '1':
			$class = 'one';
			break;
		case '2':
			$class = 'two';
			break;
		case '3':
			$class = 'three';
			break;

	}

	if ( $class )
		echo 'class="' . $class . '"';
}

    I tried adding it to the child functions file with these additions:

    if ( is_active_sidebar( 'sidebar-6' ) )
		$count++;*/
case '4':
			$class = 'four';
			break;

    but then I get this error: (This is on our test site)
    Fatal error: Cannot redeclare twentyeleven_footer_sidebar_class() (previously declared in D:\wamp\www\YogaSoleil\wp-content\themes\YS\functions.php:75) in D:\wamp\www\YogaSoleil\wp-content\themes\twentyeleven\functions.php on line 483

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your posted code may now have been permanently damaged/corrupted by the forum’s parser.]

    WPyogi

    (@wpyogi)

    Looks like you just need to modify the CSS code so they fit side-by-side. Right now they are set to 30.85% each — so four of them exceeds 100% width.

    Adjusting it here seems to do it:

    #supplementary.three .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 20%;
}

    Also, please read the forum guidelines about posting code…

    esmi

    (@esmi)

    Try reviewing widgetizing themes.

    Michael

    (@alchymyth)

    fourth footer widget for Twenty Eleven child theme:

    all changes in one piece:

    register 4th footer widget area in functions.php of the child theme:
    https://pastebin.com/ngqKheqv

    new sidebar-footer.php in the child theme:
    https://pastebin.com/CbxW5ERD

    addendum to functions.php of the child theme (notice the different function name both here and in sidebar-footer.php?):
    https://pastebin.com/Ugr4p5Ja

    addendum to style.css of the child theme:
    https://pastebin.com/phHnm8wi

    – apologies for the confusion – I missed to post the one piece of information in the earlier quoted topic – now corrected.

    Thread Starter cgrray

    (@cgrray)

    Thanks for sticking with me alchymyth. That did it and I’ve learned some too.

    Hi

    Is it possible to add the fourth widget area that is full width? Meaning it’s sitting just above the existing 3 column widget at footer? Thanks.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to add a fourth footer widget area to twenty eleven’ is closed to new replies.