# Change Footer Column Widths

**URL:** <https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244>\
**Category:** BB Theme\
**Created:** [May 19, 2015, 11:43pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244 "2015-05-19T23:43:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![foodin65](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/foodin65/32/364_2.png) [@foodin65](https://community.wpbeaverbuilder.com/u/foodin65)\
**Post date:** [May 19, 2015, 11:43pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/1 "2015-05-19T23:43:09Z")

</div>

Hello Guys,

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

```auto
<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:

```auto
<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!

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [May 20, 2015, 10:29am UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/2 "2015-05-20T10:29:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![foodin65](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/foodin65/32/364_2.png) [@foodin65](https://community.wpbeaverbuilder.com/u/foodin65)\
**Post date:** [May 20, 2015, 11:54am UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/3 "2015-05-20T11:54:52Z")

</div>

@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.

```auto
<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!

---

<div class="post-metadata">

**Author:** ![foodin65](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/foodin65/32/364_2.png) [@foodin65](https://community.wpbeaverbuilder.com/u/foodin65)\
**Post date:** [May 20, 2015, 12:04pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/4 "2015-05-20T12:04:26Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![foodin65](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/foodin65/32/364_2.png) [@foodin65](https://community.wpbeaverbuilder.com/u/foodin65)\
**Post date:** [May 20, 2015, 12:14pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/5 "2015-05-20T12:14:34Z")

</div>

My first attempt at code adjustments:

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

```auto
/**
	 * @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:

```auto
<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 🙂

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [May 20, 2015, 12:53pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/6 "2015-05-20T12:53:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [May 20, 2015, 12:58pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/7 "2015-05-20T12:58:42Z")

</div>

Hi Richard,

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

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

```

with this…

```auto
<?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

---

<div class="post-metadata">

**Author:** ![foodin65](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/foodin65/32/364_2.png) [@foodin65](https://community.wpbeaverbuilder.com/u/foodin65)\
**Post date:** [May 20, 2015, 1:27pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/8 "2015-05-20T13:27:19Z")

</div>

@justin - I knew you were a genius. 🙂

Thanks. That worked.

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [May 21, 2015, 10:05am UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/9 "2015-05-21T10:05:54Z")

</div>

You’re welcome!

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:16pm UTC](https://community.wpbeaverbuilder.com/t/change-footer-column-widths/3244/10 "2019-04-27T22:16:35Z")

</div>