Clear all

[Solved] Want to change the order of a layout section but can't find the right file to edit

3 Posts
2 Users
0 Reactions
Posts: 35
Topic starter
Trusted Member
Joined: 3 years ago

I'm working on customizing my forum experience based on the Threaded Layout and Extended Layout.

The category is set to Threaded Layout as I need the threaded setup on the post page.

That said, I'm using in my customization the topic.php and forum.php from the Extended Layout.

When I click through the pages I see:

  • the list with subforums (I added a title to it on the forum-sub.php)
  • followed by the head-bar
  • and then the list with topics.

Where do I need to look to be able to adjust that order to:

  • head-bar
  • the list with subforums
  • the list with topics
2 Replies
Posts: 35
Topic starter
Trusted Member
Joined: 3 years ago

As a temp solution I applied some JS but ideally I would do this with an overwrite of a file, so:

I'm still open for the suggestion which file to edit/override so I can get the prefered order without relying on JS.

/* temp solution to reorder towards: header - subforums list - topics */
document.addEventListener('DOMContentLoaded', function() {
    // select the parent container
    var contentDiv = document.querySelector('.wpforo-content');
    // select the elements to be rearranged
    var forumsDiv = document.querySelector('.wpf-subforums');
    var subforumSepDiv = document.querySelector('.wpf-subforum-sep');
    var headBarDiv = document.querySelector('.wpf-head-bar');

    // check if all elements exist
    if (contentDiv && headBarDiv && forumsDiv) {
        // move `wpf-head-bar` to the top
        contentDiv.insertBefore(headBarDiv, contentDiv.firstChild);
        // move `wpf-subforums` below `wpf-head-bar`, only if `headBarDiv.nextSibling` exists; otherwise, it appends at the end
        if (headBarDiv.nextSibling) {
            contentDiv.insertBefore(forumsDiv, headBarDiv.nextSibling);
        } else {
    } else {
        // uncomment the line below in case you want to troubleshoot
        // console.log("One or more elements were not found.");
1 Reply
Joined: 6 years ago

Support Team
Posts: 4416


We're really sorry, but the forum customization is out of our free support.

We recommend purchasing a pro support and ask the pro-support team to customize the layouts: