WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change widget area order in child theme (10 posts)

  1. zeaks
    Member
    Posted 1 year ago #

    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?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Why do you need the same ids?

  3. zeaks
    Member
    Posted 1 year ago #

    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?

  4. zeaks
    Member
    Posted 1 year ago #

    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' );
  5. zeaks
    Member
    Posted 1 year ago #

    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?

  6. akagitano
    Member
    Posted 1 year ago #

    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' );
  7. zeaks
    Member
    Posted 1 year ago #

    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.

  8. akagitano
    Member
    Posted 1 year ago #

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

  9. zeaks
    Member
    Posted 1 year ago #

    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

  10. belindajohnstone
    Member
    Posted 1 year ago #

    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');
    
    ?>

Topic Closed

This topic has been closed to new replies.

About this Topic