How to Customize the Metro Theme Footer

One of the newest premium themes produced by StudioPress is the Metro Theme. The Metro Theme by StudioPress is a very modern and sleek magazine styled theme that is mobile responsive, comes with 6 color styles and layouts, landing page templates and more.

Unfortunately, the full width footer in Metro isn’t widgetized nor easily customized unless you’re ready to get your hands dirty and start editing your functions.php file. Hey don’t sweat it, I’m here to walk you through the steps necessary to customize the footer in the Metro theme.

Code Responsibly

As I always recommend, please make a backup of your theme’s functions.php file before making any edits. OK, lets go…

Open Up Functions.php File

Inside of the Metro child theme folder, open the file functions.php and locate the snippet of code shown below.

// Reposition the footer
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

Take note of line 6 in the code above. We’re going to make an edit to that specific line of code.

Step #1

Change line #6 to read:

add_action( 'genesis_after', 'custom_genesis_do_footer', 12 );

Take note that we changed line #6 from genesis_do_footer to custom_genesis_do_footer.

Step #2

Add the code below underneath all of the code we mentioned above.

function custom_genesis_do_footer() {
	echo '<div class="gototop">';
	echo '<p><a href="#wrap" rel="nofollow">Return to top of page</a></p>';
	echo '</div>';
	echo '<div class="creds">';
	echo '<p>Copyright &copy B3Marketing, LLC</p>';
	echo '</div>';
}

Your final code should like like this:

// Reposition the footer
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'custom_genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

// Customize the content of your footer
function custom_genesis_do_footer() {
	echo '<div class="gototop">';
	echo '<p><a href="#wrap" rel="nofollow">Return to top of page</a></p>';
	echo '</div>';
	echo '<div class="creds"><p>';
    	echo 'Copyright &copy; ';
    	echo date('Y');
    	echo ' B3Marketing, LLC';
    	echo '</p></div>';
}

Step #3

Now simply customize the contents of the footer text for your specific implementation and you’re all done.

Homework Assignment

You could take it a step further and make the content placeholders widgetized so that you don’t have to edit your functions.php file directly. Maybe I’ll build upon this code in my next Genesis Framework tutorial…

OK, I couldn’t resist…

How to Widgetize the Metro Theme Footer

Building upon everything from above, I realized that most people would rather not edit their functions.php file directly when it comes time to editing the footer text in the Metro theme. I’ll be brief in my instructions, but wanted to share the code that will make the left and right sides of the Metro theme footer widgetized.

Take note: The function custom_genesis_do_footer() has been edited to include two widget areas. Then you need to register the two new widget areas named footer-left and footer-right. All of this code goes into the functions.php file inside of the Metro child theme folder.

File Download: I’ve created a download file of the code needed to make the Metro footer widgetized. Feel free to download it here.

// Customize the content of your footer
function custom_genesis_do_footer() {
	echo '<div class="gototop"><p>';
	dynamic_sidebar( 'footer-left' );
	echo '</p></div>';
	echo '<div class="creds"><p>';
	dynamic_sidebar( 'footer-right' );
    echo '</p></div>';
}

// Register left side footer area
genesis_register_sidebar( array(
	'id'				=> 'footer-left',
	'name'			=> __( 'Footer Left', 'CHILD_THEME_NAME' ),
	'description'	=> __( 'This is the left side of the footer.', 'CHILD_THEME_NAME' ),
) );

// Register right side footer area
genesis_register_sidebar( array(
	'id'				=> 'footer-right',
	'name'			=> __( 'Footer Right', 'CHILD_THEME_NAME' ),
	'description'	=> __( 'This is the right side of the footer.', 'CHILD_THEME_NAME' ),
) );