How to add a home button to a Moodle course

There was a unique situation where I was asked to add a home button to the bottom navigation of a Moodle course but the restriction was, that I had no access to the Moodle Admin, no Generico plugin and could only function as an editor for the course. The question is, how the hell do you add a theme function to a single Moodle course without access to the theme or to Moodle admin.

I love a challenge so this is how I approached the issue.

Just to get a visual understanding of what was being asked, here is the before and after of the bottom navigation menu in Moodle.

Before

After

Notice 2 important parts to this. The icon uses font awesome (so you must have font awesome installed or replace the icon with the word Home) and the extra long name for the next page is wrapped around to stop it overlapping with the home button.

So how do we do this?

First we create a custom HTML Block, I will call it Course Messages, that is set to appear on every page of our course. Remember this is based on a single course, not as a global function, because we don’t have access to the main theme or to the administration tools.

Now that we have this block, we can add some custom code to it.

With editing turned on, select ‘configure Course Message Block’.

You can now add some code.

There are two key pieces of information we need.

  1. To find the location in the page that the Home button needs to be added to.
  2. The URL that will take someone to the course home page.

By looking through the HTML I found the bottom navigation drop down menu has a class called urlselect. Using this class I can add the HTML href elements before the drop down list.

The second item to find is the URL to go to the Home page for this course.

By looking in the Breadcrumbs, we can find the course URL. Notice it will be the 4th item in the breadcrumbs.

The complete code below shows how the menu item was created.

<script type="text/javascript">
        // <![CDATA[
        /* specify our style rules in a string */
        var cssRules =
            '#prev-activity-link{font-size:small;white-space: pre-wrap;text-align: left;}#next-activity-link{font-size:small;white-space: pre-wrap;text-align: right;}.homebtn{margin-bottom: 10px;padding:10px;background-color:#eee;border-radius:5px;}';
        /* create the style element */
        var styleElement = document.createElement('style');
        /* add style rules to the style element */
	styleElement.appendChild(document.createTextNode(cssRules));
        /* attach the style element to the document head */
        document.getElementsByTagName('head')[0].appendChild(styleElement);
      // Add home button
        var courselink = document.getElementsByClassName('breadcrumb-item');
        courselink = courselink[3];
        var linkurl = courselink.querySelector("a").getAttribute("href");
        var newlink = document.createElement('a');
        newlink.href = linkurl;
        newlink.innerHTML = "<i title='Home' class='fa fa-home fa-lg homebtn'></i>";
        var urlselect = document.getElementsByClassName('urlselect')[0];
        urlselect.insertBefore(newlink, urlselect.firstChild);
        // ]]]]><![CDATA[>
    </script>
Code language: JavaScript (javascript)

Lines 4 to 11: add the CSS that forces the navigation names to wrap and adds some spacing for the home button.

Line 13: Finds the breadcrumb-items on your page because we need the URL from the course href to attach to the home button (I had no other way to get the course URL)

Line 14: Grabs the fourth breadcrumb-item which is the course link. (Being zero based the items are number 0,1,2,3,4. So the 4th breadcrumb is actually item number 3)

Line 15: Extract the href value to use later for the home button. (We now have the home button url)

Line 16: Create a new A DOM element to add the href to.

Line 17: Add the href attribute to the new A element.

Line 18: Add some HTML including a font awesome class inside the href so that the user has something to click on.

Line 19: Get the urlselect element

Line 20: Insert the new A href link and font awesome HTML into the urlselect element.

And that’s it.

Obviously if you wanted to apply this globally, you would use a theme and have the admin update the theme.

Preferably you would use a child theme so that you can update your master theme without causing custom code issues, but that is another story.

Let me know if you need any help…