Theming in Liferay: An introduction to Liferay themes, and how to create a simple theme.

Liferay Version: 7.1, 7.2, 7.3, 7.4

Developing a theme in Liferay is a critical component in crafting a unique digital experience. This comprehensive guide will walk you through the process of Liferay theme development using Yeoman, covering installation on various operating systems, and delving into each step of theme creation and customization.

Don’t miss our Liferay installation guide.

Introduction to Yeoman in Liferay Theme Development

What is Yeoman?

Yeoman is a robust, open-source scaffolding tool used in web application development. It assists developers in quickly setting up new projects, such as Liferay themes, by providing a basic structure and set-up, which can then be customized according to specific needs.

The Role of Yeoman in Liferay Themes

Using Yeoman for Liferay theme development streamlines the process, providing a standardized project structure. This standardization is crucial for maintaining consistency and efficiency in your development workflow.

Prerequisites for Liferay Theme Development

To start with Liferay theme development, you need to set up your environment. Here’s what you need:

  • Node.js and npm: Node.js is a runtime environment for executing JavaScript code outside a browser. npm (Node Package Manager) is used for managing JavaScript packages.
  • Yeoman and the Liferay Theme Generator: Yeoman helps scaffold your project, while the Liferay Theme Generator sets up the specific structure for a Liferay theme.

Installing Node.js and npm


  1. Download the Installer: Visit the official Node.js website and download the Windows installer.
  2. Run the Installer: Follow the installation prompts, ensuring that npm is included and added to your PATH.


  1. Use Homebrew: If you have Homebrew installed, simply run brew install node.
  2. Manual Installation: Alternatively, download the macOS installer from the Node.js website and follow the instructions.


  1. Use a Package Manager: For most Linux distributions, Node.js can be installed from the package repository. For Ubuntu, for instance, you can use these commands:
   sudo apt update
   sudo apt install nodejs npm
  1. Verify Installation: Run node -v and npm -v to confirm the installation of Node.js and npm.

Installing Yeoman and the Liferay Theme Generator

With Node.js and npm installed, the next step is to install Yeoman and the Liferay Theme Generator globally using npm. This can be done across all operating systems using the same command:

npm install -g yo generator-liferay-theme

Creating a Theme with Yeoman

Step 1: Scaffold a New Liferay Theme


Start by scaffolding a new Liferay theme project. Open your command line tool and navigate to your workspace. Run:

yo liferay-theme


The generator will prompt you to provide several pieces of information:

  • Theme Name and ID: Choose a unique name and ID for your theme.
  • Liferay Version: Ensure that this matches the version of your Liferay DXP instance.
  • Template Language: Choose between available template languages, like Freemarker or Velocity.

Step 2: Customizing the Theme

Once the scaffolding is complete, you’ll have a basic theme structure.

Style Customization

Navigate to the src/css folder in your theme directory. Here, you can modify the SCSS files to change the styling, such as colors, fonts, and layout.

Example customization in _custom.scss:

body {
  background-color: #f2f2f2;
  font-family: 'Helvetica Neue', Arial, sans-serif;

Layout Templates

Edit the template files (Freemarker or Velocity) located in the src/templates directory to alter the structure and layout of your theme.

Example modification in a template file:

<nav class="user-navigation">
  <!-- Custom navigation layout -->

JavaScript for Interactivity

Place any custom JavaScript files in the src/js folder to add interactive elements or functionality to your theme.

Step 3: Building and Deploying the Theme

After customization, it’s time to build and deploy your theme.

Building the Theme

Run the following command in your theme directory:

gulp build

This compiles your theme and generates a .war file in the dist folder, ready for deployment.

Deploying to Liferay

Copy the .war file from the dist folder to the deploy directory of your Liferay instance.

Step 4: Applying Your Custom Theme

Finally, apply your new theme to a Liferay site:

  1. Log into Liferay DXP: As an administrator, access the Control Panel.
  2. Site Settings: In your site’s settings, navigate to the ‘Look and Feel’ section.
  3. Choose Your Theme: Select your new theme from the list and apply it.

Best Practices for Liferay Theme Development

  • Responsive Design: Ensure your themes adapt to different screen sizes and devices.
  • Performance Optimization: Use optimized images and minimize the use of large scripts.
  • Regular Updates: Keep your themes up-to-date with the latest Liferay DXP releases.
  • Accessibility Compliance: Design your themes to be inclusive and accessible.


Yeoman greatly simplifies the Liferay theme development process, enabling you to create unique, engaging, and professional user interfaces. By following these detailed steps, you can efficiently develop a custom theme that enhances your Liferay site’s aesthetic and functional appeal.

Embark on your journey of Liferay theme development with confidence, knowing you have the tools and knowledge to create exceptional digital experiences.

Liferay Theme Development FAQs

What is Yeoman, and why is it important in Liferay theme development?

Yeoman is a scaffolding tool that provides a basic structure for Liferay themes, facilitating a standardized and efficient development process.

How do I install Node.js and npm for Liferay theme development?

For Windows and macOS, download the respective installers from the Node.js website. For Linux, use your distribution’s package manager.

What are the steps to create a Liferay theme using Yeoman?

Start by scaffolding your project with yo liferay-theme, then customize the theme through SCSS, layout templates, and JavaScript files.

How can I ensure my Liferay theme is responsive and accessible?

Focus on adaptive design principles and follow web accessibility guidelines to make your theme responsive and inclusive.

Where can I find support and resources for Liferay theme development?

The Liferay community forums, documentation, and professional support channels are excellent resources for assistance.

Can I integrate third-party tools and libraries in my Liferay theme?

Yes, you can enhance your themes with external resources for additional functionality and aesthetics.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Thanks !

Thanks for sharing this, you are awesome !