course header 2000x350

In article 4.3, we added menu items to the Moodle Top Menu by pasting links into a special box. In this article, we will explain how the Moodle left side menu items change depending on the page you are on.

The Case of the Missing Moodle Menu Manager
One of the most puzzling aspects of Moodle is the lack of a Menu Manager. Click on Site Administration and you will see 9 categories:

01

Moodle comes with a top menu and a left side menu. But it does not come with an obvious way to add additional menus or a way to add and organize additional menu items to its existing menus. Nor does Moodle come with a Media Manager to add and organize images or an article manager or page manager to add and organize additional pages. By contrast, the Joomla Content Management System comes with a very well organized Menu Manager, Media Manager and Articles Manager. Since each of my courses uses hundreds of images and dozens of pages or menu items, I have created a Joomla website to organize the content of each of my courses. I then link the Joomla pages to Course lesson or section pages inside of Moodle. However, this process of creating two websites does require learning how to use Joomla in addition to learning how to use Moodle. We will therefore cover some Moodle plugins that can provide some control over Moodle Menus and Moodle Menu items. Still, given the importance of menus and menu items to navigating through a website, it is shocking that Moodle does not have a Menu Manager.

Fordson Theme Course Menu Changes
By default, all of the courses we create are shown in a block called Available Courses. This block is displayed at the bottom of our Home page and is visible after we log into our Moodle website.

02

The Fordson theme adds another Icon menu to the top of our Dashboard page. Click on the icon called All Courses to reach a page that displays all of our courses and course categories. Fordson also adds a menu item to the Top Menu called My Courses which shows all of the courses a person is registered for. To enroll yourself to an existing course, click on Site Administration, Courses, Manage Courses and Categories. Then click on the Course name. Then scroll down the page to see this tabbed menu:

03

Click View to go to the Course Home page which displays course menu items in the left side menu.

04

Click the Enrolled Users tab to see a list of all enrolled teachers and students. On the Enrolled Users page is an Enroll Users button. Click on this to add yourself as a teacher or student to this course.

05

This course is then added to your list of My Courses in the top menu.

06

The menu item My Courses is also shown in the left side menu and the menu item All Courses is shown in the Icon Menu in addition to appearing in two menu blocks on the Dashboard page. Clearly Moodle navigation can be confusing for both teachers and students.

We will next add a plugin to create additional pages and then look at yet another plugin for adding and subtracting pages from the Moodle left side menu.

Add the Static Pages Plugin to Create Moodle Pages and add them to a Moodle Menu
There is an Activity option called Page that will create a static page. But the Page Activity option is intended simply to add a link placed on an existing page to lead to another related page of content. It is not a real stand alone web page as it must exist as part of an existing page. To create real stand alone web pages, we need to add a Moodle Plugin called Static pages. Here is a link to download this plugin: https://moodle.org/plugins/local_staticpage

Install the Static Pages plugin by going to Site Administration, Plugins, Install Plugins. Once installed, the Static Pages plugin will display three new menu items at the bottom of the Site Administration page:

07

The first menu item, Documents, allows you to upload document files to be used in static pages. Before loading a document, create an HTML document with the Bluefish editor and make sure that it begins with a title formatted with the Heading 1 or h1 paragraph style. This will be used for a static page title. Click on the second menu item called Settings. You can review and change these settings. But we will stay with the default settings. Click on List of Static Pages. It will explain that, because there are no HTML files in the Static Pages Files folder, there are no static pages to display links to. We will therefore create an example HTML page with Bluefish. It is also possible to convert any Libre Writer document into an HTML page just by clicking on File Save As and saving it as an HTML document. However, Bluefish has several tools that allow you to format your HTML document more precisely than you can with Libre Writer.

08

To learn more about how to use Bluefish to create HTML documents, visit our course on this topic: https://www.learnhtmlandcss.com/

Your Static Page file names should only contain lowercase alphanumeric characters and the - (hypen) and _ (underscore) symbols. We will create an HTML file called meet-your-teacher.html. Then click on Site Administration, Static Pages, Documents and drag a copy of this file from your Home computer file manager to the Static Pages Files box. Then click Save changes. Then click on Static Pages, List of Static Pages. A link will be provided to the new static page.

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Click on the link to see this page:

09

Styling your static pages

If you want to style your static page with CSS, you can include a <style> tag into the <head> section of your HTML document. For example, we will add the following to our HTML page with Bluefish:

<style>

p { font-size: 24px; color: blue;}

</style>

Then delete and reload the HTML document to the Static Pages Documents box. Here is the result:

10

Add an image to a static page
If you want to include one of more images into your static page, you cannot just upload them in local_staticpage's document box. You have to upload them somewhere else. Then link to the image in your HTML file with an absolute URL, not a relative URL. For example, open your home computer file manager and rename your image so that it only has lower case letters and numbers and dashes. It will have a name like:

david-spring.jpg

11

Sadly, Moodle does not offer a way to add images directly to static pages. We have two options to add this image to our static Meet your Teacher page. The first option is to add an HTML block to the static page and then insert the image into the HTML block. The second option is to load the image into a parallel Joomla educational website and then copy paste the absolute link from the Joomla website image into the static page. Let’s look at adding the HTML block first.

Add an HTML block to a static page

The local_staticpage plugin was not intended to show blocks on the static pages. However, it is possible. You have to enable page editing by going to your Home page and turn on editing. Then go to your static page. Now you see the standard "Add block" menu and can add blocks to the static page.

12

We will add an HTML block.

13

Click on Insert an image.

14

Click Browse Repositories. Upload a file and upload the image. Then click on this page only. Then click Save Changes.

15

Then click on the Home page and turn off editing. If you have a lot of images, a better option would be to load them into a parallel Joomla website Media manager. For example, I have a parallel Joomla website with the URL https://collegeintheclouds.org/

which has content for my moodle website https://collegeintheclouds.com/

The images in my Joomla media manager are in a folder called images where I have added a folder called moodle. So the full URL to the image david-spring.jpg is https://collegeintheclouds.org/images/moodle/david-spring.jpg

Then copy paste the absolute or full URL into your HTML document and then reload the HTML document.

16

Now that we have a static page, we will next install a plugin for adding and subtracting pages from the side menu.

Add or Subtract a Menu Item from the Moodle Side Menu
There is a plugin called Flexible Menu which really should be part of the default Moodle installation. It can be downloaded at the following link: https://moodle.org/plugins/local_vxg_menus

Install the plugin with the Moodle Plugin installed. Once installed, two new menu items will appear at the bottom of the Appearance page:

17

Click on Hide Navigation Items. Scroll down to Private Files and check the boxes to hide Private files from all roles.

18

Then scroll to the bottom of the page and click Save changes. Note that Private files no longer appear in the side menu. Then click Side Menu, Custom Menu Item. Then click Add New. Call the Menu item, Meet Your Teacher. Then copy and paste the Static Pages URL into the URL box.

19

Note that currently there is an error in this plugin that adds the website URL to the link URL like this: https://collegeintheclouds.com/https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

To work around this problem, delete the first part of the link URL and only copy paste this into the URL box: local/staticpage/view.php?page=meet-your-teacher

Then click Choose Icon to choose a menu item icon. (note: this function might not work). Then click Save Changes. Then click on the new Meet Your Teacher Menu item in the side menu. Here is the result:

20

What’s Next?
In our next article, we will add another Moodle Menu plugin called Boost Navigation fumbling.