Split footer in Genesis

This tutorial provides the various options to split Site footer in Genesis child theme. While the basic tutorial on Site footer Customization is already written, It provides the additional tweaks to customize site footer in Genesis.

How to Split site footer in Genesis?

The answer is simple. Diving the content in 2 equal widths 50% each for a min-width screen of your choice. This division can be done using columns classes, Custom HTML or widgets with additional CSS requires…

It is recommended you to read how to do the basic customization of site footer in Genesis.

Let’s Go.

This is HTML method of splitting footer in Genesis. You can start with this code.

Add this in functions.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Change the footer text
add_filter('genesis_footer_creds_text', 'wpize_footer_creds_filter');
function wpize_footer_creds_filter( $creds ) {
    $creds = 'HTML GO HERE';
    return $creds;
}

HTML (You can directly put it using Genesis Simple Edits Plugin)

<div class="one-half first left">
    <p>Copyright [footer_copyright] &middot; All Rights Reserved</p>
</div>
<div class="one-half right">
    <p>SOME LINKS</p>
</div>

SOME LINKS

<a href="https://www.studiopress.com/">Genesis Sample</a> on
<a href="https://www.studiopress.com/">Genesis Framework</a> ·
<a href="https://wordpress.org/">WordPress</a> ·
<a href="/wp-login.php">Log in</a>

You might be interested in how you can use Genesis Shortcodes Anywhere even on the site footer.

Additional CSS apart from Column Classes. Add this in your style.css

@media only screen and (min-width: 960px) {
  .one-half.first.left {
    float: left;
    margin-left: 0;
    text-align: left;
  }

  .one-half.right {
    float: right;
    margin-right: 0;
    text-align: right;
  }
}

Read how the columns work in Genesis and Equal height columns in Genesis.

The idea is not limited here and you can always create something new using a bit of HTML and CSS skill.

To make the things easier, Here is the Tutorial about splitting the footer into Two Widgets.