Custom Right Sidebar width differently than the global setting.

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.

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?

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

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

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.

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;
    }
}

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.

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)

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;
}

thanks,

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

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.

Great Thanks

:)

Glad we could be of help

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