Agency Pro Home Middle – Pages Possible?

[jbculp]

I stumbled across the new agency pro theme today and love it. Since I would like to use it for an Agency (go figure) it would be ideal to have the home middle image grid point to pages NOT posts. Problem is, the Featured Posts widget uses a post category so one occurrence of the widget can paint all 6 posts into the page (as seen in the demo). The featured page widget by contrast has one page per occurrence of the widget. So, if you put in >1 Featured Pages, the images don't grid but line up vertically as one image with a bunch of white space.

How do I modify the functions.php to make this work on pages instead of posts?

[Sridhar Katakam]

http://sridharkatakam.com/show-featured-pages-instead-posts-home-bottom-section-agency-pro/

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

@Sridhar I was just trying to figure out how to do what you explained... Thank you! Will it also work the same if you use a text widget instead of a page or post?

@ Sridhar Will the way you explained here: http://sridharkatakam.com/replace-tagline-eleven40-pro-widget-area/ work for the Agency Pro to add a widget right after the header on top of the Top Page?

Thanks!

[Sridhar Katakam]

1) Yes. If the widgets do not have the same height approximately and do not appear nicely in the grid, then you will need to play with min-height value in CSS.

2) http://sridharkatakam.com/adding-widget-area-header-agency-pro/

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

@Sridar #1 worked like a charm (I put it on the middle page), adding either pages, text or any other widget. The only problem (which makes sense since they are not posts) is that it doesn't have that nice looking title on top of the page so it doesn't look as good as the demo. It also doesn't separate the middle and bottom pages if none of them includes posts. 🙁

I'll be trying #2 now to add the top widget under the header! You are a genius sir! Thank you so much! 🙂

[Sridhar Katakam]

It also doesn’t separate the middle and bottom pages if none of them includes posts.

Can you give the URL where this can be seen?

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

@Sridhar here it is: http://www.alexiourealty.com/

I can't also get the #2 right... Whatever I put on that widget area (even text) below the header it aligns to the left not even the title centers and I can't get the light background that I see on the picture you have on your "How to" post. 🙁

[sdbroker]

@Sridhar Never mind the widget area... It works great! I changed the "home-future" name to something else and I forgot to also change it on the CSS. 🙂

[Sridhar Katakam]

Try this CSS:

.home .site-inner {
    background: transparent;
}

.home-middle {
    background: #fff;
}

---

Genesis Tutorials | Follow me on Twitter

[jbculp]

Sridhar,

Thanks for the help, you always deliver.

In the time since I posted this last night and my coffee this morning it appears others have been hot on the trail so it seems this is a much desired feature. That said, my vision was to have the image grid (using page's featured images) and text appear on mouse over. Will your solution address that? My long term goal is then to replace the post section with Woo Commerce products or to at least create a new div containing those products. But for now I'm hoping to get the image grid worked out.

Before I dive into this code, can you tell me if what I want to accomplish will be met with this example?

[Sridhar Katakam]

Before I dive into this code, can you tell me if what I want to accomplish will be met with this example?

No. What you see in the screenshot is what you get with my article.

http://sridharkatakam.com/wp-content/uploads/2013/10/2013-10-10_19-39-26.png

When I get time, I will work on what you want.

---

Genesis Tutorials | Follow me on Twitter

[jbculp]

Thanks. It appears that this whole tricky overlay (nice work that it is) is accomplished with CSS. I can't find anything in the functions or front-page that makes the magic work. I'll mess around with it today. Thanks for your continued help. This is why I like the Genesis Community!

Cheers

[jbculp]

Sridhar,

I was able to replicate the demo using a text widget and following the HTML of the demo page. There will be some styling because the default background on the text widget is white but still, it work initially. Since the demo uses posts, the code uses schema.org tagging to indicate the content as blog posts. If I use this with pages I'll need to find the equivalent for pages. It also might make sense to copy the CSS elements and make new ones that are page specific and not for posts but still on the surface its working. CSS is a wonder. Would love your insights into how to make this css clean for pages.

[jbculp]

Sridhar,

If you are still following this I have a question. Instead of fighting all this CSS, is it possible to make a custom post type that is only used for the home page, and use the build in functionality of featured-post? The only hangup I can see is blocking those posts from the blog and archive and somehow re-route the mapping to the actual page. Perhaps this just causes as many problems.

Thoughts?

[tamjl]

jbculp, did you have any luck figuring it out? I want to accomplish the same thing as you but haven't had success yet.

[jbculp]

Yes - sort of...Not to my satisfaction. Thanks for asking. I was writing my response and in the middle had a light-bulb moment. instead of deleting everything I'll keep my text below and you can decide if either will work for you.

Here is where it currently stands. I have two versions on my test site.

#1. Less than satisfactory solution. I created 6 "fake" blog posts and using a WordPress plugin (Page Links To - made by Mark Jaquith) I mapped those posts to real pages. End result, 6 grids on home page just like demo that can have specific copy for the links. This can all be done using the theme setup instructions with the small addition of the plugin remapping.

Upside of #1
- Upside is that there is no coding involved, simple plugin, copy/paste 6 urls and you are done.

Downside of #1
- The posts will need to be filtered out of the blog and archive. Creating them as custom post types may help but then I'd need to determine how to do that filtering so I'm back in code.
- The featured post plugin inserts Post metadata using schema.org format so these fake pages will have "post" metadata in the eyes of a web crawler
- Have no idea what this will do to SEO (if anything) or a Sitemap
- Solution #1 just isn't nuanced. It uses post css to get the visitor to a page.

Solution #2
- After a bit of tricky html copy/paste work from the demo I was able to create the exact same effect with one text widget. Initially the Text widget had a white background and inner padding which was unsatisfactory. (light bulb moment come here...) it turns out the widget for the home page has its own CSS which can be altered, so I did:

.agency-pro-home .content .widget {
	background: #none;
	margin-bottom: 80px;
	margin-bottom: 8rem;
/*	padding: 40px;
	padding: 4rem; */
}

Now I have 6 links to pages that look like the demo.

Also, I copied a HUGE section of the CSS and replaced the featured-post syntax with featured-page so each of these items has its own css element.

The styles still have the featured-post metadata so once I figure out (or likely am told) what the page metadata should be for a page I'll alter the already nasty html. Thankfully I have dreamweaver to help visually with the editing but Textmate would likely work just as well.

Upsides to #2
- Pages not posts - that's obvious
- The implications on the sitemap and SEO don't make my brain ache

Downsides to #2
- The metadata using a class of Article is still a problem.
- The Title for the entire section is not working. Using the Featured Post widget, the CSS knows what to do to style the title before the entire block, center the text etc. The title for the text widget hangs above the left top. When I took away the white background it nearly disappeared with the backstretch image behind it. So there is still work here to be done.
- The use of a huge piece of html in a text widget makes edits very difficult. If one's goal is to create something that can be altered later... this solution falls short.

All in all #2 isn't bad. If you like I can send you my incomplete HTML with the cavaet that it's not ready for prime time.

I'm still committed to the belief that this theme should have had a design accommodation for using pages as well. The name alone (Agency) implies that this will be focused on business and corporate sites and the bias toward posts on the home page just doesn't work so well here. I don't want to sound like a troll because I really like Genesis and the tech support and community have helped me far beyond the reasonable amount... I'm just saying that WordPress is now 20%-ish of all websites in the world and 60%-ish of all sites using CMS solutions and not all of those are blogs (e.g. CNN).

I hope this helps. If anyone knows how to style the title to use the .agency-pro-home .content .featured-content .widget-title::before element then that issue goes away. Then the only issue is the meta data and general inflexibility of using a monster text widget.

There you have it. Hope you could make it thru all this text.

[jbculp]

OOPS, forgot to add. If you make the text background go away, any other widgets on the page that are legit will not have the white background - that's bad so one would need a custom class for this purpose.

[tamjl]

Thanks for the ideas, jbculp. I considered going the route of your option #1 but rejected it because I want to find a clean coding solution instead of adding redirects, etc.

I'll continue to play with it and if I figure anything out, I'll post it here. I hope you'll do the same! And maybe someone will notice our plea and help us out.

[jbculp]

Tamjl,

GOT IT. Still using a text widget but got the background correct, the padding, the title etc. So still not as flexible as using a featured page widget but it works.

[SMB-dev]

Wow this an active stream and I am interested in the same...please do post a response on the schema info please.

---

“Life is Social” & “Social is the Lifeblood” of a Small Business Owner.

[Author]

Posts