Ziel: Widget-fähiger Footer in einem Child-Theme

Sidebars in der functions.php registrieren

Da es sich hier um eine Child-Theme handelt, müsst ihr beachten, dass die functions.php-Datei nicht automatisch überschrieben wird, wie es beispielsweise bei der style.css-Datei der Fall ist. Die Inhalte einer eigenen functions.php-Datei im Child-Theme werden zusätz­lich zu den Inhalten der functions.php-Datei des Parent-Themes auf­ge­rufen und zwar direkt davor. Deshalb genügt der folgende Inhalt, um drei neue Sidebars zu registrieren:

<?php

if ( function_exists ('register_sidebar')) { 

    register_sidebar( array (
    	'name' => __( 'Footerbar 1', 'yoko' ),
		'id' => 'sidebar-3',
		'description' => __( '1st Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

    register_sidebar( array (
        'name' => __( 'Footerbar 2', 'yoko' ),
		'id' => 'sidebar-4',
		'description' => __( '2nd Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

    register_sidebar( array (
        'name' => __( 'Footerbar 3', 'yoko' ),
		'id' => 'sidebar-5',
		'description' => __( '3rd Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
?>

Sidebars in der footer.php einbauen

Im Footer-Bereich (colophon) der footer.php-Datei müssen nun die soeben erstellten Sidebars eingetragen werden, damit sie auch angezeigt werden können:

<footer id="colophon" class="clearfix">
		<div id="supplementary" class="clearfix">
            <div id="first" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 1') ) : ?>
<p>First</p>
<?php endif; ?></div>
            <div id="second" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 2') ) : ?>
<p>Second</p>
<?php endif; ?></div>
            <div id="third" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 3') ) : ?>
<p>Third</p>
<?php endif; ?></div>
        </div>

Wenn sich kein aktives Widget in der jeweiligen neuen Sidebar befindet, werden die Texte “First”, “Second” und “Third” ausgegeben. So sieht es dann im Dashboard aus:

Layout in der style.css festlegen

Damit das Ganze gut aussieht und auch zum responsive layout passt, müssen ein paar Angaben in der style.css-Datei eingetragen werden:

#colophon {width:100%; padding:0 !important;}
#colophon #supplementary {font-size:1.3em;padding: 0 0 60px;}
#supplementary {padding:15px !important;}
#supplementary #first.widget-area, #supplementary #second.widget-area {float: left;margin-right: 5.567%;width: 29.55%;}
#supplementary #third.widget-area {float: left;margin-right: 0;width: 29.55%;}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
#supplementary #first.widget-area, #supplementary #second.widget-area, #supplementary #third.widget-area {float: none;margin-right: 0;width: 100%;}
}

Wichtig sind hierbei die Angaben zu “width” in Prozent. Die Optik wie Hintergrundfarbe (background-color) und Schatten (box-shadow) könnt ihr hier ebenfalls festlegen. So sieht der neue Footer im Smartphone aus:

Das war’s schon. Weitere Tipps und Tutorials gibt es direkt bei elmastudio.de.

1. Schritt: footer.php:

Zwischen “content” und “footer” müsst ihr einen neuen Bereich namens “downer” erstellen, in welchen ebenfalls neue Widget-Bereiche  eingefügt werden:

<div id="footer">
<div id="downer">
<div class="downer_widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer1_sidebar') ) : ?>
<p>Downer-Widget 1</p>
<?php endif; ?>
</div>
<div class="downer_widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer2_sidebar') ) : ?>
<p>Downer-Widget 2</p>
<?php endif; ?>
</div>
<div class="downer_widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer3_sidebar') ) : ?>
<p>Downer-Widget 3</p>
<?php endif; ?>
</div>
</div>

Wichtig ist hierbei die korrekte Angabe der entsprechenden Sidebar (downer_widget1-4 und downer1-4_sidebar).

2. Schritt: functions.php:

Jetzt müsst ihr die vier neuen Arrays noch registrieren, was dank Copy & Paste relativ einfach ist:

/** widgets */
if( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer1_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer2_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer3_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

Wie auch im ersten Schritt ist hier die Nomenklatur wichtig, damit das Ganze am Ende auch funktioniert.

3. Schritt: style.css:

Damit die korrekte Darstellung gewährleistet wird, müsst ihr noch die betreffenden Bereiche definieren:
#downer {
background-color: #222;
margin: 20px auto;
width: 960px;
overflow: hidden;
color:#999;
}
#downer h3 {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color:#fff;
}
#downer li {
list-style: none outside none;
}
#downer ul li {
border-bottom:1px solid #333 !important;
}
#downer .widget {
margin-bottom:15px;
}
#downer .wp-post-image {
border:1px solid #444444;
box-shadow:none;
}
#downer .kjgrcGravatar {
border:none;
box-shadow:none;
}
#downer .downer_widget1 {
float: left;
padding: 15px 15px 15px 28px;
text-align: justify;
margin: 5px;
width:38%;
}
#downer .downer_widget2 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:28%;
}
#downer .downer_widget3 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:20%;
}

Es ist klar, dass dieses Tutorial abgeändert werden muss, wenn ihr ein anderes Theme verwendet.

Dank kleinerer Änderungen am Header und Footer erstreckt sich nun die ehemalige Header-Grafik über den oberen Teil des Hintergrunds und geht in die Hintergrund-Farbe (#164561) über. Das verwendete Hintergrund-Bild stammt von Bobbyperux (mit Erlaubnis) und als weitere Inspiration diente der Entwurf von bradu87.

Wie findet ihr die Umstellung?

Wer seinen Footer mit diversen Widgets ausstatten möchte, sollte einmal bei web-ideas.de vorbeischauen. Anhand des dortigen Beispiels wird der Footer um 6 neue Widgets erweitert. Für das iNove Theme sind zwar kleine Änderungen erforderlich, aber das Tutorial funktioniert einwandfrei. Ich benötige keine Footer-Widgets, mir reicht die rechte Sidebar völlig.

Vor dem Editieren eurer Dateien solltet ihr diese sichern, falls mal etwas nicht funktioniert.