By default the Agency Pro theme by StudioPress displays 3 home middle widgets inline.
In this tutorial, i’ll show you how to change that to 4 columns.
Increase Agency Pro Themes Home Middle Widgets From 3 To 4 Columns
—
by
Comments
14 responses to “Increase Agency Pro Themes Home Middle Widgets From 3 To 4 Columns”
-
Many thanks for all your help with WordPress and Genesis – much appreciated!
-
You’re welcome Neal.
-
-
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?
-
What do you mean by this Christy
I went through the tutorial and see the spaces where the new images should go
-
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.
-
-
-
-
-
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?
-
Its simply a matter of using the Genesis Featured Posts widget after modifying the code.
I did find browser issues with this CSS code.
-
-
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
[code]
.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;
}
[/code]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.
[code]
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;
}
[/code]-
When you added the featured image, where did you link it?
-
-
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.
-
-
Join 5000+ Followers
Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.
Leave a Reply
You must be logged in to post a comment.