Support » Themes and Templates » Change widget area order in child theme

  • Resolved zeaks

    (@zeaks)


    Is it possible to change the order that widget areas appear in Appearance > Widgets in a child theme?

    Using a twenty twelve child theme, i want the widget areas to appear like so
    – main sidebar
    – new sidebar 1
    – new sidebar 2
    – then the rest of the default widget areas.

    I deregistered the default areas, and tried to add them back, but the ID cannot be the same as what I just deregistered. Any way to get around this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    Forum Moderator

    Why do you need the same ids?

    I tried with new id’s sidebar-7 being the “main sidebar”. The first problem I ran into was the main sidebar is pushed down under the content.

    I’m guessing it’s got something to do with the content width conditional. If sidebar-1 isn’t active it’ll use the full-width body class to display a 1 column layout.

    I changed the id in sidebar.php to sidebar-7 then I added to functions.php

    function conditional_sidebar_body_class( $classes ) {
    	if ( is_active_sidebar( 'sidebar-7' ) )
    		$classes[] = 'full-width';
    	return $classes;
    }
    add_filter( 'body_class', 'conditional_sidebar_body_class' );

    But the sidebar still stays below the content.

    Any ideas?

    I figured this out, had to use

    // If sidebar is inactive use full width body class
    function conditional_sidebar_body_class( $classes ) {
    
    	if ( ! dynamic_sidebar( 'sidebar-4' ) && dynamic_sidebar( 'sidebar-5' ) )
    		$classes[] = 'full-width';
    	return $classes;
    }
    add_filter( 'body_class', 'conditional_sidebar_body_class' );

    Scratch that, it’s not working.

    This is what I have in functions

    function conditional_sidebar_body_class( $classes ) {
    
    	if ( ! is_active_sidebar( 'sidebar-4' ) && ! is_active_sidebar( 'sidebar-5' ) )
    		$classes[] = 'full-width';
    	return $classes;
    }
    add_filter( 'body_class', 'conditional_sidebar_body_class' );

    And this is my sidebar.php

    <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    		<div id="secondary" class="widget-area" role="complementary">
    			<?php dynamic_sidebar( 'sidebar-4' ); ?>
    		</div><!-- #secondary -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
    		<div id="extra-sidebar" class="widget-area" role="complementary">
    			<?php dynamic_sidebar( 'sidebar-5' ); ?>
    		</div><!-- .extra-sidebar .widget-area -->
    	<?php endif; ?>

    What am I doing wrong?

    It’s possible to change the widget order in widget area, rewriting all the widget area code in the child theme functions.php in the order that you want to show.

    function child_widgets_init() {
     	register_sidebar( array(
     		'name' => __( 'Main Sidebar', 'twentytwelve' ),
     		'id' => 'sidebar-1',
     		'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
     		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
     		'after_widget' => '</aside>',
     		'before_title' => '<h3 class="widget-title">',
     		'after_title' => '</h3>',
     	) );
    
     	register_sidebar( array(
     		'name' => __( 'First Front Page Widget Area', 'twentytwelve' ),
     		'id' => 'sidebar-2',
     		'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>',
     	) );
    
     	register_sidebar( array(
     		'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),
     		'id' => 'sidebar-3',
     		'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>',
     	) );
    
     // Register footer widgets
    
     register_sidebar( array(
     	'name' => __( 'Footer Widget One', 'tto' ),
     	'id' => 'sidebar-4',
     	'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
     	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
     	'after_widget' => '</aside>',
     	'before_title' => '<h3 class="widget-title">',
     	'after_title' => '</h3>',
     ) );
    
     register_sidebar( array(
     	'name' => __( 'Footer Widget Two', 'tto' ),
     	'id' => 'sidebar-5',
     	'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Center.', 'tto' ),
     	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
     	'after_widget' => "</aside>",
     	'before_title' => '<h3 class="widget-title">',
     	'after_title' => '</h3>',
     ) );
    
     register_sidebar( array(
     	'name' => __( 'Footer Widget Three', 'tto' ),
     	'id' => 'sidebar-6',
     	'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
     	'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', 'child_widgets_init' );

    I did figure this out eventually. When the widget areas are re-ordered it prevents the theme from displaying a 1 column layout when no widget areas are active. To get around this I just removed the Twenty Twelve body classes, then re-added them in my child theme, adding the new widget ID’s.

    function remove_twentytwelve_body_classes(){
    	remove_filter('body_class', 'twentytwelve_body_class');
    }
    add_action('init', 'remove_twentytwelve_body_classes', 20,2);

    then changed the body class function which I added to my own theme

    if ( ! is_active_sidebar( 'sidebar-4' ) && ! is_active_sidebar ( 'sidebar-5' ) || is_page_template( 'page-templates/full-width.php' ) )
    		$classes[] = 'full-width';

    Or whatever the sidebar Ids were.

    I don’t understand how to show the three columns footer widget on the frontpage template.

    That’s a totally different topic, see this post and remove the display: none part from the CSS. http://wordpress.org/support/topic/theme-twenty-twelve-footer-widgets?replies=33#post-3560921

    This isn’t twentytwelve, it’s for the great responsive theme , but may be useful to someone having trouble. I wanted to tidy the Apearance > Widget Area and change the order of my widgets to keep 3 existing widget areas together with a 4th one that I added.

    So I unregistered the home page widgets and then added them back in with the extra one:

    <?php
        /**
         * deregister widgets.
         */
    function remove_some_widgets(){
    
    	unregister_sidebar( 'home-widget-1' );
    	unregister_sidebar( 'home-widget-2' );
    	unregister_sidebar( 'home-widget-3' );
    }
    add_action( 'widgets_init', 'remove_some_widgets', 11 );
    
    /*Add widgets back in with one extra----------------------------*/   
    
    function responsive_child_widgets_init() {
            register_sidebar(array(
                'name' => __('Home Widget 1', 'responsive'),
                'description' => __('Area 6 - sidebar-home.php', 'responsive'),
                'id' => 'home-1',
                'before_title' => '<div id="widget-title-one" class="widget-title-home"><h3>',
                'after_title' => '</h3></div>',
                'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
                'after_widget' => '</div>'
            ));
    
            register_sidebar(array(
                'name' => __('Home Widget 2', 'responsive'),
                'description' => __('Area 7 - sidebar-home.php', 'responsive'),
                'id' => 'home-2',
                'before_title' => '<div id="widget-title-two" class="widget-title-home"><h3>',
                'after_title' => '</h3></div>',
                'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
                'after_widget' => '</div>'
            ));
    
            register_sidebar(array(
                'name' => __('Home Widget 3', 'responsive'),
                'description' => __('Area 8 - sidebar-home.php', 'responsive'),
                'id' => 'home-3',
                'before_title' => '<div id="widget-title-three" class="widget-title-home"><h3>',
                'after_title' => '</h3></div>',
                'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
                'after_widget' => '</div>'
            ));
    
            register_sidebar(array(
                'name' => __('Home Widget 4', 'responsive'),
                'description' => __('Area 9 - sidebar-home.php', 'responsive'),
                'id' => 'home-4',
                'before_title' => '<div id="widget-title-four" class="widget-title-home"><h3>',
                'after_title' => '</h3></div>',
                'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
                'after_widget' => '</div>'
            ));
    
        }
    
        add_action('widgets_init', 'responsive_child_widgets_init');
    
    ?>
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Change widget area order in child theme’ is closed to new replies.