Sridhar Katakam

Genesis and WordPress Tutorials

Themes

  • Home
  • About
  • Archive
    • By Child Theme
  • Membership
    • FAQ
  • Forums
    • Members-only
      • Tutorial Requests
    • Paid Support
  • Contact
  • Login

3 Methods to Add a Title for Footer Widgets in Genesis

December 5, 2016 by Sridhar Katakam 1 Comment Favorited: 6 times

Looking to add a title or custom HTML above the footer widgets (.footer-widgets > .wrap)?

footer-widgets-title

Here are three ways in which this can be done in the order of my personal preference from top to bottom.

PHP code goes in child theme’s functions.php.

Tested in Genesis Sample child theme with Accessibility support enabled for headings

Method 1

add_action( 'genesis_sidebar_title_output', function ( $heading, $id ) {
	if ( 'Footer' == $id ) {
		$heading = '<h2 class="genesis-sidebar-title">Footer Widgets</h2>';
	}

	return $heading;
}, 10, 2 );

with

.footer-widgets .genesis-sidebar-title {
	text-align: center;
	margin-bottom: 40px;
}

in style.css.

HTML output:

screen-shot-2016-12-05-at-8-15-40-pm

Source: genesis/lib/functions/widgetize.php

Method 2

/**
* Filter the footer-widgets context of the genesis_structural_wrap to add a heading before the opening wrap div.
*
* @param string $output The markup to be returned
* @param string $original_output Set to either 'open' or 'close'
*/
add_action( 'genesis_structural_wrap-footer-widgets', function ( $output, $original_output ) {
	if ( 'open' == $original_output ) {
		$output = '<h3 class="footer-widgets-title">Footer Widgets</h3>' . $output;
	}

	return $output;
}, 10, 2 );

with

.footer-widgets-title {
	text-align: center;
	margin-bottom: 40px;
}

in style.css.

HTML output:

screen-shot-2016-12-05-at-8-22-27-pm

Source: https://www.jowaltham.com/genesis-structural-wrap/

Method 3

add_action( 'genesis_before_footer', function () {
	echo '<div class="footer-widgets-outer"><h3 class="footer-widgets-title">Footer Widgets</h3>';
}, 7 );

add_action( 'genesis_before_footer', function () {
	echo '</div>';
} );

with

.footer-widgets-outer {
	background-color: #fff;
	padding: 60px 0;
}

.footer-widgets {
	padding: 0;
}

.footer-widgets-title {
	text-align: center;
	margin-bottom: 40px;
}

in style.css.

HTML output:

screen-shot-2016-12-05-at-8-26-59-pm

Filed Under: Free Content, Genesis Tagged With: footer widgets, Genesis Sample

Comments

  1. Jae Van Ryssel says

    December 8, 2016 at 9:59 pm

    Just can’t seem to get this to work for the Genesis ‘Smart Passive Income’ Theme. I hope that there will be more upcoming tutorials based on this theme, I would sign up immediately if that was the case! I know that there’s current one published on this site.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Comments

  • Sridhar Katakam on How to set equal height for Content module’s element and sidebar in iThemes Builder
  • Sridhar Katakam on Masonry Grid on Category Archives with Title and Excerpt on Hover in Genesis
  • studiomommy on Masonry Grid on Category Archives with Title and Excerpt on Hover in Genesis
  • Sridhar Katakam on Custom Navigation Theme Location in Genesis
  • DragNfLy on Custom Navigation Theme Location in Genesis
  • fatcatdesign on Header Search in Altitude Pro
  • Sridhar Katakam on Custom Navigation Theme Location in Genesis
  • Sridhar Katakam on Fixed mini header on scroll with inline logo and nav menu in Genesis
  • Sridhar Katakam on Split Navigation with menu items on logo’s left and right in Genesis
  • Split Navigation in Genesis Sample 2.6.0 - Sridhar Katakam on Split Navigation with menu items on logo’s left and right in Genesis

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.

Join 1,043 other subscribers

Categories

Tags

ACF ACF Pro Agency Pro Altitude Pro Background Video Backstretch Centric Pro CPT CSS Grid Digital Pro dynamik equal heights featured image fixed Fixed header Flexbox font awesome footer footer widgets Genesis Sample grid header Infinity Pro Isotope jQuery lightbox Masonry Metro Pro minimum-pro Monochrome Pro Outreach Pro page template parallax Parallax Pro portfolio pre_get_posts responsive search Showcase Pro slider Soliloquy sticky Video Background widget area WooCommerce
Follow @srikat

Recent Posts

  • Shrinking Logo on Scroll in Genesis Sample 2.6.0
  • Split Navigation in Genesis Sample 2.6.0
  • Header Search in Altitude Pro
  • How to load comments on click using Ajax in Genesis
  • Linting and Formatting in Visual Studio Code for WordPress
  • BrowserSync in Laravel Valet
  • How to dynamically load posts on click using Ajax in Genesis
  • Multiple Rotating Background images with Ken Burns Effect in Altitude Pro
  • Secondary logo on scroll in Business Pro
  • Site Title – Custom Menu – Primary Menu in Genesis

Find my tutorials helpful and wish to donate?

© 2018 · Genesis Sample Theme on Genesis Framework