Winning Agent Pro Theme Setup

Thanks for purchasing the Winning Agent Pro Theme! Ready to get started with setup? This tutorial will walk you through setting up the theme to look like the Winning Agent Pro theme demo.

Also refer to YouTube video for home page setup

You might find it helpful to have the demo open in another window while you're working through the setup. The setup documentation for this theme has been broken down into the following sections:

Pre-Installation Setup

Compatibility

Make sure you have the following installed:

  • WordPress version 3.6+
  • Genesis Framework version 2.0+

Plugins

Before you begin, you will need to install and activate the following plugins. Of course, you can substitute your favorite plugin, but we're using these in the the Winning Agent Pro theme demo:

Back to Top

Theme Installation

Once you have completed the pre-installation steps, the Genesis Framework is installed, and you've downloaded the theme zip file to your local machine, you are ready to install the Winning Agent Pro theme.

Via the WordPress Dashboard

  1. Go to Appearance > Themes > Add New.
  2. Use the Upload button and then the Browse button to locate the theme zip file on your local machine.
  3. Click Install Now and activate the theme.

Via an FTP Client

  1. Unzip the theme zip file. You'll see the theme folder labeled 'Winning Agent Pro'
  2. Upload the theme folder via FTP to your wp-content/themes/ directory.
  3. Go to your WordPress admin dashboard and select Appearance.
  4. Activate the Winning Agent Pro theme.

Back to Top

How to Configure the Genesis Theme Settings

In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:

Color Style

From the “Color Style” dropdown, select your desired color for the theme.

wap-color-styleDefault Layout

The Winning Agent Pro theme supports three layout options: Content/Sidebar, Sidebar/Content, and Full Width Content.

  • Click a thumbnail to select the Default Layout.
  • The Winning Agent Pro demo uses the Content/Sidebar layout.

Default Layout

Content Archives

  1. For Content Archives, the default setting of “Display post content” is used by the demo.
  2. Set the “Limit content to __ characters” option to 400 to look like the demo.
  3. Check the “Include the Featured Image?” checkbox and select the “thumbnail” for the “Image Size”.
  4. Leave “Numeric” selected for the “Post Navigation Technique.”

content-archives

Don’t forget to click the “Save Settings” button!

Back to Top

How to Set the Background Image

The Winning Agent Pro theme uses a backstretch background, meaning your image will scale to fit the entire screen. An image with a 3:1 width:height ratio will look best, for instance an 1800w by 600h image.

To set the background image on your site, go to Appearance > Background. Browse your computer for the desired image and click Upload.

wap-custom-background

You don't need to configure any other settings - Just click Save!

Back to Top

How to Configure the Site Title Header Text

The site title and description for your site can be set by navigating to Settings > General.

  1. The Site Title will display in the upper left corner of your site.
  2. The Tagline Setting does not display in the theme, but may show in your browser tab, depending on your site SEO settings.
  3. Be sure to click the “Save Settings” button to preserve your changes.

wap-general-settings

To add the additional style to custom title, like the demo, check out this tutorial.

Back to Top

How to Use a Custom Header Image

If you prefer a Logo Image rather than a text based Site Title, you can use a small logo style image that displays in the upper left corner of the site.

  1. Navigate to Appearance > Header menu in your WordPress admin panel.
  2. Click “Browse” and Navigate to the image you would like to use for a Logo. Images of exactly 300 × 80 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.
  3. Click “Upload” to copy the image from your computer to your website.
  4. Be sure to click the “Save Settings” button to preserve your changes.

wap-custom-header

Back to Top

The Winning Agent Pro theme supports the Primary menu location provided with the Genesis Framework, however the demo does not utilize this menu.

To create your custom menu, go to Appearance > Menu. Once you have saved your custom menu, click on the “Manage Locations” tab and select your custom menu from the Primary Menu dropdown and save. Your menu will show beneath the header.

wap-primary-menu

Back to Top

Header Right Widget Area

The Winning Agent Pro theme demo is configured to display a custom menu and Simple Social Icons in the Header Right widget area.
To create your custom menu, go to Appearance > Menu. Once you have saved your custom menu, go to Appearance > Widgets tab and place the Custom Menu widget in the Header Right widget area . Your menu will show to the right of the Site Title.
wap-header-right-menu
The demo uses the Simple Social Icons plugin to display social icons in the Header Right widget area. Drag an instance of the Simple Social Icons widget into the Header Right widget area and configure the settings.
wap-header-right-social
The Winning Agent Pro demo uses the following hex color values in the Simple Social Icons widget settings:

Gold/Black

  • Icon Font Color: #6c6353
  • Icon Font Hover Color: #ffffff
  • Background Color: #ffffff
  • Background Hover Color: #d9a861

Red/Gray

  • Icon Font Color: #555555
  • Icon Font Hover Color: #ffffff
  • Background Color: #ffffff
  • Background Hover Color: #f04848

Blue/Green

  • Icon Font Color: #3d4d6d
  • Icon Font Hover Color: #ffffff
  • Background Color: #ffffff
  • Background Hover Color: #339933

White/Orange

  • Icon Font Color: #ffffff
  • Icon Font Hover Color: #ffffff
  • Background Color: #555555
  • Background Hover Color: #EF9339

Back to Top

This widget area appears on all pages on the site (home page included). The demo uses the AgentPress Listings widget.

To configure your site like the demo, first you must create some listings using the AgentPress Listings plugin. If you're not familiar with AgentPress Listings, take a moment to review these setup steps from StudioPress before continuing:

You will also need to create custom taxonomies with the plugin, such as Price, Location, Bedrooms, Status (i.e. For Sale, Sold), etc. Each taxonomy you create corresponds to an available search drop-down in the AgentPress - Listing Search widget.

agentpress-listings-plugin

Once you've created the taxonomies and your listings, go to Appearance > Widgets and drag the AgentPress - Listing Search widget to the Search Bar widget area. Select the searchable taxonomies and save the widget.

wap-search-bar

Note: You can include other content or an IDX search widget in this space, but custom styling may be required.

Click here for a video tutorial of how to set up the search bar.

Back to Top

How to Configure the Home Page

Home Welcome Widget Area

This widget area appears over the background image on the home page. The demo uses a Text widget with just a widget title, no additional text.
  1. Go to Appearance > Widgets
  2. Drag a text widget into the Home Welcome widget area
  3. Input a title
  4. Save
wap-home-welcome

Home Featured 1 - 3 Widget Areas

Each of the Home Featured widget areas are designed to show a Genesis Featured Page (or Post) with a featured image and a title. To configure the widget like the demo, follow these steps:
  1. Go to Appearance > Widgets
  2. Drag an instance of the Genesis Featured Page widget into the Home Featured 1 widget area
  3. Input a title
  4. Select the page to link to
  5. Check the box that says "Show Featured Image" and choose the "feature-small" size from the drop-down menu
  6. Save and repeat for Home Featured 2 and Home Featured 3
wap-home-featured
Note: In order for each of these areas to link to a featured page, the featured page must have a featured image or an image within the page content.

Home Listings Widget Area

This widget area is designed to feature property listings created by the AgentPress Listings plugin. After you have created some listings, use the following steps to set up this area on your home page:

  1. Go to Appearance > Widgets
  2. Drag an instance of the AgentPress - Featured Listings widget into the Home Listings widget area
  3. Input a title
  4. Input "3" in the "How many results should returned?" field
  5. Save

wap-home-listings

Home Communities Widget Area

This widget area takes advantage of the Communities custom post type that comes with Winning Agent Pro. To set this area up like the demo, follow these steps:

  1. Go to Appearance > Widgets
  2. Drag an instance of the Featured Communities widget into the Home Communities widget area.
  3. Input a title
  4. For "Number of Posts to Show", enter "4".
  5. Use the sorting/ordering fields to modify the communities returned by the widget as you wish
  6. Check the "Show Featured Image" checkbox and select the "feature-community" size from the drop down.
  7. Check the "Show Post Title" box
  8. Set the "Content Type" to "No Content"
  9. Save
wap-home-communities

The following widgets are used in the Primary Sidebar area that displays to the right side of the content area.

  • Genesis Featured Page widget (see see Home Featured 1 - 3 Widget Areas to copy setup)
  • Genesis eNews Extended Widget (requires plugin)

For additional configuration instructions for Genesis eNews Extended, go here.

wap-primary-sidebar

Back to Top

The Winning Agent Pro theme demo uses the included 2 Footer Widget areas. The following outlines the widgets used in the demo, though you may use any widgets you like in these areas.

wap-footer-widgets

Footer 1 Widget Area:

The first footer widget area is approximately 2/3 the width of the footer. The Winning Agent Pro demo uses a text widget with some HTML markup, like this:

wap-footer-1

You can use the following HTML markup to achieve the same styling as the demo:

<blockquote>Insert your quote here</blockquote>

<cite>Insert your reference here</cite>

Footer 2 Widget Area:

The second footer widget area is approximately 1/3 the width of the footer. The Winning Agent Pro demo uses the Genesis - User Profile widget that comes with the Genesis Framework.

wap-footer-2

Back to Top

How to Configure the Bottom Navigation

In the demo, there's a horizontal list of Communities across the bottom of the page. This section is a custom menu assigned to the Secondary Navigation area of the theme.

To create a new menu for this area, follow these steps:

  1. From your WordPress dashboard, go to Appearance > Menus
  2. Create a new menu
  3. Add links to your menu from the available selections (note: If you don't see a section, such as Communities, check the Screen Options tab in the upper right corner of your screen)
  4. Save your menu
  5. Click the Manage Locations tab located near the top of the page
  6. Assign your menu to the Secondary Navigation Menu area.

Back to Top

How to Create a Blog Page

When using a widgetized home page it's helpful to create a general blog style page to display elsewhere on your site. Use the following the following steps to create a Blog Page:

  1. Navigate to Pages > Add New in your WordPress Admin Panel
  2. Create a New Page named “Blog”
  3. In the right sidebar of the Page edit screen select the Blog option in the template dropdown menu.
  4. Leave the Content of this page blank, it will not be displayed when using the Blog page template.
  5. Publish the page.

Once the page has been published you can view the page to see a blog style list of recent posts. Link to this page in the custom menu of your choice.

wap-blog-page

Back to Top

How to Use Button Styles

The Winning Agent Pro theme has a built-in “button” style that you can apply to regular links to give the appearance of a button.

To apply the button style, you’ll want to use TEXT editor mode instead of the VISUAL editor. Add class="button" to any link, like this:

<a href="http://www.winningagent.com" class="button">Visit My Site!</a>

Your button will automatically inherit the color of your selected theme color.

wap-button

Give yourself a pat on the back, ’cause you are DONE! Now it’s time to start adding your content or customizing the Winning Agent Pro theme however you desire. Have fun!