How to add a back button to a theme in Moodle

Administrators please note: When you upgrade your Moodle server or Boost theme you will lose these changes. ALSO – please only make these changes on a staging or test server before you move the changes to a production environment.

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

In some cases, you may want to remove the left hand default Moodle menu which will make Moodle feel less Moodle.

But the technical issue here is that users cannot get back easily to sections (or topics) once they click on a module unless they use the breadcrumbs. Sometimes this is not the natural way for users to navigate.

  1. No left menu
  2. Can navigate using the breadcrumbs
  3. Can use bottom arrows or dropdown to navigate
  4. But what about a simple back button (I know you can use the browser back button – but this is a little more intuitive)

One way to make this work more seamlessly is to add a back button to the theme.

To do this you must be an administrator with access to modify the theme files.

In this example we will use the Boost theme.

We will need to edit two pages in the Boost theme.

The first page to edit is in /theme/boost/templates/columns2.mustache

We want to replace the line {{{ output.full_header }}} with the following code (which includes the line we are replacing)

[/et_pb_text][et_pb_dmb_code_snippet code=”e3t7IG91dHB1dC5mdWxsX2hlYWRlciB9fX0Ke3sjaXNtb2R9fQo8ZGl2IGNsYXNzPSJiYWNrYmFyIiBzdHlsZT0iYm9yZGVyOjFweCBzb2xpZCAjZWVlO2JvcmRlci1yYWRpdXM6NXB4O3BhZGRpbmc6MTBweDttYXJnaW4tYm90dG9tOjVweDsiPgo8c3BhbiBzdHlsZT0iY3Vyc29yOnBvaW50ZXI7IiBvbmNsaWNrPSJoaXN0b3J5LmJhY2soLTEpIj4KPGkgY2xhc3M9Imljb24gZmEgZmEtYXJyb3ctbGVmdCBmYS1mdyB0ZXh0LW11dGVkICI+PC9pPgpCYWNrIHRvIHByZXZpb3VzIHBhZ2U8L3NwYW4+CjwvZGl2Pgp7ey9pc21vZH19″ _builder_version=”3.29.3″]e3t7IG91dHB1dC5mdWxsX2hlYWRlciB9fX0Ke3sjaXNtb2R9fQo8ZGl2IGNsYXNzPSJiYWNrYmFyIiBzdHlsZT0iYm9yZGVyOjFweCBzb2xpZCAjZWVlO2JvcmRlci1yYWRpdXM6NXB4O3BhZGRpbmc6MTBweDttYXJnaW4tYm90dG9tOjVweDsiPgo8c3BhbiBzdHlsZT0iY3Vyc29yOnBvaW50ZXI7IiBvbmNsaWNrPSJoaXN0b3J5LmJhY2soLTEpIj4KPGkgY2xhc3M9Imljb24gZmEgZmEtYXJyb3ctbGVmdCBmYS1mdyB0ZXh0LW11dGVkICI+PC9pPgpCYWNrIHRvIHByZXZpb3VzIHBhZ2U8L3NwYW4+CjwvZGl2Pgp7ey9pc21vZH19[/et_pb_dmb_code_snippet][et_pb_text _builder_version=”3.29.3″ custom_padding=”0px|||||”]

What this does is add a panel below the banner with the JavaScript onclick history.back(-1) code to allow the user to go back one page.

{{#ismod}} is used to only show this if the user is using a module.

The second file to change is /theme/boost/layout/columns2.php

Replace $bodyattributes = $OUTPUT->body_attributes($extraclasses); with the following code.

[/et_pb_text][et_pb_dmb_code_snippet code=”JGNvbnRleHQgPSAkUEFHRS0+Y29udGV4dDsKJGlzbW9kID0gKCRjb250ZXh0LT5jb250ZXh0bGV2ZWwgPT09IENPTlRFWFRfTU9EVUxFKT90cnVlOmZhbHNlOzsKJGJvZHlhdHRyaWJ1dGVzID0gJE9VVFBVVC0+Ym9keV9hdHRyaWJ1dGVzKCRleHRyYWNsYXNzZXMpOw==” _builder_version=”3.29.3″]JGNvbnRleHQgPSAkUEFHRS0+Y29udGV4dDsKJGlzbW9kID0gKCRjb250ZXh0LT5jb250ZXh0bGV2ZWwgPT09IENPTlRFWFRfTU9EVUxFKT90cnVlOmZhbHNlOzsKJGJvZHlhdHRyaWJ1dGVzID0gJE9VVFBVVC0+Ym9keV9hdHRyaWJ1dGVzKCRleHRyYWNsYXNzZXMpOw==[/et_pb_dmb_code_snippet][et_pb_text _builder_version=”3.29.3″]

Replace ‘hasregionmainsettingsmenu’ => !empty($regionmainsettingsmenu) with the following code.

[/et_pb_text][et_pb_dmb_code_snippet code=”J2hhc3JlZ2lvbm1haW5zZXR0aW5nc21lbnUnID0+ICFlbXB0eSgkcmVnaW9ubWFpbnNldHRpbmdzbWVudSksCidpc21vZCcgPT4gJGlzbW9k” _builder_version=”3.29.3″]J2hhc3JlZ2lvbm1haW5zZXR0aW5nc21lbnUnID0+ICFlbXB0eSgkcmVnaW9ubWFpbnNldHRpbmdzbWVudSksCidpc21vZCcgPT4gJGlzbW9k[/et_pb_dmb_code_snippet][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

This will allow us to use #ismod in the template.

If you replaced everything correctly, you can reload Moodle and you will have a back button on the screen when a user goes to a module page.

[/et_pb_text][et_pb_text _builder_version=”3.29.3″ text_text_color=”#ffffff” background_color=”#e02b20″ custom_padding=”20px|20px|20px|20px|false|false” border_radii=”on|5px|5px|5px|5px”]

Administrators please note: When you upgrade your Moodle server or Boost theme you will lose these changes. ALSO – please only make these changes on a staging or test server before you move the changes to a production environment.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.0.2″ background_color=”#595959″ background_enable_color=”off” min_height=”292px” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px” border_width_all=”1px” border_color_all=”#f2f2f2″ global_module=”5337″ saved_tabs=”all”][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_comments _builder_version=”3.21.1″][/et_pb_comments][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.0.2″ width=”100%”][et_pb_column type=”4_4″ _builder_version=”4.0.2″][et_pb_text _builder_version=”4.0.2″]

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]