Layout Structure

Narratium is based on a basic structure on top of which each of its templates are loaded, allowing to change the appearance and layout of the theme depending on the template that is being used at the moment.

This is the basic skeleton of the HTML theme:

<html class="color-template-sand" layout="row" lang="en-US">
    <head>
    // head scripts, metas, and stuff
    </head>
    <body ng-app="main_app" ng-controller="main_app_controller" ng-cloak layout="column" flex class="">
        <div id="site-wrap" flex layout="row" layout-sm="column" layout-xs="column" class="site-wrap">
        // HERE IS WHERE THE TEMPLATE IS LOADED
        </div>
    </body>
</html>

A code view in PHP can help you gain a better understanding of the structure of the theme and its operation:

<html <?php html_class(); ?> layout="row" <?php language_attributes(); ?>>
  <head>

       <meta charset="<?php bloginfo( 'charset' ); ?>">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="profile" href="http://gmpg.org/xfn/11">
       <?php wp_head(); ?>

  </head>
  <body <?php KTT_body_attrs();?> ng-cloak layout="column" flex <?php body_class(); ?>>
       <?php do_action('KTT_theme_body_start');?>
       <div id="site-wrap" flex layout="row" layout-sm="column" layout-xs="column" class=" site-wrap">
         // HERE IS LOADED THE TEMPLATE CONTENT (Single, page, category, etc)
       </div> <!-- // #site-content -->
       <div id="wp_footer_wrap"><?php wp_footer(); ?></div>
       <?php do_action('KTT_theme_body_end');?>
  </body>
</html>

This structure is defined in the header.php and footer.php files of the theme.


Previous page Next page