Create a Sidebar

Typically found on blogs, a sidebar is a narrow column that appears to the left or right of a blog’s main content. It displays secondary information such as a bio, blog categories, and more. This guide will show you how to add a sidebar to your website.

In this guide

1. Why Create a Sidebar
2. Requirements
3. Video Overview
4. Step 1: Open the Template Editor
5. Step 2: Create the Columns
6. Step 3: Add Content to the Sidebar
7. Step 4: Reuse the Sidebar

Why Create a Sidebar

Many websites, especially blogs, use a sidebar to display extra information such as a bio, a picture, blog categories, links to social media profiles, a subscription box, and much more. Here’s an example of a blog sidebar from the Bitácora theme:

An example of a blog sidebar

If your theme doesn’t include a sidebar in its design, you can create one using the Site Editor. To create a sidebar, use the Columns block, where one column takes up the larger portion of the screen, and the other column (the sidebar) takes up the remaining smaller portion.

You can create a left or right sidebar and use any width you prefer. For this guide, we’ll create a right sidebar that takes up 30% of the width of the page.

Requirements

To follow the steps in this guide, choose a theme that supports the site editor. A quick way to determine if your site uses the site editor is to check for Appearance → Editor in your site’s dashboard.

Video Overview

Slow down or speed up the video using the controls in the lower right corner after clicking Play

Step 1: Open the Template Editor

First, decide which areas of your site should have a sidebar:

1. From your site’s dashboard, click on Appearance → Editor.
2. In the left side panel, click Templates.
3. Select the template you’d like to add a sidebar to:
   • The Single template controls the layout of your individual posts.
   • The Index template is typically used as the main blog page, where your latest posts are shown.
   • The Archive template displays smaller groupings of posts organized by categories, tags, and archives (which are typically posts by month, year, and other time-based groupings.)
   • The Page template controls the layout of standard pages on your site, such as an About or Contact page.
   • Start from scratch by clicking the + button to create a new template.
4. Click the pencil icon to start editing that template.

If you’d like to add a sidebar to more than one template, choose one for now. In step 4, we’ll cover how to reuse your sidebar in multiple templates.

Step 2: Create the Columns

Next, we’ll rearrange the template into columns, where the smaller column acts as the sidebar and the larger column displays the main content. Follow these steps:

1. Open List View to see a list of all blocks in the template.
2. Select the content you wish to include in the larger column (i.e., not the sidebar.) This will typically be all blocks between the header and the footer. It can be helpful to group all this content together first, as demonstrated in the video above.
3. In the block toolbar, use the Transform option to convert the content to columns:

4. In the Columns block settings, set the number of columns to 2.
5. Using List View, select the first column and set the width to 70% in the block’s settings.
6. Select the second column and set the width to 30%. This will be your sidebar.

Step 3: Add Content to the Sidebar

Using List View, select the smaller column, which is your sidebar. Click the + block inserter to add the content you would like to display in this column.

These are the most common blocks that are typically displayed in a sidebar:

• Search block – add a function for visitors to search through your blog posts.
• Subscribe block – displays an email opt-in to subscribe to your posts.
• Social Icons block – displays icons that link to your social media profiles.
• Categories block – displays a list of your blog’s categories.
• Archives block – displays your blog posts in groups of days, weeks, months, or years.
• Latest Posts block – displays a list of your most recently-published posts.
• Buttons block – create a button to encourage visitors to take some action.
• Paragraph block – displays regular text, which you can use to write a short bio or description of your blog.
• Heading block – displays a heading, useful to clearly distinguish each piece of content in the sidebar.
• Navigation block – display a menu of links to other parts of your site or other sites.

Step 4: Reuse the Sidebar

In step 1, you chose a template to work on. Now that you have created your sidebar, you can save it as a Template Part to reuse it in other templates, instead of constructing the sidebar from scratch for each template.

The steps to follow are illustrated in the video below.

1. Using List View, select the column used for your sidebar.
2. Click the three dots and select Create Template Part.
3. Give your template a name, such as “Sidebar” and click Create.
4. Switch to another template you wish to add the sidebar to.
5. Create the columns, as described in step 2.
6. In the smaller column, click the + block inserter and add your sidebar template part. All the content you added in step 3 will be included.
7. Click Save to save your changes to the template.

Slow down or speed up the video using the controls in the lower right corner after clicking Play