xScape Templates Layout, Part 2: Header & Footer

As explained in previous tutorial, xScape loads page template using layout settings and assembling blocks. Process is same for all themes with the difference regarding additional blocks that can vary from theme to theme. Framework uses filters and actions to control loading.

Loading process begins with the actual template file. If you take a look at any template file you will see only few lines that are used only to start xScape loader. Template looks like this:


global $xscape_filename;
$xscape_filename = basename(__FILE__);



Lines 3 and 4 are to get the name of the template file needed to find settings made in Layout Manager. After that, template loads header with standard get_header() function (loads theme header.php template), loads content from xScape and again, standard footer function get_footer() (loads theme footer.php template).

Lists of hooks bellow is color coded. Normal, black names are actions and in red are filters.


Header file is pretty much the same as the normal WP header template with few changes. There are several actions that are run in header area that can be used to hook plugins or themes. From top, here is list of hooks run in the header:

  1. xs_header_top:  hook is run immediately after the HEAD tag is started.
  2. wp_head: standard WordPress header action, runs after loading of main theme style.css file.
  3. xs_header: first xScape header hook, runs after wp_head action. After this action, xScape outputs the STYLE block that is used to add extra styles for the theme based on theme settings.
  4. xs_expand_styles_block: run at the end of STYLE block, before its closed. Here you can output any CSS you need.
  5. xs_expand_xscape_header: xScape hooks into xs_header and during this, xScape prepares header elements based on settings. Before favicon and color style is loaded, this action is run.
  6. xs_favicon_url: xScape prepares favicon based on settings (uploaded icon image). But, before its outputed, filter is run with URL of favicon as a parameter.
  7. xs_theme_style: Based on theme settings, xScape gets name of the color scheme file. This filter is used to override this. Only parameter is the file name for the stylesheet. File must be in the styles theme folder.
  8. xs_header_last: Last xScape header hook, runs just before the HEAD tag is closed.
  9. xs_body_top: Last tag for the header file is opening BODY tag. Just after the BODY tag is opened, This

So, you can use add_action() to hook up into any of these actions and add own content into the header. For red filters you need to use add_filter().


To show the main content loading we will need more space, so for this tutorial part, here is the footer part described. Next tutorial will be about content only.

  1. wp_footer: standard WordPress footer hook, runs first, before xScape specific hooks.
  2. xs_footer: first xScape footer action. Runs immediately after previous action. Used for internal xScape hooks for footer. After this action is run, xScape starts JavaScript footer block that also allows expansion.
  3. xs_expand_scripts_init: Action is run inside the SCRIPTS tag, so you can output normal JavaScript here. After this block, xScape loads own JavaScript files. After that, another SCRIPTS block is created with few more actions:
  4. xs_expand_scripts_block: This action is run after xScape adds main JavaScript code from the xScape theme settings. After this, a jQuery block is added with own onReady handling.
  5. xs_expand_jquery_block: This is for jQuery specific code. You don’t need on ready handling, just output jQuery code. Before this action, xScape prints jQuery code from theme settings.
  6. xs_expand_scripts_last: Runs after the SCRIPTS tag is closed.
  7. xs_footer_last: Last action run just before closing of the BODY tag for the page.


Main part of page loading is content. Next tutorial will cover whole process of the assembling template based on layout and settings.


Leave a Reply