Snippet: Widget class first & last + widget order meegeven binnen WordPress

Tijdens het ontwikkelen van een WordPress thema zul je ongetwijfeld tegen het probleem aanlopen dat je meer wilt doen met de opmaak van je widgets. Dit is erg lastig, omdat er weinig specifieke classes worden meegegeven aan de widgets vanuit WordPress zelf. Denk hierbij onder andere aan de eerste en laatste widget, of juist de rest daar tussen in.

Via onderstaande snippet geef je je widgets diverse classes mee, waardoor je deze eenvoudig kunt opmaken via de css-class "first-widget" & "last-widget". Ook wordt er een class "widget-nummer-1" / "widget-nummer-2" etc.. meegegeven. Deze telt automatisch door, waardoor opmaak van een specifiek widget(blok) eenvoudig te doen is.

Code

Plak de onderstaande code in je functions.php

function tsd_widget_order_class() {
    global $wp_registered_sidebars, $wp_registered_widgets;
 
    $sidebars = wp_get_sidebars_widgets();
 
    if ( empty( $sidebars ) )
        return;
 
    // Geef iedere widget een widget-nummer class
    foreach ( $sidebars as $sidebar_id => $widgets ) {
        if ( empty( $widgets ) )
            continue;
        $number_of_widgets = count( $widgets );
        foreach ( $widgets as $i => $widget_id ) {
            $wp_registered_widgets[$widget_id]['classname'] .= ' widget-nummer-' . $i;
 
            // Geef de eerste widget een class
            if ( 0 == $i ) {
                $wp_registered_widgets[$widget_id]['classname'] .= ' first-widget'; 
            }
 
            // Geef de laatste widget een class
            if ( $number_of_widgets == ( $i + 1 ) ) {
                $wp_registered_widgets[$widget_id]['classname'] .= ' last-widget'; 
            }
        }
    }
}
add_action( 'init', 'tsd_widget_order_class' );

Vind je dit bericht interessant?

Vind je dit bericht interessant? Dan zou ik het erg waarderen als je een like of andere "social-share" achter laat ;)