How to Add a New Sidebar and Widget Area

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

Deutsch / German

Clone this wiki locally

First you create the folder includes in your Childtheme. Then in the folder includes a subfolder sidebars. So the folder structure is exactly the same as in Xtreme One. Reason for this: first the Framework checks in your Childtheme inincludes/sidebars/ if there are existing sidebars, then it checks in your Framework if there are sidebars. That means, if you have in your Childtheme a file sidebar-one.php and with the same name a file in your Framework, the sidebar-one.php of your Childtheme will be loaded.

Code of Sidebar

Important: This code needs Xtreme One version 1.1 or higher Create in your Childtheme in includes/sidebars/ a file sidebar-three.php. The file name isn’t relevant, but it should be in lower case and descriptive. Paste in the following code in this file:

xtreme_sidebar_widget_start_tag();
// Code or Markup in the sidebar
xtreme_sidebar_widget_end_tag();

The functions xtreme_sidebar_widget_start_tag() and xtreme_sidebar_widget_end_tag() are taking care for the according wrap elements. Is no HTML5-Output active it outputs <ul>, if HTML5 is active it outputs <div>. The full Xtreme One functionality keeps remain. You can also do it without the two functions and write your own markup in the sidebar.

The sidebar is now available in your Xtreme One backend.

Register Widget Area

If you want to add a widget area to your sidebar you have to do the following 2 steps. Define the widget area in your sidebar and register for WordPress. Therefore you expand the code in sidebar-three.php:

    <h3>Sidebar 3</h3>
<?php endif;
xtreme_sidebar_widget_end_tag();

To register the sidebar, you write a function in the functions.php of your Childthemes.

function abc_register_sidebar_three() {
    if ( !xtreme_is_html5() ) {
        $el = 'ul';
    } else {
        $el = 'section';
    }
    $htag = xtreme_get_sidebar_headline_tag();
    register_sidebar( array(
        'name' => 'Sidebar Three',
        'id' => 'sidebar-three',
        'description' => 'My Sidebar Three',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''
    ));
}

In this function you ask first, if HTML5-Output is active or not. If HTML5 is active the widget element is <section>, if XHTML <ul>. The function xtreme_get_sidebar_headline_tag() provides the title element, which will be selected in Xtreme One->Default Layout Settings->Tag before Title in Sidebars Widget Areas:. Here again, the full functionality of Xtreme One obtained. This approach is not a must. You can define your own elements for the widget container, or write the defining element of the widget titles directly into before_title and after_title.

The widget area is available now.