Alphabetizing Blog Posts on Squarespace in Brine Templates

Blogs

Jun 3

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.

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>

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!