Vers opgediend


Deze blog is voor ons bouwers met behulp van WordPress.
Ik ben bezig een WordPress site te maken met gebruik van een childtheme van TwentyTwelve. Deze heeft echter zelf geen footer die je kan laten vullen door de klant. En in plaats van de inhoud vast te zetten in de footer vond ik deze oplossing:

Maak eerst een child-theme (kom ik ook nog wel eens op terug).

Voeg in je child-theme deze code toe aan functions.php (zorgt voor de widgets voor de voettekst)

// Register footer widgets
register_sidebar( array(
    'name' => __( 'Footer Widget One', 'tto' ),
    'id' => 'sidebar-4',
    'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );


Voeg in je child-theme in footer.php onder de regel 
<footer id="colophon" role="contentinfo">
deze code toe:

<?php
/* footer sidebar */
if ( ! is_404() ) : ?>

<div id="footer-widgets" class="widget-area three">
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
     <?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
     <?php dynamic_sidebar( 'sidebar-5' ); ?>

<?php endif; ?>


Als laatste, voeg dit toe aan je eigen style.css:

/* ===[ Footer Widget Areas ]=== */
.site-info { clear: both; }
#footer-widgets {
    width: 100%;
    border-top: none;
}
    #footer-widgets .widget li { list-style-type: none; }
.template-front-page #footer-widgets { padding-top: 0; }
@media screen and (min-width: 600px) {
    #footer-widgets.three .widget {
        float: left;
        margin-right: 3.7%;
        width: 30.85%;
        clear: none;
    }
        #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
}
/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {
    float: left;
    margin-right: 3.7%;
    width: 29.85%;
    clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
/* Hide footer widgets Homepage Template*/
.template-front-page #footer-widgets { display: none; }

 

That's all folks.
je zult zien dat je bij weergave > widgets nu 3 extra kolommen hebt voor je widgets en de site dus een footer van 3 kolommen.

 

 

Met dank aan Zeaks in het WordPress forum.

Reageer


Ons adres staat onderaan
GraphicKitchen

  085-48 717 17

 info@graphickitchen.nl

 

 

Den Haag
Frambozenstraat 39
2564 XK Den Haag
  Meppel
Heerengracht 26
7941 JJ Meppel