Learn how the theme layout is rendered
Two core PHP files determine the theme's layout and markup. Learn how widget positions are rendered and their proportions are being calculated.
The heart of every theme is the theme.php, which provides the entire HTML for the base theme markup. This is different from standard WordPress themes, where the index.php is the main template file.
This is the skeletal structure of the theme.php. The file needs to import the theme.config.php, render widget positions, retrieve config variables and render the system output.
<?php
// get theme configuration
include($this['path']->path('layouts:theme.config.php'));
?>
<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>" data-config='<?php echo $this['config']->get('body_config','{}'); ?>'>
<head>
<?php echo $this['template']->render('head'); ?>
</head>
<body>
// render a widget position
<?php echo $this['widgets']->render('widget-position'); ?>
// retrieve a config variable
<?php echo $this['config']->get('variable'); ?>
// render the system output
<?php echo $this['template']->render('content'); ?>
</body>
</html>
Variables from the config.xml are stored in the config object. To access a variable's value, simply use the get method.
// output the value of the branding variable
<?php echo $this['config']->get('theme_branding'); ?>
// output the to-top scroller based on the theme setting
<?php if ($this['config']->get('totop_scroller')) : ?>
<a class="tm-totop-scroller" data-uk="smooth-scroll" href="#"></a>
<?php endif; >
The widgets of the page are stored in the widgets object. To render all widgets in a position, use the render method. You can check, whether any widgets are published in a position, by using the count method.
<// render all widgets in Top A position
<?php echo $this['widgets']->render('top-a')); ?>
// apply the parallel layout to all widgets in Top A position
<?php if ($this['widgets']->count('top-a')) : ?>
<?php echo $this['widgets']->render('top-a', array('layout'=>'parallel')); ?>
<?php endif; ?>
While the theme.php basically only defines the theme's markup, the logic is outsourced to the theme.config.php. It is responsible for calculations, like the 3 column layout as well as the body classes and social buttons.
