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
- 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
- $this->theme = "mythemename";
in Cheesecake Photoblog the line reads
- $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
- /app/views/themed/mythemename/
and will mimic the same structure as the main app – thus the default layout for this theme will be
- /app/views/themed/mythemename/layouts/default.ctp
A view for index action of photos controller would be
- /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
- /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…
i am new to MVC, and find the cakephp easier than codeignitor,symfony or all other sibling frameworks
I just bumped into the dynamic gradient fill of div instead of image backgrounds.
http://www.designdetector.com/demos/css-gradients-demo-3.php
themes thus created will have a web2.0+ look rather than mundane solid fill colored pages.
I use theme for my app, it’s a cool. Thanks for the tip.
Stupid question, but can you direct me to a resource on how to create a theme? What tokens do I need to use in the body of the html for content, navbar, etc? And when you say “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)” how do I refer to my css stylesheet which is in webroot/themed/mytheme/css/style.css?
@Noah – $html->css(‘style’) will work, there is no more hidden magic.
Thanks for the article. I’ve known that themes were available, however it wasn’t until 10 minutes ago that I implemented the native theme capabilities of Cake (and it only took about 10 minutes).
Good overview of theming, thanks!
I started using themes in Cake 1.2 but am having trouble using layouts within these themes. Is it possible to use layouts and themes together or do you have to use only one at a time.
You can use both at the same time….
Themes have changed in CakePHP 2.0.0
For further information, please check out http://blog.ergatides.com/web-design/themes-in-cakephp-2-0-0/