Promoted Articles - Changing the order (custom sorting)

This tip will provide you some ideas to control the order promoted articles are listed. You will be able to change the order, overriding the default sorting criteria.

Shout out to @David Verhoff for asking this question which helps us to come up with this tip.

This tip will work for themes (which were created before Copenhagen was launched), and of course for Copenhagen Theme (and themes based on it).

Important: This tip requires editing template code (html, css), hence we request you to take backup of file(s) before you start making changes; better export entire theme as zip (if you are using new theming center). It goes without saying, following top

Standard Disclaimer: You may use this tip (code and instructions) as you wish. On the other hand, we (Diziana) the author of this tip (code and instructions) warrant the tip to be useful for any particular purpose. If you use following tip (code and instructions), we hope that you will thoroughly test that it works properly with your help-center. And if you find a defect in the tip, please us know!

Step 1: Edit the template(s) to have following code inside "{{#if promoted_articles}}":

Old/legacy or custom themes (before Copenhagen):

{{#if promoted_articles}}
<section class="articles">
  <h3>{{t 'promoted_articles'}}</h3>
  <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item" {{#each labels}}
      {{#is identifier "sortorder:1"}}data-position="1"{{/is}}
      {{#is identifier "sortorder:2"}}data-position="2"{{/is}}
      {{#is identifier "sortorder:3"}}data-position="3"{{/is}}
      {{#is identifier "sortorder:4"}}data-position="4"{{/is}}
      {{#is identifier "sortorder:5"}}data-position="5"{{/is}}
      {{#is identifier "sortorder:6"}}data-position="6"{{/is}}
      {{#is identifier "sortorder:7"}}data-position="7"{{/is}}
      {{#is identifier "sortorder:8"}}data-position="8"{{/is}}
      {{#is identifier "sortorder:9"}}data-position="9"{{/is}}
      {{#is identifier "sortorder:10"}}data-position="10"{{/is}}
      {{#is identifier "sortorder:11"}}data-position="11"{{/is}}
      {{#is identifier "sortorder:12"}}data-position="12"
         {{else}}data-position="13"{{/is}}
    {{/each}}>
      <a href="{{url}}">
        {{title}}
      </a>
    </li>
    {{/each}}
  </ul>
</section>
<script>
$(function() {
  $(".promoted-articles li").sort(sort_li).appendTo('.promoted-articles');
  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;}});
</script>
{{/if}}

Copenhagen (default) Theme or themes based on it:

{{#if promoted_articles}}
<section class="articles">
  <h3>{{t 'promoted_articles'}}</h3>
  <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item" style='{{#each labels}}
      {{#is identifier "sortorder:1"}}order:1{{/is}}
      {{#is identifier "sortorder:2"}}order:2{{/is}}
      {{#is identifier "sortorder:3"}}order:3{{/is}}
      {{#is identifier "sortorder:4"}}order:4{{/is}}
      {{#is identifier "sortorder:5"}}order:5{{/is}}
      {{#is identifier "sortorder:6"}}order:6{{/is}}
      {{#is identifier "sortorder:7"}}order:7{{/is}}
      {{#is identifier "sortorder:8"}}order:8{{/is}}
      {{#is identifier "sortorder:9"}}order:9{{/is}}
      {{#is identifier "sortorder:10"}}order:10{{/is}}
      {{#is identifier "sortorder:11"}}order:11{{/is}}
      {{#is identifier "sortorder:12"}}order:12{{/is}}
    {{/each}}'>
      <a href="{{url}}">
        {{title}}
      </a>
    </li>
    {{/each}}
  </ul>
</section>
{{/if}}

Step 2:

Edit your promoted articles to add labels, e.g. sortorder:1, sortorder:2, sortorder:3, ......., sortorder:12;

The article with sortorder:1 will appear on the top. If two articles have same sortorder:X label, those will appear together one after other.

Note: The tip (code above) only include sorting of 12 promoted articles, but it should work if you put sortorder:12 on other promoted articles -- those will appear together; why not play with applying same label to more than one article and see how it works. It goes without saying that you can extend the code as you wish.

We leave that to you, do share your findings here so others can learn from other.

Step 3:

Edit CSS (styles.css) to add following line at the bottom of the file. We assign a default order

.promoted-article-item {order:100;}

Note: This rule isn't required for legacy version of themes, i.e. adding it won't have impact.

Step 4: Save files, Preview and Publish (if all works)

Congratulations! Your promoted articles are sorted the way you want, instead of default sort-order which is determined by the position of categories, sections and articles.

Please let us know if you face any issue setting up things as instructed above. Of course, we will love to

hear your feedback; please leave those as comments below.

Cheers

Team Diziana

Diziana is creator of awesome ready-to-go Zendesk Help Center Themes, and has helped hundreds of organizations/companies with Help Center Branding and Customization.