How to Extend the Page Creation Component

This procedure describes how to create an additional field called Author in the page creation component.

  1. Create a file named ExtendedPages.cmp.php in the 'root/cmp' directory.
  2. Open the file and create a class ExtendedPages that extends the Pages class, located in the Pages.cmp.php file in the 'root/cms/controlers' directory.
      BASIC::init()->imported('Pages.cmp', 'cms/controlers');
      class ExtendedPages extends Pages {
  3. Override the main() method and declare component fields as follows:
     function main(){
      * Add field 'author' after all fields from parent method
      * view tutorial how to describe different type of fields
      $this->setField('author', array(
      'text' => BASIC_LANGUAGE::init()->get('author')
  4. Translate the language variable author. To do that, follow the steps below:
    1. In the administration panel go to System -> Languages.
    2. Locate the language in which you want to add the new strings and click Language Variables under that language.
    3. Click the Add button on the right side:
      • Enter author as name of the new variable.
      • Enter Author as value of the variable.
  5. Register the component with the system name "pages":
    1. In the administration panel go to System -> Components.
    2. Click the Add button and enter the following information:
      • System Name: pages PHP
      • Class Name: cmp/ExtendedPages
      • Public Name: Extended Pages
    3. Click Save.
  6. Go to System -> Pages and create a new page or open an existing one for editing. The new field Author is displayed at the bottom.

  7. Add a value for the new field in the template. That value will be displayed on the client side.
  8. To add formatting for the text of the new variable, proceed as follows:
    1. Go to the root/themes/your_theme/tpl/ directory, open the base.tpl file and find the following code:
      <div class="page_body">${PAGE_DATA.body}</div> ${CONTENT}
    2. Add ${} template variable:
        <div class="page_body">${PAGE_DATA.body}</div>

The picture below shows how your pages will look: