Building Sidebars With the Site Editor

In this short workshop, learn how to create and build sidebars in your block theme’s site editor using templates.

Important Note About Using Sidebars Accessibly:

It’s important to tag the content in your template for assistive technologies (ie screen readers). Use <main> for the main content on the page, and the Skip to Content can target it. Use <aside> or <section> for sidebar content that is the same on all or many pages or posts.”

How to assign these tags:
The HTML Elements assignment controls are only available via the Group block in the block settings sidebar’s Advanced section. It’s important to wrap the content into a group block and use the controls to assign <main> and or <aside> to the respective content.

Learning outcomes

1. Use the site editor to add a sidebar automatically to any post, page, or template that you would like

Comprehension questions

1. Which block can you use to create a sidebar?
2. Where in the site editor should you build your sidebar?
3. Why is it helpful to use the ‘List View’ button to create a sidebar?

Transcript

Sarah Snow 0:00
Welcome to Building Sidebars With the Site Editor. In order to do this with your website, first, you will need to make sure your WordPress version has been updated to 5.9 or the latest version of WordPress. You will also need to make sure you have installed and activated a block theme on your website.

Today we will use the Twenty Twenty-Two theme. By the end of this workshop, you will learn how to automatically add a sidebar to every post or page that you’d like. It’s pretty common to have different sidebar options on posts or pages so we’ll focus on adding a sidebar to posts today. Let’s get started.

The secret to adding sidebars can be found in your block theme’s site editor in your dashboard. If you head to Appearance > Editor, you will be taken to your site editor. From there, select the W icon in the upper left hand corner of your screen. You will find a list of options you can use to edit your site’s layout and add a sidebar. We’ll click on templates. I’d like to add a sidebar to every post, new and old, so I am going to select single post which is the Twenty Twenty-Two default post type.

This is a template for my blog posts. Anything I do to this page will make changes on existing and new blog posts, so I can add a sidebar here. Let’s see how it’s done.

Here you can see that this page is made up of three main parts. I’ve minimized them so you can see them clearly. They are the header, the group of different posts, features (such as post title, featured images, and post content) and a footer.

Let’s create a sidebar. We’re going to do this with the Columns Block. First, you’ll want to make sure that group is selected so that you don’t accidentally add these columns to the header or footer. Now, let’s add the column block. I select “Columns”, scroll down to where this has appeared in my editor and find several options. Now, I prefer the right sidebar over left ones. So I select that one, though either will work for this process. I click on the list view again. Because it’s easier to select the blocks that I want, I minimize everything except for the Columns Block to make sure I select the entire block containing the post information that I want to display. Then, I select the group select move to and drag and drop this option into the columns that I want.

I know I’m moving it to the right column by the line that appears under the Columns Block. I have moved the existing post template information, including the title featured image and the post content to the left. Now I’m going to save, just in case. From here, I’m going to add whatever content I would like to the right sidebar. Watch as I add a heading and a subscription form block.

Now, on every blog post, past, present and future, people can subscribe to my blog using my new sidebar. My sidebar can have whatever blocks I would like. For example, on this one, I chose to add a post author, archive and a few separators for spacing.

Your theme’s template parts will not save automatically. I click Save once and I’m showing a warning: “Are you ready to save?” Note where it says this change will affect pages and posts that use this template. I’m sure, so I click Save again. Now let’s see the magic: before, my posts looked like this with no sidebar, which is the default for posts using the Twenty Twenty-Two theme. Now that we’ve changed and saved the post template, they look like this complete with a sidebar that I’ve customized. When I click over to a page on my website, you’ll notice that there is no sidebar. This is because I only edited the post template, not a page template. So you can show different things depending on what post type you’re using on your website.

You might notice that there are different options in both Posts and Pages under the template section. This allows you flexibility if you want some of your posts or pages to have a sidebar and others not. Remember, what you do to one template will be done to any poster page using that template. So take care as you edit. What will you put in your new sidebar? Have fun.