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
- Pre-Installation Setup
- Theme Installation
- How to Configure the Genesis Theme Settings
- How to Set the Background Image
- How to Configure the Site Title Header Text
- How to Use a Custom Header Image
- How to Configure the Navigation Menus
- How to Configure the Header Right Widget Area
- How to Configure the Search Bar
- How to Configure the Home Page
- How to Configure the Primary Sidebar Area
- How to Configure the Footer Widget Areas
- How to Configure the Bottom Navigation
- How to Create a Blog Page
- How to Use Button Styles
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:
- AgentPress Listings
- Genesis eNews Extended
- Simple Social Icons. Note that if you use IDX Broker and the icons do not appear on IDX Broker page, please use IDX Broker Simple Social Icons instead.
- Gravity Forms (premium) - you can substitute your own preferred contact form plugin
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
- Go to Appearance > Themes > Add New.
- Use the Upload button and then the Browse button to locate the theme zip file on your local machine.
- Click Install Now and activate the theme.
Via an FTP Client
- Unzip the theme zip file. You'll see the theme folder labeled 'Winning Agent Pro'
- Upload the theme folder via FTP to your wp-content/themes/ directory.
- Go to your WordPress admin dashboard and select Appearance.
- Activate the Winning Agent Pro theme.
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.
Default 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.
Content Archives
- For Content Archives, the default setting of “Display post content” is used by the demo.
- Set the “Limit content to __ characters” option to 400 to look like the demo.
- Check the “Include the Featured Image?” checkbox and select the “thumbnail” for the “Image Size”.
- Leave “Numeric” selected for the “Post Navigation Technique.”
Don’t forget to click the “Save Settings” button!
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.
You don't need to configure any other settings - Just click Save!
How to Configure the Site Title Header Text
The site title and description for your site can be set by navigating to Settings > General.
- The Site Title will display in the upper left corner of your site.
- The Tagline Setting does not display in the theme, but may show in your browser tab, depending on your site SEO settings.
- Be sure to click the “Save Settings” button to preserve your changes.
To add the additional style to custom title, like the demo, check out this tutorial.
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.
- Navigate to Appearance > Header menu in your WordPress admin panel.
- 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.
- Click “Upload” to copy the image from your computer to your website.
- Be sure to click the “Save Settings” button to preserve your changes.
How to Configure the Navigation Menu
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.
Header Right Widget Area
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
How to Configure the Search Bar
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.
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.
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.
How to Configure the Home Page
Home Welcome Widget Area
- Go to Appearance > Widgets
- Drag a text widget into the Home Welcome widget area
- Input a title
- Save
Home Featured 1 - 3 Widget Areas
- Go to Appearance > Widgets
- Drag an instance of the Genesis Featured Page widget into the Home Featured 1 widget area
- Input a title
- Select the page to link to
- Check the box that says "Show Featured Image" and choose the "feature-small" size from the drop-down menu
- Save and repeat for Home Featured 2 and Home Featured 3
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:
- Go to Appearance > Widgets
- Drag an instance of the AgentPress - Featured Listings widget into the Home Listings widget area
- Input a title
- Input "3" in the "How many results should returned?" field
- Save
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:
- Go to Appearance > Widgets
- Drag an instance of the Featured Communities widget into the Home Communities widget area.
- Input a title
- For "Number of Posts to Show", enter "4".
- Use the sorting/ordering fields to modify the communities returned by the widget as you wish
- Check the "Show Featured Image" checkbox and select the "feature-community" size from the drop down.
- Check the "Show Post Title" box
- Set the "Content Type" to "No Content"
- Save
How to Configure the Primary Sidebar Area
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)
How to Configure the Footer Widget Areas
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.
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:
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.
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:
- From your WordPress dashboard, go to Appearance > Menus
- Create a new menu
- 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)
- Save your menu
- Click the Manage Locations tab located near the top of the page
- Assign your menu to the Secondary Navigation Menu area.
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:
- Navigate to Pages > Add New in your WordPress Admin Panel
- Create a New Page named “Blog”
- In the right sidebar of the Page edit screen select the Blog option in the template dropdown menu.
- Leave the Content of this page blank, it will not be displayed when using the Blog page template.
- 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.
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.
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!