Tag: Job board theme
Job board theme
-
Theme Development
Theme Development
Note: This is a technical document. It discusses technical aspects of theme module and developing a custom theme which requires a good knowledge of advanced PHP, HTML, CSS and Javascript and is not meant for non-technical users. Know more about themes: What are themes? | How to change Themes.- 1 Theme Development
Nature of themes
Themes are collection of PHP scripts, HTML/CSS files and images, living under themes folder at root with folder name same as theme name. For Example: Theme Demo will be at ROOT/themes/demo. Theme files are interlinked and hooked together to form the actual website.
Why learn developing themes?
- Complete control over layout, presentation and various design elements.
- Tweaking already existing themes according to you and your domain taste.
- When your requirements are too unique and specific to be found in our theme gallery.
- Migrating from a non-Ejobsite powered website to a Ejobsite powered one.
- You wish to implement out of box ideas to Ejobsite Software.
Theme Structure
For a minimal theme you will require two files:
- text.htm – Which is responsible for basic layout of the homepage. It determines where elements like banner, menu, footer and other elements of homepage will be placed and arranged which in turns makes clear structural layout of homepage.
- home.php – This file paints what will reside inside other elements of homepage like Login form, Job Search, welcome text and Latest Jobs section.
So the homepage is rendered at two levels.
text.htm
Controls homepage structure. It looks like an HTML file with placeholders enclosed in curly braces.
Our basic website structure is clear here.
home.php
Controls what’s inside the placeholder. It substitutes whatever HTML code needs to be substituted for placeholders inside text.htm.
It is actually done with the help of assign_vars method of $template object of Template class. For example to assign some HTML code to {PLACEHOLDER}, first generate HTML and store it in some variable or as a constant (say $placeholder_data) and then assign that value to {PLACEHOLDER} by
$template->assign_vars(array( 'PLACEHOLDER'=> $placeholder_html ));Recommended theme files
The above files are bare bones of a theme but for a full featured theme which is not just a static homepage we have to go beyond and create some more files for a robust and extensible theme structure.
Website has two elements which are global to all pages. They are the header and the footer.
They need to be included in every page. A file called body.php (which is not a part of theme files) is responsible for assigning values to {HEADER_HTML} and {FOOTER_HTML} placeholders (just like home.php) and is included in every page automatically. A minimal code is shown below.
<?php $template->assign_vars(array( 'HEADER_HTML' => HEADER_HTML, // HEADER_HTML defined in header.php 'FOOTER_HTML' => FOOTER_HTML, // FOOTER_HTML defined in footer.php )); ?>
Above code shows that the task of rendering the common elements is automatic, provided that these common elements are defined in their respective theme files. So we have to take care of four additional theme files.
- header.php
- footer.php
header.php
Header is a global element. Header covers
- Everything till opening BODY html tag.
- includes the DOCTYPE declaration, opening HTML tag and HEAD section.
- HTML of banner.
- Banner in turn includes site logo too.
- HTML of menu bar.
Minimal header.php has data for {HEADER_HTML} defined.
<?php
define('HEADER_HTML','<!DOCTYPE html><html lang="en"> <head> <!-- meta tags --> <!-- CSS calling --> </head> <body> <nav class="navbar navbar-expand-lg 1navbar-dark bg-dark fixed-top"> <div class="container"> <div id="banner"> <!-- BANNER DATA --> </div> <ul id="menu"> <li><!-- MENU ITEM 1 --></li> <li><!-- MENU ITEM 2 --></li> <li><!-- MENU ITEM 3 --></li> </ul> </div> </nav> '); ?>footer.php
Footer is also a global element which may include:
- Link to copyright.
- Social media sharing.
- RSS feeds.
- Link to Disclaimer.
- Privacy Policy.
- Small sitemap, sometimes.
Minimal footer.php has data for {FOOTER_HTML} defined.
<?php define('FOOTER_HTML', '<div class="container-fluid white-bg dark-bg-theme1 border-top border-bottom py-3 footer"> © <?php echo date('Y') ?>, by <a href="https://www.mywebsite.com">My Website</a> <!-- Social Media Links --> <!-- Other Links --> <!-- RSS publishing link --> </div> </div> <!-- END PAGE WRAPPER --> </body> </html> ?>stylesheet.css
Separating theme specific design features in a CSS file is recommended. More than one stylesheets can be made and maintained inside a folder.
Miscellaneous theme files
Absence of any of these files do not lead to any problem and they provide additional features which do not alter theme functionality or theme development.
index.php
This file do not contribute to theme development but is a security feature. It contains a simple line:
<?php header('../'); ?>It simply redirects anyone trying to reach the theme folder one directory back. e.g. user trying to go to folder of default theme i.e. {ROOT}/themes/defaulttheme will bounce back to {ROOT}/themes.
As {ROOT}/themes again have identical index.php redirection script, so user is redirected again one directory back to homepage i.e. at {ROOT}/index.php.
Though directory listing in Apache is prevented by setting directory permissions which shows an Apache’s untidy access denied error, so this is just a nice and friendly way to tell user that he is not allowed to do so.screenshot.gif
This contains the screenshot of the theme’s homepage which is shown as a thumbnail in admin panel theme choosing screen so that a particular theme can be visually recognized.
If absent, no thumbnail is shown.
info.txt
This text contains information about theme which is displayed again in admin panel theme selection screen. Information contains, theme’s name, description and version in following format.
Theme Name: Default theme Description: This is default theme for Ejobsite Software. Version: 1.0
If absent, theme folder name is displayed as theme name and rest information is not displayed.
theme specific images
Theme related images can be stored inside a separate folder named images inside respective theme directory.
Only theme dependent images (e.g. bullets, backgrounds, buttons and icons etc.) must be stored inside images folder and images which are part of website instead (e.g. logo and products images) must be put at {ROOT}/images so that they can be shared among all themes. -
Free Job Board WordPress Theme
Job Board WordPress Theme – is an advanced job board WordPress Theme and Plugin combination for WordPress.
The feature-rich WordPress theme and plugin combo was built for ease-of-use and tight integration with WordPress. It enables anybody with a WordPress site to setup a Job Board and post jobs online.
Job Board WordPress Theme
The Job Board WordPress fully customizable theme turns your site into an advanced job posting site
Job Board WordPress Plugin
Manage job listings from the WordPress admin panel, and allow users to post job listings directly to your job board
Features:
- Post Jobs
- Categorize Job Posting
- Search Jobs
- Preview Jobs
- RSS Feed
Job Board WordPress combo of above theme and plugin is a complete job board software solution for WordPress CMS.
It is well suited for a Job Board, Recruitment Agency or a Company with multiple job listings.
Homepage
Job Preview
Post Job Form
Article / Blog
About Us
Contact Us
