Powerful Theme helper to separate common views from themes

[eluser]Blaze Boy[/eluser]
i have made a way to make your project themeable ... it consist only of one extension to loader, one config file, one helper ... and the themes directory
it's one of the steps to the project i'm REmaking (vunsy) a website builder with codeigniter
this is part of the docs

why should i use themes

the normal idea is to separate my views folder into some folders with theme names and then call the proper view file with the load->view function.

Code:

$theme_name = "default";
$this->load->view($theme_name.'themefile');

this will make you every time initialize the theme name variable ...
the enhanced idea is to make the theme name as a config item and call it whenever you want.

this is a very bad idea ... what if you want to separated themes from views, or you have a common view files for multiple themes, what if you want every theme to add an automatic doctype,javascript,style sheets,blocks inside blocks?, here we come with themes

i have made it and merge it to the vunsy project... and i have made the docs also
download it from here [Download]

installation
1- download vunsy2 from the link above(vunsy is not complete project yet, theme is complete)
2- copy themes directory
3- copy system/application/config/theme.php
4- copy system/application/helpers/theme_helper.php
5- copy system/application/library/MY_Loader.php
6- enjoy

[eluser]Blaze Boy[/eluser]
Themes
the first thing you must know about themes is they are normal view files so you could load thems inside view and vice-versa.
themes are located in a directory called 'themes' every theme is a folder like "default","glassy","sand"...etc

why should i use themes

the normal idea is to separate my views folder into some folders with theme names and then call the proper view file with the load->view function.
$theme_name = "default";

$this->load->view($theme_name.'themefile');

this will make you every time initialize the theme name variable ...
the enhanced idea is to make the theme name as a config item and call it whenever you want.

this is a very bad idea ... what if you want to separated themes from views, or you have a common view files for multiple themes, what if you want every theme to add an automatic doctype,javascript,style sheets,blocks inside blocks?, here we come with themes

Configuration of themes

themes has a config items inside

Code:

system/application/config/theme.php

Code:

Variable    description    default value
themes_directory    the path to themes directory, the defualt themes directory located in the site root besides the system directory, if you want to change the location to make ex. your views folder as the themes folder you have to change it to APPPATH.'views';    themes
default_theme    the default theme directory name, simply the name of the directory the contain the default view files inside the themes directory    default
doctype    the default doctype, we specified it here to standardize the way themes display    xhtml1-trans
charset    the default charset    UTF-8
site_name    your site name    Site Name
page_title    the defualt page title (to write it besides the site name if you didn't put it)    
page_title_prefix    the separator between page name and site name    » [»]
page_title_suffix    the end of title , you can change it to dot if you want    
meta    an empty array that has the meta lines of the theme    
css_files    css file paths to include in theme head    
js_files    javascript paths to include in thene head or foot    
js_at_foot    a boolean variable that specify if javascript will be added to theme head or foot, we normally add it to head but Yahoo suggested that we add it to foot for faster page loading and loading the more important content first.    FALSE
the previous config items are the shared items between all themes , you theme can use the helpers to grap these data , just like the wordpress tags if you are familiar with , for example if you want to grap the title tag

Code:

<?=theme_title()?>

produces: <title> Site name » page title </title>
you can read the themes helper for more information

Note:the themes helper is not auto loaded , remember to load it before using the tags
How to load a theme file

there is 2 way of loading the themes files, one specified for controllers,
we extended the loader class with a function called theme just like the view function.

Code:

$this->load->theme('filename', array(), FALSE );

the first paramter is the file name, the second is an array of key value variables, the third is if you want to return the output or not. this function behaviour is exactly like the the view loader the difference is it loads the view files from the themes folder and the default theme folder.

the second way is a function and it's in the theme helper, it is specified to deprecate the loader->theme() with a short syntax and to return the output by default.

Code:

theme_load('filename',array(),TRUE);

Creating theme files

create a main frame file the has the main page view in the default directory,

Code:

<?= theme_doctype(); ?>
<html >
<head>
<?= theme_head(); ?>
</head>

<body>
//page content here
<?=theme_foot()?>
</body>
</html>

this will generate the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Site Name&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

theme will autimatically get the javascript files and the style sheets in teh right place, when you add them using the theme_add() function,
you can use the theme_add() function to add css and javascript files, and meta,link,script blocks also are acceptable, when you use it it'll test the input to determine the type (CSS,JS,Meta) and add it the the proper array in config (without dupplication) , when the theme_head() function is called it'll grap the array and generate the code of charset,title,meta,css,js,block ... etc

you can use the theme_add() function to add an array or nested arrays or strings, the file names could be relative to the site or to the theme (default)

you can call another theme block from the theme file with the function

Code:

theme_load('blockname')

;, simple isn't it.

[eluser]Blaze Boy[/eluser]
Theme Helper
Loading this Helper
to load this helper use the code below

Code:

$this->load->helper('theme');

Code:

theme_load( $file, $vars = array(), $return = TRUE)

loads a theme file from the current theme directory and return the output by default

Code:

theme_set( $theme )

change the current theme the $theme

Code:

theme_img( $src, $theme=TRUE )

like the img from HTML helper , but the default behaviour is that consider the image path ($src) is relative to current theme, if relative to the sire root put $theme=FALSE

Code:

theme_url( $themefile='' )

generate a url to a file in theme directory (could be used for javascripts or css file if needed, or for image file or flash file path).

Code:

theme_title( $title='html' )

get the page title tag if you set title=html, the other value permited it 'text' this will return the title only without the <title> tags

Code:

theme_sitename( $sitename )

set the site name or get it if $sitename is not specified.

Code:

theme_pagetitle( $pagetitle )

set page title (page name only with out site name ), or get it if $pagetitle not specified

Code:

theme_add( $input, $theme=TRUE )

add a js,css required files to the theme, $input is an array or nest

Code:

theme_doctype()

return the doctype line

Code:

theme_meta( $input )

add or return the meta block, you can use it to add the doctype line above your theme main style file

Code:

theme_css( $input, $theme=TRUE )

add a css file or return the css block for your theme

Code:

theme_js( $input, $theme=TRUE )

add a javascript file or block or returns the javascript block

Code:

theme_head()

return the whole head of the page (meta+title+css+charset+js)

Code:

theme_foot()

return the foot of page (if javascript at foot is true from the config file) this will return the javascript block

[eluser]Blaze Boy[/eluser]
51 views and no even one comment ? don't you like it guys? any ideas?

[eluser]phpserver[/eluser]
Hi,i have tried it and i like it.Keep up the good work,we sure appreciate.

[eluser]Blaze Boy[/eluser]
finally, thanks phpserver for commenting

[eluser]subbu.genie[/eluser]
Hey,

Great work. I was also looking for a similar situation. I was looking to integrate WP with CI, so that I could use the rich template library of WP with CI.

Let me know if you have any idea.

subbu

[eluser]Tominator[/eluser]
Hi man!

I think this isn't very well solution. Why?
1, It's too hard for me Too many unneeded functions!
2, It's too complicated solution for me!

Why I'm telling this. I've made my own solution, it's part of COMPER Template Parser (http://parser.comper.sk). But it works only with parser, so I've made better solution, which I'm still testing. But it's as easy as in Parser

Tom.

[eluser]gozpel89[/eluser]
let me tried it..

nice thread dude