GeneratePress Sidebars: CSS and Code Snippets

GeneratePress has more than 400,000+ active installations and it is one of the best themes for WordPress.

One of the best things about GeneratePress is the outstanding support they have.

This is a collection of snippets that will help you customize different areas of your WordPress site.

---

---

How to Make Sticky Sidebar on GeneratePress

Add this CSS to your site to make your sidebar sticky

.inside-right-sidebar {
    position: sticky;
    top: 10px;
}

---

Sticky Sidebar on Custom Post Types

If you are looking for the CSS necessary to make the right sidebar sticky on a certain custom post type, this is the CSS snippet you need

@media(min-width: 769px) { 
.your_post_type .inside-right-sidebar {
    position: sticky;
    top: 0;
}
  }

Source: GeneratePress

---

GeneratePress: Disable Sidebar on Tablets

Sidebars look great on desktop computers but they don’t look that great on tablets.

On mobile devices, the left or right sidebar is placed after the content of the post.

This CSS code will remove the right sidebar from devices with a maximum width of 1099px.

Use Viewport sizer to understand the width of different types of devices.

@media (max-width: 1099px) {
    div#right-sidebar {
        display: none;
    }
    .site-content .content-area {
        width: 100%;
    }
    .single-post.separate-containers .site-main {
        margin-right: 0px;
    }
}

---

GeneratePress: Place Sidebar after the Content on Tablet

In case you want to move the right sidebar after the content just like what you see on mobile devices, you can use this snippet of code instead

@media(max-width: 1024px) {
    .site-content {
        flex-direction: column;
    }
    #primary,
    #right-sidebar {
        width: 100%;
    }
    site-main .site-main  {
        margin-right: 0
    }
}

---

GeneratePress: PHP Snippet to Adjust the Sidebar

If you need to adjust the width of the right sidebar, you can add this PHP snippet to your Functions.PHP file.

//Adjust the sidebar
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
if ( is_single() ) {
return 30;
}
return $width;
}

This is the code snippet that you need to set the right sidebar width of the homepage

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

This is the code snippet that you need to set the right sidebar width of your category pages

add_filter( 'generate_left_sidebar_width','tu_custom_left_sidebar_width' );
function tu_custom_left_sidebar_width( $width ) {
        // If we're on a category
        if ( category() ) {
                return 40;
        }
        
        // Return the default
        return $width;
}

This is the code snippet that you need to set the right sidebar width of your blog posts

add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
        // If Post
	if ( is_single() ) {
		return 28;
	}
	
        // Return the default
	return $width;
}

This is the code snippet that you need to set the left sidebar width of your blog post

add_filter( 'generate_left_sidebar_width','tu_custom_left_sidebar_width' );
function tu_custom_left_sidebar_width( $width ) {
        // If Post
	if ( is_single() ) {
		return 28;
	}
	
        // Return the default
	return $width;
}

Change the number in the code to whatever makes sense for you.

---