How to Create a Moodle Theme, Moodle 4.1 and 4.2!

Moodle

You visit live casino locations in Las Vegas or Atlantic City.  You have played casino games on a blackjack real money website and other casino websites.  Now you are thinking that it might be a good idea to create an online course to teach people how to play different casino games.

You can choose Moodle as your elearning platform.  You look at the standard themes that are available for free, but you decide that you want to create your own theme to better match the needs for your online casino school.

Introduction to Moodle Themes

When you install Moodle, two themes are installed automatically.  The first is the Boost theme, which is a parent theme that all other moodle themes are based upon. 

There is also the classic theme, which is child theme whose parent theme is boost.  So if you want to create new parent theme, use Boost as an example.  If you want to create a child theme, use Classic theme as an example.

What are the different parts of Moodle that can be changed by a theme?

There are two types of pages that can be modified.  The first is the “main pages”.

The version.php files stores which version of moodle your theme depends on, and if there are any dependencies (for example, parent themes).

$MOODLEDIRECTORY/$THEMEDIRECTORY/$THEME/version.php

The mapping of the main pages is stored in the “config.php” file.

$MOODLEDIRECTORY/$THEMEDIRECTORY/$THEME/config.php

The following are the most common list of pages that can be changed. Other pages can also be changed, but we will talk about that later. If you see a directory with the name “core” in it, that is a core a mapping to a non-standard template override.

  • base
  • standard
  • course
  • coursecategory
  • incourse
  • frontpage
  • admin
  • mycourses
  • mydashboard
  • mypublic
  • login
  • popup
  • frametop
  • embedded
  • maintenance
  • print
  • redirect
  • report
  • secure

This is the format for mapping a type of page with the specific “.php” page.

$THEME->layouts = array(
‘standard’ => array(
‘theme’ => ‘boost’,
‘file’ => ‘columns2.php’,
‘regions’ => array(‘side-pre’),
‘defaultregion’ => ‘side-pre’
)

‘popup’ => array(
‘theme’ => ‘boost’,
‘file’ => ‘columns1.php’,
‘regions’ => array(),
‘options’ => array(‘nofooter’ => true, ‘nonavbar’ => true),
),


)
If a page type is not defined, it will take it from it’s parent theme.  So you only have to include the pages that you want to change from the parent theme.

Do you notice the “theme” line in the text above?  You can specify a page from another theme (not just the parent theme or the child theme).  So, say that you like a specific theme that is child a boost, but you like the “frontpage” of a different theme, “cooltheme” … you would just specify “cooltheme” on the “theme” line for the “frontpage”.

Base

Most backwards compatible layout without the blocks – this is the layout used by default.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Standard

Standard layout with blocks, this is recommended for most pages with general information.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Course

Main course page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Course category

Use for browsing through course categories.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Incourse

Default layout while browsing a course, typical for modules.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Frontpage

The site home page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Admin

Administration pages and scripts.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Mycourses

My courses page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Adaptable
  • Moove

Mydashboard

My dashboard page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Mypublic

My public profile page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Login

The login page.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Popup

Pages that appear in pop-up windows – no navigation, no blocks, no header.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Frametop

Used for legacy frame layouts only. No blocks and minimal footer.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Embedded

Used for embedded pages, like iframe/object embedded in moodleform – it needs as much space as possible

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Maintenance

Used during upgrade and install. This must not have any blocks, and it is a good idea if it does not have links to other places – for example there should not be a home link in the footer.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Print

Used when the page is being displayed specifically for printing.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Redirect

Used when a redirection is occurring.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Report

Used for reports.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Secure

Used for safebrowser and securewindow.

List of themes that modify this page:

  • Boost
  • Classic
  • Boost_union
  • Snap
  • Adaptable
  • Moove

Message

Used for safebrowser and securewindow.

List of themes that modify this page:

  • Snap

Are all those files really changing?

Actually, it is not as complex as it seems at first glance.

Let’s look at Boost’s layout directory:

  • columns1.php (popup, frametop, print)
  • columns2.php
  • drawers.php (base, standard, course, coursecategory, incourse, admin, mycourses, mydashboard, mypublic, frontpage)
  • embedded.php (redirect)
  • login.php (login)
  • maintenance.php (maintenace)
  • secure.php (secure)

So in reality, there are only 6 files.

For boost_union:

  • columns2.php
  • drawers.php (base, standard, course, coursecategory, incourse, frontpage, admin, mycourses, mydashboard, mypublic, report)
  • login.php (login)
  • columns1.php (frametop, popup, print )
  • embedded.php (embed, redirect)
  • maintenance.php (maintenance)
  • secure.php (secure)

But since most of this is gotten from the parent theme “boost”, only the file “drawers.php” and “login.php” are the only ones with changes in them.

What themes have been tested for Moodle 4.1 and 4.2?

Moodle 4.1 is the Long Term Support version, but Moodle 4.2 has been updated to use Fontawesome 6.4.2.

  • Adaptable (Moodle 4.1)
  • Boost_union (Moodle 4.1, 4.2)
  • Roshni Lite (Moodle 4.1, 4.2)
  • Almondb (Moodle 4.1, 4.2)
  • Foundation (Moodle 4.1, 4.2)
  • Academi (Moodle 4.1, 4.2) — Includes Enlightlite, Klass, and Eguru
  • Snap (Moodle 4.1)
  • LearnR (Moodle 4.1, 4.2)
  • Enlightlite (Moodle 4.1, 4.2) — discontinued (use Academi)
  • Klass (Moodle 4.1, 4.2) — discontinued (use Academi)
  • Eguru (Moodle 4.1, 4.2) — discontinued (use Academi)
  • Squared (Moodle 4.1)
  • Microsoft 365 Teams (Moodle 4.1, 4.2)
  • Stream (Moodle 4.1, 4.2)
  • Moove (Moodle 4.1, 4.2)
  • Trema (Moodle 4.1, 4.2)
  • Boosted (Moodle 4.1, 4.2)
  • Boost Magnific (Moodle 4.1)
  • Degrade Theme (Moodle 4.1)

Summary

At first glace, it seems as if creating a custom plugin for Moodle is complicated, but in reality, it is quite simple.

Let’s say that you like the plugin moove, so you start with the moove plugin.  But you prefer the frontpage from Almondb.  The only thing that you need to do is to go into the “config.php” file and tell it to use the frontpage.php file from the theme almondb, and that is it.  You do not have to copy any of the files over, because it knows from the theme name where those files are.

Moodle article and permission to publish here provided by Anna Martyushev. Originally written for Supply Chain Game Changer and published on September 28, 2023.