YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Theme layout

Two core PHP files determine the theme's layout and markup. Learn how widget positions are rendered and their proportions are being calculated.

theme.php

The heart of every theme is the theme.php, which provides the entire HTML for the base theme markup. This is different from standard Joomla templates or 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>

Config object

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; >

Widget object

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; ?>

theme.config.php

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.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!