Hey there, the new Liferay 7 is out now. With this version we become a brand new concept (which implements the OSGi specification) of Liferay Plugins development and integration within a portal. Having OSGi implemented, Liferay moves from a hack-like style of Plugin management, where each Plugin is a separate web application stored as a war-file on an app server, to a much cleaner concept. There are many global changes in Liferay 7 and in this post we’ll see how to insert Language Portlet to custom Theme header in accordance with new architecture.

One of the most important changes in Liferay 7 is that the Velocity template engine is deprecated; since now there is left the Freemarker template engine only. Having this in mind let’s find a code of a theme where Language Portlet should be placed to. Normally theme’s header persists in /templates/portal_normal.ftl freemarker template file, so we need to use a Language Portlet tag from liferay-ui.tld JSP tag library in it. This is how portal_normal.ftl of the Classic theme should look like:

<header class="container-fluid-1280" id="banner" role="banner">
	<div class="row">
		<div class="navbar-header" id="heading">
			<a class="${logo_css_class}" href="${site_default_url}" title="<@liferay.language_format arguments="${site_name}" key="go-to-x" />">
				<img alt="${logo_description}" height="64" src="${site_logo}" />
			</a>
			<#if show_site_name>
				<span class="site-name" title="<@liferay.language_format arguments="${site_name}" key="go-to-x" />">
					${site_name}
				</span>
			</#if>
			<#if is_setup_complete>
				<button aria-controls="navigation" aria-expanded="false" class="collapsed navbar-toggle" data-target="#navigationCollapse" data-toggle="collapse" type="button">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="pull-right user-personal-bar">
					<@liferay.user_personal_bar />
				</div>
				<div class="pull-right language-bar">
					<@liferay_ui["language"]/> <
				</div>					
			</#if>
		</div>
		<#include "${full_templates_path}/navigation.ftl" />
	</div>
</header>

In current template there is actually 1 line is added that injects Language Portlet to the Classic’s theme header:  <@liferay_ui["language"]/>.

Since Liferay 7 implements the OSGi technology all tld tag libraries are stored in separate OSGi bundles (not shipped within each portlet). It means that we don’t need to embed any tag library in our theme bundle. We don’t even need to refer the demanded taglib in ftl template in order to inject some tag, all mapping are done automatically by the OSGi.

Also CSS stylings can be added to Language portlet so it is located right next to SignIn portlet, just append this class to src/css/_custom.scss:

@media only screen and (min-width: 768px) {
    #banner .language-bar {
      position: absolute;
      right: 160px;
      top: 0px; 
    } 
}

After the theme is built and deployed the header will look as following:

And finally, to refine languages list go to Site Configuration –> Site Settings –> Languages tab and leave only current languages:

Ok, that’s it, in the end we got the Language selector embedded using freemarker template engine in Theme’s header that corresponds to Liferay 7 OSGi specification.