JSR 286 Two Phrase Rendering with WebSphere Portal

I was trying to implement a JSR-286 portlet with the new feature called two phrase rendering in IBM WebSphere Portal. You can use this feature to change the title of the portlet, add headers or cookies and so on. In my job, we were trying to add CSS and JavaScript files in the header.
The default value of the two phrase rendering is false, which is turning off. To enable it, you will need to put the following configuration in your portlet configuration. You can either put them in the scope of <portlet-app> or each individual portlet.

 
 <container-runtime-option>
    <name>javax.portlet.renderHeaders</name>
    <value>true</value>
  </container-runtime-option> 

Second, you will need to overrdie the doHeader() method to add your CSS and JavaScript files:

protected void doHeaders(RenderRequest request, RenderResponse response) {

        //CSS
 Element linkElement = response.createElement("link");
 linkElement.setAttribute("rel", "stylesheet");
 linkElement.setAttribute("type", "text/css");
 String filePath = "/css/my.css";
 linkElement.setAttribute("href", filePath); 
 response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, linkElement);

        //JS
 Element scriptElement = response.createElement("script");
 scriptElement.setAttribute("type", "text/javascript");
 String filePath = "/js/my.js";
 scriptElement.setAttribute("src", filePath); 
 scriptElement.setTextContent(" ");
 response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, scriptElement);
}

Usually, this should work without any issue. However, if you have your own custom theme, make sure in /themes/html/[theme name]/default.jsp has this IBM custom tag:

<portal-core:portletsHeadMarkupElements method="xhtml" />