How to move the comment form above the comment list in LearnDash Focus Mode

WordPress comments consist of two main components: the comment form and the comment list. By default, the comment form appears below existing comments. This tutorial explains how to reorder these elements in LearnDash Focus Mode.

Prerequisites

The tutorial assumes:

• You’re using LearnDash Focus Mode (not relying on theme comment functions)
• No LearnDash template overrides are in place
• You’re using built-in WordPress comment functions
• You’re not using alternative plugins like wpDiscuz

Method #1: Custom CSS

The simplest approach uses CSS Flexbox to reorder elements without modifying HTML markup.

Basic solution:

.ld-focus-comments {
	display: flex;
	flex-direction: column-reverse;
}

Alternative with explicit ordering:

.ld-focus-comments {
	display: flex;
	flex-direction: column;
}

.ld-focus-comments__form-container {
	order: 1;
}

.ld-focus-comments__comments {
	order: 2;
}

The first approach is more elegant for simple reordering. The second provides greater control if further customization is needed.

Consideration: Internet Explorer 11 has limited Flexbox support. Options include using a JavaScript polyfill, accepting IE incompatibility, or implementing a template override instead.

Method #2: Template Overrides

For a permanent structural change, override the template file by copying from:

wp-content/plugins/sfwd-lms/themes/ld30/templates/focus/comments.php

To:

wp-content/uploads/learndash/templates/ld30/focus/comments.php

Create necessary subdirectories as needed. Then physically relocate the comment form code above the comment list code while preserving action hooks and logic integrity.