[Resolved] Custom Right Sidebar width differently than the global setting.

[Huseyin]

Hi Generatepress Support Team,

So I would like have custom sidebar width differently than the global setting. Just want to have this custom sidebar on few pages.

I want to achieve this custom right sidebar:
– Where the page layout needs to be Full width
– This custom right sidebar needs to be on Desktop ONLY
– I just want to add one Shortcode to the custom right sidebar, where there will be 120×600 px AdSense AD banner placed with the shortcode on this custom right sidebar

Thanks

[David]

Hi there,

are you using the right sidebar elsewhere? If so you will need a plugin like: Content Aware Sidebars to set create a custom sidebar for those pages.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

I’m already using the right sidebar for my blog posts.

Need this custom right sidebar for few pages.

Also, seen this page for too for custom sidebar width. https://docs.generatepress.com/article/sidebar-widths/#using-a-filter

Is there a way of doing without a plugin?

[David]

If you want to display different sidebars then you will need a plugin or custom development

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

oh okay, so I will install that plugin but how could i change the sidebar width for those pages?

[David]

You would use this code:

add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
        // If we're on the home page
	if ( is_front_page() ) {
		return 40;
	}
	
        // Return the default
	return $width;
}

The return 40; – the 40 is the % width. Adjust that to what you need.

The if ( is_front_page() ) { sets the condition to where this change is applied.

This needs to be changed to meet your requirements. For example you could use this instead:

if( is_page( array( 11, 22, 33, 44 ) ) ) {

This applies it to a series of Pages based upon their ID. If you’re using Pages this condition would apply and you would just need to change the ID#’s to match those pages.

You can find the ID of each page by editing the page, and checking the browser URL you will see the number there.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Thanks but it’s not working, also Content Aware Sidebars is configured

I added this code for code snippets;

add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
        // Custom Right Sidebar for Filtering Tables
	if( is_page( array( 14221, 19196 ) ) ) {
		return 20;
	}
	
        // Return the default
	return $width;
}

also, i had the following css code for global right sidebar width;

@media (min-width: 769px) {
    .right-sidebar .site-content {
        display: flex;
    }
    .right-sidebar #right-sidebar {
        width: 380px;
    }
    .right-sidebar #primary {
        flex: 1 0;
    }
}

[David]

The filter code is working, and the CSS you have added is also working ( and overriding the filter size ).

the image you’re displaying is only 120px wide. Use a wider image.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

i think there is a misunderstanding, where I the want custom sidebar shorten the width so i could use 120px wide banner ads. So with sidebar padding is set to 40px, the custom right sidebar needs to be 200px (120px ad banner + 80px padding (left + right)

[David]

In that case – no need for the filter.
Use this CSS – it will change the width of a right sidebar on any full width page:

.right-sidebar.full-width-content #right-sidebar {
    max-width: 200px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

thanks,

So i dont need the filter (PHP code) – could i deactivate it?

[Elvin]

So i dont need the filter (PHP code) – could i deactivate it?

Yes you can deactivate it. You can delete it later if you really don’t need it.

A wise man once said:
"Have you cleared your cache?"

[Huseyin]

Great Thanks

🙂

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Hey Generatepress Team,

I’m back again, currently updating the site, need help on resizing the right-sidebar width on the full-width page only. (I will place the given CSS code on the pages needed because I separate the CSS codes by hook element). I just need a width of 160px with no padding inside.Please 🙂 (like i tried the following css codes, but no luck)

.right-sidebar. #right-sidebar {
width: 160px;
}

.right-sidebar.full-width-content {
width: 160px;
}

.right-sidebar.full-width-content #right-sidebar {
width: 160px;
	}

Thanks

[Author]

Posts