Views
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? | Using Themes.
Contents |
Nature of themes
Themes are neither solid, liquid or gas. They 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 develop themes?
These are the reasons why should you learn theme development of Social Network Software.
- Complete control over layout, presentation and various design elements.
- Tweaking already existing themes according to your and your community taste.
- When your requirements are too unique and specific to be found in our theme gallery.
- Migrating from a non-Social-Network-Software powered website to a Social-Network-Software powered one.
- You wish to frame out of box ideas inside Social Network 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.
- main_home.php - This file paints what will reside inside other elements of homepage like login form, signup form, welcome text and featured content.
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.
main_home.php
Controls what's inside the placeholder. It substitutes whatever HTML code needs to be substituted for placeholders inside index.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_data
));
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.
header.php
Header covers banner and menu. Banner in turn includes site logo too. All pages of social network software website share same header and so while it can be populated inside main_home.php but it will be judicious to make it a separate file so that it can be shared among all pages.
Minimal header.php has data for {HEADER_HTML} defined.
define('HEADER_HTML',$header_html_data);