As you add more and more tags to your blog, the list starts looking unmanageable so you want to order it alphabetically to have a clear view. Concrete CMS doesn’t provide you with an easy way to do that but fear not we’re going to hack our way to alphabetical order.

For the purpose of this article we’re going to be working with Tags. Given that Tags, in concrete CMS, are options of a Select Attribute, the following trick will work with any Select Attribute iso feel free to re-use it as needed.

Getting to your Tags attribute

First find your Tags attribute. 

The Tags attribute is a page attribute so you’ll find it by navigating to  /dashboard/pages/attributes from your right-hand menu.

Page attributes list in concrete CMS

Open your Tags attribute settings by clicking on the attribute.

Ordering your tags Manually

At the bottom of the settings page you will see your list of tags.

Values for the Tags attribute in concrete CMS

First, without using any hack, you’ll quickly notice that you can order them manually. Provided you don’t have too many, that’s as good an option as any.

Just click on the tag and drag it up and down the list to the position you want it.

If you have lots of them or simply don’t feel like drag-and-droping, keep reading.

Ordering your tags automatically

Now we’re entering hack territory.

Like I said before concrete CMS doesn’t give you a way of doing this so we need to get creative.

We’re going to order the list simply by running a bit of JavaScript straight from the browser’s console.

Open your browser’s console by pushing either F12  or Ctrl+Shift+i. If you’re on a Mac or are using an esoteric browser look for “Developer tools”.

Make sure you’re looking at the console itself by clicking on the “Console” tab.

Chrome's console

Once you’re there simply copy the code below, paste it in the console and push “Enter” on your keyboard.

$('.akSelectValueWrap').sort(function(a, b) {
  if ($(a).find('input[name^=akSelectValueOriginal]').val() < $(b).find('input[name^=akSelectValueOriginal]').val()) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('#attributeValuesWrap');

Chrome's console with code in it

That’s it, your list is ordered. Do not forget to save otherwise the new order will be lost.

Tags ordered alphabetically

 

Get your free consultation

Got a project that could use specialised eyes on? Tell me more about it and let's discuss how to get that ball rolling.

Share the details →

Get emergency help

Every single day your website acts up, you lose income opportunities. I can get your site back to normal right away.

Get help now →