Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
TwentySixteen Footer with Widgets
@matotien

This comment has been minimized.

Copy link

@matotien matotien commented Aug 30, 2017

Could you please share related code for style.css and function.php. Mine don't seem to work

footer.php
`

</div><!-- .site-content -->

<?php
		/* The footer widget area is triggered if any of the areas
		 * have widgets. So let's check that first.
		 *
		 * If none of the sidebars have widgets, then let's bail early.
		 */
	if (   ! is_active_sidebar( 'first-footer-widget-area'  )
			&& ! is_active_sidebar( 'second-footer-widget-area' )
			&& ! is_active_sidebar( 'third-footer-widget-area'  )
			&& ! is_active_sidebar( 'fourth-footer-widget-area' )
		)
    return;
	?>
	
		<?php 

			
					if (   is_active_sidebar( 'first-footer-widget-area'  )
				&& is_active_sidebar( 'second-footer-widget-area' )
				&& is_active_sidebar( 'third-footer-widget-area'  )
				&& is_active_sidebar( 'fourth-footer-widget-area' )
			) : ?>
	 
			<aside class="fatfooter" role="complementary">
				<div class="first quarter left widget-area">
					<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
				</div><!-- .first .widget-area -->
			 
				<div class="second quarter widget-area">
					<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
				</div><!-- .second .widget-area -->
			 
				<div class="third quarter widget-area">
					<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
				</div><!-- .third .widget-area -->
			 
				<div class="fourth quarter right widget-area">
					<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
				</div><!-- .fourth .widget-area -->
			</aside><!-- #fatfooter -->
	
	
	
		<?php 
			elseif ( is_active_sidebar( 'first-footer-widget-area'  )
				&& is_active_sidebar( 'second-footer-widget-area' )
				&& is_active_sidebar( 'third-footer-widget-area'  )
				&& ! is_active_sidebar( 'fourth-footer-widget-area' )
			) : ?>
			<aside class="fatfooter" role="complementary">
				<div class="first one-third left widget-area">
					<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
				</div><!-- .first .widget-area -->
			 
				<div class="second one-third widget-area">
					<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
				</div><!-- .second .widget-area -->
			 
				<div class="third one-third right widget-area">
					<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
				</div><!-- .third .widget-area -->

		</aside><!-- #fatfooter -->


			<?php
				elseif ( is_active_sidebar( 'first-footer-widget-area'  )
					&& is_active_sidebar( 'second-footer-widget-area' )
					&& ! is_active_sidebar( 'third-footer-widget-area'  )
					&& ! is_active_sidebar( 'fourth-footer-widget-area' )
				) : ?>
				<aside class="fatfooter" role="complementary">
					<div class="first half left widget-area">
						<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
					</div><!-- .first .widget-area -->
				 
					<div class="second half right widget-area">
						<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
					</div><!-- .second .widget-area -->
			 
			</aside><!-- #fatfooter -->
			
			
			
			<?php
				elseif ( is_active_sidebar( 'first-footer-widget-area'  )
					&& ! is_active_sidebar( 'second-footer-widget-area' )
					&& ! is_active_sidebar( 'third-footer-widget-area'  )
					&& ! is_active_sidebar( 'fourth-footer-widget-area' )
				) :
				?>
				<aside class="fatfooter" role="complementary">
					<div class="first full-width widget-area">
						<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
					</div><!-- .first .widget-area -->
				 
				</aside><!-- #fatfooter -->
				 
<!--end of all sidebar checks.-->

<?php endif;?>
'primary', 'menu_class' => 'primary-menu', ) ); ?>
		<?php if ( has_nav_menu( 'social' ) ) : ?>
			<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
				<?php
					wp_nav_menu( array(
						'theme_location' => 'social',
						'menu_class'     => 'social-links-menu',
						'depth'          => 1,
						'link_before'    => '<span class="screen-reader-text">',
						'link_after'     => '</span>',
					) );
				?>
			</nav><!-- .social-navigation -->
		<?php endif; ?>
		
		
	

		


		<div class="site-info">
			
			<span class="site-copyright">&copy 2017 Hoptimum Safety & Fire Slutions. All Rights Reserved.</span>
		
		</div><!-- .site-info -->
	</footer><!-- .site-footer -->
</div><!-- .site-inner -->

`
style.css

`
/* floats */
.quarter,
.one-third,
.two-thirds,
.half {
float: left;
}

/* widths */
.one-third {
width: 32%;
}
.two-thirds {
width: 65.5%;
}
.quarter {
width: 23.5%;
}
.three-quarters {
width: 74.5%;
}
.half {
width: 48%;
}

/* margins /
.one-third {
margin: 0 0.5%;
}
.quarter,
.two-thirds {
margin: 0 0.5%;
}
.left,
.quarter.left,
.one-third.left {
margin: 0 1% 0 0;
float: left;
}
.right,
.quarter.right,
.one-third.right {
margin: 0 0 0 1%;
float: right;
}
.half.left {
width: 48%;
margin: 0 2% 0 0;
}
.half.right {
width: 48%;
margin: 0 0 0 2%;
}
.two-thirds.left {
margin: 0 1% 0 0;
}
.two-thirds.right {
margin: 0 0 0 1%;
float: right;
}

/
media queries for larger screens such as small tablets in landscape or large tablets in portrait */
@media screen and ( max-width: 780px ) {

/* only the .quarter layout class is relevant here - all other classes will have full width */
.quarter {
    width: 48%;
}
.quarter.left {
    margin-right: 2%;
}
.quarter.right {
    margin-left: 2%;
}
footer .third.quarter.widget-area {
    clear: both;
}

}

/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {

/* width sizing all full width in small screens */
.quarter,
.one-third,
.half,
.two-thirds,
.three-quarters,
.full-width {
    width: 100%;
    margin: 0;
}
/* padding adjustments */
.widget-area {
    padding: 0 0 10px 0;
}

}
`
That gives me the following output http://hoptimumfire.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment