How to create a child theme for Storefront and change the footer credit?

Continuing our discussion on WordPress we shall now design a child theme for the popular theme Storefront and also demonstrate changing the footer credit.

Storefront is the official theme for the WooCommerce plugin that changes your WordPress installation into a eCommerce shop.

The WooCommerce site is at https://woocommerce.com/

The plugin itself would suggest installation of the Storefront theme. Storefront can be downloaded at: https://woocommerce.com/storefront/

In case you haven’t learned the art of making child themes please look up our previous post at Creating a child theme.
Let us summarize the process over here:
1. Create a new theme and create two files functions.php and style.css.
2. In the style.css file mention the original theme as the template.

/*
Theme Name: Storefront Child
Author: Champak
Author URI: http://hypatiasoftwaresolutions.in
Template: storefront
Version: 1.0.0

*/

3. In the functions.php file enqueue the style.css from the parent theme.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles()
{
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

This should get the child theme up and running.

Where does the Storefront footer come from?
The Storefront footer comes from a function called storefront_credit() stored in a file called storefront-template-functions.php stored in the inc folder under the Storefront installation.
This is the code of the function.

if ( ! function_exists( 'storefront_credit' ) )
{
/**
* Display the theme credit
*
* @since 1.0.0
* @return void
*/
function storefront_credit() {
?>
<div class="site-info">
<?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = '&copy; ' . get_bloginfo( 'name' ) . ' ' . date( 'Y' ) ) ); ?>
<?php if ( apply_filters( 'storefront_credit_link', true ) ) { ?>
<?php echo '<a href="https://woocommerce.com" target="_blank" title="' . esc_attr__( 'WooCommerce - The Best eCommerce Platform for WordPress', 'storefront' ) . '" rel="author">' . esc_html__( 'Built with Storefront &amp; WooCommerce', 'storefront' ) . '</a>' ?>
<?php } ?>
</div><!-- .site-info -->
<?php
}
}

Look it up carefully. The definition is of the function is only generated if it is not already defined. This simply means that if we define a function with the same name in our child-theme’s functions.php then it will take precedence.

The footer output is obviously being generated by the echo function calls in the function. Let us define the same function in the functions.php file of our child theme.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles(){
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
<?php
function storefront_credit()
{?><div class="site-info">Custom theme footer<?php }?>
</div><!-- .site-info -->

How do we allow the user to change the footer credit. Make a file credit.php in the child-theme folder and add its content in the above mentioned function.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles(){
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
<?php
function storefront_credit()
{?>
<div class="site-info">
<?php include('credit.php'); ?>
<?php }?>
</div>
<!-- .site-info -->

Click Editor in the Appearance menu.

Click on the credit.php link.
Then press the Update button.

Leave a Reply