Getting a Design - Using Joomla Templates for cakePHP

Design is probably not an area of particular strength of cakePHP. And it’s not of me either… Designing a webpage from scratch requires a lot of work & time and is not something I particularly enjoy. Unfortunately there are almost no design templates available for cake (yet?). This might be a fruitful new project: creating a cakePHP template respository! On the other hand there are a lot of Joomla templates that can be freely used. Marco wrote a nice little tutorial on how to adopt a Joomla template to work with cakePHP.
So I decided to give this approch a try and grabbed a free template from Joomlahacks. As outlined in the tutorial mentioned above getting such a template to work with cakePHP requires the following steps:

  1. Copying CSS and images and getting the paths of the images right
  2. Modifying the index.php of the Joomla template to be used as our default.ctp

The first step is quite simple and shouldn’t be a problem. The second is not as straightforward though, so let me give you some hints.

  • Rename the index.php to default.ctp and see what happens.
  • Replace the entire … part with the heading from the official default.ctp. Most Joomla templates use javascript for changing fontsize dynamically on the webpage. I find this to be useless anyway so not having this JS available is not a problem for me. If the design relies on some other scripts you will have to include those scripts using standard cakePHP convention such as:

<?php echo $javascript->link('script.js'); ?>

  • Work your way through each error message and try to fix the problems line by line.
  • Very important: Replace mosMainBody(); with the following code:

<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>

  • Keep the original template open and try to get your template as close to the original as possible while removing errors.
  • If your Joomla template uses additional php scripts to generate a dynamic menu you can delete all this stuff as cakePHP is not using this anyway. You should instead keep the CSS for the dynamic menu and use a cakePHP approach of doing this. I’ll write an article on this later on.
  • Replace <?php mosPathWay(); ?> with the cakePHP implementation of breadcrumbs as described in my post here.
  • You most likely will find some mosCountModules(”) entries in the Joomla template. Those are being used to determine whether to show Joomla elements (such as a login box) or not. You can delete all those function calls, because there is nothing comparable with cakePHP (that is, unless you program it of course). It just depends on your design needs and wants whether you will have to use the provided element layouts with your new modified template or not.

This approach will allow you to get a simple design for your new project rapidly. It will not give you the full blown design that you might want to have eventually but takes you a whole leap forward in getting there. To give you an idea, of what your cakePHP project could look like at this stage (including a simple dynamic CSS list based menu) have a look at this example:

I hope this helped you with your approach of getting a decent looking cake layout up and running as efficient as possible. If you have any questions on this topic please comment this post and I’ll try to help you out!