How to add a blog sidebar to your Squarespace site (7.1 and 7.0)
Squarespace makes it so easy for you to design a simple, steam-lined and clean website, there’s no doubt about that.
But if you’ve been playing around with Squarespace for a while now, you may have realized it’s missing some features that have you thinking, “why on EARTH wouldn’t this be included?”.
One of the biggest face-palms of the “things Squarespace is missing” list, is undoubtedly the option to have a sidebar on your blog (or anywhere, for that matter)
In Squarespace 7.0, a few of the templates did have sidebars included, but unfortunately the main template that everyone used because it was the best template by far (Brine) didn’t have a sidebar option.
And of course, with the release of Squarespace 7.1 and the fact that there was essentially one master template / no functional difference between the templates, we were all excited that this one-template-to-rule-them-all would surely have a sidebar option. Alas, it doesn’t.
Not having the ability for a sidebar is kinda crazy if you ask me, and can totally put people off. If you’re planning to produce a lot of Blog content, a sidebar is a great way of keeping people on your website and reading your posts, so understandably, this is a make or break function for some people.
Luckily, with most areas where Squarespace is letting us down, there is always a way around it, or someone brilliant has invented something brilliant that solves the problem. And in this case, we have both of those options (woohoo!)
The hands-down best option to add a sidebar to your Squarespace 7.1 or Squarespace 7.0 (Brine) site
This is one of those cases where someone brilliant has made something brilliant!
The Squarespace Sidebar Plugin by Sqspthemes.com is an amazing sidebar plugin that essentially makes it as easy as possible to add a sidebar anywhere around your site.
It’s really simple to install, and once installed it’s so easy to use.
It’s such a great solution because it automatically adds the sidebar to ALL of your existing blog posts, meaning you don’t have to go back and update your posts with the sidebar or anything crazy and time consuming like that.
The sidebar is controlled through a basic page, so if you want to add or remove or change anything on the sidebar, you can easily just update it on your “SIDEBAR” page and it will populate throughout all of your blog posts (or wherever you have prompted the sidebar to be placed).
There’s also a ton of styling options if you want to get more advanced, like background colors, spacing, padding etc.
I’ve been using this plugin for years now and I haven’t had any problems or glitches with it. Also, any questions I had about setting it up were handled quickly by the support team of the plugin developers.
You can see a sample of it just over there 👉🏼👉🏼 Isn’t she cute?
I recommend this sidebar plugin 100%. I’ve used a variety of different Squarespace plugins and none have ever worked as seamlessly as this particular plugin. I’ve also used a variety of different methods for adding a sidebar, and this is by far the easiest.
Please note that this plugin isn’t created or maintained by us, it is a product from Sqspthemes.com and they will handle any questions or support requests you may have. The link is an affiliate link and we will earn a commission if you purchase the sidebar through our link. We only promote products that we love and use ourselves!
The slower and more manual method of creating a sidebar for Squarespace 7.1 or Squarespace 7.0 (Brine)
If for some reason you don’t want to use the plugin listed above, you can do it this way! It’s fairly simple (though not as simple as the plugin!) but can be very time consuming if you have a lot of posts.
This tutorial is pulled from one of my older posts, because I actually used to do it this way!
Before I knew about the plugin, I did a lot of trying to figure out how to create a sidebar. Of course, I googled it many times, and I’ve read a lot about how you can ‘fake’ a sidebar just using blocks. This works really well for your main blog page, but my biggest concern was if I was to put a ‘fake’ sidebar on every single one of my blog posts using blocks, what if I needed to then change something on the sidebar? I would have to go back through 100’s of posts and do it manually? Nuh uh! That’s not happening!
So ideally, I wanted to build my sidebar in one place and if I needed to make a change on it, it would populate throughout my whole site/blog.
I figured it out, and I’m going to tell you my secrets!
First we will need to add a Blog page to the Not Linked section of our website. I’ve named mine Sidebar, for reference.
I’ve roughly designed by sidebar and decided this is what I want it to look like:
Now I save all of the images for the side bar individually:
Top Image:
Line break:
Buttons:
Now we’re going to add a new Blog Post (in our new Blog) for every image we want in our Sidebar. I have 5 images, so I will be adding 5 new blog posts. Because our sidebar will display the newest post at the top and the oldest at the bottom, first add whatever you want at the bottom of your sidebar. For me this will be:
For the next few blog posts we add we don’t need to worry about adding any titles or body text to these blog posts. Everything that we need to create the sidebar will be under the “Options" tab.
For each button, I will upload the thumbnail image and check “Post title should link to URL” and enter a URL above. You can enter your Squarespace Category URL which would be something like https://yourwebsite.com/blog?category=The%20Category%20Name
Or you could go ahead and create new pages for your categories so you can add the sidebar to them. Either way, this button will link to whatever you put in the Source URL box.
I do this for all 3 of my buttons.
Still working my way up from the bottom, now I want to put the word “Categories” and the black line.
I again create a new blog post for this section.
You can see below, I’ve added the black line as a Thumbnail image, and I have added the word Category in the excerpt box. I have styled this, making it a Header 3 and Bold by using the text style tools. I have also added some space above and below it by holding down Shift and clicking Enter and creating a line break.
Now I want to add the main picture of me and some text. You can see below that I have added the thumbnail image, some formatted text and I have linked my image to the about me page, so if people want to know more, they can click on my image.
Now we get to put it all together!
We’re going to use a Summary Block to create our ‘fake’ sidebar, and a Summary Block to create our Blog.
If you’re currently just using a standard 7.0 Brine blog page, you will have to create a new regular page to make this work, as you can’t add blocks to a standard Blog page.
You can add a Summary Block and choose your Blog. This will show the last 30 Blog posts. You can also filter this by category or tags. If you’re not familiar with using the Summary block for your blog, then head over to this post:
Related Posts > How to Customize Your Blog Design in Squarespace
I go into detail about how you can use the Summary block to replicate your blog and change its layout.
Once you have set up your blog, you can add a Summary Block Wall for your Sidebar.
You’ll be able to see your sidebar forming, but you will need to make some adjustments. These adjustments are all up to you, but I will show you my settings:
Yay! How cool is that? We’re done! Now you can go ahead and add the Sidebar where ever you want, including all of your Blog Post pages.
I love creating a sidebar this way because if you want to add a button, update a button, change a link, add a new profile picture, you can do it all from one place instead of having to change it on EACH blog post!
This is what my final sidebar looks like:
IMPORTANT TIPS:
TIP: Read my post on totally changing your blog page with Summary Blocks.
TIP: If you want to go back and add anything, it will automatically go to the top of the sidebar and will probably mess up the order of things. The way to correct the order of the blog posts/sidebar is to change all of the Blog Posts to Drafts. Then, go back and Publish them in the order of bottom to top. After you publish them in that order, they will stay there.
TIP: Every thumbnail image will either automatically link back to the blog post, or will link to the Source URL you enter. If you don’t want the image to link anywhere, remember to add # hashtags to the Source URL.
TIP: Remember to format your text in the excerpt with H1, H2, H3, bolds and italics etc.
TIP: You can add this sidebar to any pages you want, including category pages. Just duplicate the page you’ve already set up, then change the Summary Block to filter by Category (enter the category that you want the page to be).
TIP: I like to add a Search Bar to the bottom of my sidebar. You can also add things like Instagram and a Summary Block to display your most popular posts. Add these manually with blocks to the bottom of your sidebar.
TIP: Another way to add a “recent post” or “popular post” to your sidebar is to add it as a section (like we added the other components of the sidebar) and then swap it out whenever you want. You can create a custom thumbnail for it, link back to the post with the Source URL and put some text above it that says “Popular Post”. Once you have set this up you can just go back into the Blog when you want to change it, edit the particular post and change the image and Source URL.
TIP: Avoid putting your sidebar on the left hand side on the blog, and keep it on the right. This is because: if it's on the left hand side of the blog readers on their mobile will have to scroll all the way through your sidebar stuff before they get to the actual post - not ideal!
I hope this tutorial was useful! It you enjoyed the tutorial, make sure to share it with friends or use the image below to Pin on Pinterest!
Loved that post? Check out some more design tips below!
How to create a vertical line in Squarespace (7.0 & 7.1)
How to create rounded corners & unique shapes for your images in Squarespace (no coding!)
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
How to add a button to your header navigation in Squarespace
