Setup the Homepage for the Winning Agent Pro Theme

How to: Setup the Homepage for the Winning Agent Pro Theme

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:

  1. Basic install, setup, and import demo content
  2. How to set up the header
  3. How to set up the homepage
  4. How to set up the footer
  5. (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.Winning Agent Homepage Setup

Site Header

The site header has three basic components in the demo: The site title, some navigation, and social connect icons. Let’s break it down.

Site Title

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:

  1. Get into the CSS and style it yourself (free, but you may pull your hair out)
  2. 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.

Background

The Winning Agent theme uses a javascript called “Backstretch” to get that nice, full-width image in the background. To set it, go to Appearance > Background and upload your image. No other settings required on that page – it doesn’t matter what settings you put in since the Backstretch script makes them irrelevant. All you need is the photo.

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

Winning Agent Homepage Featured

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:

  1. Give it a title
  2. Link it to a page
  3. Check the box to Show the Featured Image
  4. Select the feature-small image size.

Genesis Featured Page options

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.

Home Listings

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.

winning agent home page footer

Home Communities

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.

Footer

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>

<cite>-Nobody</cite>

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.

Secondary Menu

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!

Conductor Plugin

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. Kyle Hines says

    Carrie, this is an excellent tutorial; it puts a lot of things in perspective. The demo version of this theme uses AgentPress Listings; do you, perhaps, have any guidance for someone trying to edit/customize the property details field for the listings pages? This is quite tough, and the only guidance I’ve found is for those using the AgentPress theme.

  2. says

    Hi there! I am interested in this theme however I am not in the real estate business. My business has a different product and the name “listings” and the content attributes associated with this post type would serve to be irrelevant.

    Can this theme be setup with custom post types (other than listings) while retaining the basic functionality (ie search and layouts)? – Perhaps by using the pods plugin?

    • says

      Hey Saul,
      Sure thing. The “listings” CPT actually comes from the AgentPress Listings plugin, so you could just skip the installation there. There’s a “community” CPT and display widget baked into the theme, but no reason you couldn’t add additional ones to suit your needs. You’d probably need to make a handful of edits to some conditional statements in the functions.php file to include your CPTs as well as add some CSS with your CPT name so that it picks up the styles of Listings.

      We’ve had a few folks use the theme for non real-estate sites and it’s fun to see. :)

      Cheers,
      Carrie

Leave a Reply