Categories
Squarespace Squarespace Plugin

Squarespace Plugins: Create custom Headlines for Tag and Category Pages

Follow to see how I create custom headlines image and caption for the tagged and categorized blog list

You may already feel familiar with Blog feature of Squarespace, when create new /blog page, you got a list of blog posted and can also manage them in tags and categories to make them organized.

The problem is, the tag and category page share the same template with /blog page, that mean if you set up a headlines section on /blog, it will stay the same on all across tag and category pages. Here is how I change that behavior with custom code injection

Since the /blog page will stay in same template across tag and category pages, the only different here is the url of each page, you may see these url before:

  • https://your-site.squarespace.com/blog?category=LIFESTYLE&tag=TRAVEL
  • https://your-site/blog/category/LIFESTYLE
  • https://your-site/blog/tag/TRAVEL

So the plan is to read the url to get the tag and category name to update the image and text accordingly

  • Take advantage of window.location.href to get the url parameter for getting the correct category name
  • Upload images as background in Custom Css section
  • Create a dictionary in javascript array to define the category name and their correct image, caption and subtitle

The script fires when page load, so I made the headlines element hidden on page load and only show them after the image has been loaded

Using this same technique, the tag and category blog page can be modify to become different from each other and make your website display in a unique way as you want! Kindly drop me a message of you want a similar feature on the site

Leave a Reply

Your email address will not be published. Required fields are marked *