Creating Footer Copyright Text UI in Theme Settings page of Genesis Framework


Today one question is came out from my mind. Why we can’t change the default footer copyright text from Genesis Theme Settings page? Every time we are installing the “Simple Edit” plugin or manually adding few code in the functions.php file. So I thoroughly checked the Genesis Theme Settings php file and got 2 filter (genesis_theme_settings_defaults, gd_genesis_settings_sanitization_filters) and one Hook (genesis_theme_settings_metaboxes). Using this 3 functions I created this Footer Copyright UI in Genesis Theme settings page.

I added following codes in functions.php file.

Setup Default Value

First I am setting default copyright text. If use click on “Reset Settings” button then this value will be saved there.

function gd_defaults_settings_fields( $default_settings ) {
    $default_settings['copyright_text'] = sprintf( '[footer_copyright before="%s "] · [footer_childtheme_link before="" after=" %s"] [footer_genesis_link url="" before=""] · [WordPress · [footer_loginout]', __( 'Copyright', 'genesis' ), __( 'on', 'genesis' ) );
    $default_settings['credits'] = __( 'Website Designed by <a href="" target="_blank">Genesis Developer</a>', 'genesis_developer' );
    return $default_settings;

add_filter( 'genesis_theme_settings_defaults', 'gd_defaults_settings_fields' );

Sanitizing User Input

One of the major features of Genesis Framework is a Sanitizer Class. This is preventing the site from dropping the malware script into your theme settings. By default, Genesis is providing the four sanitization filters: one_zero, safe_html, no_html and requires_unfiltered_html. My case I am using “safe_html” filter.

function gd_genesis_settings_sanitization_filters() {
                                ) );
add_action( 'genesis_settings_sanitizer_init', 'gd_genesis_settings_sanitization_filters' );

Register Metabox

Creating two input fields in Theme Settings page by add_meta_box() function. Genesis Framework is providing “genesis_theme_settings_metaboxes” Hook and you can create unlimited metaboxes for your theme.

I just hooked the genesis_theme_settings_metaboxes function and created the footer copyright UI in Theme Settings page. Here is code:

add_action('genesis_theme_settings_metaboxes', 'gd_add_metaboxes', 99, 1);
function gd_add_metaboxes( $pagehook ){
  if( is_admin() ):
    add_meta_box( 'genesis-theme-settings-footer', __( 'Footer: Copyright Text & Credits', 'genesis_developer' ), 'gd_footer_settings_box', $pagehook, 'main', 'high' );

function gd_footer_settings_box(){
    <label for="<?php echo GENESIS_SETTINGS_FIELD;?>copyright_text"><?php _e( 'Copyright Text', 'genesis_developer' ); ?></label><br/>
		<input type = "text" name="<?php echo GENESIS_SETTINGS_FIELD;?>[copyright_text]" id="<?php echo GENESIS_SETTINGS_FIELD;?>[copyright_text]" value="<?php echo esc_attr( genesis_get_option('copyright_text') ); ?>" style="width:99%;" />		
    <label for="<?php echo GENESIS_SETTINGS_FIELD;?>credits"><?php _e( 'Credits', 'genesis_developer' ); ?></label><br/>
		<input type = "text" name="<?php echo GENESIS_SETTINGS_FIELD;?>[credits]" id="<?php echo GENESIS_SETTINGS_FIELD;?>[credits]" value="<?php echo esc_attr( genesis_get_option('credits') ); ?>" style="width:99%;" />		

Now we need to fetch value from theme settings and display at the front end. I am filtering the genesis_footer_output content with my inputted value. Here is the code:

add_filter('genesis_footer_output', 'gd_footer_output', 10, 3);
function gd_footer_output($output, $backtotop_text, $creds_text){
  $new_output = '';
  $copyright_text = html_entity_decode( genesis_get_option('copyright_text') );
  $credits = html_entity_decode( esc_attr( genesis_get_option('credits') ) );
  $new_output = ( ! empty( $copyright_text ) ) ? '<div class="footer-left">' . $copyright_text . '</div>' : $output;  
  $new_output .= ( ! empty( $credits ) ) ? '<div class="footer-right">' . $credits . '</div>' : '';
  return $new_output;

Also I added couple of CSS in style.css file for better result.

  float: left;
  width: 48.717%;
  text-align: left;

  float: right;
  width: 48.717%;
  text-align: right;

@media only screen and (max-width: 860px) {
    float: none;
    width: 100%;
    text-align: center;

All steps are finished now. Just refresh your home page and get your copyright text.


Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

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