WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Reader Interactions

Comments

  2. I’m sorry if this posted twice, you can edit or erase one of them if so.

    This tutorial is timely! I am trying to do this as well as make the Home Middle Widget display pages instead of posts. Is there a way to do both?

    I went through the tutorial and see the spaces where the new images should go, but they aren’t all populating. There are also borders of gray between the rows of pics. What did I do wrong?

      • For example, I see three images in the first line, then a blank space where a fourth should go. Same with the second line. Then there is a margin and a third line with only three images, but a blank space for the fourth. AND…I’ve also somehow added a fourth line. The fun never stops with an amateur coder like myself!

        • The code works with the featured posts widget and not the featured pages widget.

          You would need to change the classes to work with pages not posts.

          You could change this class featuredpost and replace it with the class for the featured pages widget.

          The code i have included above works perfectly with the Genesis featured posts widget as the screenshot shows from my local installation.

          No blank spaces or margins.

          • Ok, thanks! I must have messed something up somewhere else. I thought I currently had it set up as above, but must not.

  3. This tutorial comes at exactly the right time! I plugged in the code and the spaces have changed. I see where the fourth and eighth images should go, but it’s just gray. There is also a gray space between the two rows. What did I do wrong?

  4. Hi Brad,

    I am not sure whether I can ask here as it is a different theme but want to get the same purpose. Can we increase home middle widget in Executive Pro theme from 3 to 4 columns like your tutorial here? Thanks

    • The Executive Pro theme is coded differently but its a bit the same.

      Line 1299

      .home-middle .widget,
.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 25%;
}

.home-middle .widget:nth-of-type(4n+1), 
.home-top .widget:nth-of-type(3n+1) {
	clear: left;
}

      You will need to separate the classes for home-top and home-middle and then change your images sizes in your functions file.

      • Hi Brad,

        Thank you very much for your code. I appreciate your help. I could get 4 widgets inline as wanted.

        But…the last image that added in once the image was clicked it is supposed to go to the linked page but it didn’t rather it links to the image itself. Where do I need to look at it to make it link to the linked page?
        Here what I changed in function file and stylesheet. Thanks once again.

        Function file
//* Add new image sizes
add_image_size( 'featured', 300, 100, TRUE );
add_image_size( 'portfolio', 300, 200, TRUE );
add_image_size( 'slider', 1140, 445, TRUE );
add_image_size( 'home-middle', 285, 285, TRUE ); <--- I added.

Stylesheet file
.home-middle .widget,
.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 25% <--- changed from 33.33333333333%
}

.home-middle .widget:nth-of-type(4n+1) <-- changed from (3n+1)
.home-top .widget:nth-of-type(3n+1) {
	clear: left;
}

      • Hi Brad,

        I could now link the image to the linked page…I didn’t link the image to the page at first that is the reason. Now it looks really good.

Leave a Reply