Theming your CakePHP apps (V1.2)

There has been support for themes / skins for CakePHP since eons - in fact we had put in themes in Cheesecake Photoblog right in version 1.x, however this feature is not very well known. In CakePHP v1.2 theming has matured a bit and is now part of the core. Despite this there are continued request for information on how to use this functionality on the list and even googling for cakephp + theme does not really return anything definitive.

Once you have figured out how to use theming, adding new themes is errr... ummm... a piece of cake (sheesh talk about cliches!). The following steps will get you started with theming.

#1 In your app_controller add

PLAIN TEXT
PHP:
  1. var $view = 'Theme';

#2 Next you have to tell your application the name of the theme you want to use - I do it in beforeFilter() , beforeRender() might be a good place as well with something like

PLAIN TEXT
PHP:
  1. $this->theme = "mythemename";

in Cheesecake Photoblog the line reads

PLAIN TEXT
PHP:
  1. $this->theme = $this->Session->read('cheeseCake.theme');

Thats it for the coding part, rest is just knowing where to put the views and other web resources for your theme.

The theme view class searches for views inside a folder called by your theme name inside the themed folder in view... Confused? Lets continue with the example of a the theme named "mythemename"

The views for this theme will reside in

PLAIN TEXT
CODE:
  1. /app/views/themed/mythemename/

and will mimic the same structure as the main app - thus the default layout for this theme will be

PLAIN TEXT
CODE:
  1. /app/views/themed/mythemename/layouts/default.ctp

A view for index action of photos controller would be

PLAIN TEXT
CODE:
  1. /app/views/themed/mythemename/photos/index.ctp

A notable part of theming in CakePHP is that it has a fallback built in - if a particular view is not found within the themed folder then the view from the main app will be considered. Thus in the DRY spirit you need not replicate each and every view in your theme, the parent view will be used automagically.

If you have tried theming any application before you might be wondering what about the resources like CSS, Images and Javascript? Don't despair - the theme specific webroot resources reside in a themed folder inside the webroot. So a css file called style.css for the above example would be in

PLAIN TEXT
CODE:
  1. /app/webroot/themed/mythemename/css/

Another thing to note here is that the HTML and Javascript helpers are theme aware and will link to appropriate css, images, and js files (yes the fallback is built into these as well)

Lastly even the plugin views can be themed but I will leave that as an exercise to the reader to figure out...

About this entry

You’re currently reading “ Theming your CakePHP apps (V1.2) ,” an entry on SANIsoft - PHP for E Biz

Published:
12.29.07 / 3pm
Category:
CakePHP, Cheesecake, HowTo
Author:
Tarique Sani
RSS for this Author