This blog is about creating a child theme or you can say cloning a theme. Child theme helps you to create a new theme with some more feature or updates based on your existing theme. Here, we will be the creating child theme based on Herald theme.
Consider a scenario where you have an open source Moodle theme and you want to customize it without changing the core theme codes and this is the place where Moodle theme plugin plays its role. You can either create a new theme from scratch or you can create a child theme based on a theme.
This blog assumes that you have intermediate knowledge about Moodle plugin development and PHP.
Terminology:
- Parent theme: Herald
- Child Theme: Childherald
Tools:
- OS: Ubuntu 16.04 LTS
- IDE: Netbeans
- Moodle: Version 3.3.2+
Use case: The user wants to modify the Navigation bar, Slideshow feature and Featured courses section on Homepage based on user login role, so the basic idea is to clone the parent theme and modify it as per our requirement. We will look into different elements of theme and their use as we move ahead.
Choosing the theme name
Choosing a correct theme name which relates to your theme is important. While choosing the theme name you have to consider that it doesn’t match with any existing theme or plugin, as the theme is a type of plugin. It’s best to visit Moodle plugin site and search by your theme name to check if any theme exists with the same name. Theme name should be unique.
Theme structure
Before we start which child theme development let’s have a look at the file structure of theme and important files in it.
Some of the files in the theme are:
- /version.php: It’s a common file which is required by every plugin in Moodle. It contains your plugin version and the required Moodle version. You can get more details Moodle Version.
- /config.php: It will contain all of our theme settings. It also contains the details related to the theme rendering.
- /settings.php: This page contains custom theme settings. These are the local settings of our theme.
- /lib.php: The lib file contains the callback function used by Moodle theme.
- /renderers.php: It contains reference to the /classes/core_renderer.php file.
- /layout/: It contains the layout files of the theme.
- /style/: It contains all the stylesheets for our theme.
- /lang/en/: This is a common file in all the type of plugin. It contains all the string variable.
- /pix/: This will contain the favicon and the screenshot of our theme which will be displayed while theme selection.
- /pix_core/: It will contain images that will override standard core images.
- /pix_plugins/plugintype/pluginname/: This will contain the images that will override specific plugin images.
- /classes/: It contains core_renderer.php. This file will inherit parent core_renderer.php. You can override the parent method over here.
Development of the plugin
As we have got an overview of the theme files and file structure. Let’s dive into the development of the plugin. There are many ways to initiate the development process, but the best approach is to copy the existing theme and start making changes.
Create a folder as childherald under /theme/childherald
Copy the version.php from /theme/herald/ to /theme/childherald/
Change herald to childherald for $plugin->component.
Check the code below.
Copy the config.php from /theme/herald/config.php to /theme/childherald/config.php
Exclude / Remove below code from /theme/childherald/config.php
Now change /theme/childherald/config.php as per below code.
Keep rest of the code as it is.
Now we will need settings page for our childherald theme. So we are going to copy the settings.php from /theme/herald/ to /theme/childherald/settings.php. In settings just find and replace herald with childherald.
The lib.php files contains callback function used by our theme. Copy the below code from /theme/herald/lib.php
Updated code of /theme/childherald/lib.php
Now as we will be rendering the Home page, we need to update the core_renderer.php. Copy /theme/herald/renderers/core_renderer.php to /theme/childherald/classes/core_renderer.php
Update all the instances of herald with childherald. Herald theme is a child theme of bootstrapbase.
Let’s have a look at the herald core_renderer.php
So from the above code, you can see that class theme_herald_core_renderer extends theme_bootstrapbase_core_renderer
Our theme childherald will extend theme_herald_core_renderer as herald is his parent theme.
Below is the snippet for childherald core_renderer.php
Also, we will need to customize the custom_menu function in core_renderer.php
Below is the updated custom_menu function
There are few updates required in the core files. Though it is not recommended, but in our case currently we do not have any alternate solution, so we will go with it.
Add the below line in /theme/herald/renderers/core_renderer.php at the top of the page before class declaration.
We are adding this line because when we extend theme_herald_core_renderer, it will throw an error that it cannot find theme_bootstrapbase_core_renderer
We also need to update the custom_menu under /theme/herald/renderers/core_renderer.php as we updated in childherald.
Open the outputcomponents.php
Update the _construct function as below
We also need to update convert_text_to_menu_node function
The above changes will decide what to display in top navbar. We have a table as frontpage_customization which contains flags indicating what menu to show for which firm.
As we are done with navbar we will move towards customizing feature courses section & slideshow customization as per user firm type.
Customizing Feature Courses: So in current Herald theme, there is no feature that will help you to turn ON and OFF feature courses section for the specific firm type.
We will implement this feature so that the administrator can turn feature courses section ON and OFF for specific firm type.
Add only those files in /theme/childherald/layout which are mentioned in the snapshot. We won’t be needing rest of the files.
Open home-featured.php of childherald and add below code.
So here we are simply fetching login user firm type and then check in the frontpage_customization table if the administrator has enabled the featured courses section or not and hiding that code block.
Now we will move to slideshow feature of Homepage.
Open /theme/childherald/renderers/includes/home-slideshow.php
Replace the below section in home-slideshow.php keep rest of the code as it is.
Add this on top of the file.
Scroll down till you can find /* Slide settings */.
Replace the code below:
Add the if condition to rest of the slide settings.
We haven’t designed an interface to manage the frontpage_customization.
Currently, we have updated the value at backend manually.
In next blog ”Moodle – Creating Basic Block plugin” we will create block plugin to manage the frontpage_customization database table.
And here we are done with our Herald customization lets install the theme and check it out.
Ignatiuz is having a strong expertise to provide better solution for Learning Management System (LMS) Solution as per the client requirements. To know more about the providing- http://ignatiuz.com/solutions/lms-solutions/
If you have any query or want more information on SCORM, contact us today at +1-484-876-1867 or send us a message.
