Page Builder - Override your content in your template

You shall know about the template override in Joomla! that allows you to change the html code that is rendered in the page. This technique is based on files that you shall put in your template and that will be used instead of the ones from the extension. Since the version 2.1.0 of Page Builder CK, you can now use an override technique to control the output from your template !

How to create an override - Example with the audio tag

First you shall know that the content of your page is rendered in your page thanks to the pagebuilderck plugins. The default output is generated from the plugin. Here we will make a simple example with the audio player.

Go in the folder


Open the file audio.php and search for the funcion onPagebuilderckRenderItemPLUGINNAME. Example with the audio plugin :

public function onPagebuilderckRenderItemAudio($item) {

This is the function that is called during the rendering process and that will return the output to the page. Now copy all the code inside this function :

$attrs = $item->find('.tab_audio');
$params = PagebuilderckFrontHelper::createParamsFromElement($attrs); $audiosrc = PagebuilderckFrontHelper::getSource($params->get('audiourl'));
$html ='<audio style="width:100%;box-sizing:border-box;max-width:100%;" controls src="' . $audiosrc . '" ' . ($params->get('autoplayyes') == 'checked' ? 'autoplay' : '') . '>'
                . 'Your browser does not support the audio element.'
                . '</audio>';
$html = preg_replace('#<div class="audiock">(.*?)<\/div>#is', $html, $item->innertext);

Note that you must put the html code in the $html variable to make it work.

Paste this code into a new file in your template :


Warning, for security reason, don't miss to include the check at the beginning of your file

defined('_JEXEC') or die;


You can now edit the code that is rendered for the audio tag, and this will apply to all audio players in your website.

Download Page Builder CK



Outil de création rapide, puissant et responsive.

En savoir plus