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

Blog

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.

Twit_theme

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.

Conclusion

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

7 comments

  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

    <?php
    Plugin::load('Twit');

  5. I found my problem. and solved it.
    I add below this code int bootstrap.php file
    // Loads a single plugin
    Plugin::load(‘Twit’);

    Thats it. Thanks for your quick response.

Leave a Reply