• Resolved prakin

    (@prakin)


    Hi,

    I am wanting to add two more footer widgets to my BLOG.

    I already have a theme child, and have the CSS the way that I want for the current 3 footer widgets. Just want to add two more with all five evenly spaced. Can you walk me through the code needed for child theme? Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter prakin

    (@prakin)

    Update: I have tried creating a sidebar-footer.php file in the child theme with the following code:

    if ( ! is_active_sidebar( 'sidebar-2' ) && ! is_active_sidebar( 'sidebar-3' ) && ! is_active_sidebar( 'sidebar-4' )  && ! is_active_sidebar( 'sidebar-5’ ) && ! is_active_sidebar( 'sidebar-6’ )) {
    	return;
    }
    ?>
    
    <div id="tertiary" class="widget-area footer-widget-area" role="complementary">
    	<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
    	<div id="widget-area-2" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-2' ); ?>
    	</div><!-- #widget-area-2 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    	<div id="widget-area-3" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-3' ); ?>
    	</div><!-- #widget-area-3 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    	<div id="widget-area-4" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-4' ); ?>
    	</div><!-- #widget-area-4 -->
    	<?php endif; ?>
    	
    	<?php if ( is_active_sidebar( 'sidebar-5’ ) ) : ?>
    	<div id="widget-area-5” class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-5’ ); ?>
    	</div><!-- #widget-area-5 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-6’ ) ) : ?>
    	<div id="widget-area-6” class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-6’ ); ?>
    	</div><!-- #widget-area-6 -->
    	<?php endif; ?>
    
    </div><!-- #tertiary -->

    This code alone took away my current 3 widget and my footer.

    So, I then tried adding this code to the child functions.php file to register the two new widgets, thinking that would put everything back correctly. However, Adding this code causes my blog to go to white out.

    /**
     * Register widgetized area and update sidebar with default widgets.
     */
    function sela_widgets_init() {
    	register_sidebar( array(
    		'name'          => __( 'Main Sidebar', 'sela' ),
    		'id'            => 'sidebar-1',
    		'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 Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-2',
    		'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 Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-3',
    		'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'          => __( 'Third Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-4',
    		'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'          => __( 'Fourth Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-5',
    		'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'          => __( 'Fifth Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-6',
    		'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', 'sela' ),
    		'id'            => 'sidebar-5',
    		'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', 'sela_widgets_init' );

    What am I doing wrong?

    Hi there,

    So this would be a different approach, but have you considered just using the theme’s First Footer Widget Area and setting all widgets inside of it to be about 1/5 the total width?

    If you wanted to try that, you could use something like this, and set additional media queries for narrower widths as needed:

    @media screen and (min-width: 1160px) {
        #widget-area-2 aside {
            width: 19%;
            float: left;
            margin: 0 5px;
        }
    }
    Thread Starter prakin

    (@prakin)

    Well, I figured out why it was where the problem was with my code. It was because “sidebar 5” and “sidebar 6” had already been used for another sidebar widget. I had a total of 7 widgets registered. So, once I changed the new additions to “8” and “9” they appeared in my dashboard.

    Now, I just can’t seem to get them to align correctly. When I add text to the new additional footer widgets, everything gets shoved to the left side of the screen. Also the font is not coming out the same for the new widgets. grrr!

    Thread Starter prakin

    (@prakin)

    Ok I finally figured this out. Thanks David for trying to help, but if anyone else has the Sela theme and are wanting to change your 3 footer widgets to 5, this is how I did it for my blog

    I created a sidebar-footer.php in my child theme and placed these pieces of code in it:

    <?php
    /**
     * The sidebar containing the footer page widget areas.
     *
     * If no active widgets in either sidebar, they will be hidden completely.
     *
     * Sela Theme child
     */
    
    if ( ! is_active_sidebar( 'sidebar-2' ) && ! is_active_sidebar( 'sidebar-3' ) && ! is_active_sidebar( 'sidebar-4' ) && ! is_active_sidebar( 'sidebar-8' ) && ! is_active_sidebar( 'sidebar-9' )) {
    	return;
    }
    ?>
    
    <div id="tertiary" class="widget-area footer-widget-area" role="complementary">
    	<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
    	<div id="widget-area-2" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-2' ); ?>
    	</div><!-- #widget-area-2 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    	<div id="widget-area-3" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-3' ); ?>
    	</div><!-- #widget-area-3 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    	<div id="widget-area-4" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-4' ); ?>
    	</div><!-- #widget-area-4 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-8' ) ) : ?>
    	<div id="widget-area-8" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-8' ); ?>
    	</div><!-- #widget-area-8 -->
    	<?php endif; ?>
    
    	<?php if ( is_active_sidebar( 'sidebar-9' ) ) : ?>
    	<div id="widget-area-9" class="widget-area">
    		<?php dynamic_sidebar( 'sidebar-9' ); ?>
    	</div><!-- #widget-area-9 -->
    	<?php endif; ?>
    </div><!-- #tertiary -->

    This is basically the same as the Sela sidebar-footer.php with the addition of sidebar-8 and sidebar-9.

    In my functions.php (child theme), I added the registration for these with this code:

    /**
     * Register widgetized area and update sidebar with default widgets.
     */
    function selachild_widgets_init() {
    	
    	
    	register_sidebar( array(
    		'name'          => __( 'Forth Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-8',
    		'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'          => __( 'Fifth Footer Widget Area', 'sela' ),
    		'id'            => 'sidebar-9',
    		'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', 'selachild_widgets_init' );
    

    (* Note above- If copying and pasting from the original function.php and then making changes, make sure you add “child” behind the word “sela” or else it will cause the white page of death. Notice how I added child at the top and bottom of this piece of code.)

    I also had to do some work on my CSS to get it to look the way that I have it. I am not including that right now, because I am pretty sure that my code is duplicated in a few areas and overriding itself in a few others. I still have to go back and clean it up a bit. Originally, the above codes gave me all 5 footer widgets, but they were shoved to the left with 3 having the current font and the 2 new widgets having whatever Sela had originally set them to. Hope this helps anyone looking to add footer widgets to their Sela theme though.
    Cheery-oh!

    • This reply was modified 7 years, 9 months ago by prakin.
    • This reply was modified 7 years, 9 months ago by prakin.

    Thanks for sharing your solution! I’m glad you were able to sort it out.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add Footer Widget’ is closed to new replies.