Symfony-framework.com

After many many busy days, I finally have the time to write something usefull for all the symfony comunity and for all the programmers trying to learn this fantastic php5 framework.

This tutorial explains how to develop a themes management system in wordpress style with symfony.

My purpose is to give you a base and some ideas; so I haven’t written an heavy and very difficult to read tutorial but a very simple, step by step tutorial, from which you can learn and get ideas.

You can also download this modified sf sandbox themes administration management in which is included:

- adminThemes ( a basic themes administration system that uses sfSetting plugin )
- the tutorial example
- 3 themes ( the tutorial theme + 2 Studio7designs templates themes )
- sfSettings plugin (last version)

In the sf_sandbox_theme_management, I included a rudimentary themes administration system that uses sfSettings and permit to choose a theme and watch a preview of your site in a prototype window.

For installation info read at the bottom of this tutorial.

Good read.

I hope many of you will send me critics, suggestions or ideas.

Mauro Casula
SymfonyFramework.com

THEMES MANAGEMENT SYSTEM IN SYMFONY

1. CREATE A SIMPLE MODULE/ACTION

1.1 Create a module in your frontend application.

In this tutorial I’ll suppose you have a frontend and the following module/action:
module: home
action: index
> symfony init-module frontend home

1.2 Customize the /apps/frontend/modules/home/templates/indexSuccess.php

<div id=”menu”>
<a href=”#”>Home</a>
<a href=”#”>Portfolio</a>
<a href=”#”>Contact</a>
</div>

<div id=”home_content”>
<h1>This is a very simple template example.</h1>
Text text text
</div>

1.3 Create a stylesheet

Create the following stylesheet: /web/css/style.css

body { color: white; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; margin: 30px; background-image: url(’/themes/tutorial_theme/images/back.jpg’); background-position: top left; background-repeat: repeat-x;}

#menu {width: 600px; padding: 5px;}

#menu A {text-decoration: none;font-weight: bold;}
#menu A:hover {text-decoration: none;font-weight: bold;color: yellow;}

#home_content { width: 600px;}

#home_content H1{ font-size: 16px; }

1.4 Customize /apps/frontend/modules/home/actions/action.class.php

<?php

class homeActions extends sfActions
{
/**
* Executes index action
*
*/
public function executeIndex()
{

}
}

2. THEME FOLDER STRUCTURE
The themes folder structure will be the following:

- A private folder in the root containing customized templates:
/themes/my_theme/layout.php
/themes/my_theme/modules/module_name/templateSuccess.php
…
- A public folder inside public web folder containing images and styles
/web/themes/my_theme/images
/web/themes/my_theme/css

2.1 Copy layout:

/apps/frontend/layout.php
in:
/themes/tutorial_theme/layout.php

2.2 Copy template:

/apps/frontend/modules/home/templates/indexSuccess.php
in: /themes/tutorial_theme/home/templates/indexSuccess.php

2.3 Copy style:

/web/css/style.css
in:
/web/themes/css/style.css

replace
background-image: url(’/images/back.jpg’)
with
background-image: url(’/themes/tutorial_theme/images/back.jpg’)

2.4 Copy images:

/web/images/…
in:
/web/themes/images/…

2.5 Modifiy all you prefere in theme template, layout, style..

Example:
Change body text color from white to black:
replace:
color: white;
with:
color: black;

You have sucessfully created a theme.

3. CREATE A FILTER FOR THEME ACTIVATION

This class extends the funcionalities of sfFilter Class.
If you don’t know what is a symfony filter, please first read here [].

ThemesFilter execute before the view render. It check if exists a defined theme in the system and if exists, overwrite layout, templates, style and images only if defined in the theme.

In my applications, I save in a SF_SETTING variable ( CURRENT_THEME ) the current theme and sfSettings plugin make the variable visible in all my application.

3.1 Create the filter class themesFilter.php

<?php
class themesFilter extends sfFilter
{
public function execute ($filterChain)
{

// take the theme from a constant or from where you want.
// i integrated theme administration with sf_settings plugin support
// i simply record in sf_settings a record with current selected theme
// and so sf_settings make visible a constant “current_theme” in all my symfony application
// but you can think to develop another type of theme administration

// $theme = CURRENT_THEME

$theme = “tutorial_theme”;

$actionEntry = $this->getContext()->getActionStack()->getLastEntry();

if($theme) {

$actionEntry->getActionInstance()->getResponse()->addStyleSheet(”/themes/”.$theme.”/css/style”);

$module = $this->getContext()->getModuleName();
$action = $this->getContext()->getActionName();

$template_folder = SF_ROOT_DIR.”/themes/”.$theme.”/modules/”;
// CHECK IF ALTERNATE TEMPLATE EXISTS
if ($actionEntry->getActionInstance()->getTemplate()) {
$theme_template = $template_folder . $actionEntry->getActionInstance()->getTemplate();
} else {
$theme_template = $template_folder . $module.”/”.$action;
}
// CHECK IF TEMPLATE FILE EXISTS IN THEME FOLDER
if (file_exists($theme_template.”Success.php”))
{
$actionEntry->getActionInstance()->setTemplate($theme_template);
}

$layout_folder = SF_ROOT_DIR.”/themes/”.$theme.”/layout/”;
// CHECK IF ALTERNATE LAYOUT EXISTS
if ($actionEntry->getActionInstance()->getLayout()) {
$layout = $layout_folder. $actionEntry->getActionInstance()->getLayout();
} else {
$layout = $layout_folder.”layout”;
}
// CHECK IF LAYOUT FILE EXISTS IN THEME FOLDER
if (file_exists($layout.”.php”))
{
$actionEntry->getActionInstance()->setLayout($layout);
}

}
else
{
$actionEntry->getActionInstance()->getResponse()->addStyleSheet(”style”);
}

$filterChain->execute();

}
}

3.2 Put this class file in application lib folder: /apps/frontend/lib.

3.3 Activate filter in your filters.yml file:

/apps/frontend/config/filters.yml

change it as follow:

rendering: ~
web_debug: ~
security: ~

themes:
class: themesFilter

cache: ~
common: ~
flash: ~
execution: ~

3.4 Clear the cache

Now you can appreciate that the aspect of your page have changed.
You can try to create another theme or to create more actions, add templates to the themes and modify them.

sf_sandbox_theme_management INSTALLATION INFO

In the sf sandbox themes administration management I included a rudimental theme administration system that uses sfSettings and permit to watch a preview of your site in a prototype window.

You only have to download it and:

- create a database

- configure database.yml and propel.ini

( make sure your propel.ini contain that lines: )

propel.database = mysql

propel.database.createUrl = mysql://localhost/
propel.database.url = mysql://username-here:password-here@localhost/your-db-here
propel.mysql.tableType = InnoDB

- build all ( >> symfony propel-build-all-load backend )

This will create a sf_setting table in your database and will load example data.

Now you can try:

- http://your-host/home <- frontend example

- http://your-host/backend.php/ <- backend themes administration system

Enjoy and remember to leave a comment

Best regards.
Mauro Casula.
SymfonyFramework.com