Theme Development

AI Tutorials
View Demo


Wiki · Theme development

Theme development guide

Build a custom job board theme with complete control over layout, presentation, and design. This developer guide walks through the theme structure of ejobsitesoftware.com software — how the homepage renders, which files a theme needs, and how the header, footer, and helper files fit together — with real code examples.

Try the demoDeveloper wiki
PHPHTML / CSSJavaScriptAdvanced

This is a technical document. Developing a custom theme requires a good knowledge of advanced PHP, HTML, CSS, and JavaScript, and isn’t meant for non-technical users. If you’d rather not code, browse the ready-made theme gallery or read what themes are and how to change them.

What are ejobsitesoftware.com themes?

Themes are a collection of PHP scripts, HTML/CSS files, and images that live under the themes folder at the site root, in a folder named after the theme. For example, a theme called Demo lives at ROOT/themes/demo. The theme files are interlinked and hooked together to form the actual website.

Why develop themes

Reasons to build your own

Total control

Own the layout, presentation, and every design element.

Tweak existing themes

Adjust a gallery theme to your own and your domain’s taste.

Unique requirements

Build for needs too specific to find in the theme gallery.

Migrate a site

Move from a non-platform site to an ejobsitesoftware.com-powered one.

Out-of-box ideas

Implement creative concepts on top of the software.

Reusable structure

Create a robust, extensible base you can build on.

Theme structure

How the homepage renders

A minimal theme needs just two files — and the homepage is rendered at two levels.

The two essential files are text.htm, which is responsible for the basic layout of the homepage — where the banner, menu, footer, and other elements are placed — and home.php, which paints what resides inside those elements, like the login form, job search, welcome text, and latest jobs section.

text.htm — the structure

This file controls the homepage structure. It looks like an HTML file with placeholders enclosed in curly braces (for example {PLACEHOLDER}). The basic website structure is clear from it.

text.htm theme structure showing homepage placeholders and layout

The text.htm layout, with placeholders marking where each homepage element goes.

home.php — the content

This file controls what’s inside each placeholder. It substitutes whatever HTML needs to go in place of the placeholders in text.htm, using the assign_vars method of the $template object of the Template class. To assign HTML to {PLACEHOLDER}, generate the HTML into a variable (say $placeholder_html) and assign it:

home.php — assign HTML to a placeholder
$template->assign_vars(array(
    'PLACEHOLDER' => $placeholder_html
));

Recommended files

Header, footer & stylesheet

For a full-featured theme — not just a static homepage — add a few more files for a robust, extensible structure.

Every website has two elements global to all pages: the header and the footer. They must appear on every page. A file called body.php (not itself a theme file) assigns values to the {HEADER_HTML} and {FOOTER_HTML} placeholders — just like home.php — and is included on every page automatically.

body.php — assigns the global header & footer
<?php
$template->assign_vars(array(
  'HEADER_HTML' => HEADER_HTML,   // defined in header.php
  'FOOTER_HTML' => FOOTER_HTML    // defined in footer.php
));
?>

header.php

The header is a global element covering everything up to the opening <body> tag (the DOCTYPE, opening HTML tag, and HEAD section), the banner HTML (which includes the site logo), and the menu bar HTML. A minimal header.php defines the data for {HEADER_HTML}.

header.php — minimal
<?php
define('HEADER_HTML', '<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- meta tags -->
    <!-- CSS calling -->
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-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

The footer is also global and may include a copyright link, social media sharing, RSS feeds, links to the disclaimer and privacy policy, and sometimes a small sitemap. A minimal footer.php defines the data for {FOOTER_HTML}.

footer.php — minimal
<?php
define('FOOTER_HTML', '<div class="container-fluid border-top border-bottom py-3 footer">
    &copy; ' . date('Y') . ' by <a href="https://www.mywebsite.com">My Website</a>
    <!-- Social Media Links -->
    <!-- Other Links -->
    <!-- RSS publishing link -->
  </div>');
?>

stylesheet.css

It’s recommended to separate theme-specific design features into a CSS file. You can create and maintain more than one stylesheet inside a folder.

Helper files

Miscellaneous theme files

These are optional — their absence causes no problems — but they add useful features without altering theme functionality.

index.php

Not part of theme development itself, this is a small security feature. It redirects anyone trying to reach the theme folder one directory back — so a user browsing to {ROOT}/themes/defaulttheme bounces back to {ROOT}/themes, whose own index.php sends them back again to the homepage. Directory listing is already prevented by directory permissions; this is just a friendlier way to say access isn’t allowed.

index.php — folder guard
<?php header('../'); ?>

screenshot.gif

A screenshot of the theme’s homepage, shown as a thumbnail in the admin panel’s theme-choosing screen so a theme can be visually recognized. If absent, no thumbnail is shown.

info.txt

Holds information about the theme — its name, description, and version — displayed in the admin panel’s theme selection screen, in this format:

info.txt
Theme Name: Default theme
Description: This is the default theme for ejobsitesoftware.com Software.
Version: 1.0

If absent, the theme folder name is displayed as the theme name and the rest of the information is not shown.

Theme-specific images

Store theme-related images inside a folder named images within the theme directory. Only theme-dependent images (bullets, backgrounds, buttons, icons) belong there. Images that are part of the website itself — like the logo and product images — should go in {ROOT}/images so they can be shared across all themes.

Reference

Theme files at a glance

Files that make up an ejobsitesoftware.com theme (in ROOT/themes/<theme>)
File Role Purpose
text.htm Required Homepage structural layout with placeholders.
home.php Required Fills homepage placeholders with HTML via assign_vars.
header.php Recommended Defines the global header (DOCTYPE, banner, menu).
footer.php Recommended Defines the global footer (copyright, social, links).
stylesheet.css Recommended Theme-specific styles; multiple allowed.
index.php Optional Security redirect out of the theme folder.
screenshot.gif Optional Thumbnail in the admin theme picker.
info.txt Optional Theme name, description, and version for admin.
images/ Optional Theme-dependent images (bullets, icons, backgrounds).

Answers

Frequently asked questions

What are ejobsitesoftware.com themes?
A collection of PHP scripts, HTML/CSS files, and images under the themes folder at the site root, in a folder named after the theme (e.g. ROOT/themes/demo). The files are interlinked to form the actual website.
Do I need coding skills to develop a theme?
Yes. It requires a good knowledge of advanced PHP, HTML, CSS, and JavaScript. Non-technical users can pick from the ready-made theme gallery or request a custom theme instead.
What files does a minimal theme need?
Two: text.htm, which defines the homepage layout with placeholders, and home.php, which fills those placeholders with HTML for elements like the login form, job search, welcome text, and latest jobs.
What is text.htm?
It controls the homepage structure — an HTML-like file with placeholders in curly braces such as {PLACEHOLDER} that determine where the banner, menu, and footer are placed.
What is home.php?
It controls what goes inside the placeholders, substituting HTML for them using the assign_vars method of the $template object.
How are the header and footer handled?
header.php defines HEADER_HTML (everything up to the opening body tag, plus banner and menu) and footer.php defines FOOTER_HTML. A body.php file automatically assigns these to the {HEADER_HTML} and {FOOTER_HTML} placeholders on every page.
What do screenshot.gif and info.txt do?
screenshot.gif is the theme thumbnail shown in the admin theme picker; info.txt holds the theme name, description, and version shown there. If absent, the folder name is used and no thumbnail appears.
Where should theme images be stored?
Theme-dependent images (bullets, backgrounds, buttons, icons) go in an images folder inside the theme directory. Website images like the logo and product images go in {ROOT}/images to be shared across all themes.

Keep exploring

Resources & related pages

DocsDeveloper wikiAll documentation in one place.ReferenceAPI referenceREST endpoints for your board.ReferenceDatabase descriptionData structure and ids.DesignThemesReady-made theme gallery.DesignCustom homepageA bespoke branded homepage.DemoLive demoSee a theme in action.

Build a theme, own every pixel

Self-hosted with full source code, ejobsitesoftware.com lets you craft custom themes end to end. Explore the developer wiki, or start from a ready-made theme in the gallery.

Open the wikiBrowse themes
Self-hosted · Full source code · One-time from $600 · info@ejobsitesoftware.com · +91 98103 36906