Moodle Theme Edutor – How To Reorder The Frontpage Theme Sections

Our latest Moodle theme Edutor comes with ten professionally designed sections you can add to your site’s front page. All of the sections can be easily configured and customised to meet the marketing and branding needs of any corporate training and higher education LMS sites.

The sections are as shown in the list below (from top of the page to bottom of the page). The order of the sections are predetermined by the theme. If you want to change the order of the sections you will need to be comfortable making code changes to one of the theme template files. Also it’s important to keep note of the changes and re-apply them after upgrading the theme.

Edutor Frontpage Sections

Below are the steps you need to take to make code changes to reorder the sections.

Step 1 – Find the template file

Go to the theme folder and find the template file controlling the layout of the front page: edutor > templates > frontpage.mustache

Step 2 – Edit the template

Open your desired template file in a text editor and change the order of the relevant code snippets.

Below is a list of the code snippets for displaying the frontpage sections.

Hero Section

moodle-edutor-theme-frontpage-section-1

{{!-- fp_hero (theme class function) -- }}
{{{ output.fp_hero }}}

Logos Section

moodle-edutor-theme-frontpage-section-2

{{!-- fp_logos (theme class function) --}}
{{{ output.fp_logos }}}

Search Section

moodle-edutor-theme-frontpage-section-3

{{!-- fp_search (theme class function) --}}
{{{ output.fp_search }}}

moodle-edutor-theme-frontpage-section-4

{{!-- fp_featuredblocks (theme class function) --}}
{{{ output.fp_featured }}}

Categories Section

moodle-edutor-theme-frontpage-section-5

{{!-- fp_categories (theme class function) --}}
{{{ output.fp_categories }}}

Call-To-Action Section

moodle-edutor-theme-frontpage-section-6

{{!-- fp_ctasection (theme class function) --}}
{{{ output.fp_ctasection }}}

FAQ Section

moodle-edutor-theme-frontpage-section-7

{{!-- fp_faq (theme class function) --}}
{{{ output.fp_faq }}}

Promo Section

moodle-edutor-theme-frontpage-section-8

{{!-- fp_promo (theme class function) --}}
{{{ output.fp_promo }}}

Teachers Section

moodle-edutor-theme-frontpage-section-9

{{!-- fp_teachers (theme class function) --}}
{{{ output.fp_teachers }}}

Testimonials Section

moodle-edutor-theme-frontpage-section-10

{{!-- fp_testimonials (theme class function) --}}
{{{ output.fp_testimonials }}}

For example, say you want to display the Featured Section below the Hero Section and above the Logos Section, you can edit the file frontpage.mustache and move the Featured section snippet in the template file as shown in the screencast below:

moodle-theme-edutor-how-to-reorder-frontpage-sections-example-gif

Below is a figure showing you the frontpage before and after the changes:

moodle-theme-edutor-how-to-reorder-frontpage-sections-example

Advanced

By default, all of the theme sections are positioned above Moodle’s main content area (eg. Available Courses, News, Forum etc). Want to move some of the theme sections below the main content area? You can move the relevant theme section code snippets below code
{{{ output.standard_after_main_region_html }}}

The screencast below shows you how to move the Teachers Section and the Testimonials Section below Moodle’s main content area.

moodle-theme-edutor-how-to-reorder-frontpage-sections-example-advanced

Important note:

Any changes you made to the theme files will need to be re-applied when you upgrade your theme later. So make sure you keep a note of what you’ve changed so you can re-apply the changes quickly when it’s time to upgrade.