How to embed a Web content to theme –Liferay 6.2

While creating a website using Liferay portal, most of the times we have to show specific content like site footer or a header content on different site pages. We can directly add the static content on theme itself, but in case we need to modify the content later requires a code change on theme and theme deployment. By embedding the Webcontent into the theme will make the content editable without having to modify the theme. This makes the change of content process a lot easier.

Also Read:

In this post, we will learn how to embed a specific web content to our liferay theme. Here, we will create a web content to save footer content, and embed the web content into our theme. We are using Velocity as template language for creating theme.

Following are the main steps:

Create a Liferay Theme

Hence we are using Liferay Developer Studio IDE for creating Liferay theme from File > New > Liferay Plugin Project, and select Plugin Type as theme and click on Finish. (Make sure that Velocity is selected as template language)In this example, we have created a theme called ASB-theme as shown below.



Create a Web content to store the footer details

Create a Simple web content with required footer content as shown below. This content will be embedded in the footer section of our theme, so that it will be displayed on page’s footer, wherever this theme is applied. If you are logged in as administrator, you can create a web content from Admin > Content > Web Content section.



Embed the web content to theme

Navigate to created theme plugin, copy the file portal-normal.vm file from template folder, into docroot folder’s _diffs directory by creating template folder. And replace the content between <footer> tag with following content. Here, we are fetching the web content article by it’s URL title(asb_footer) using JournalArticleService. This fetched article’s article Id is passed to JournalContentUtil’s getContent method. URL title is unique field and can be obtained from JournalArticle table.

#set ($journalArticleLocalService = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleService"))
#set ($footerarticle = $journalArticleLocalService.getArticleByUrlTitle($group_id, "asb_footer"))
#set ($footerContentVal = $journalContentUtil.getContent($themeDisplay.getScopeGroupId(), $footerarticle.getArticleId(), null, $locale.toString(), $themeDisplay))

Now we have successfully embedded a web content into our theme’s footer section. Save the changes, build the theme plugin and deploy it. Apply the theme to any page to test. Following is the output for our ASB-theme. We can see the highlighted footer content, rendered from our web content(asb_footer).


For all Liferay related posts, click here.

Note: Version used: Liferay 6.2 + Apache Tomcat 7.