Earlier this year I partnered up with WinningAgent.com (an actual company!) to release a real estate theme for the Genesis Framework called Winning Agent Pro. Although we wrote detailed setup instructions for the theme, we still get a fair amount of support questions about theme setup, which tells me I could improve my documentation.
Below is a Winning Agent theme tutorial to teach you how to set up the homepage to look just like the Winning Agent demo.
For those of you who learn by watching, I’ll include a step-by-step video of the Winning Agent theme setup. For those of you who prefer to follow written instructions, I’ve got you covered as well. Here we go!
Watch a Video Demo of the Homepage Setup
Before you click the play button below, let me warn you… this is an un-edited, first take. It’s rough, but it gets the message across. Don’t judge me. 😉
The video tutorial covers the following:
- Basic install, setup, and import demo content
- How to set up the header
- How to set up the homepage
- How to set up the footer
- (Bonus!) How to set up the sidebar
Where the Widgets Go
We’ll work our way down the Winning Agent homepage one section at a time and discuss which widgets go in which widget area (say that three times fast). To follow along, you’ll want to hang out in your WordPress admin dashboard, primarily on the Appearance > Widgets screen.
The site header has three basic components in the demo: The site title, some navigation, and social connect icons. Let’s break it down.
This is the site title you set under Settings > General in your WordPress dashboard. If you want to get fancy with the two-tone colors, like the demo, you’ll need to follow this tutorial. No widgets required!
Header Right widget area
The Winning Agent theme demo does not use the Primary Navigation! Instead, create a menu as usual and then use the Custom Menu widget to show your menu. Next up, you’ll need to install the Simple Social Icons plugin. Once you do that, you’ll see a Simple Social Icons widget you can drag into the Header Right widget area to show off your social connect buttons. To get the exact styles and colors used in the theme, follow this guide.
Top of the Home Page
Home Welcome widget area
This one is so simple it hurts! Just drag a Text widget into this widget area, and give it a title. Oh yeah, don’t forget to save it.
Search Bar widget area
Ok, this area is a source of great consternation for folks. The Winning Agent demo uses the AgentPress Listings plugin. Once you set up your properties and some custom taxonomies, drag the AgentPress Listings Search widget into this widget area. If you need help setting up properties, you can find some help here.
Now, if you don’t want to use the APL plugin and want to integrate with an IDX, you have two choices:
- Get into the CSS and style it yourself (free, but you may pull your hair out)
- Hire the Winning Agent Team ($99 and you keep your hair)
Or, if you’re not using the theme for real estate (yes, that’s a legit option!), you can put whatever you want in that widget area. Just be ready to style it if you don’t like the default styles.
Some tips for that photo:
- Don’t use a person’s face – the nature of backstretch is that it stretches to fill the space. If you’ve got a tightly cropped pic of a person’s face, odds are you’ll be chopping off their head at some screen sizes.
- Use a 3:1 size ratio – The width should be 3x the height. Think nice, wide landscapes. 1500px by 500px would be a good 3:1 ratio to start with.
- The theme includes a slight black overlay on the image to help the Home Welcome text stays nice and readable, regardless of the image you choose. You can change that color tint or remove it altogether by following these instructions.
Middle of the Home Page
Home Featured 1-3
You can recreate the Buying/Selling/Renting buttons in the demo by dragging an instance of the Genesis – Featured Page widget into the Home Featured widget areas. For each widget, use the following settings:
- Give it a title
- Link it to a page
- Check the box to Show the Featured Image
- Select the feature-small image size.
A very important note: The featured page MUST have a featured image assigned to it for this to work as intended. The link actually wraps around the image, not the widget title, so no featured image = no link.
To create your featured listings, drag an instance of the AgentPress Featured listings widget into this widget area. The theme looks best if opt to show 3 listings. If you want to show more that (i.e. make it 4 columns or add a second row), you’ll need to muck around in the stylesheet a bit.
Bottom of the Home Page
We’ve almost made it! Let’s knock this out.
The Winning Agent theme come with a custom post type called “Communities” where you can show off your local neighborhoods. Feature as many as you want on the homepage using the Featured Communities widget. The theme demo shows 4 communities, but if you want to show 8, that would look great, too.
The site footer is split in two widget areas, each one roughly 50%. The Footer 1 widget area uses a Text widget. If you want to get cool styling like the demo, you’ll need to use a little html markup for blockquotes, like this:
<blockquote>This Winning Agent theme tutorial is the best I've ever read!</blockquote>
The Footer 2 widget area uses the Genesis – User Profile widget. If you want your picture to show up there, you’ll need to create a Gravatar account using the email address that corresponds to your WordPress user account.
You can optionally show another menu at the bottom of your homepage (actually, this will show up on every page). To create this, go to Appearance > Menus and create a menu with whatever you want (the demo uses Communities). From that same screen, click on the Menu Locations tab and select your menu for the Secondary Menu location.
Save it… and done!
Congratulations, You’ve Just Setup the Homepage for the Winning Agent Pro Theme
Woot! If you have any problems with theme setup, contact the Winning Agent support team. Have fun rocking out your theme – ping me with a link when you’re done so I can see your finished work!