Change Footer Column Widths

BB Theme
1

Hello Guys,

I am using the 2 column footer, right now the footer is 50/50 for width using the code below:

<div class="fl-page-footer-container container">
	<div class="fl-page-footer-row row">
		<div class="col-md-6 col-sm-6 text-left clearfix">...</div>
                <div class="col-md-6 col-sm-6 text-right clearfix">...</div>
	</div>
</div>

I’d like to change it so the left column is 1/3 and the right column is 2/3. So I’d like to change the code to the below:

<div class="fl-page-footer-container container">
	<div class="fl-page-footer-row row">
		<div class="col-md-4 col-sm-12 text-left clearfix">...</div>
                <div class="col-md-8 col-sm-12 text-right clearfix">...</div>
	</div>
</div>

My question is how would I do that? Is there and action/filter set that will let me hook into the footer html and change out the div classes? Or is there a template part I can include in my child theme to override this bit of html?

Any help is appreciated. Thanks!

2

Hi Richard,

You can override the includes/footer.php file in a child theme and edit the HTML there. Let me know if you have any questions about that.

Justin

3

@justin

Thanks for the reply. I’ve added the includes/footer.php to my child theme, but upon opening it, it doesn’t look like the html I want to change is stored there.

<div class="fl-page-footer">
	<div class="fl-page-footer-container container">
		<div class="fl-page-footer-row row">
			<?php FLTheme::footer_col1(); ?>
			<?php FLTheme::footer_col2(); ?>
		</div>
	</div>
</div>

The column classes I want to change are created by those two PHP calls. Do you know where I can modify those in my child theme?

Thanks!

4

@Justin Busa,

I actually found it. It’s in classes/class-fl-theme.php. Lines 658 & 697.

I attempted copying that file into /child-theme/classes/class-fl-theme.php and adjusting those two lines with the html I wanted, but it had no effect.

So, is there a function I could write into the child theme that I could use to overwrite the
static public function footer_col1() on line 645 and the static public function footer_col2() on line 688?

Thanks!

5

My first attempt at code adjustments:

Added this code to classes/class-fl-child-theme.php:

/**
	 * @method footer_col1
	 */
	static public function footer_col1_adjusted()
	{
		$settings   = self::get_settings();
		$layout     = $settings['fl-footer-layout'];
		$col_layout = $settings['fl-footer-col1-layout'];
		$col_text   = $settings['fl-footer-col1-text'];

		if($layout != 'none') {

			if($layout == '1-col') {
				echo '<div class="col-md-12 text-center clearfix">';
			}
			else {
				echo '<div class="col-md-4 col-sm-12 text-left clearfix">';
			}

			if($col_layout == 'text' || $col_layout == 'social-text') {
				if(empty($col_text)) {
					include FL_THEME_DIR . '/includes/copyright.php';
				}
				else {
					echo '<div class="fl-page-footer-text fl-page-footer-text-1">' . do_shortcode( $col_text ) . '</div>';
				}
			}
			if($col_layout == 'social' || $col_layout == 'social-text') {
				self::social_icons();
			}
			if($col_layout == 'menu') {
				wp_nav_menu(array(
					'theme_location' => 'footer',
					'items_wrap' => '<ul id="%1$s" class="fl-page-footer-nav nav navbar-nav %2$s">%3$s</ul>',
					'container' => false,
					'fallback_cb' => 'FLTheme::nav_menu_fallback'
				));
			}

			echo '</div>';
		}
	}

	/**
	 * @method footer_col2
	 */
	static public function footer_col2_adjusted()
	{
		$settings   = self::get_settings();
		$layout     = $settings['fl-footer-layout'];
		$col_layout = $settings['fl-footer-col2-layout'];
		$col_text   = $settings['fl-footer-col2-text'];

		if($layout == '2-cols') {

			echo '<div class="col-md-8 col-sm-12 text-right clearfix">';

			if($col_layout == 'text' || $col_layout == 'social-text') {
				echo '<div class="fl-page-footer-text fl-page-footer-text-2">' . do_shortcode( $col_text ) . '</div>';
			}
			if($col_layout == 'social' || $col_layout == 'social-text') {
				self::social_icons();
			}
			if($col_layout == 'menu') {
				wp_nav_menu(array(
					'theme_location' => 'footer',
					'items_wrap' => '<ul id="%1$s" class="fl-page-footer-nav nav navbar-nav %2$s">%3$s</ul>',
					'container' => false,
					'fallback_cb' => 'FLTheme::nav_menu_fallback'
				));
			}

			echo '</div>';
		}
	}

And added changed the footer.php file to this:

<div class="fl-page-footer">
	<div class="fl-page-footer-container container">
		<div class="fl-page-footer-row row">
			<?php FLChildTheme::footer_col1_adjusted(); ?>
			<?php FLChildTheme::footer_col2_adjusted(); ?>
		</div>
	</div>
</div><!-- .fl-page-footer -->

But it throws this error:
Parse error: syntax error, unexpected T_PUBLIC, expecting T_PAAMAYIM_NEKUDOTAYIM in /wp-content/themes/preggie-box-bbct/classes/class-fl-child-theme.php on line 22

Which is this line:
static public function footer_col1_adjusted()

I feel like I’m close for a non-developer :slight_smile:

6

Hey Richard,

You actually won’t be able to override that class in your child theme. Sorry for missing that the HTML was in there and not includes/footer.php.

Give me a few minutes to whip up something that my work.

Justin

7

Hi Richard,

Ok, copy includes/footer.php into your child theme and then replace this…

<?php FLTheme::footer_col1(); ?>
<?php FLTheme::footer_col2(); ?>

with this…

<?php 
    
ob_start();
FLTheme::footer_col1();
echo str_replace( 'col-md-6 col-sm-6', 'col-md-4 col-sm-12', ob_get_clean() );

ob_start();
FLTheme::footer_col2();
echo str_replace( 'col-md-6 col-sm-6', 'col-md-8 col-sm-12', ob_get_clean() );

?>

Let me know if you have any questions about that.

Justin

8

@justin - I knew you were a genius. :slight_smile:

Thanks. That worked.

9

You’re welcome!