Creating a theme for The FOJ is quite easy. The easiest way to create a theme for The FOJ is copy one of the default themes and edit its CSS and HTML. The files and directory structure of a theme for The FOJ is like in the image below:



The directories and files are as follows:
themes > my_theme >

• css (directory):
  This is to contain the CSS files of the theme. Currently, it contains core/core.css in the default theme.
  
  
• images (directory):
  This is to contain images of the theme. Currently, it contains default-cover.jpg
  
  
• js (directory):
  This is to contain the JavaScript files of the theme. Currently, it contains core/js.css in the default theme.
  
  
• auth-page.php
  This is included in auth.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/auth-page.php'); to render the auth.php page. auth.php is one of the core files at the base of The FOJ.
  
  
• footer.php
  This is included at the bottom of themes/my-theme/auth-page.php, themes/my-theme/login-page.php, themes/my-theme/page.php and themes/my-theme/register-page.php using the code require_once('footer.php'); Where "my-theme" is the name of the theme containing footer.php. footer.php renders the footer of the various pages where it is included as well as include files like JavaScript files in the pages.
  
  
• footer2.php
  This is included at the bottom of themes/my_theme/private-page.php using the code require_once('footer2.php'); to include files such as JavaScript files in the body just before the closing </body> tag. "my_theme" refers to the name of the theme containing footer2.
  
  
• footer-html.php
  This is included close to the bottom of themes/my_theme/private-page.php using the code require_once('footer-html.php'); to render the footer of account.php, one of the core files at the base of The FOJ. "my_theme" refers to the name of the theme containing footer-html.php.
  
  
• header.php
  This is included at the top of themes/my-theme/auth-page.php, themes/my-theme/login-page.php, themes/my-theme/page.php and themes/my-theme/register-page.php using the code require('header.php'); Where "my-theme" is the name of the theme containing header.php. header.php renders the header of the various pages where it is included.
  
  
• header-fluid.php
  This is included at the top of themes/my-theme/private-page.php using the code require_once('header-fluid.php'); Where "my-theme" is the name of the theme containing header-fluid.php. header-fluid.php renders the header of themes/my-theme/private-page.php in account.php, one of the core files located at the base of The FOJ.
  
  
• header-nostyle.php
  This is not included in any page but it is there to be used by plugins that may want to render pages without header and menus.
  
  
• login-page.php
  This is included in login.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/login-page.php'); to render the login.php page. login.php is one of the core files at the base of The FOJ.
  
  
• maintenance.php
  This is included in all pages including account.php, auth.php, index.php, login.php and register.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/maintenance.php'); to render the maintenance page. account.php, auth.php, index.php, login.php and register.php are some of the core files located at the base of The FOJ.
  
  
• page.php
  This is included in index.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/page.php'); to render pages, posts and categories that are created in the admin by the admin user. index.php is one of the core files at the base of The FOJ.
  
  
• preview.jpg
  Go to the admin part of The FOJ. Find the admin menus at the left. Hover on "Appearance and Design" and click on "Themes". The Themes page will open and you will see the various themes. You will see images that represent the themes. Such images are the preview.jpg. The preview.jpg serves as a preview and a representation of the theme in the admin. The size of the preview.jpg should be width: 400px, height: 430px.
  
  
• private-page.php
  This is included in account.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/private-page.php'); to render the account.php page. account.php is one of the core files at the base of The FOJ.
  
  
• register-page.php
  This is included in register.php using the code require_once('themes/' . $oTheFOJConfig->sThemeDir . '/register-page.php'); to render the register.php page. register.php is one of the core files at the base of The FOJ.
  
  
• sidebar-left.php
  In the default theme, this is included close to the top of themes/my_theme/private-page.php using the code require_once('sidebar-left.php'); . It serves as the sidebar in account.php in which themes/my_theme/private-page.php is included. The code in this sidebar-left.php can be entirely replaced with the code of the theme developer according to the design of the theme. "my_theme" refers to the name of the theme containing sidebar-left.php. account.php is one of the core files located at the base of The FOJ.
  
  
• Theme_Options.php
  This is included in admin/account.php using the code include('../themes/' . $oTheFOJConfig->sThemeDir . '/Theme_Options.php'); to render the page in admin where logo and favicon of the site are changed.

Layout of Pages

The layout of pages is like in the image bellow



The labelled places on the image are places where widget can be placed. The labels are codes of the places they represent. For example, the code for sidebar right is "SIDEBR"

Below is a list of all the widget places:

• BTMD: Bottom Down
  
  
• BTML1: Bottom Left 1
  
  
• BTMR1: Bottom Right 1
  
  
• BTMM: Bottommost
  
  
• BTMT: Bottom Top
  
  
• FTRB: Footer Bottom
  
  
• FTRC1: Footer Column 1
  
  
• FTRC2: Footer Column 2
  
  
• FTRC3: Footer Column 3
  
  
• FTRC4: Footer Column 4
  
  
• FTRT: Footer Top
  
  
• HDRC1: Header Column 1
  
  
• HDRC2: Header Column 2
  
  
• HDRC3: Header Column 3
  
  
• HDRC4: Header Column 4
  
  
• HDRD: Header Down
  
  
• HDRT: Header Top
  
  
• MIDDLE: Where pages, posts and categories created in admin appears
  
  
• NECKER: Necker
  
  
• SIDEBL: Sidebar Left
  
  
• SIDEBR: Sidebar Right
  
  
• SUBHDRC1: Subheader Column 1
  
  
• SUBHDRC2: Subheader Column 2
  
  
• SUBHDRC3: Subheader Column 3
  
  
• SUBHDRC4: Subheader Column 4
  
  
• SUBHDRLC1: Subheader Lower Column 1
  
  
• SUBHDRLC2: Subheader Lower Column 2
  
  
• TMT: Topmost
  
  
• TOPD: Top down
  
  
• TOPL1: Top Left 1
  
  
• TOPR1: Top Right 1
  
  
• TOPT: Top Top
  
  

Editing the Files of a Theme

Basically, you will edit the HTML code of the theme files. The PHP code should be maintained unless you will write your own PHP code to do what the current PHP code does.

At the top of each page, there are variables. For example, the variables at the top of auth.php are as follows:

$sPageType = 'pages';
$iPageID = 4;
$sPagePostType = 'page';
$sPostShareThis = '1'; 
$aPageOptions = array(
	'show_left_sidebar' => 'hide_on_mobiles_only',
	'show_right_sidebar' => 'yes'
);

The array $aPageOptions among others determines whether to show the left sidebar and the right sidebar or not.

All the possible values for $aPageOptions['show_left_sidebar'] are: 'yes', 'no' and 'hide_on_mobiles_only'. All the possible values of $aPageOptions['show_right_sidebar'] are the same as that of $aPageOptions['show_left_sidebar']. So based on the values of these arrays, you should make implementation to show or not show the left and right sidebars. The value, 'hide_on_mobiles_only' means hide the sidebar on mobile phone screens or small screens but show it on large screen.

For example, themes/my_theme/auth-page.php, where "my_theme" is a default theme, the function sidebars_and_middle_space_sizes($iParamSidebarLeftSize, $iParamSidebarRightSize, $aParamOptions, $sParamSpaceType) is used to return a bootstrap class name that hides or show the left sidebar and right sidebar. Example implementation of the sidebars_and_middle_space_sizes() is like this sidebars_and_middle_space_sizes(3, 3, $aPageOptions, 'SIDEBL');. The function will return an HTML class display-none or a bootstrap class col-3 based in whether the value of $aPageOptions['show_left_sidebar'] is 'yes', 'no' or 'hide_on_mobiles_only'. The function sidebars_and_middle_space_sizes() works with bootstrap only.

Also, for example, in the themes/my_themes/auth-page.php, there is a function which uses the the variables $sPageType and $iPageID. The function is show_widget_item($sParamPageType, $iParamPageID, $sParamWidgetSpaceSysCode);. It is used to show widgets in the specified widget area. For example, in the left sidebar, the function is implemented as follows: show_widget_item($sPageType, $iPageID, 'SIDEBL');

JavaScript and CSS files in Your theme

When developing your theme, you will include JavaScript and CSS files. You are free to include your own JavaScript and CSS files as you like. However, maintain the themes/my_theme/js/core/core.js where my_theme is one of the default themes.

Also maintain the bootstrap CSS and Javascript. That means, do not delete this from the header of your theme:

if(file_exists('./plugins/thefoj_bootstrap/on.txt')){
	include_once('./plugins/thefoj_bootstrap/includes/add_in_header.php');
}

Also, do not delete this from the body or footer of your theme:

if(file_exists('./plugins/thefoj_bootstrap/on.txt')){
	include_once('./plugins/thefoj_bootstrap/includes/add_in_footer.php');
}