How To Embed Web Content To Liferay Theme

While creating a website using the Liferay portal, we may require to show specific content like site footer or header content on different site pages. Adding the static web content to the theme itself requires code change and deployment if we need to modify the content later. 

Embedding the Web content into the theme will make the content editable without modifying the Liferay theme and makes the change of content process a lot easier.

In this post, we will learn how to embed specific web content to our Liferay theme.

We will create web content to save footer content and embed the web content into our theme project. Also, we will use Velocity as the template language for creating themes.

Version details: Liferay 6.2

Table of Contents

• Creating a Liferay Theme
• Create a Web content to store the footer details
• Embed the web content to Liferay theme
• testing the output
• Conclusion

Creating a Liferay Theme

Create a Liferay theme using Liferay Developer Studio by navigating to File > New > Liferay Plugin Project.

Select Plugin Type as the theme and click on the Finish button. (Make sure to select the Velocity 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 Liferay web content with required footer content as shown below. 

We will embed new web content in the footer section of our theme, and it will be displayed on the page’s footer, wherever this theme is applied.

We can log in as an administrator to create the web content from the Admin > Content > Web Content section.

Embed the web content to Liferay theme

Navigate to created theme plugin and copy the file portal-normal.vm file from the template folder into the docroot folder’s _diffs directory by creating a template folder.

Replace the content between the <footer> tag with the below content.

#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))
$footerContentVal.toString()

We are fetching the web content article by its URL title(asb_footer) by using the JournalArticleService. We then pass the fetched article’s article Id to the JournalContentUtil’s getContent method. URL title is a unique field, and we can obtain it from the JournalArticle table.

testing the output

Now we have successfully embedded 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.

The below image is the output for our ASB-theme. We can see the highlighted footer content rendered from our web content(asb_footer).

Conclusion

In this post, we learned how to embed specific web content to our Liferay theme.