Your plugin can have menus in the admin apart of The FOJ website as well as at the public part of the website.

NOTE: It is important to read this tutorial step by step as it could be difficult to understand the various parts if you jump the steps.

To know how to create the menus, know the structure of the a plugin. Below is the directory structure of a simple plugin:



The directories are:
plugins > my_plugin >

• classes
• css
• includes
• js

The my_plugin directory is the name of an example plugin and the main directory that contains the other directories which are classes, css, includes and js. The my_plugin directory is inside the plugins directory of The FOJ like so plugins/my_plugin.

Not all the directories may be neccessary in your plugin. Also the names of the directories of your plugin don't have to be the same as listed above. You can change them except the inlcudes directory which must remain the same name.

Letting Your Plugin Have Menus In the Admin Part of The FOJ Website

Admin menus are like those in the image below:



To let your plugin have menus in the admin part of The FOJ website, follow the steps below:

• Inside the my_plugin directory, create another directory named, includes like so plugins/my_plugin/includes
  
  
• Create a PHP file named admin_menu.php. The name of this file must be admin_menu.php and must not be changed. Put this file in the includes directory like so: plugins/my_plugin/includes/admin_menu.php
  
  
• In the admin_menu.php, write the code of the admin menus like so:
  
  Editing plugins/my_plugin/includes/admin_menu.php
  

  
  <?php
  //Admin menus
  $aAdminMenu[] = [
  	[
  		'name' => 'My Plugin Menus',
  		'icon' => '<span class = "fas fa-file-alt"></span>', 
  		'url' => '#',
  		'children' => [
  		
  			[
  				'name' => 'Page 1',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-1',
  				'children' => []
  			],
  			
  			[
  				'name' => 'Page 2',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			],
  		
  		
  			[
  				'name' => 'Page 3',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			]
  		]
  	]
  ];
  ?>
  

  
  
  
• Once you have added the code as in the example above, in the admin, the menu will show as in the image below:
  
  
  
  
• In the code above, the array $aAdminMenu[] must reamain the same name.
  
  
• The arrays have indexes, name, icon, url and children. Edit them to suit your plugin as follows:
  name: The name of your menu, e,g My Plugin Menus.
  
  icon: Font awesome icon or a different icon or an image. In the case of font awesome icon, example can be: <span class = "fas fa-file-alt"></span>. In the case of image icon, example can be <img src = "../uploads/2023/04/image-name.jpg" />.
  
  url: url is the link that opens a page in admin when the menu is clicked. Example can be account.php?apage=page-1 If a menu has children, then its URL should be #
  
  children: If a menu item has children, then the children array is populated with the arrays of its children. If the menu does not have children, then the children array is empty []
  
  

Letting Your Plugin Have Menus For the Public Part of The FOJ Website

In the admin, locate the admin menus on the left; hover on "Appearance and Design"; Click on "All Menus". The menu modules page will appear. Click on "Edit" under the menu module you want to edit. A page will open and you will see a list of menus on the left with checkboxes beside each menu. When admin user checks the checkboxes and clicks on "Add Menu", the selected menus will be saved to appear on the public part of the websiite. These menus are called "Construction Menus". Here is how construction menus look like when they have been made available so that admin user can add them:

To Let Your Plugin Have Construction Menus, Follow the Steps Below:

• Edit the admin_menu.php of your plugin and add the menus as follows:
  
  Editing plugins/my_plugin/includes/admin_menu.php
  

  
  <?php
  //Admin menus
  $aAdminMenu[] = [
  	[
  		'name' => 'My Plugin Menus',
  		'icon' => '<span class = "fas fa-file-alt"></span>', 
  		'url' => '#',
  		'children' => [
  		
  			[
  				'name' => 'Page 1',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-1',
  				'children' => []
  			],
  			
  			[
  				'name' => 'Page 2',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			],
  		
  		
  			[
  				'name' => 'Page 3',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			]
  		]
  	]
  ];
  
  //Construction menu
  $aConstructionMenu[] = [
  	[	
  		'title' => 'My Plugin Construction Menu',
  		'menu' => [
  			
  			[
  				'name' => 'Menu 1',
  				'url' => 'account.php?ipage=menu-1&u=',
  				'visibility' => 'logged_in_users'
  			],
  			
  			[
  				'name' => 'Menu 2',
  				'url' => 'account.php?ipage=menu-2&u=',
  				'visibility' => 'logged_in_users'
  			]
  		]		
  	]
  ];
  
  
  ?>
  

  
  
  
• The example above will look like this:
  
  
  
  To see the construction menus of your plugin, in the admin, locate the admin menus on the left; hover on "Appearance and Design"; Click on "All Menus". The menu modules page will appear. Click on "Edit" under the menu module you want to edit. A page will open and you will see a list of menus on the left with checkboxes beside each menu. Under "Private Account & Static Menus", You will see your construction menus.
  
  
• In the above code, the code for $aAdminMenu[] existed in the admin_menu.php already and the code for $aConstructionMenu[] was added. They are independent.
• In the code for $aConstructionMenu[],
  
  tile: title refers to the name of the construction menu under which the menu items will be listed
  
  menu: menu is an array of the menu items
  
  Looking at the menu items,
  
  name: name is the name of a menu item
  
  url: url is the URL which the menu will have. If the visibility of the menu is set to logged_in_users, jnr_admin, snr_admin or super_admin, then at the public part of the site, user id will automatically be appended to the end of the the URL of the menu.
  
  visibility: visibility refers to who sees the menu item. The values of the visibility can be:
  
  public (Menu can be seen by everyone).
  
  non_logged_in_users (Menu can be seen when not logged in. Logged in users can't see it),
  
  logged_in_users (Only logged in users can see this menu item)
  
  jnr_admin (Only junior admin, senior admin and super admin can see this menu item).
  
  snr_admin (Only senior admin and super admin can see this menu item)
  
  super_admin (Only super admin can see this menu item)
  
  
• The $aConstructionMenu[] can have multiple arrays within like so:
  
  Editing plugins/my_plugin/includes/admin_menu.php
  

  
  <?php
  //Admin menus
  $aAdminMenu[] = [
  	[
  		'name' => 'My Plugin Menus',
  		'icon' => '<span class = "fas fa-file-alt"></span>', 
  		'url' => '#',
  		'children' => [
  		
  			[
  				'name' => 'Page 1',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-1',
  				'children' => []
  			],
  			
  			[
  				'name' => 'Page 2',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			],
  		
  		
  			[
  				'name' => 'Page 3',
  				'icon' => '', 
  				'url' => 'account.php?apage=page-2',
  				'children' => []
  			]
  		]
  	]
  ];
  
  //Construction menu
  $aConstructionMenu[] = [
  	[	
  		'title' => 'My Plugin Construction Menu',
  		'menu' => [
  			
  			[
  				'name' => 'Menu 1',
  				'url' => 'account.php?ipage=menu-1&u=',
  				'visibility' => 'logged_in_users'
  			],
  			
  			[
  				'name' => 'Menu 2',
  				'url' => 'account.php?ipage=menu-2&u=',
  				'visibility' => 'logged_in_users'
  			]
  		]		
  	],
  	
  	[	
  		'title' => 'My Plugin Construction Menu 2',
  		'menu' => [
  			
  			[
  				'name' => 'Another Menu 1',
  				'url' => 'account.php?ipage=another-menu-1&u=',
  				'visibility' => 'logged_in_users'
  			],
  			
  			[
  				'name' => 'Another Menu 2',
  				'url' => 'account.php?ipage=another-menu-2&u=',
  				'visibility' => 'logged_in_users'
  			]
  		]		
  	]
  	//,etc
  ];
  ?>
  

  
  
  The code above would output as in the image below: