Docs

[danny]

Hi there,
I want to create several rows in the footer. I’am able to do this but they all have the same background color. I’d like to create 3 bands of colours at full width in the footer. Is this possible?

See footer @www.dannyhearn.me/blog. I have email sign up as one row, then ‘about me’ as another row. I want the ‘about me’ row to be a different colour at full width.

thanks

Danny

[Rue Nel]

Hello Danny,

Thanks for writing in! The footer widget were designed as one row only. If you want to have two or more different rows, you may need to have a custom template. Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-WIDGET-AREAS.PHP
// -----------------------------------------------------------------------------
// Outputs the widget areas for the footer.
// =============================================================================

$n = x_footer_widget_areas_count();

?>

<?php if ( $n != 0 ) : ?>

  <footer class="x-colophon top" role="contentinfo">

  <?php

  $i = 0; while ( $i < $n ) : $i++;

    $last = ( $i == $n ) ? ' last' : '';
    echo '<div id="x-container-' . $n . '" class="x-container max width">';
    echo '<div class="x-column x-md x-1-' . $n . $last . '">';
      dynamic_sidebar( 'footer-' . $i );
    echo '</div>';
    echo '</div>';
  endwhile;

  ?>

  </footer>

<?php endif; ?>

3] Save the file named as _footer-widget-areas.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Now this customaization makes the footer widget areas appear in a row and no longer be in columns. This should help you achieve what you have in mind. And if ever you want to have a different background colors for the rows, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#x-container-1 {
  background-color: #efefef;
}

#x-container-2 {
  background-color: #222;
}

#x-container-3 {
  background-color: #fff;
}

We would loved to know if this has work for you. Thank you.

[danny]

Hey there,
I just got error

“Parse error: syntax error, unexpected T_STRING in /var/sites/d/dannyhearn.me/public_html/blog/wp-content/themes/x-child/framework/views/global/_footer-widget-areas.php on line 10”

[Rue Nel]

Hello There,

Please make sure that you have copied the codes correctly. Any invalid character could result to a parse error. Could please post the contents of your _footer-widget-areas.php file? The code must be this:

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-WIDGET-AREAS.PHP
// -----------------------------------------------------------------------------
// Outputs the widget areas for the footer.
// =============================================================================

$n = x_footer_widget_areas_count();

?>

<?php if ( $n != 0 ) : ?>

  <footer class="x-colophon top" role="contentinfo">

  <?php

  $i = 0; while ( $i < $n ) : $i++;

    $last = ( $i == $n ) ? ' last' : '';
    echo '<div id="x-container-' . $n . '" class="x-container max width">';
    echo '<div class="x-column x-md x-1-' . $n . $last . '">';
      dynamic_sidebar( 'footer-' . $i );
    echo '</div>';
    echo '</div>';
  endwhile;

  ?>

  </footer>

<?php endif; ?>

Please let us know how it goes.

[Author]

Posts