web design by Mary Shaffer
Mary-11.jpg

Free Squarespace Hacks

my secret(-ish) library
of squarespace hacks

One of the greatest joys of my job is coming up with new Squarespace hacks to get the results my clients want when Squarespace doesn’t offer them as part of their built-in editing interface. I’ve pieced together many of these solutions from other code snippets I’ve found online, so I wanted to return the favor and offer you some of my favorite CSS and Javascript solutions. Enjoy!

Love, Inscape


 

Alphabetizing Blog Posts on Squarespace in Brine Templates

I’m excited to share this Squarespace hack because when I was searching for a solution I found a lot of people looking for this without an answer! My Javascript solution to alphabetize a list of blog posts works on templates in the Brine family. I adapted it from a code I found, possibly on the Circle Forum, that worked in Bedford I think. The idea here is if you want to use a blog more like a directory, as I did here, instead of a chronological list.

Screen Shot 2019-06-11 at 3.18.26 PM.png

Step 1: Adjust your Blog Settings to show the maximum number per page, which is 20. This is because the script can only alphabetize posts listed on one page.

Note: If the directory you are creating has more than 20 items, I encourage you to purchase Michael Mashay’s Chrome Extension for Squarespace, which allows you to override Squarespace’s built-in limit of 20 blog posts per list page. The Pro Extension has tons of other awesome features… I don’t know what I’d do without it! Well worth your money!

Step 2: Click on the Advanced tab in your Blog Settings and insert the following code in the Page Header Code Injection Area:

d<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
  <script type="text/javascript">
      $(document).ready(function(){
          if( $('.BlogList-item').length != 0 ){
              var categories = []; 
              $('.BlogList-item').each(function () {
                categories.push({
                  categoryName: $(this).find('.BlogList-item-title').html(),
                  listItem: $(this)
                });
              });
              categories.sort(function(a,b) {
                var c = a.categoryName.toUpperCase();
                var d = b.categoryName.toUpperCase();
                return (c > d) ? 1 : ((d > c) ? -1 : 0);
              });
              $.each(categories, function(index, object){
                  object.listItem.appendTo(object.listItem.parent());
              });
          }
      });
  </script>
Screen Shot 2019-06-11 at 3.26.37 PM.png

Step 3: You will notice that when you click on an individual post, the Pagination links at the bottom will not be alphabetized; they will still be sorted by post date. Alas, no hack is perfect, and I’ve been unable to solve this problem. If it bothers you, you can hide the pagination by inserting the following into the Blog Settings—>Advanced Page Header Code Injection area (the same place you put the script in Step 2):

<style>
  .BlogItem-pagination.clear {visibility:hidden !important;}
</style>

Note: CSS normally goes in the Custom CSS area, but I’m suggesting adding it to your blog’s Header Code Injection area in the event that you have more than one blog on your site and you only want to alphabetize/hide pagination for this specific blog.

That’s it! Enjoy!