Create Sortable List of Pages

Posted by ErichSteinboeck on 28 Jun 2008 17:35, last edited by Helmut_pdorf on 17 Mar 2016 08:33

Tags: ascending descending include list order pages sort sortable-lists

rating: +15+x

How to Create a Sortable List of Pages

Listing pages that you have are among the features that you want to have in your site for facilitating navigation among pages. It is true that you can create indexes to help the user find a particular page, or he can Search for a page or use the Tags cloud. However, having a list that gets automatically populated whenever a page is added or edited, may prove handy and worthy.

Wikidot offers the function List all pages, which lists all pages alphabetically and, thus, may do the trick. However, as its name says, it lists all the pages. This may prove not useful for two reasons:

  • On the one hand, some pages are not for users (such as administrative pages pertaining to the categories system: or admin:). Displaying them together with the remaining pages simply clutters the list.

  • On the other hand, the resulting list is simply an alphabetical one, neither organized in categories nor with possibilities to be searched for edit date or creation date.

There is a way of creating sortable lists that solves above limitations. The procedure involves a four-step setup.

How to Set Up Sortable Lists of Pages Step-by-Step

Steps 1 & 2 are a one-time setup procedure to create the support for all individual Sortable lists of pages.

Step One: Set Up a ‘Base Page’

In this step you create a new page in an inc: category to be called list-pages-template. Do the following:

  • Create a new page called inc:list-pages-template
  • copy and paste (or type) the following module syntax onto the page (copy and paste from the html version)
{$heading}[[# A_{$anchor}]]
[[size {$size}]]
[[module ListPages category="{$category}" perPage="{$perPage}" limit="{$limit}" _
separate="false" {$attributes} _
prependLine="[[include inc:list-pages-prepend page={$page} | anchor={$anchor} | styleT={$styleT} | styleE={$styleE} | styleC={$styleC}]]" _
appendLine="[[/table]]" _
[[row]][[cell style="{$styleT}"]][{$urlEdit}] {$urlView}[[/cell]][[cell style="{$styleE}"]]%%date_edited|%e %b %Y, %R%%[[/cell]][[cell style="{$styleC}"]]%%date|%e %b %Y, %R%%[[/cell]][[/row]]

Step Two: Set Up a ‘prepend page’

  • Create a new page called inc:list-pages-prepend
  • Copy and paste (or type) the following code onto the page:
 [[table]][[row]][[cell style="{$styleT}"]]//Page Name//[[/cell]][[cell style="{$styleE}"]]//Last Edited//[[/cell]][[cell style="{$styleC}"]]//Date Created//[[/cell]][[/row]][[row]][[cell style="{$styleT}"]][[size 80%]]Sort [/{$page}/order/titleAsc#A_{$anchor} ascending]/[/{$page}/order/titleDesc#A_{$anchor} descending][[/size]][[/cell]][[cell style="{$styleE}"]][[size 80%]]Sort [/{$page}/order/dateEditedDesc#A_{$anchor} newest first]/[/{$page}/order/dateEditedAsc#A_{$anchor} oldest first][[/size]][[/cell]][[cell style="{$styleC}"]][[size 80%]]Sort [/{$page}/order/dateCreatedDesc#A_{$anchor} newest first]/[/{$page}/order/dateCreatedAsc#A_{$anchor} oldest first][[/size]][[/cell]][[/row]]

Step Three: Set Up a ‘Front-End’ Page

This front-end page specifies default values for all include parameters of your lists. This will make it much easier to create individual and customized //Sortable list of pages", as you only have to specify the relevant parameters on each [[include …]] statement in these individual and customized lists (see step 4). Do as follows:

  • Create a new page called inc:list-pages
  • Copy and paste (or type) the following code onto the page:
 [[include inc:list-pages-template
heading={$heading} | heading=++ Category "{$category}" |
anchor={$anchor} | anchor={$category} |
category={$category} | category=_default |
page={$page} | page=system:list-pages |
perPage={$perPage} | perPage={$limit} |
limit={$limit} | limit=10000 |
attributes={$attributes} | attributes=order="@URL" |
styleT={$styleT} | styleT=padding-right:1em |
styleE={$styleE} | styleE=text-align:right; padding-right:1em; width:12em |
styleC={$styleC} | styleC=text-align:right; width:13em |
urlEdit=/%%fullname%%/edit/true edit |
urlView=: %%title_linked%% |
size={$size} | size=100% |

Once you have done this, the page will display a list of the pages in the "_default" category. However, don't think of this as your final list. This page is only part of the basic setup, and, thus, should remain "hidden." For creating Sortable lists of pages that you can really use, you need to continue into step four.

Step Four: Create Individual Sortable Lists of Pages

You may need just one Sortable list of pages, or you might want to create more than one. You might prefer to create individual lists in different pages, or just several lists in the one page. Finally, you might want to customize your lists (e. g. one that lists all pages for some selected category, or one that lists all pages for all categories). This third step allows you to do all of that by way of creating individual Sortable lists of pages customized to your needs.

Let's talk about customization first. You can customize each Sortable list of pages according to the parameters shown in the following table (see some examples in the next section):

Parameter Default1 Description
page system:list-pages The name of the "Sortable List of Pages" page you are creating; i. e. the page where you use [[include inc:list-pages ...]]
category "_default" A category name or category names as defined in the module ListPages documentation. Pages will be listed from this/these category/ies. Note that you cannot use the alias categories
heading ++ Category category Any Wikidot text to be used as a header
anchor category If the (list of) category/ies include any characters except "A/a" through "Z/z", "0" through "9", "-", "_", ".", or "%", a unique text string must be specified to be used as an "anchor" for generated links. An anchor prevents the page from scrolling to the top when a user clicks any of the sort links. For example, if "category=*" use "anchor=all"
limit 10000 the maximum number of pages (i. e. lines) that will be listed as defined in the module ListPages documentation
perPage limit the number of maximum of pages (i. e. lines) that will be listed before automatic ListPages pagination starts. As defined in the module ListPages documentation
attributes rssEmbed="false" rssShow="false" Any required additional ListPages attributes as defined in the module ListPages documentation
styleT padding-right:1em Any CSS style attributes for the first column (Page Name). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the first column.
styleE text-align:right; padding-right:1em; width:12em Any CSS style attributes for the second column (Last Edited Date). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the second column.
styleC text-align:right; width:12em Any CSS style attributes for the third column (Creation Date). Note that due to a Wikidot parser problem this style attribute currently cannot be applied to the header row of the third column.

To set up an individual and customized Sortable list of pages you need to do the following:

  • Create a new page that will hold your customized list (or lists, if you code several of them in the same page).
  • Include the "front-end" page that you created in step 2 using an [[include inc:list-pages ...]] statement (see Examples below).
  • Write down the parameters that you require for customizing your list (write them as parameter=value |, as shown in the examples in the next section).

The most important parameter — page — is the name of your actual individual page (i. e. this new page that you have just created), so that the different sorting options work within the same page.

All other parameters are optional, and not writing them simply means that the "default" value of the parameter will be displayed instead. Customizing your list means, basically, writing down those parameters that you require (and their values).

You can create Sortable lists of pages in different pages, but you can also display several of them in a single page (as in the example below) by simply repeating the procedure of step three (i. e. syntax and customization) as required.

Note: the pages that you create in step three do not necessarily need to be within the inc: category. It can be in any category, e. g. the _default: category. As far as in any of those pages you include the inc:list-page page (your "front-end" page, see step 2), you should be alright.


Here are some examples of customized Sortable list of pages. To the left of the table is the syntax that was written. To the right, the resulting output. You can now click on each sorting option (ascending / descending, etc) and see it working!

What you type … What you get …
 [[include inc:list-pages 

Category “_default”

Page Name Last Edited Date Created
Sort ascending/descending Sort newest first/oldest first Sort newest first/oldest first
view-source14x14.png What is hot at Wikidot 20 Nov 2017 01:59 07 Nov 2014 15:18
view-source14x14.png IRC Chat Web Client: #wikidot 28 Jun 2014 07:37 24 Oct 2012 09:37
view-source14x14.png IP Address Table 26 Feb 2013 01:19 01 Sep 2012 02:06
view-source14x14.png 404 Hmmm... we couldn't find that one! 28 Jul 2012 03:26 26 Jul 2012 12:53
view-source14x14.png What Is A Wiki Site 19 Aug 2014 09:41 09 Apr 2012 15:11


 [[include inc:list-pages 
page=howto:sortable-list-of-pages | 
category=howto |
heading=++ Community How-To's]]

Community How-To's

Page Name Last Edited Date Created
Sort ascending/descending Sort newest first/oldest first Sort newest first/oldest first
view-source14x14.png Listing Un-Parented pages 04 Sep 2015 07:51 04 Sep 2015 07:49
view-source14x14.png Making a site multi-lingual 04 Sep 2015 07:53 06 Jul 2015 06:30
view-source14x14.png Keep hidden tags really hidden in tags area 22 Feb 2015 09:59 22 Feb 2015 09:54
view-source14x14.png Multi-PM Bookmarklet 06 Feb 2015 10:36 06 Feb 2015 08:47
view-source14x14.png Using variables as the conditions for (in)visible content 07 Dec 2014 07:18 07 Dec 2014 02:57


 [[include inc:list-pages
page=howto:sortable-list-of-pages | 
category=* |
anchor=all |
heading=++ All Categories]]

All Categories

Page Name Last Edited Date Created
Sort ascending/descending Sort newest first/oldest first Sort newest first/oldest first
view-source14x14.png Wishes You a blessed and Joyful New Year 12 Jan 2018 08:30 29 Dec 2017 17:29
view-source14x14.png Bootstrap'd Home Page 16 Nov 2017 12:59 16 Nov 2017 12:48
view-source14x14.png Home Page 16 Nov 2017 13:05 16 Nov 2017 10:52
view-source14x14.png Admin-sandbox:Contact 15 Nov 2017 10:11 15 Nov 2017 10:11
view-source14x14.png Genealogy Template (new app!) built and published 10 Dec 2017 09:34 01 Sep 2017 14:35


How it Works

This How-To makes use of two ideas presented in


A real-life application of this idea can be found in the Community Wikidot List all Pages.



ErichSteinboeckErichSteinboeck. Please visit his/her userPage.

JDPerezgonzalezJDPerezgonzalez. Please visit his/her userPage.

Related articles


Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.