Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email: hello@sanisoft.com

Blog

Theming your CakePHP apps (V1.2)

All folders called ‘Themed’ are renamed to ‘Theme’ in CakePHP version 1.3 everything else in this post still holds true

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

#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

in Cheesecake Photoblog the line reads

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 [code]/app/views/themed/mythemename/[/code] and will mimic the same structure as the main app – thus the default layout for this theme will be [code]/app/views/themed/mythemename/layouts/default.ctp[/code] A view for index action of photos controller would be [code]/app/views/themed/mythemename/photos/index.ctp[/code]

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 [code]/app/webroot/themed/mythemename/css/[/code] 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 the Author

Dr. Tarique Sani is a pediatrician and forensic expert by education. He is a PHP programmer of 'wrote the book' caliber and has to his credit several very popular open source as well as commercial PHP projects. He leads a team of dynamic programmers at SANIsoft who have in-depth understanding of Web scalability, development tools and usability practices with strong developmental skills in PHP, MySQL/PostgreSQL, HTML, Javascript, and Linux/Apache

19 comments

  1. Pingback: PHPDeveloper.org

  2. Pingback: developercast.com » Sanisoft Blog: Theming your CakePHP apps (V1.2)

  3. Pingback: links for 2008-01-01 « Richard@Home

  4. Pingback: Web Developer Blog » Blog Archive » CakePHP Theme View

  5. Pingback: CakePHP Weekly Summaries Issue #1 | Cakephp.nu blog

  6. Pingback: Theming With CakePHP :: PseudoCoder.com

  7. Pingback: Blog Dot Php With cakePHP » Полезные ссылки по cakePHP

  8. Pingback: PHP-ist: All about learning PHP, frameworks, tips and tricks » CakePHP: How to Add Theme Support?

  9. Pingback: CakePHP Tutorials :: PseudoCoder.com

  10. 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?

  11. 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).

  12. Pingback: CakePHP theme made easy | rodoTelmi

  13. Pingback: Template par défaut pour CakePHP pour votre site en CakePHP « Wareteam

  14. 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.

Leave a Reply