Amend Widget Widths and Positions in Twenty Thirteen

What child theme are you using? Could you post a link to your site?

Actually, for Twentythirteen, widgets in footer area are controlled by Masonry script. It helps arrange the layouts in different screenwidths.

To modify this, you have to dequeue and enquue your own JS. Take a look at theme’s JS folder, the file is functions.js.

It might be possible to leave the JS as is and use !important in CSS but not sure if that’d work, even if it did, still not as good as adjusting the JS.

Hi Stacy, Thanks for replying. I’m making my own Child Theme. It isn’t online at the moment, I’m setting it up locally using XAMPP.

Hi Paul, Thanks for replying. I’ve found the part in functions.js you were referring to:

/**
	 * Arranges footer widgets vertically.
	 */
	if ( $.isFunction( $.fn.masonry ) ) {
		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;

		$( '#secondary .widget-area' ).masonry( {
			itemSelector: '.widget',
			columnWidth: columnWidth,
			gutterWidth: 20,
			isRTL: body.is( '.rtl' )
		} );
	}

– How do I dequeue this version and enqueue my own child version?
– I’m not too sure how to read this function. Is the 228:245 a range of widths? Is it possible to replace these with percentages instead? I have four widgets in the footer and would like them in a horizontal row, but with the current settings the fourth one is placed below the third (at my screen resolution) but there is room for them to be in a row.

Thanks again!

but with the current settings the fourth one is placed below the third (at my screen resolution)

This sounds like you’re fixing the site to look good specific to your device only.

When there is no widget in Secondary Widget Area ( sidebar on the side ), the four widgets in footer area will display as four columns in one row already. But with certain screenwidth, they will not fit in one row, and it’s okay, there is nothing wrong with elements not fitting in and go into another row in smaller screen.

You could try to control the width of widget in footer via CSS using media query. But the Masonry might get in the way, if not wanted just dequeque it all together.

How do I dequeue this version and enqueue my own child version?

To dequeue the script, just make a function like theme does,
https://themes.trac.www.ads-software.com/browser/twentythirteen/1.0/functions.php#L158

and then hook into the same hook. Dequeue using wp_dequeue_script() with the right handle and enqueue using wp_enqueue_script() with similar paremeters that theme uses excepts that child theme uses get_stylesheet_directory_uri() instead of get_template_directory_uri().

Hi Paul,
Thanks for getting back to me and sorry about the delay in responding.
Can you tell me if I am reading the function correctly? Is the 228:245 a range of allowed widths? How does that function read in normal language?
Thanks again,
Franc.

Hi all,
I am trying to alter the widget widths in the footer of a child theme based on twentythirteen. I have four widgets in Main Widget Area and none in the Secondary Widget Area. At resolution 1024×768 the Masonry javascript function is not placing all four widgets in a row although there is room for them, it is taking the fourth and placing it below the third. I would like to place them all in a row by either amending the widget widths, margins or padding. I am not familiar enough with Javascript to see what settings to change for that. I think I have tracked down the function in functions.js responsible.

/**
	 * Arranges footer widgets vertically.
	 */
	if ( $.isFunction( $.fn.masonry ) ) {
		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;

		$( '#secondary .widget-area' ).masonry( {
			itemSelector: '.widget',
			columnWidth: columnWidth,
			gutterWidth: 20,
			isRTL: body.is( '.rtl' )
		} );
	}

Can anyone tell me how to set the widths, margins and paddings for the widgets?
Many thanks,
Franc.

I had this problem and worked around it rather simply by just creating another sidebar element in functions.php and then calling for that in the footer.php. Now I’m just running on css like I wanted.

Hi, Not sure if I’m in the right forum but here goes:

The home page of my site, https://www.sportsreporters.com, used to contain four rotating photos that corresponded to the four most recent articles posted. Now, it looks like this:

Warning: include(/home/vg008web00/55/86/3018655/web/wordpress//wp-content/plugins/content-gallery/gallery.php) [function.include]: failed to open stream: No such file or directory in /home/vg008web00/55/86/3018655/web/wordpress/wp-content/themes/playmaker2/home.php on line 25

Warning: include() [function.include]: Failed opening ‘/home/vg008web00/55/86/3018655/web/wordpress//wp-content/plugins/content-gallery/gallery.php’ for inclusion (include_path=’.:/usr/share/php:/usr/share/pear’) in /home/vg008web00/55/86/3018655/web/wordpress/wp-content/themes/playmaker2/home.php on line 25

Can someone please help me? Thanks.

@sportsreporter of ny – no, this isn’t a good place – you’re using a diffferent theme and your problems are not the same at all. You can start a new thread here:

https://www.ads-software.com/support/forum/themes-and-templates#postform

Hi Keress,
Would you mind sharing your code?

Hi,

I think I’m seeing the same problem.

With the theme twentythirteen, if I have no widgets in the right hand sidebar, the footer widget area uses the full width of the theme.

But once you have any widgets in the right hand sidebar, the footer widget area reduces its width with the width of the main content area.

What I want is for the footer widget area to be the full theme width, i.e. the width of the main content plus the right hand sidebar. So adding a widget to the righthand sidebar does not reduce the width of the footer widget area.

Below the footer widget area is the ‘site info’ area. This does not get reduced.

Is this the same problem you’ve got francsutherland?

Does anyone know how to fix it?

As per the Forum Welcome, please post your own topic.

I’m having the same problem and haven’t found a solution yet. I see that the problem is that the absolute left position generated for the fourth widget is 496px, the same position of the third widget. I don’t know how to change this. Does anyone know?

@aynex – did you read esmi’s post above? Please follow it.

Hi @aynex. I think the 496px is calculated by the masonry functionality which is the javascript part controlling the layout of the footer. (If anyone can correct this, please do!).
I want to find out where the masonry calculations are done so that I can change the constants used so that the columns are closer together.
Does anyone know how to do this?