Create Your Own Layout Container

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

The following layout containers can be found in Xtreme One : #header, #primarynav, #secondarynav, #teaser, #main, #footer und #siteinfo. The advantage of these “main containers” is the possibility of switching between Blog Layout and Full Page Layout and therefore the generating of different markups. Since version 1.1 the containers can handle the switch to HTML5. Xtreme One provides functions which can be used via hook. For example, you can insert a new function in yourfunctions.php of your Childtheme:

function abc_headline_container() {
    xtreme_start_container('headline', 'complementary');
    echo '<h2>Our Knowledge Is Your Advantage</h2>';
    xtreme_end_container();
}
add_action('xtreme_before_main', 'abc_headline_container');

The function xtreme_start_container( $id, $role, $element ) writes the opening HTML elements and expects three parameters:

  • $id -> The ID, which should assigned to the element. In our example #headline
  • $role -> The WAI Aria Role, which the container should assigned to.
  • $element -> The HTML-Element, which the container should assigned to.

If you don’t want a WAI Aria Role: xtreme_start_container('headline', '', 'div'); xtreme_end_container is responsible for the closing HTML elements. The code between will be output within the containers. With add_action( 'xtreme_before_main', 'abc_headline_container' ) the hook xtreme_before_main will be initiated.

Bloglayout

Markup of Blog Layout:

<div id='headline' class='xf-container clearfix xf-blog'> /* XHTML 1.1 */
<section id='headline' class='xf-container clearfix xf-blog'> /* HTML5 */
    <h2>Our Knowledge is your Advantage</h2>
</section> /* HTML5 */
</div> /* XHTML 1.1 */

Full Page Layout

Markup of Full Page Layout:

<div id='headline' class='xf-container clearfix xf-fullpage'> /* XHTML 1.1 */
<section id='headline' class='xf-container clearfix xf-fullpage'> /* HTML5 */
    <div class='page_margins'>
        <div class='yamlpage clearfix'>
            <h2>Our Knowledge is your Advantage</h2>
        </div>
    </div>
</section> /* HTML5 */
</div> /* XHTML 1.1 */[

Tips

Another possibility is to place your own hook within this container, which you can use with other functions.

function my_headline_container() {
    if ( xtreme_is_html5() )  {
        $el = "section";
    } else {
        $el = "div";
    }
    xtreme_start_container( 'headline', 'complementary', $el );
    do_action( 'abc_inside_headline ' );
    xtreme_end_container( $el );
}
add_action( 'xtreme_before_main', 'my_headline_container' );

function abc_headline_content() {
    if( is_home() ) {
        echo '<h2>Our Knowledge Is Your Advantage</h2>';
    } elseif ( is_page('products' ) ) {
        echo '<h2>Our Products</h2>';
    } else {
        echo '<h2>Xtreme One - WordPress Framework</h2>';
    }
}
add_action( 'abc_inside_headline', 'abc_headline_content' );

This code is more organized and via hook more flexible. Please remember to give your own function a special prefix (here abc_), to avoid duplicated function names. Please don’t use wp_ or xtreme_.