How to Use Custom Sidebars in GeneratePress Theme?

GeneratePress is simple yet powerful WordPress theme allowing you to customize each section of the layout. Earlier days, you need a separate plugin for adding custom sidebars in WordPress sites. However, you can do that with Elements option in GeneratePress theme without additional plugin. Remember, Elements is part of GP Premium plugin and is not available in free theme. Hence you should have the premium plugin to follow this article.

Concept of Custom Sidebars

At this point, sidebar in WordPress is an outdated concept that most themes offer focused fullwidth page layouts without sidebar. However, sidebar is an important part of any site in our opinion for showcasing additional widgets. GeneratePress theme still uses widgets area (Appearance > Widgets) and allows you to create either right or left sidebar for your site. But using the same sidebar on site wide may not be appropriate and you may want to display the sidebar dynamically based on conditions.

• Your site has different categories and you want to show different sidebars based on the category. You may also want to do the same for tags and other archive pages.
• There could be special posts in which you want to have custom sidebars for showing events, affiliate banners or advertisements instead of regular sidebar content. This is super useful for review and coupons sites to show relevant widgets in the sidebar and make the last widget fixed when scrolling the content.  

Whatsoever is the reason for you, follow the below steps to setup custom sidebars in GeneratePress theme.

#1. Activating Elements in GeneratePress

This is the first step and you need to use Elements feature in GeneratePress for customizing the theme’s layout without editing PHP files.

• Login to your WordPress admin panel and go to “Appearance > GeneratePress” section.
• Under “Dashboard” tab, scroll down and click on the “Activate” button against “Elements” module.
• You will see a message showing “Module Activated” and the new menu item called “Elements” will be added under “Appearance” heading.

#2. Using Right Sidebar Site Wide

Next, let us enable right sidebar option for site wide.

• Go to “Appearance > Customize” section and navigate to “Layout > Sidebars” option.
• Select “Content / Sidebar” option for all the available options to make the right sidebar as your default site wide sidebar. Click “Publish” button to save your changes.

#3. Add Widgets in Site Wide Right Sidebar

To show the difference clearly, let us add an image block in site wide right sidebar.

• Go to “Appearance > Widgets” section and add an “Image” block in your right sidebar widgets area.

• Click “Update” button to publish your changes and all your posts should show this image widget on the right sidebar.

#4. Creating Custom Sidebar Blocks with Elements

Let us add a “Latest Posts” widget in the custom sidebar and showcase this on a specific post replacing the default sidebar with image widget.

• Go to “Appearance > Elements” section and click on “Add New Element” button.

• Select “Block” from the “Choose Element Type” dropdown and click “Create” button.

• When you are in the block editor, provide a title for the element as “Custom Right Sidebar”.
• Add a “Latest Posts” widget with a heading. You can customize the appearance of the latest posts to show small thumbnails and adjust the styles.

• After that, switch to “Element” tab in right side and choose “Right Sidebar” from “Element Type” dropdown.

You will see a message showing, this will replace the default sidebar widgets on your site.

#5. Selecting Locations to Show Custom Sidebar

This is the most important step to select the locations on your site to replace the default sidebar with the Elements sidebar.

• Under “Display Rules” section, click the “Choose” dropdown and select “Post” option.

• This will show a new dropdown with “All Posts” option selected by default. Click on that and select a specific post from your site.

• Click “Publish” button and save your changes. Now, you can find the newly created “Custom Right Sidebar” block element with the location showing for the specific post in “Appearance > Elements” page.

Note: You can use post category, post tag, post archive, page and many other options for “Location” to show the custom sidebar. In addition, you can also exclude posts and show custom sidebar only for a specific user role.

#6. Testing Custom Sidebar

Now that you have finished the setup, open any post other than the post selected as a location in Elements section. You will see the right sidebar with an image widget which is your default site wide sidebar.

Now, open the specific post you have added in the Elements locations section. You will see the custom sidebar showing the latest posts widget instead of the default sidebar with image widget.

Using Right and Left Sidebars in Free GeneratePress Theme

If you do not have GP Premium plugin, there is a limited option with free theme to use left or right sidebar on specific posts.

• First, setup the default right sidebar in “Appearance > Customize > Layout > Sidebars” section as “Content / Sidebar” for “Sidebar Layout”.
• Select “Sidebar / Content” or other sidebar option for “Blog Sidebar Layout” and “Single Post Layout” options. In this way, you can mix and match the sidebar layouts for site wide, blog pages and all posts.

• For changing the sidebar layout for single post, go to the Gutenberg editor for creating or editing your post.
• Click on the three vertical dots “Options” icon showing on top right corner and select “Preferences” option. On the pop-up that appears, go to “Panels” section and enable “Layout” option.

• Close the “Preferences” pop-up and you will find a “Layout” meta box under “Post” tab. The “Sidebar Layout” will show “Default” indicating the default sidebar will be used for that post. Click on that and select left or right sidebar to change the default sidebar with your preferred setup.