How To Collaborate On Moodle Theme Creation With The CodeLobster IDE

--- Advertisement ---

Connected 2023
Connected Conference OpenLMS

By Stanislav Ustimenko,

The programmer/freelancer has to constantly learn.

Recently, I got the opportunity to take part in a project-based Moodle. I realized Moodle is not just a content management tool, it is a functional Learning Management System that supports just about anything you want to create and build into your own educational portal.

You can publish training courses in any convenient format, work together with colleagues on training materials, and track the learning process. The tools provided by Moodle make working with courses easier for students and teachers. It is a free and open source platform. It can be used freely by schools, institutes, and any other type of organization.

I think it is a great opportunity for a web developer to become a Moodle specialist because every year more and more companies prefer this software.

In this article I want to share with readers my first experience with Moodle. I will show you how to quickly get started and create your own custom theme.

I decided to install Moodle not on local computer, but directly on a remote web server, which is fast and productive, because this LMS is demanding on resources. Therefore, to work with files, we will use the built-in Codelobster FTP client.

What we need:

According to the rules of good programming, you must not change the source code of predefined themes. So to keep things simple, we will create a child theme that inherits from the basic “Boost” theme.

In Moodle, all themes are created and installed in the same way as plugins.

Let us begin…

Open CodeLobster and go to the main menu File > New > Project. In the dialog that appears, enter the name of the project (we’re choosing “Moodle”) and check the box “Create project in a new folder“.

Click “OK“. The project has been born.

Let’s start creating a connection to a remote server. We return again to the main menu Tools > FTP.

In the file manager, we see the section FTP/SFTP Servers. Click twice on the Create new label.

The dialog that appears provides an opportunity to create an FTP connection, which can be reused later in several different projects.

In the “Label” field, I’ll enter a friendly name for the connection: “Moodle remote connection.” Enter the host address, port number, login username, and password. Complete the rest of the fields:

Remote Dir“: enter the name of the directory in which Moodle stores its themes. In standard, out-of-the-box Moodle, this is simply theme/.

“Local Dir“: specify the path of our project’s folder.

Press the “Save” button.

Click on the label “Moodle remote connection” to check whether it works.

As you can see, everything is correctly configured and we can view the content of the theme folder on the remote server.

Now go to your project, click on its name with the right mouse button and from the context menu select the option “Modify“.

Look at the FTP section at the bottom of the dialog box. From the drop-down list select the connection with name “Moodle remote connection.” This is the connection that we just created. Also check the option “Upload files on save.

Click “OK.” The settings are completely finished and the project is ready to work.

Now we begin our primary work and create our theme

Let’s give it a name. Right click on the project and select “New Folder,” give it a name, say, “codelobster.

This folder will contain all the files of our new theme.

Add the most important theme file. In the context menu of this folder select New File > PHP.

The file name should be version.php. Enter the following code:

defined('MOODLE_INTERNAL') || die();
$plugin->requires = '2016070700';
$plugin->component = 'theme_codelobster';
$plugin->dependencies = [
  'theme_boost' => '2016102100'

Here we defined the version, name of the plugin, and dependencies from other plugins.

In the same way, let’s create the following file config.php and enter the code:

defined('MOODLE_INTERNAL') || die();
$THEME->name = 'codelobster';
$THEME->sheets = [];
$THEME->editor_sheets = [];
$THEME->parents = ['boost']; $THEME->enable_dock = false;
$THEME->yuicssmodules = array();
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->requiredblocks = '';

In this code, we indicated the theme name and the parent theme “Boost.”

The next file we are going to create is lib.php:

defined('MOODLE_INTERNAL') || die();

For now, this only needs one line of code. Later on we can add callback functions here to expand the theme’s features.

In order to display correctly in the Theme selector, you need to add the title and description of the theme to the language file theme_codelobster.php. That should be placed in the folder lang > en if Moodle works in English. If the administrator of the site has configured Moodle in Russian, the file with the descriptions should be placed in the folder lang > ru, and so on.

Add folders and the file theme_codelobster.php with the following content:

defined('MOODLE_INTERNAL') || die();
$string['choosereadme'] = 'Theme Codelobster is a child theme of Boost. It is created with Codelobster IDE';               
$string['pluginname'] = 'Codelobster';
$string['region-side-pre'] = 'Right';

We only need to take one final step. Add the folder “pix” and put the files favicon.ico and screenshot.jpg in it. If you don’t want add your own icon and screenshot, that’s alright. The icon and screenshot of the parent theme “Boost” will be used by default.

Look at the left panel on the image below. As a result, you should get the following structure of the project:

Now, to synchronize files with a remote server, right-click on the folder with the theme code and select Upload from the context menu.

In the dialog that appears, check all the files that you want to upload to the server.

In this case, it is the folder “codelobster,” its subfolders and all the included files. And now we press “OK.”

All the necessary theme files have been uploaded to the appropriate theme directory on the remote server. Now, all what you need is to install and enable the theme.

Log in to the Moodle site, go to the admin section, and on to Site administration > Notifications.

As we can see, the theme is ready and waiting to be installed. Click the button “Upgrade Moodle database now.

The system tells us that the installation was successful. Click “Continue.

After installation, activate the theme. Go to Site administration > Appearance > Theme selector. Click on “Change theme.

Among the installed themes, you can see ours. Press “Use theme” to turn it on.

We receive a message that the theme is enabled. Now, in the Theme selector, we see that the theme we have recently created is now active.

This is only the beginning of how Codelobster helps you work with Moodle remotely and collaboratively.

eThink LogoThis Moodle Practice related post is made possible by: eThink Education, a Certified Moodle Partner that provides a fully-managed Moodle experience including implementation, integration, cloud-hosting, and management services. To learn more about eThink, click here.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Latest

The eLearn Podcast

Connected Conference OpenLMS

--- Advertisement ---

Post Pages - Sidebar 4 - CourseMerchant

--- Advertisement ---

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.