styling new widget areas in header

[sharonq]

Hi Jason – thanks for your help over at Alyeska learning how to create a new Widget area – now that I’ve moved my development to JumpStart it makes sense to continue over here as I work on styling my new widgets.

I have added two widgets – one above the header and one to the right.

Header.php

/**
 * My header content
 */
function my_header_content() {
	themeblvd_display_sidebar( 'my_header_widget_area' );
}
add_action( 'themeblvd_header_addon', 'my_header_content' );
/**
 * Add new sidebar location. Header above 
 */
themeblvd_add_sidebar_location( 'my_header_above_widget_area', 'My Header Above', 'collapsible' );
/**
 * My header above
 */
function my_header_above() {
	echo '';
	themeblvd_display_sidebar( 'my_header_above_widget_area' );
	echo '';
}
add_action( 'themeblvd_header_above', 'my_header_above' );

Header logo has a unique id () which makes it easy to style
How do I give each of my new Widgets a unique ID?

link to site: http://jumpstart.teamsfirst.ca/

Topic

[Jason Bobich]

You’re putting that code in your header.php? No, this should be going in your Child theme’s functions.php. If you have that code in your header.php, definitely remove it. Do not do anything in header.php.

Header logo has a unique id () which makes it easy to style
How do I give each of my new Widgets a unique ID?

Are we talking about individual widgets or the widget areas? If you’re talking about individual widgets, then you can see that WordPress already gives each one a unique ID.

And if you’re talking about the widget areas, haven’t we covered this already several times? Go back and read through our previous thread. We’ve covered both how to target the widget areas with CSS the way they are.

And we’ve also covered how to wrap the widget aras in your own markup. Just look at the code you’re posting above. You’re echo’ing out blank nothing’s before and after your widget area. Once again, if you want some sort of div around it, then do that.

/**
 * My header above
 */
function my_header_above() {
	echo '
';
	themeblvd_display_sidebar( 'my_header_above_widget_area' );
	echo '
';
}
add_action( 'themeblvd_header_above', 'my_header_above' );

[Author]

Replies