natural design and informed content

Squarespace: Sort Categories and Tags Alphabetically

In Squarespace 6, sorting seems to have taken a back seat. This is unfortunate since alphabetized lists often provide the best user experience.

jQuery

First add jQuery. Then, in Settings → Code Injection → Header:

Categories

//Add this inside $(document).ready(function(){

//Find out if a category list exists on the page
if( $('.postsbycategory-block').length != 0 ){
// Create empty array for later use
var categories = [];
// Loop through each list item and get its name
$('.postsbycategory-block ul li').each(function () {
categories.push({
categoryName: $(this).find('span.name').html(),
listItem: $(this)
});
});
// Sort the array by name
categories.sort(function(a,b) {
// Ensure a case-insensitive sort
var c = a.categoryName.toUpperCase();
var d = b.categoryName.toUpperCase();
return (c > d) ? 1 : ((d > c) ? -1 : 0);
});
// Loop though each in order and move to end of HTML list.
// That way, the first alphabetically ends up on top
$.each(categories, function(index, object){
object.listItem.appendTo(object.listItem.parent());
});
}

Tags

//Add this inside $(document).ready(function(){
  
  //Find out if a tag list exists on the page
  if( $('.postsbytag-block').length != 0 ){
    // Create empty array for later use
    var tags = []; 
    // Loop through each list item and get its name
    $('.postsbytag-block ul li').each(function () {
      tags.push({
        tagName: $(this).find('span.name').html(),
        listItem: $(this)
      });
    });
    // Sort the array by name
    tags.sort(function(a,b) {
      // Ensure a case-insensitive sort
      var c = a.tagName.toUpperCase();
      var d = b.tagName.toUpperCase();
      return (c > d) ? 1 : ((d > c) ? -1 : 0);
    });
    // Loop though each in order and move to end of HTML list.
    // That way, the first alphabetically ends up on top
    $.each(tags, function(index, object){
        object.listItem.appendTo(object.listItem.parent());
    });
  }

With this script, I was able to sort my blog post categories alphabetically (a topic of conversation the Squarespace 6 forums).

Let me know how it works on your Squarespace blog.