How to Design Sidebars in WordPress Block Themes

A sidebar is integral to your WordPress website by giving extra space for blocks, navigation, advertising, and more. Since the advent of block themes, sidebars in WordPress design have become very flexible and intuitive. This guide will teach you how to efficiently design sidebars in WordPress block themes.

Table of Contents

About WordPress Block Themes

Block themes in WordPress help you design every part of the site using blocks. These themes are designed using the modern WordPress Block Editor, Gutenberg. It allows you to create even advanced layouts without much hustle. But before making any smart sidebars, you should know how blocks function.

A Theme to Design Sidebars in WordPress

The first thing to do is find a block theme. I will use the Alvand Blog theme designed for this tutorial series and develop it until the end.

• Download the Alvand Blog theme before adding a sidebar
• Download the Alvand Blog theme after adding a sidebar (the latest version until now)

Choose or Make a Template Part for the Sidebar

Template parts are parts of your theme you intend to use repeatedly, like a header, footer, or sidebar. If your theme already has a sidebar template part, you can edit that one. Otherwise, you can create a new sidebar template part.

Here’s how to create a new Template Part:

1. Go to Appearance > Editor in your WordPress dashboard to open the Site Editor. You can use it to edit templates and template parts directly.
2. After opening up the Site Editor, click on Patterns.
3. Click on the Add New Pattern button and then on Add New Template Part.
4. In the opened modal, name the new template part; for instance “Home Sidebar“.
5. Then select an area. Select General now because we don’t have a specific one for sidebars. In the coming posts, I will show you how to add a custom area for all sidebars to be better organized.

Add Blocks to the Sidebar Template Part

Now, you’re ready to add blocks using your template part. Blocks are the basic building units inside the Gutenberg editor. The standard blocks that you would use in the Sidebar include:

• Navigation Block: A way for people to look around your site
• Search Block: Allows users to search your site
• Latest Posts Block: Lists your recent posts
• Categories Block: Lists the categories of your posts
• Custom HTML Block: For any custom HTML

Personalize All the Sidebar Blocks

Each one of these blocks is personalizable. For example, look at the Latest Post block: it could easily be set to show excerpts and dates or even be furthered to feature with an image. Each block is easily personalizable, bringing out the design and functionalities you’d prefer to show with your sidebar. You style the sidebar by the block settings. Tweak the padding, margins, and background colors to fit your sidebar with your site design. Or you can use your own custom CSS for very advanced styling.

Save and Preview the Results

Don’t forget to save the changes when all your blocks are added and customized. Preview the sidebar on several pages to ensure it looks great and functions just right.

Assign the Sidebar to Templates

Once you’ve built your sidebar, you’ll want to assign it to the correct templates so that it is displayed on your site. With the Site Editor open, access the template you want to add the sidebar part, either Single Post or Page. Add the sidebar template part to where you want it to appear.

Design Sidebars in WordPress Best Practices

• Keep it Simple: The sidebar shouldn’t be over-crowded with information and features. Prioritize the most essential blocks that would offer a better user experience.
• Give Priority to Your Content: Content shown within the sidebar must be displayed according to the priority level. The foremost blocks must be at the top level or the higher part of the sidebar because users primarily interact with the items served first.
• Maintain Consistency: The design implemented for the sidebar should be consistent with the website’s design. Ensure that the fonts, colors, and styles will be alike or in tune with each other.
• Check Responsiveness: Test how your sidebar views on different devices. It has to be responsive; it shouldn’t break into pieces on smaller screens.
• Use Blocks Wisely: Use only those Blocks you think are helpful to your user. Common choices include search bars, recent posts, and social media links.

Conclusion

Sidebars can now be designed efficiently with WordPress block themes. Thanks to the flexibility of the Gutenberg editor, which makes building sidebars equally easy. Thanks to the system’s openness, whereby a little knowledge of the structure of themes with blocks at its center, you can now easily follow the process above in designing excellent, attractive, and practical sidebars. Ensure your design is simple, important content takes precedence, and the overall site look is consistent. By observing these practices, you will put your site’s usability and appearance in a better light.

All Parts of This Series

1. WordPress Theme Design: A Beginner Simple Overview
2. WordPress Themes: How to Design Header & Footer
3. How to Design Sidebars in WordPress Block Themes