Custom Topic Sort Order Button

Customization Theme component

AI-generated summary

The discussion revolves around the Custom Topic Sort Order Button theme component, which adds a sorting button next to the ‘Create Topic’ button, enabling users to change topic list order, especially useful on mobile. The component, developed by Don, allows customization of sorting options via icons, labels, actions, and order. Users Moin and Lilly provided feedback, with Moin contributing additional sorting options like op_likes and posters, which were merged into the repo Don confirmed. Lilly noted the dropdown doesn’t close after selection, which is intentional, and the button appears on the categories page without functionality—this was addressed. eisammy reported a UI bug on mobile where the modal shifts upon selection, indicating a potential issue with DOM loading.

1
:information_source: Summary Topic Sort Order Button
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository GitHub - VaperinaDEV/custom-topic-sort-order-button: Add a custom topic sorting button to the topic list. · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Hello :waving_hand:

This theme component adds a new button next to the Create Topic button, allowing you to change the topic list order. One of the main goals was to make topic ordering easily accessible on mobile devices as well and themes where the topic list header section is hidden.

Screenshot 2025-08-27 at 13.44.08
Screenshot 2025-08-27 at 13.44.08240×273 8.21 KB

Clicking on an item will show the sort order direction (ascending or descending) on the right side of the item.

Descending (icon) Ascending (icon)
Descending
Descending250×273 8.56 KB
Ascending
Ascending240×263 8.57 KB

Settings

This component contains several settings for customization.

Screenshot 2025-08-27 at 13.45.14
Screenshot 2025-08-27 at 13.45.14651×507 39.5 KB

Object setting

With the object setting you can change each item’s icon, label, action and order.

setting page
setting page890×341 18.3 KB

  • icon → icon name from the Discourse icon set
  • label → translation key (see /admin/customize/site_texts)
  • action → sorting action identifier
  • order → position of the item in the dropdown

Example for label:

likes-label

In this case the label field should be: js.likes

18 Likes
It’s unclear what determines topic order in category ‘Latest’ view
2

Great component! I thought about creating something similar.

I noticed you did not add a license to the GitHub repo.

Would you accept a pull request that adds more order options like op_likes?

5 Likes
3

this is a great component Don, nice work! thanks for creating this :star_struck:

6 Likes
4

Sure! PR welcome thanks @Moin :hugs:

5 Likes
5

One thing I noted is that I sort of expect the drop down to disappear after I’ve clicked one of the selections. I have to click outside it after the view changes to make it go away. But maybe that is by design - I’m not sure lol.

3 Likes
7

Yeah this is by design — if you click the same item again the sorting direction changes.

5 Likes
8

yea i was thinking that after playing with it more. i love this component - very useful for me on my own instance. thanks again :hugs:

4 Likes
9

I notice the sort by button appears on the categories page, but doesn’t do anything there. could probably hide it in that case.

3 Likes
10

Thanks Lilly :hugs: I’ve merged it: DEV: Remove sort button on categories page · VaperinaDEV/custom-topic-sort-order-button@1325272 · GitHub

4 Likes
11

It’s merged.

Screenshot_20250908_142040_Firefox
Screenshot_20250908_142040_Firefox386×732 44.1 KB

Icons and labels I chose for the additional order options 
{
	"icon": "custom-heart-circle-one",
	"label": "js.category.sort_options.op_likes",
	"action": "op_likes"
},
{
	"icon": "user-group",
	"label": "js.posters",
	"action": "posters"
},
{
	"icon": "far-square",
	"label": "js.category.sort_options.category",
	"action": "category"
},
{
	"icon": "square-plus",
	"label": "js.topic_voting.vote_title_plural",
	"action": "votes"
}

I did not add these to the default configuration as I think these are less common. But when you add them, you can now also order by likes on the first post, number of posters, category ID, and by number of votes when the topic voting plugin is used.

I created an icon for likes on OP so you can distinguish between likes and likes on the first post even when labels are hidden on mobile.

4 Likes
13

at mobile when I choose a option this modal move to top until dom loaded
It’s a UI bug?