CATEGORY: Moodle Developers

How to create a child theme for Moodle 4

Course Access: Lifetime
Buy now
Course Overview

This course is for you if you have at least some basic PHP, HTML, JavaScript and CSS experience before attempting to create a ‘child theme’ in Moodle. It is not essential that you have developed in Moodle before but it would be an advantage. Having strong problem solving skills will make it easier for you but also being able to see the big picture in that you are developing a child theme to solve a specific issue for your teachers and students will be the motivation to work through the bugs and code issues that you may come across when programming. 

A ‘child theme’ is a special type of plugin used in Moodle that can be added to an existing theme to enhance the function and UI of your theme. A ‘child theme’ has a unique set of requirements when developing in Moodle that will be covered in this course. It will take you through the process of developing a basic Moodle child theme using the Boost theme as the parent. The typical response from Moodle users is about the visual appeal of the site as well as additional functions and locations of buttons, icons and logo’s. 

If you have been tasked with making theme changes, it is much more beneficial to add a child theme rather than edit a core theme. The reason for this is updates to the core theme could and usually will break your theme changes. By using a child theme, you separate your changes from the core themes functions and templates. 

This course is for you if you need to make small theme template changes or move things around in some of the main Moodle pages without causing issues to the core theme functions. So many people have asked for minor theme changes and the easiest way to do this is to show you how I create a child theme, but many people have not been taught how to do this. The complexity of Moodles codebase can make it difficult to know where to start, so this course helps get you started. 

Course contents

  • Overview (1:02)
  • How to create the child theme (1:07)
  • Step 1 (1:03)
  • Step 2-3 (1:36)
  • Step 4-5 (3:52)
  • Step 6-9 (2:11)
  • How to install the child theme (1:28)
  • Making theme development easier (1:11)
  • Test the child theme (2:21)
  • How to make CSS changes in the child theme (5:05)
  • How to override pages – Navigation (4:04)
  • How to override pages – Header (2:08)
  • How to override pages – Login (2:40)
  • Conclusion (1:17)