Skip to content

Instantly share code, notes, and snippets.

@Netzberufler

Netzberufler/footer.php

Last active Mar 9, 2021
Embed
What would you like to do?
Footer Widgets
<?php
/**
* Register all Footer Widget areas
*
* @return void
*/
function theme_slug_register_footer_widgets() {
// Register Footer Column 1 widget area.
register_sidebar( array(
'name' => __( 'Footer Column 1', 'theme-slug' ),
'id' => 'footer-1',
'description' => __( 'Appears on the first footer column.', 'theme-slug' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
// Register Footer Column 2 widget area.
register_sidebar( array(
'name' => __( 'Footer Column 2', 'theme-slug' ),
'id' => 'footer-2',
'description' => __( 'Appears on the second footer column.', 'theme-slug' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
// Register Footer Column 3 widget area.
register_sidebar( array(
'name' => __( 'Footer Column 3', 'theme-slug' ),
'id' => 'footer-3',
'description' => __( 'Appears on the third footer column.', 'theme-slug' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
// Register Footer Column 4 widget area.
register_sidebar( array(
'name' => __( 'Footer Column 4', 'theme-slug' ),
'id' => 'footer-4',
'description' => __( 'Appears on the fourth footer column.', 'theme-slug' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'theme_slug_register_footer_widgets', 20 );
.footer-widgets {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-right: -2em;
}
.footer-widget-column {
width: 25%;
padding-right: 2em;
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
}
/* One Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(1) {
float: none;
width: 100%;
}
/* Two Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(2),
.footer-widget-column:nth-child(2):nth-last-child(1) {
width: 50%;
}
/* Three Column Footer Widgets */
.footer-widget-column:nth-child(1):nth-last-child(3),
.footer-widget-column:nth-child(2):nth-last-child(2),
.footer-widget-column:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}
.site-footer {
clear: both;
}
.footer-widgets {
margin-right: -2em;
}
.footer-widget-column {
float: left;
width: 25%;
padding-right: 2em;
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment