Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email:


Themes in CakePHP 3, A step by step HowTo

Almost every application I code has themes which either the end user can change or the admin can set or can be changed on the fly. Doing all these things was easy in CakePHP 2.x. With the first alpha release of CakePHP 3.x I was naturally keen to try out how theming worked with V3.

What I am going to show is how to convert this

Default Theme

Default theme you get when you first bake


to this.


Twitter bootstrap theme which we will create.

I am presuming that you have experience enough to install CakePHP 3 and can bake a Model, Controller and associated views

Step 0

Before you start to bake create the posts table using with the following SQL

Step 1

Bake the Post Model, Posts Controller and the Views. At this stage if you got to yourapp/posts you will be able to see a screen similar to the first screenshot

Step 2

Themes in CakePHP 3 are full fledged plugins, so bake a plugin called ‘Twit’ using the following command on the CLI

Step 3

We are going to create a theme based on Twitter Bootstrap. So download Bootstrap Dist, unzip it and copy the css, fonts and js folder to plugins/Twit/webroot/ . Note: This can be optimized because serving static resources via dispatcher is needlessly expensive but that’s for some other time.

Step 4

A few words about how themes work in CakePHP 3 . Your theme files will reside in plugins/Twit/src/Template, the folder structure within the plugins/Twit/src/Template folder is exactly the same as src/Template/ of the main app, so the layout file for the new theme will be in plugins/Twit/src/Template/Layout. Create a file called default.ctp and add the following content to it. Don’t be intimidated by it, the really useful lines are between 10 to 23 and 54 to 58. Rest of the lines are just Twitter Bootstrap structure for the document.

Step 5

Similarly paste the following code into a file called index.ctp and place it in the folder plugins/Twit/src/Template/Posts

Step 6

Open the AppController.php of the main app, and add the following line to activate your newly created theme

Step 7

Reload the app in browser and enjoy your newly created theme.

Update: This was just an illustrative post. If you want to transparently use Twitter Bootstrap 3 with CakePHP 3 take a look at


Creating a theme in CakePHP has always been easy. It was a bit kludgy in earlier version but by making theme a plugin the developers have taken a huge leap forward. There are still a few kinks like how to style the pagination links in themes but hopefully they will be sorted out soon. Your feedback, comments and requests for topics to write on are most welcome.

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


  1. Pingback: Using themes in CakePHP 3 | Tarique's Travails

  2. Pingback: CakePHP3.0への移行の準備メモ | X->A->O

  3. Pingback: Sanisoft Blog: Themes in CakePHP 3, A step by step HowTo | facebooklikes

  4. Missing Plugin

    Error: The application is trying to load a file from the Twit plugin

    Error: Make sure your plugin Twit is in the D:\xampp\htdocs\tunes\plugins\ directory and was loaded


  5. I found my problem. and solved it.
    I add below this code int bootstrap.php file
    // Loads a single plugin

    Thats it. Thanks for your quick response.

  6. Where are you supposed to put the “Step 6” component in the AppController.php file? I’ve walked through your tutorial, but it didn’t attempt to load the newly create Theme.

    I did start with a new project I am working on, and I did modify the “$post/s” to match my view name, but otherwise I did use the Twit js/css/etc.

  7. very good
    thank you for this very good example (and solution) cause I searched for a long time… how to use twitter bootstrap in CakePHP

  8. Pingback: CakePHP 3.0.0 released - Tarique Sani

  9. Step 2

    Themes in CakePHP 3 are full fledged plugins, so bake a plugin called ‘Twit’ using the following command on the CLI

    Console/cake bake plugin Twit

    not able to bake this provide message,”the system cannot find the specific path”.how to solve this error…..

  10. Thanks. That’s a great how-to to start and get a better understanding of CakePHP’s themes. Very helpful!

Leave a Reply