Custom Sidebar via functions.php

[bennettwebmaster]

Hello,
So a while back we installed a couple of plugins that generated their own pages. We needed a left sidebar on those pages that wasn’t the default sidebar. So we added some code to the functions.php file in the child theme to create a ‘widget area’ we could use. That still technically works but the styling is wacky. I updated to the latest version of the theme over the week and that’s probably the root of the cause. I was wonder if you knew off the top of your head what might cause this strange styling issue. I’ll link to what the page should look like and what it looks like now. I’ll also post the code that we used to create those widget areas.

Current look: http://www.bennettig.com/contact-us/bennett-motor-express-barnesville-ga/
How it should look: http://www.bennettig.com/updatedsite/contact-us/bennett-motor-express-barnesville-ga/

Here’s the code we’re using:

/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once ( TEMPLATEPATH . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

// Start the party ...

// Add stylesheet - Level 4, will get added after EVERYTHING
themeblvd_add_stylesheet( 'custom_styles', get_stylesheet_directory_uri().'/assets/css/custom.css', 4 );

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'SimpleMap',
'id' => 'simplemap-sidebar',
'description' => 'Appears as the sidebar on the locations pages',
'before_widget' => '<aside id="%1$s" class="widget %2$s"><div class="widget-inner">',
'after_widget' 	=> '</div></aside>',
'before_title' 	=> '<h3 class="widget-title">',
'after_title' 	=> '</h3>'
));
}

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Events',
'id' => 'events-sidebar',
'description' => 'Appears as the sidebar on the events pages',
'before_widget' => '<aside id="%1$s" class="widget %2$s"><div class="widget-inner">',
'after_widget' 	=> '</div></aside>',
'before_title' 	=> '<h3 class="widget-title">',
'after_title' 	=> '</h3>'
));
}

if( ! function_exists( 'themeblvd_add_sidebar_location' ) ) {
	function themeblvd_add_sidebar_location( $location_id, $location_name, $location_type, $description = null ) {
		
		global $_themeblvd_user_sidebar_locations;
		
		// Description
		if( ! $description )
			$description = sprintf( __( 'This is default placeholder for the "%s" location.', TB_GETTEXT_DOMAIN), $location_name );
			
		// Add Sidebar location
		$_themeblvd_user_sidebar_locations[$location_id] = array(
			'type' => $location_type,
			'location' => array(
				'name' 	=> $location_name,
				'id'	=> $location_id
			),
			'assignments' => array(
				'default' => array(
					'type' 			=> 'default',
					'id' 			=> null,
					'name' 			=> 'Everything',
					'sidebar_id' 	=> $location_id
				)
			),
			'args' => array(
			    'name' 			=> __( 'Location: ', TB_GETTEXT_DOMAIN ).$location_name,
			    'description' 	=> $description,
			    'id' 			=> $location_id,
			    'before_widget' => '<aside id="%1$s" class="widget %2$s"><div class="widget-inner">',
				'after_widget' 	=> '</div></aside>',
				'before_title' 	=> '<h3 class="widget-title">',
				'after_title' 	=> '</h3>'
			)
		);
	}
}

I appreciate any help you can provide.

thanks!
Lewis

• This topic was modified 7 years, 7 months ago by bennettwebmaster. Reason: code formatting

Topic

[Jason Bobich]

Hi,

Apologies, I may be misunderstanding, but I’m a little confused as to why this would involve any code customization at all? The theme already has a “Left Sidebar” location which is what you’d be using in this scenario. At Appearance > Widget Areas in your WP admin, you can create a new widget area, apply it to the “Left Sidebar” location, and assign it to the specific pages you want it to show.

And it terms of why the page is broken, I’m assuming you have an outdated copy of page.php in your child theme? This is why it’s best never to copy these top-level template files to your child theme, as they are going to change with updates.

There’s really no reason to, as you’ve got action hooks every where and the ability to edit the inner template parts, like content-page.php.

http://dev.themeblvd.com/tutorial_category/chapter-02/

[bennettwebmaster]

I think originally the issue we had was that the two plugins we use (simple maps and event organizer) generated their own pages. So we needed a way to tell wordpress and the theme that if simple maps generates a page, use X sidebar. We weren’t sure of any other way to do that but there may be a better way.

The function code still works for the most part. The styling is what seems to be off because the menu is full width and above the page content. I’m trying to compare the two installs and see if I missed something. I just wasn’t sure if the theme update changed some styling somewhere.

We definitely learned the lesson on putting top level template files in the child theme. The only one in there now is the header.php file as far as top level ones go (the other two being functions.php and style.css).

I’ll continue to work on it but I hope that clarifies it a little more.

thanks!

[Jason Bobich]

Whatever top-level file you’re using here, or your plugin is using here (now looks like maybe it is single.php), is still an outdated copy in your child theme. This is what’s wrecking your layout. You can clearly see this by inspecting your site, and just seeing that all the HTML markup surrounding the main layout of the page is duplicated.

So, if you’re going to continue with using what looks like single.php in your child theme, you need to take the current version of that template file, and re-apply your customizations to it.

[Jason Bobich]

So we needed a way to tell wordpress and the theme that if simple maps generates a page, use X sidebar. We weren’t sure of any other way to do that but there may be a better way.

So, yeah I think everything you’re trying to do can be done without any child theme code customization. Under Appearance > Widget Areas, when you configure the “assignments” for a custom widget area, there’s an option called “custom conditional” which allows you to put in a custom PHP comparison to determine if it shows.

I don’t know what this would be for your plugins, but for example:

get_post_type() == 'event'

This would be an example of checking for if the custom post type is equal to “event” — which would trigger the sidebar.

Now, this option of a “custom conditional” didn’t exist in the past probably whenever you originally did this. However, I think the whole approach you’ve taken stems from a misunderstanding of what a “sidebar location” is in the theme. The “left sidebar” location remain constant throughout all pages of your website using the “Sidebar Left” sidebar layout. And then custom widget areas can be swapped in-and-out of this location, depending on the page.

So, since in the past there was no custom conditional option, you could have just created a custom sidebar from Appearance > Widget Areas. And then from your child theme, just filtered in that sidebar ID for whatever conditional you can now place in that option.

[bennettwebmaster]

Ok I’ve located the issue. It’s actually sort of the other way around. We had a developer do a little custom work for us way back when we launched the site. He created a couple of extra files that are placed in the main theme along with single.php, content.php, etc.

I see them now because their modified date is different than the rest of the files. It would seem they just need to be modified to work with the updated theme. I suppose that’d be the case even if they were in the child theme.

I’ll take a crack at that. It’s been a while since I messed with these files but I think I can work my way through it.

Thanks for jogging my memory!

[Jason Bobich]

Also, if you want a full example that shows how to register a sidebar (NOT a location), and then apply it to a specific location on a specific page, all through PHP, checkout this:

https://github.com/themeblvd/Theme-Blvd-WooCommerce-Patch/blob/master/theme-blvd-woocommerce-patch.php#L78

https://github.com/themeblvd/Theme-Blvd-WooCommerce-Patch/blob/master/theme-blvd-woocommerce-patch.php#L314

https://github.com/themeblvd/Theme-Blvd-WooCommerce-Patch/blob/master/theme-blvd-woocommerce-patch.php#L277

[bennettwebmaster]

I’m going to try your suggested approach with the custom widget area and using a conditional.

Thanks again for the help!

[bennettwebmaster]

Just to follow up. I’ve fixed the issue. I used the custom conditionals like you suggested and it worked nicely and even eliminated the need for the customized files in the root of the theme. Thanks for all your help!

Lewis

[Jason Bobich]

Awesome glad to hear it, Lewis. That should hopefully make your child theme a bit cleaner and easier to work with in the future.

[Author]

Replies