Navigation:  Development > MVC (Model View Controller) > View > Theme > UI Hooks

UI Hook is a dynamic element used by Page Manager or Other 3rd Party Application to insert content without editing theme code.
 
Bellow is the format of UI Hook:
App::Hook('UI')->Render([HOOK_NAME]);
 
For example:
App::Hook('UI')->Render('home_page_banner');

 

To create hook simply place this code in any where of template with a unique Hook Name. You can open below file to see some example hooks:
 
/development/view/rainbow/home/index.phtml

 

We have below Recommend Hooks for a theme
 

Header:
App::Hook('UI')->Render('template_header_A')
App::Hook('UI')->Render('template_header_B')

 
 
Header Menu:

echo $this->siteMenuClear()
   ->siteMenu($this->baseurl("/"), 'Home', 'home')
   ->setRootHtmlOpts(
      array('id' => 'menu')     // HTML Options
   )
   ->siteMenuRender(
      'HTML',   // Return Type THML or ARRAY
      'home', // Menu Name to be selected
      'selected' // Html class for selected menu
  );

 

This hook render menu automatically, It creates a list with <ul> and <li>. The function can return Array of elements so String in HTML format.

 
 
Footer:
App::Hook('UI')->Render('template_footer_A')
App::Hook('UI')->Render('template_footer_menu')
App::Hook('UI')->Render('template_footer_B')
 
Home Page:
App::Hook('UI')->Render('home_page_banner_top')
App::Hook('UI')->Render('home_page_banner')
App::Hook('UI')->Render('home_page_banner_bottom')
App::Hook('UI')->Render('home_content_area_A')
App::Hook('UI')->Render('home_content_area_B')
App::Hook('UI')->Render('home_content_area_C')
App::Hook('UI')->Render('home_content_area_D')

 
Left Column (If Any)
App::Hook('UI')->Render('template_left_column_A')
App::Hook('UI')->Render('template_left_column_B')
App::Hook('UI')->Render('template_left_column_C')
App::Hook('UI')->Render('template_left_column_D')
 
Left Column (If Any)
App::Hook('UI')->Render('template_right_column_A')
App::Hook('UI')->Render('template_right_column_B')
App::Hook('UI')->Render('template_right_column_C')
App::Hook('UI')->Render('template_right_column_D')
 

 
Page Manager Hooks

If you look in theme definition file there we have a tag pagemanager_hooks for all UI Hooks.
 

Check below XML formatting of the hook list:
<pagemanager_hooks>
  <hook_group name="header" title="Header">
     <hook name="template_header_A">Header A</hook>
     <hook name="template_header_B">Header B</hook>
  </hook_group>
  <hook_group name="footer" title="Footer">
     <hook name="template_footer_menu">Footer Menu</hook>
     <hook name="template_footer_A">Footer Point A</hook>
     <hook name="template_footer_B">Footer Point B</hook>
  </hook_group>
  <hook_group name="leftcol" title="Left Column">
     <hook name="template_left_column_A">Left Column Section A</hook>
     <hook name="template_left_column_B">Left Column Section B</hook>
     <hook name="template_left_column_C">Left Column Section C</hook>
     <hook name="template_left_column_D">Left Column Section D</hook>
  </hook_group>
  <hook_group name="homepage" title="Home Page">
     <hook name="home_page_banner_top">Home Page Banner Top</hook>
     <hook name="home_page_banner_bottom">Home Page Banner Bottom</hook>
     <hook name="home_content_area_A">Home Content Area A</hook>
     <hook name="home_content_area_B">Home Content Area B</hook>
  </hook_group>
</pagemanager_hooks>

 

Page manager can use these hooks to place Content or Page Link from the interface.This list shows in page manger place holder section.