Agency Pro-Help with adding Pages to featured post

[erickuhn19]

First, I want to thank anyone ahead of time who attempts to answer my question. I am new to the StudioPress community and really looking forward to learning a lot more.

The Agency Pro Demo has "Posts" under the "Our Work" category. I love how this looks and want to keep the same format, but use "Pages" describing my services. I do not want this coming from blog posts.

I have tried to modify the widget and the plugin "Featured Widget Amplified." I tried to follow, http://designsbynickthegeek.com/plugins/control-post-order-with-genesis-featured-widget-amplified-plugin, description of adding custom fields too. Both had no success.

Can anyone help me in getting specific pages into this widget so it shows up similar to the demo?

http://demo.studiopress.com/agency/

[nutsandbolts]

Here's a tutorial that will help you use pages instead of posts: http://sridharkatakam.com/show-featured-pages-instead-posts-home-bottom-section-agency-pro/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[erickuhn19]

Thank you Andrea! This is exactly what I was looking for. I really appreciate your help.

[sdbroker]

I accidentally found yesterday another alternative way to do it which I found to be a bit more responsive on the different media screens.

1) Add this to your CSS around line 1205:

.agency-pro-home .featuredpage .entry {
	background: none;
	float: left;
	width: 33.33333333%;
}

.agency-pro-home .featuredpage img.entry-image {
	margin: 0;
}

2) Then go to the .home-middle section, lines 1235, 1240, 1248, 1253 & 1257 and replace .featuredpost with .featuredpage on all of them. Do the same thing on the @Media section, lines 1870, 2019 & 2067.

3) Add also this to the @Media 1180 section around line 1981:

	.agency-pro-home .featuredpage .entry {
		min-height: 380px;
		width: 50%;
	}

4) and this on the @Media 680 around line 2054:

	.agency-pro-home .featuredpost .entry {
		min-height: 380px;
		width: 100%;
	}
	

5) Finally just drop the "Featured Pages" widget on the Middle section...

[tornado]

Hi. Neither of these solutions work for me. The last solution works to pull pages but shows all pages on separate lines.

Any ideas?

Graeme

[tornado]

Hi. Neither of these solutions work for me. The last solution works to pull pages but shows all pages on separate lines.

Any ideas?

It's a bit odd that this isn't built in, especially as it's for a business site which is going to want to use pages and posts. Anyway, the home bottom section uses posts as well, so having two post sections just doesn't really make sense.

Graeme

[erickuhn19]

Tornado,

I had the same thought when I just tried it a few minutes ago. I was trying to configure it for the home-middle widget, so if that is the case for you, then replace the word "bottom" with "middle". The code that Sridhar describes is for the home-bottom widget.

This is the code I used and it worked for me:

.agency-pro-home .content .home-middle .widget {
width: 33.3333%;
min-height: 260px;
float: left;
margin-bottom: 0;
}

.agency-pro-home .content .home-middle .widget:hover {
background: #333;
color: #fff;
}

.agency-pro-home .content .home-middle .widget .entry {
background: transparent;
}

.agency-pro-home .content .home-middle .widget:hover .entry-title a {
color: #fff;
}

@media only screen and (max-width: 1180px) {
.agency-pro-home .content .home-middle .widget {
min-height: 280px;
}
}

@media only screen and (max-width: 1023px) {
.agency-pro-home .content .home-middle .widget {
width: 50%;
min-height: 280px;
}
}

@media only screen and (max-width: 680px) {
.agency-pro-home .content .home-middle .widget {
width: 100%;
min-height: 0;
}
}

[erickuhn19]

Thanks sdbroker. I tried the code from the first reply and it worked. If my testing shows it doesn't respond well on different screens than I will test yours. Thanks for the input.

[tornado]

Thanks, Erick.

That worked although now the text isn't hiding behind the image. Trying to think if I've changed anything else somewhere that could be conflicting/preventing this...

G

[tornado]

Sorted it! Awesome. Good work guys!

[tornado]

Aaargghh - doesn't work; works with showing pages in home middle but then the posts in home bottom breaks. Any ideas?

[sdbroker]

Tornado,

Both ways work just fine. Sridhar's version deals with the widget instead of the featuredposts content while my version follows the original css by replacing ".featuredposts" with ".featuredpages" ONLY in the middle section.

Neither version deals with the home bottom if you follow the instruction correct. I suggest that you compare the original CSS on the home bottom with whatever changes you have made to your style.css

[brook1979]

Can anyone help with this! I tried brokers way but that didn't work, got the same result as Tornado, it pulls the pages but the formatting isn't correct.

@erikuhn19
The code you used, did you replace any other code with that or simply place it in the css?

Thanks in advance

[brook1979]

Confused.COM!

[erickuhn19]

So Sridhar posted two different methods on two different blog posts.

How to show Featured Pages in Home Bottom section similar to Featured Posts in Agency Pro

This is the description to have the look and feel like the demo from the home-middle. His code however still needs to be adjusted to home-middle, if that is where you want to put it. Its set up to be added for the home-bottom section. You will want to use this if you want to have a picture displayed and when you hover over the image the text appears. The image will still be some what visible from the background. Not all pictures look good with this setup.

How to show Featured Pages instead of Posts in Home Bottom section of Agency Pro

You will want to use this code to have the look and the feel of the home-bottom from the demo. This is not set up to show the featured image. This code also needs to be adjusted for "home-middle" if that is where you want the widget to be.

Let me know if this helps.

[sdbroker]

@brook1979 Make sure that you add the additional entries to the main css & the @Media sections to the HOME-MIDDLE section for the formatting to work exactly the same as it works on the demo for the posts. Also make sure that you replace ALL (on main & @Media sections) the .featuredpost that you see on the HOME-MIDDLE section (DO NOT touch the home-bottom section which is for posts - unless you want to change both) with featuredpage. If you do that the formatting and the Schema works exactly the same as the demo for pages instead of posts.

What's your site address?

[teamaherl]

Thanks everyone for this great instructions.

So i followed this instructions http://sridharkatakam.com/show-featured-pages-home-bottom-section-similar-featured-posts-agency-pro/ adjusted them to for home-middle and it works fine, except I have a break between top 3 pages and second 3. They are not nicely stacked as in the demo. Any ideas how to fix this?

Also, if I want to add pages to the home-bottom, can I just paste the code below the code for the home-middle?

Many thanks
🙂

[Author]

Posts