Your plugin for The FOJ website may have CSS and JavaScript files and you may want to include the files in the head or body of the website. You can include the CSS and JavaScript files in both the admin and public part of the site.

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

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.

Including CSS and JavaScript files of Your Plugin in the Head and Body of the Public Part of The FOJ Website

To includes a CSS file of your plugin in the head of the public part of The FOJ website, follow the following steps:

• Create a directory named my_plugin. This directory can be any name but for the sake of this example, let it be my_plugin. The my_plugin is the name of an example plugin which we are using in this tutorial. Put this my_plugin directory inside the plugins directory of The FOJ like so plugins/my_plugin
  
  
• Inside the my_plugin directory, create other directories named css and includes. The name of these directories can be any name except the includes directory which must remain the same name.
  
  
• Create the CSS file and name it styles.css. You can name it any name you want but for the sake of this example, name it styles.css Put this file in the css directory of your plugin like so plugins/my_plugin/styles.css. Write your css code in the styles.css file.
  
  
• Create a PHP file and name it add_in_header.php. You can name this file any name you want but for the sake of this example, name it add_in_header.php. Put this file in the includes directory of your plugin like so: plugins/my_plugin/includes/add_in_header.php
  
  
• In the add_in_header.php file, write an HTML code to add the styles.css file like so:
  
  Editing plugins/my_plugin/includes/add_in_header.php
  
  

  
  <?php ?>
  <link rel = "stylesheet" href = "./plugins/my_plugin/css/styles.css">
  
  <!--
  In case you want to add JavaScript file in the header, you can add it here too like so 
  
  <script src="./plugins/my_plugin/js/interactions.js"></script>
  
  Where interactions.js is the name of your javascript file.
  -->
  

  
  
  
• Create a PHP file and name it includes.php. The name of this file must be exactly includes.php and must not be changed. Put this file inside the includes directory like so: plugins/my_plugin/includes/includes.php
  
  
• In the includes.php file, add reference to the add_in_header.php file to finish including the CSS file inside the head of The FOJ website like so:
  
  Editing plugins/my_plugin/includes/includes.php
  

  
  <?php 
  /**
  * @Author : Kyei Osei Yaw
  * @Company : Nationton Information Technology
  * @Website : https://thefoj.net
  * @Email : info@thefoj.net
  * @Copyright : Your copyright notice, 
  * @Version : 1.0
  * @Year    : 2023
  */
  
  //This will include add_in_header.php in the head of the FOJ website
  $aInsideHeader_[] = 'plugins/my_plugin/includes/add_in_header.php';
  ?>
  

  
  Once you have put the multi-line comment and path of the add_in_header.php in the includes.php like in the example above, you are done. The CSS file has been included in the head of your site. However, you must have the plugin activated. Go to the admin; find the admin menu on the left; hover on "Plugins" and click on "All plugins" and then activate your plugin. The multi-line comment in the includes.php must be there and must have @Author, @Company, @Website, @Email, @Copyright, @Version and @Year in the parttern as in the example above. It is used as a description of the plugin in the plugins page in the admin.

To include a JavaScript File in the Body of the Public Part of the FOJ Website, Follow the Steps Below:

NOTE: This will include the JavaScript file in the website just before the closing </body> tag

• Inside the my_plugin directory, create another directory named js like so plugins/my_plugins/js . The name of this directory can be any name but for the sake of this example, let it be js
  
  
• Create the JavaScript file and name it interactions.js. You can name the JavaScript file any name you want but for the sake of this example, name it interactions.js. Put this file in the js directory of your plugin like so plugins/my_plugin/js/interactions.js
  
  
• Create a PHP file named add_in_footer.php. You can name this file any name you want but for the sake of this example, let it be add_in_footer.php. Put this file inside the includes directory of your plugin like so plugins/my_plugin/includes/add_in_footer.php
  
  
• In the add_in_footer.php, write HTML code to add the JavaScript file as follows:
  
  Editing plugins/my_plugin/includes/add_in_footer.php

  
  <?php ?>
  <script src="./plugins/my_plugin/js/interactions.js"></script>
  
  <!--
  In case you want to add CSS file in the body, you can add it here too like so 
  
  <link rel = "stylesheet" href = "./plugins/my_plugin/css/styles.css">
  
  Where styles.css is the name of your CSS file.
  -->
  

  
  
  
• In the includes.php file, add reference to the add_in_footer.php file as follows:
  
  Editing plugins/my_plugin/includes/includes.php
  

  
  <?php 
  /**
  * @Author : Kyei Osei Yaw
  * @Company : Nationton Information Technology
  * @Website : https://thefoj.net
  * @Email : info@thefoj.net
  * @Copyright : Your copyright notice, 
  * @Version : 1.0
  * @Year    : 2023
  */
  
  //This will include add_in_header.php in the head of the FOJ website
  $aInsideHeader_[] = 'plugins/my_plugin/includes/add_in_header.php';
  
  //This will include add_in_footer.php in the body of the FOJ website just before the </body> tag
  $aInsideFooter_[] = 'plugins/my_plugin/includes/add_in_footer.php';
  ?>
  

  
  
  Once you have made reference to the add_in_footer.php file in the includes.php file as in the code above, you have finished including the JavaScript file in the body of The FOJ website. The multi-line comment in the includes.php must be there and must have @Author, @Company, @Website, @Email, @Copyright, @Version and @Year in the parttern as in the example above. It is used as a description of the plugin in the plugins page in the admin.

Including CSS and JavaScript files of Your Plugin in the Head and Body of the Admin Part of The FOJ Website

To includes a CSS file of your plugin in the head of the admin part of The FOJ website, follow the following steps:

• Create the CSS file and name it admin_styles.css. You can name it any name you want but for the sake of this example, name it admin_styles.css. Put this file in the css directory of your plugin like so plugins/my_plugin/css/admin_styles.css. Write your css code in the admin_styles.css file.
  
  
• Create a PHP file and name it admin_add_in_header.php. You can name this file any name you want but for the sake of this example, name it admin_add_in_header.php. Put this file in the includes directory of your plugin like so: plugins/my_plugin/includes/admin_add_in_header.php
  
  
• In the admin_add_in_header.php file, write an HTML code to add the admin_styles.css file like so:
  
  Editing plugins/my_plugin/includes/admin_add_in_header.php
  
  

  
  <?php ?>
  <link rel = "stylesheet" href = "../plugins/my_plugin/css/admin_styles.css">
  
  <!--
  In case you want to add JavaScript file in the header, you can add it here too like so 
  
  <script src="../plugins/my_plugin/js/admin_interactions.js"></script>
  
  Where admin_interactions.js is the name of your javascript file.
  -->
  

  
  
  
• Create a PHP file and name it admin_includes.php. The name of this file must be exactly admin_includes.php and must not be changed. Put this file inside the includes directory of your plugin like so: plugins/my_plugin/includes/admin_includes.php
  
  
• In the admin_includes.php file, add reference to the admin_add_in_header.php file to finish including the CSS file inside the head of the admin part of The FOJ website like so:
  
  

  
  <?php 
  
  //This will include admin_add_in_header.php in the head of the admin part of the FOJ website
  $aInsideHeader_[] = '../plugins/my_plugin/includes/admin_add_in_header.php';
  ?>
  

  
  You are done. The CSS file has been included in the head of the admin part of your site. However, you must have the plugin activated. Go to the admin; find the admin menu on the left; hover on "Plugins" and click on "All plugins" and then activate your plugin.

To include a JavaScript File in the Body of the Admin Part of the FOJ Website, Follow the Steps Below:

NOTE: This will include the JavaScript file in the body of the website just before the closings </body> tag

• Create the JavaScript file and name it admin_interactions.js. You can name the JavaScript file any name you want but for the sake of this example, name it admin_interactions.js. Put this file in the js directory of your plugin like so plugins/my_plugin/js/admin_interactions.js
  
  
• Create a PHP file named admin_add_in_footer.php. You can name this file any name you want but for the sake of this example, let it be admin_add_in_footer.php. Put this file inside the includes directory of your plugin like so plugins/my_plugin/includes/admin_add_in_footer.php
  
  
• In the admin_add_in_footer.php, write HTML code to add the JavaScript file as follows:
  
  Editing plugins/my_plugin/includes/admin_add_in_footer.php

  
  <?php ?>
  <script src="../plugins/my_plugin/js/admin_interactions.js"></script>
  
  <!--
  In case you want to add CSS file in the body, you can add it here too like so 
  
  <link rel = "stylesheet" href = "../plugins/my_plugin/css/admin_styles.css">
  
  Where admin_styles.css is the name of your CSS file.
  -->
  

  
  
  
• In the admin_includes.php file, add reference to the admin_add_in_footer.php file as follows:
  
  Editing plugins/my_plugin/includes/admin_includes.php
  

  
  <?php 
  
  //This will include admin_add_in_header.php in the head of the admin part of the FOJ website
  $aInsideHeader_[] = '../plugins/my_plugin/includes/admin_add_in_header.php';
  
  //This will include admin_add_in_footer.php in the body of the admin part of the FOJ website just before the </body> tag
  $aInsideFooter_[] = '../plugins/my_plugin/includes/admin_add_in_footer.php';
  ?>
  

  
  
  Once you have made reference to the admin_add_in_footer.php file in the admin_includes.php file as in the code above, you have finished including the JavaScript file in the body of the admin part of The FOJ website.