Adding Widget Area

Tagged: widget area

This topic has 5 replies, 2 voices, and was last updated 9 years, 1 month ago by Sakin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 27, 2015 at 4:30 pm #78600

Gregory
Member

Hello,

I’m looking to add a full width widget area on the homepage, above the recent posts and sidebar, but below the header and menu bar. I have a child theme, and was wondering if you could help me with adding CSS to do this?

I’m doing this because I don’t want to use the featured slider and would prefer to use a widget as an alternative.

My site is http://www.nerdunderground.net

Thanks!

October 27, 2015 at 10:22 pm #78615
Sakin
Keymaster
@Gregory: If you have child theme, then you need to register sidebar first and then add in function to execute that sidebar.

You can add the following code in your child theme functions.php file
```
/**
 * Register our sidebars and widgetized areas. 
 *
 * @since Catch Box Pro 1.0
 */
function catchbox_child_widgets_init() {

	//Main Sidebar
	register_sidebar( array(
		'name' => __( 'Home Below Menu Sidebar', 'catch-box' ),
		'id' => 'sidebar-home-below',
		'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', 'catchbox_child_widgets_init' );

/**
 * Home Below Menu Sidebar
 */
add_action( 'catchbox_before_primary', 'catchbox_home_below_menu_sidebar', 11 ); 
function catchbox_home_below_menu_sidebar() {
	if ( is_active_sidebar( 'sidebar-home-below' ) ) : 
		?>
		<div id="sidebar-home-below-menu" class="widget-area clearfix">
			<?php dynamic_sidebar( 'sidebar-home-below' ); ?>
		</div> 
	<?php endif;
}
```
October 28, 2015 at 12:07 am #78624

Gregory
Member

@Sakin Thank you, that worked perfectly.

I have another change I would like to make and was wondering if it could be done with either custom css or adding css to my child theme.

I’d like to either bevel or emboss my menu bar. It currently looks too flat.

I appreciate the help!

http://www.nerdunderground.net

October 28, 2015 at 11:18 pm #78696

Sakin
Keymaster

@Gregory: I see that you have added in the following CSS in Custom CSS box, which makes it solid color.
#branding #access, #colophon #access-footer { background: none #205e1d; }

Remove that.

October 28, 2015 at 11:32 pm #78700

Gregory
Member

@Sakin

Sorry, I do not see that in my Custom CSS. I do however see that I changed the Menu Background Color to #205e1d in Appearance –> Theme Options –> Color Options

This is all that is placed in my custom css:

#author-info { display: none; }

.category .page-header { display: none; }

.entry-meta .tag-links { display: none; }

@media screen and (min-width: 1025px) {
.site { width: 1050px; max-width: 96%; }
#primary { width: 65%; }
#secondary { width: 32%; }
}

.entry-content .attachment-full { margin-bottom: 20px; }

October 30, 2015 at 12:23 am #78767

Sakin
Keymaster

@Gregory: Yes, that might be form “Color Options”.
Author

Posts