Home Page Layout

[Jill McIntire]

Is there a way to force or arrange the widgets on the home page to be arranged a certain way? Currently all of the home page widgets are in the “Home Sidebar” and as the individual widgets change sizes with the addition of new posts or content changes of any kind, the order and layout changes.

It’s like they are in a 3-column layout that flows and shuffles when the size of the content changes.

Maybe I’m missing something. Are there individual “sidebars” for the first, second and third columns on the home page, or is all content supposed to go in the “Home Sidebar” area?

Here’s a link:
http://biz131.inmotionhosting.com/~ncfspo5/

Thanks

[Bill Robbins]

Jill,

Great question. At the bottom of the home page, I use a bit of javascript that lets the widgets stack a bit more neatly than they would without it. Without the script, they will form rows based on the tallest widget in the row which will leave gaps between them. Sometimes that’s fine, but in other situations, they can be quite large. I also do that so that the post widget can more easily span two columns on the home page. That also helps on smaller devices like tablets too and makes the transition between desktop and mobile a bit better.

You can reorder the widgets and experiment with the order a bit to adjust where they appear. Since the script tries to make them fit, it will sometimes rearrange them. Placing them in alternate orders can help you actually get the correct visual order you want.

It is possible to turn off the script. If you do that, I would suggest also setting a height for the widgets so they line up in a grid. Let me know if you’d like to do that and I can give you instructions.

Thanks,
Bill

[Jill McIntire]

I’d love the instructions for turning off the script. I don’t do coding, but I can “find and replace” with instructions. Thanks

[Bill Robbins]

No problem at all. Here’s what to do:

1. Go to the Appearance section of your WordPress control panel and select Edit.
2. From the list of files on your right, choose custom-js.php and look for this section:

   
   // Masonry
   	
   	var $container = $('.home-lower');
   	$container.imagesLoaded(function(){
   	  $container.masonry({
   	    itemSelector : '.widget',
   	    columnWidth : 312
   	  });
   	});
   	
   	var $jcontainer = $('#sidebar');
   	$jcontainer.imagesLoaded(function(){
   	  $jcontainer.masonry({
   	    itemSelector : '.widget',
   	    columnWidth : 480
   	  });
   	});
   

   and delete it.

3. Save your changes.

That should remove the script from your home page widgets. If you run into trouble, let me know.

Enjoy your weekend,
Bill

[Jill McIntire]

Thank you. I will probably wait till Monday to work on it. I do have one question though. When you said to re-size the widgets, do you mean by controlling the content of the widget, or is there another way to size the widgets?

Thanks.

Jill

[Bill Robbins]

Some widgets you could control their height with their content. Most likely though you’ll want to use a bit of custom styling to set the height. To do that, go to the Theme Options page and select the Styling tab. At the top, choose “yes” to include custom styling. The scroll down to the Custom CSS box and paste this:

aside.home-lower .widget {
	height: 400px;
}

That will set the height of every widget in the bottom part of the home page to be the same height. You can experiment with the 400px to get the right fit for your content. It’s the height in pixels.

If you run into trouble, let me know,
Bill

[Author]

Posts