Create a simple theme using layoutbundle (Symfony 2.x)

August 24th, 2015

Before create a theme, needs some explanations!

When you start creating theme using layoutBundle, following questions will help you understand “how to create theme with LayoutBundle”.

Where all themes will be placed?
How to use layout handler file?
How to use child templates?

Where all themes will be placed?

You can place your all theme in any bundle. The 'themes' directory will be created in bundles 'views' directory. For example, you have a bundle with name of ThemeBundle or FrontBundle, create a 'themes' directory in your ThemeBundle. Here is the directory hierarchy.

                ThemeBundle->Resources->views->themes

Your can create many themes in 'themes' directory

After creating themes directory, register your theme bundle in config.yml

                kamran_layout:
    _theme_bundle: 'YourBundleName'  // bundle name with namespaces

One of the easiest improvements we can implement with our pre content is syntax highlighting. It makes code easier to read and understand. In addition, it will make our design a bit more vibrant.

How to use layout handler file?

This file is called theme configuration file and is responsible for handling theme layouts.You can define URL rules to themes and theme templates. Themes regions are also defined in this file.

layouts.xml file is theme configuration file which handles all theme related tasks

How child templates used in LayoutBundle?

Create a simple theme for Symfony2

Creating a theme using LayoutBundle is easy, here are steps to create a theme.

1. Install LayoutBundle

You need to install LayoutBundle using composer

                $ composer require kamran/layout-bundle dev-master

2. Choose a bundle, where you placed themes

This bundle provides the flexibility to choose any bundle for theme placement. Choose wisely, like sometime we use a FrontBundle in project, and put all front page/index page related items in that bundle. So we recommend that bundle for placment of theme.

So I have created the 'themes' directory in my FrontBundle. Here is the directory path.

                FrontBundle->Resources->views->themes

3. Register FrontBundle in config.yml

After creating themes directory in FrontBundle, you need to register your FrontBundle in config.yml

                kamran_layout:
    _theme_bundle: 'FrontBundle'  // bundle name with namespaces, use your namespace with bundle name

4. Create themes configuration file(layouts.xml)

For handling themes you needs to create theme configuration file with the name of "layouts.xml" in "themes" directory.

                FrontBundle->Resources->views->themes->layouts.xml

5. Create a theme directory

You can create theme with any name. Lets create a theme directory with "bluemoon" name.

                FrontBundle->Resources->views->themes->bluemoon

6. Create a theme templates

In your theme, you can create parent templates for different type of content which have different layouts.

For example, create a template "front.html.twig". This template will be used for "Front Page"

                FrontBundle->Resources->views->themes->bluemoon->front.html.twig

You can create more templates in theme according to your needs

7. Add your theme name in "layouts.xml" file

Here is the basic pattern of "layouts.xml" file

Basic themes configuration file(layouts.xml)

8. Add templates in theme configuration file(layouts.xml)

Now we have added some theme templates in layouts.xml file

"bluemoon" theme configuration file(layouts.xml)

Themes default template: This is the default template for your theme, if you leave this attribute blank then default template will be used.

9. Add "extends" tag in your child templates

Add following tag in top of your child templates(controllers action templates)

                {% extends themes %}

10. Add regions and blocks in theme template files