• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Increase Agency Pro Themes Home Middle Widgets From 3 To 4 Columns

By default the Agency Pro theme by StudioPress displays 3 home middle widgets inline.

Agency Pro Theme

In this tutorial, i’ll show you how to change that to 4 columns.

home middle widgets

Code

Related Tutorials

  • Make Agency Pro Themes Home Bottom Widgets Display Like Home Middle

Agency Pro Theme

Reader Interactions

Comments

  1. Neal Ghoshal says

    April 1, 2014 at 7:15 am

    Many thanks for all your help with WordPress and Genesis – much appreciated!

    Log in to Reply
    • Brad Dalton says

      April 1, 2014 at 7:27 am

      You’re welcome Neal.

      Log in to Reply
  2. Christy says

    March 23, 2014 at 9:59 pm

    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?

    Log in to Reply
    • Brad Dalton says

      March 23, 2014 at 10:22 pm

      What do you mean by this Christy

      I went through the tutorial and see the spaces where the new images should go

      Log in to Reply
      • Christy says

        March 25, 2014 at 5:04 am

        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!

        Log in to Reply
        • Brad Dalton says

          March 25, 2014 at 5:39 am

          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.

          Log in to Reply
          • Christy says

            March 25, 2014 at 6:03 am

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

  3. Christy says

    March 23, 2014 at 9:15 pm

    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?

    Log in to Reply
    • Brad Dalton says

      March 23, 2014 at 10:21 pm

      Its simply a matter of using the Genesis Featured Posts widget after modifying the code.

      I did find browser issues with this CSS code.

      Log in to Reply
  4. soilland says

    March 23, 2014 at 10:35 am

    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

    Log in to Reply
    • Brad Dalton says

      March 23, 2014 at 5:34 pm

      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.

      Log in to Reply
      • soilland says

        March 25, 2014 at 10:50 am

        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;
        }
        Log in to Reply
        • Brad Dalton says

          March 25, 2014 at 3:53 pm

          When you added the featured image, where did you link it?

          Log in to Reply
      • soilland says

        March 25, 2014 at 11:07 am

        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.

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.