Agent Focused Pro Theme Setup

Thank you for purchasing the Agent Focused theme!

This page will help you set up your website to look like the Agent Focused Pro theme demo. If you have any questions, please contact support.

It will be helpful if you have the demo theme open in another window while you walk through the steps below.
There is also a tutorial to use IDX Broker to set up Agent Focused to look like the demo.

If you need help with the setup to make Agent Focused Pro look like the demo, you can send a support ticket.

So let’s get started!


First Steps

Please have the following ready or already installed.

About Theme Images

Due to image licensing, the images in the demo theme cannot be included in the demo import content for you to use. Gray placeholder images are included.

Image sizes should be at least 1600px X 1000px for the large background image on the home page.
Images for Posts, Listings, and Communities should be at least 1350px wide. The images are cropped to other sizes depending on where they are used.

Back to Top


Install Agent Focused Pro Theme

Login to your WordPress website. You will first need to install the Genesis Framework, if you haven’t already installed it, and then install the Agent Focused theme. You will need to activate Agent Focused Pro when you are finished installing.

  1. In the WordPress menu, click on Appearance > Themes.
  2. At the top, click on Add New button.
  3. At the top, click the Upload Theme button.
  4. Click the Choose File button and find the file for Agent Focused theme on your computer; it will have an ending of “.zip”.
  5. Click the Install Now button.
  6. This time you want to click the text link Activate.

Back to Top


Install Plugins

In the WordPress dashboard, go to Plugins > Add New; search for, install, and activate:

You may also want to install and activate:

  • Regenerate Thumbnails. If you already have a WordPress site, this plugin will help resize your images. You can remove it once your images are resized.
  • Crop Thumbnails. This plugin will help you choose the part of the featured image you want to use for the different image sizes.
  • Widget Importer & Exporter. This will help you to import the widget demo content, if you choose. You can remove it once the demo widget content is imported.

Back to Top


How to Import Demo Content
or
A Four Step Theme Setup

Importing the demo content will help to quickly make your website look like the demo theme, especially if you’re starting with a new install.
You may import the Demo Widget Content on a previous install. You’ll just have to make some adjustments.

Step 1. Create AgentPress Listings Taxonomy, if desired

  • Important: If you want to use the AgentPress Listings Plugin, and you want to import the demo taxonomy – How Much (Max)?, How Much (Min)?, What type of home?, Where? – you will want to create the custom taxonomies before importing the demo content.
  • If you are already using the AgentPress Listings Plugin, and you want to keep the taxonomy you have, you may skip this step.
  • If you will not be using the AgentPress Listings Plugin, you may skip this step.

Step 2. Import the Demo Theme Content, if desired

Importing the demo content is not needed, if you have an existing website.
Here are the steps to install the demo content:

  1. Find the Agent Focused Pro file that you downloaded – agent-focused-pro.zip.
  2. Right click on it, and unzip or open it.
  3. Once it’s open, find the file by navigating to the folder /agent-focused-pro/xml/agent-focused-sample.xml
  4. Login to WordPress.
  5. In your WordPress dashboard, click on Tools > Import
  6. On the next screen, choose WordPress. Then in the popup window, choose Install Now.
  7. Choose Activate Plugin & Run Importer. The WordPress Importer will be installed.
  8. Upload this file the file, agent-focused-sample.xml, using the form provided on that page.
  9. You can map the authors in this export file to existing users, or leave as is. Then check Download and import file attachments.
  10. WordPress will import each of the posts, comments, and categories into your blog.
  11. Widgets are not imported.

Step 3. Import the Demo Widget Content

You can import the demo widgets even if you have an existing website. To import the demo widget content:

  1. Install and activate Widget Importer & Exporter.
  2. In your WordPress dashboard, choose Tools > Widget Importer & Exporter.
  3. For the file, navigate on your computer and choose /agent-focused-pro/xml/agent-focused-sample-widgets.wie
  4. Click Import Widgets.
  5. You may need to rearrange some of the widgets to match the theme demo.

Step 4. Finish Up

  1. Assign the menus to the correct locations.
  2. Rearrange the widgets, if needed. You may need to delete some you no longer need.
  3. Add your contact form to Footer 2, if needed.

Back to Top


Genesis Theme Settings

In the WordPress dashboard, go to Genesis > Theme Settings.
When you’re finished, click the Save Settings button.

Default Layout

Choose the Content Sidebar image.
genesis-layout

Content Archives

content-archives

  • Display – Entry Content
  • Limit content to – 300 characters
  • Featured Image
    • Check – Include the Featured Image?
    • Image Size – af-featured-community (900 x 450)
    • Image Alignment – None
  • Entry Pagination – Numeric

Blog Page Template

blog-page-template

  • Display Category – All Categories
  • Exclude Categories – Leave blank
  • Posts per Page – 5

When you’re finished, click the Save Settings button.

Back to Top


Customize Your Theme

The Theme Customizer allows you to change the design of your theme without using any code.

Site Identity

In WordPress dashboard, go to on Appearance > Customize > Site Identity
Here you can edit the Site Title, Tagline, and Site Icon (Favicon) of your website.

When you’re finished, click the Save & Publish button up at the top of the customizer.

site-identity

Back to Top

Colors

The color customizer makes it easy to change colors without using code. You can change:

  • Background Color – Change the background color; this will show on pages and posts, but not the front page.
  • Accent Color – Change color for links and buttons, and front page testimonial background.
  • Secondary Color – Change color for header, search bars, featured listings, and footer-widgets.
  • Footer Color – Change the footer color.

Click Select Color next to the color you want to change.
When you’re finished, click the Save & Publish button up at the top of the customizer.

color-customizer

Back to Top

If you prefer to use a logo rather than the text-based Site Title, you can use your logo.

Images that are 600px X 160px will give the best results.
This image is twice the size needed, so that it will appear crisp on a retina screen; it displays at 300px X 80px. You will be able to crop other sizes when you choose it.

  • In the WordPress dashboard, go to Appearance > Customize > Header Image
  • Click Add New Image, and choose the image you want to use, either from the media library or upload from your computer.
  • When you’re finished, click the Save & Publish button up at the top of the customizer.

header image logo

Back to Top


Customize Your Navigation Menus

In your WordPress dashboard, click on Appearance > Menus.
The Agent Focused theme has two menu locations.
The menu in the site header is used for site navigation. The menu in the footer is used for the Communities.

create nav menu

Create a New Menu

You will want to create a new menu, if you don’t already have a menu.
In your WordPress dashboard, click on Appearance > Menus.

  1. Choose the Edit Menus tab.
  2. Click the link create a new menu; the demo has a menu named Header Menu; you can name yours whatever you like.
  3. Under Pages (on the left), check the pages you want to add. If you don’t see all your pages, use the View All tab.
  4. Click the Add to Menu button.
  5. Hover over the menu item until it becomes a crosshairs, and then drag your menu items into the position you want.
  6. You can repeat this to add Posts, Communities, Categories, or Community Types.
  7. Click the Save Menu button when you’re finished.
  8. Repeat these steps for the second menu; the demo’s menu is named Communities.

Assign Menu to Location

Next, you can assign your menu to a location.
assign menu location

  1. Choose the Manage Locations tab.
  2. For Header Navigation Menu, assign the menu you created for the header.
  3. For Footer Navigation Menu, assign the menu you created for the footer.
  4. Click the Save Changes button.

Back to Top


How to Set Up the Front Page

The front page has 8 widget areas – Front Page 1, Search Bar, Front Page 2 Left, Front Page 2 Right, Front Page 3, Front Page 4, Front Page 5, and Front Page 6.

You can edit each widget area from Appearance > Customize > Widgets, or also Appearance > Widgets.

If you don’t want to use a particular widget area, don’t add any widgets, and it won’t show on your front page.
Of course, all widget areas can be customized with your choice of widgets, although some styles may need adjusting.

front page widget areas

Front Page Image

You can personalize your website by uploading a large background image for the top of the front page.
Note that you will also need to have at least one widget added to Front Page 1 widget area.

Since a different part of the image may show for different screen resolutions, it’s best to choose an image that will look great no matter what the screen size.

Go to Appearance > Customize > Front Page Image to select your new image.
The demo image is 1600px X 1000px.

Click Change Image to choose from the Media Library or to upload from your computer.

front-page-image

Back to Top

Front Page Flexible Widget Areas

Front Page 1, Front Page 4, and Front Page 6 are flexible widget areas. The layout is based on the number of widgets you add to these areas.

flexible widget areas layout

Back to Top

Front Page 1 Widget Area

Front Page 1 widget area on the demo has two widgets – Text and Genesis – User Profile.

front-page-1-widget-area

Add background image to Front Page 1.
This is also a flexible widget area, so you can add more widgets, if you like.

Text Widget

front page 1 text widget

  1. Title: Leave blank
  2. Content: Text below or add your own.
  3. Click the Save button.

You can copy this to your text widget to edit.

<h2>You're in Great Company</h2>
Genesis – User Profile

The Genesis User Profile widget is used to display a user’s gravatar image.
You can get your gravatar account at http://gravatar.com and upload your image there first.

genesis user profile

  1. Title: Leave blank.
  2. Select your user.
  3. Gravatar Size: Agent Profile Image (236px)
  4. Gravatar Alignment: Left
  5. Choose Custom Text – add code below.
  6. Choose None for the extended “About Me” page.
  7. Click the Save button.

You can copy this to your text widget to edit.

<span class="agent"><a class="larger" href="#">Jennifer Dawson</a>
<em>Agent</em></span>

Use your name in place of “Jennifer Dawson”.
Add the url for your About Me page in place of #.

Back to Top

front-page-search-bar

The demo search bar widget area uses the AgentPress – Listing plugin Search widget. This area can also use a search widget from your IDX service, but may require additional styling to look like the demo.

You will also need to add some property listings, and check off some of the taxonomy terms, so that the search widget will show.

agentpress listing search

  1. Check off the the taxonomy that you want to appear in your search bar.
  2. Button text: Demo has Sign Up.
  3. Click the Save button.

Back to Top

Front Page 2 Left Widget Area

The demo uses a Text widget in this area.

front-page-2-left

Settings are:
front-page-2-left

  1. Title: Leave blank
  2. Content: Text below or add your own.
  3. Click the Save button.

You can copy this to your text widget to edit.
The green color is added with:

<span class="add-color">ABOUT JENNIFER:</span> I am enthusiastic. I am passionate. I am tech-savvy. I am friendly. I am responsive. I am committed to excellence. I am ready to impress you with my service, encourage you with my trustworthiness, and thrill you with my commitment to urgency.

Back to Top

Front Page 2 Right Widget Area

front-page-2-right

The demo uses a Text widget in this area.

front page 2 right text

This widget uses icons from Ionicons. You may choose other icons if you wish.

  1. Title: Contact Jennifer
  2. Content: Text below to edit.
  3. Click the Save button.

You can copy this to your text widget to edit.

<ul class="contact">
<li><i class="icon ion-location"></i>1180 Seven Seas Dr.<br />Barrington, IL 60110 </li>
<li><i class="icon ion-iphone"></i><a href="tel:800-123-4567">800-123-4567</a></li>
<li><i class="icon ion-email"></i><a href="mailto:jenn@agentfocused.com">jenn@agentfocused.com</a></li>
</ul>

You will want to change the address, phone numbers, and email addresses to your own.

Back to Top

Front Page 3 Widget Area

Front page 3 widget area has the AgentPress – Featured Listings widget.

front page 3 featured listings

Settings are:

agentpress featured listings

  1. Title: Featured Listings
  2. How many results are returned? 3

Back to Top

Front Page 4 Widget Area

Front page 4 widget area has a Text widget.

This is also a flexible widget area, so you can add more widgets, if you like.

front-page-4

Settings are:

front-page-6-text

  1. Title: Our Communities
  2. Content: Text below to edit.
  3. Click the Save button.

You can copy and paste this into your widget, and edit as you choose. The demo uses column classes and special style on the link.

<div class="one-half first">
Explore a wide variety of communities, personalize your finishes, and design the perfect home for you.
</div><div class="one-half">
<a class="viewall" href="/community/">» View All <span class="screen-reader-text">of the Communities</span></a>
</div>

Back to Top

Front Page 5 Widget Area

Front page 5 widget area has a Featured Communities widget. Other featured content widgets may also be used.

front page 5 featured communities

Settings are:

front page featured communities widget

  1. Title: Leave blank.
  2. Number of posts to show: 3
  3. Number of Posts to Offset, Order By, Sort Order: Choose your settings.
  4. Show Featured Image: Check
  5. Image Size: large-feautred-image (1350×540 )
  6. Show Post Title: Check
  7. Content Type: Show Content Limit
  8. Limit Content to: 300
  9. More Text: Leave; set by theme
  10. Click the Save button.

Back to Top

Front Page 6 Widget Area

Front page 6 widget area has a Text widget with a testimonial.

This is also a flexible widget area, so you can add more widgets, if you like.

front-page-6

Settings are:

front page 6 text testimonial

  1. Title: Leave blank.
  2. Content: Text below to edit.
  3. Click the Save button.
<div class="three-fourths first">
<img class="alignleft testimonial" src="http://demo.winningagent.com/agent-focused/wp-content/uploads/sites/7/2016/02/testimonial-image.png">"Working with Agent Focused was the best decision I ever made. They took into account all my requirements. They were super helpful, detailed-oriented, and great to work with. I can highly recommend Agent Focused for a wonderful home-buying experience. ”
<br /><cite>– Stacey Hodges</cite>
</div><div class="one-fourth">
<a class="alignright button" href="#">Read More</a>
</div>

The demo uses column classes and button style on the link.

Back to Top


There are two footer widget areas in the Agent Focuses theme.

Footer 1 widget area uses two widgets – Genesis – User Profile and Simple Social Icons.
footer-1

Genesis – User Profile

The settings on the widget here are identical to that in the Front Page 1 section.
Set up Genesis – User Profile widget.

Simple Social Icons

Settings:
footer 1 simple social icons

  • Title: Connect with Me on:
  • Open links in new window? Checked
  • Icon Size: 50px
  • Icon Border Radius: 0px
  • Border Width: 0px
  • Alignment: align Left
  • Icon Font Color: #666666
  • Icon Font Hover Color: #ffffff
  • Background Color: #ffffff
  • Background Hover Color: #666666
  • Border Color: #ffffff
  • Border Hover Color: #666666
  • Add the urls of your social media accounts below the settings.
    add-social-meda-urls
  • Click the Save button.

Back to Top

Footer 2 widget area has a contact form. The form on the demo is created with Gravity Forms, a premium plugin. You may use your choice of contact form plugins.

This form is also used on the Contact page.

footer-2

Settings are:
gravity forms contact form

  • Title: Contact Jennifer (Use your name.)
  • Select a Form: Choose Contact Form (or another form you created)
  • Click the Save button.

Back to Top


How to Set Up Primary Sidebar

primary sidebar widgets

Demo has:

Back to Top


How to Set Up Other Widget Areas

There are additional widget areas for you to use.

Demo has Text widget used for disclaimer or privacy policy; add your own text.

After Entry

This widget area is below all posts. Demo uses a Genesis – Featured Posts widget.

after-entry-more-posts

  1. Title: More Posts
  2. Number of posts to show: 4
  3. Show Featured Image: Check
  4. Image Size: thumbnail (150×150)
  5. Image Alignment: None
  6. Show Post Title: Check
  7. Content Type: No Content Limit
  8. More Text: Leave; set by theme
  9. Click the Save button.

Author Archive Page and Author Box

author-archive-page

Author Archive

The Author Archive content is added on the User Profile page.
Go to Users > Your Profile and scroll to the Author Archive Settings.
The included profile image is a gravatar. You can get your gravatar account at http://gravatar.com.

Then fill out:

  • Custom Archive Headline
  • Custom Description Text
  • Author Box: Check Enable Author Box on this User’s Archives?
  • Author Box: Also check Enable Author Box on this User’s Posts? (if you want an author box below each blog post)
  • Click Update User button at bottom.

If you want to add a link to the navigation menu for your Author Archive (especially nice for blogs with more than one author), heres’s how.

  • Click on Appearance > Menu
  • You want to add Custom Links.
  • URL: Your author url is: http://yourdomain.com/author/username
  • Link Text: Your name
Author Box

The Author Box can show below every blog post.

  • Go to Users > Your Profile and scroll to the Author Archive Settings.
  • In the Author Archive Settings, next to Author Box:
    Author Box: Also check Enable Author Box on this User’s Posts?
  • Next scroll down to the About the User section.
  • Fill out the Biographical Info section.
  • The Profile Picture will appear, if you have a gravatar.

Back to Top


How to Add Communities

Communities can be added to your website just like any WordPress Post or Page.
In the WordPress dashboard, click on Communities > Add New. Then add a title, content in the editor, and a featured image. You may also choose a Community Type (like a Category), if you have created some.

Community Types Taxonomy

You can add Community Types taxonomy too.
In the WordPress dashboard, click on Communities > Community Type.

add community type

  • Add a communities type name.
  • You can leave the slug and the description blank, if you like.
  • Click on the Add New Community Type button at the bottom.
  • Next, click on the taxonomy, you just created.

add archive description

Now you can fill in the Community Type Archive Settings section, and add an Archive Headline and Archive Intro Text. Those will appear on the taxonomy archive pages.

community type description

Featured Communities Widget

There is a also a widget to add the Communities to any widget area; the demo adds the widget to Front Page 5 Widget Area“>Front Page 5. You can add this widget to the After Entry area too.

Back to Top


How to Add a Blog Page

You can add a blog page to your website.

In the WordPress dashboard, click on Pages > Add New.

  1. Give the page a title; the demo uses “Blog”.
  2. Find the Page Attributes section.
  3. In the Template drop down, select Blog.
  4. Save the page.

Note that content you place on this page will not appear on the Blog posts page; only the title will.
blog page template

Back to Top


How to Set Up the AgentPress Listings Plugin

The AgentPress Listings plugin should be installed and activated, if you will use the AgentPress Listing Search or the AgentPress – Featured Listings widgets to look like the demo. This area can also use a search widget from your IDX service, but may require additional styling to look like the demo.

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:

Back to Top

How to Create the Custom Taxonomies

If you already have the AgentPress Listings taxonomy set up from your previous theme, you can continue to use it. Or you can choose to add the taxonomy that the demo uses.

When you first install AgentPress Listings, there is only one taxonomy called Features. To be like the demo, you will need to add:

  • How Much (Max)? (max)
  • How Much (Min)? (min)
  • What Type of Home? (type)
  • Where? (where)

agentpress listings taxonomy

Here’s how:
agentpress listing taxonomies

  1. In the WordPress dashboard, click on Listings.
  2. Then click on Register Taxonomies.
  3. Next you will be at the Listing Taxonomies screen below.
  4. Add the ID, Singular Name, and Plural Name for each taxonomy, as in the image below.
  5. Click the Add New Taxonomy button for each one.

Once you have the taxonomies added, like the demo, you can import the demo content.

Back to Top

How to Create the Custom Terms

For each of the taxonomies that you created, you can add some terms; you can choose your own, if you prefer.

The Add New screen will look like this:
listing where taxonomy and terms

Click on Listings > Where? button. The demo shows a mix of zip codes and cities; use your own.
– 60067
– Arlington Heights
– Barrington
– Inverness

Click on Listings > How Much (Max)?
Add each of these terms to the Name field and click the Add New How Much (Max)? button.
We used the following, but you will need to choose terms to match your real estate market.
– 100k-250k
– 250k-500k
– 500k-750k
– 750k-up
– Over-750k
– Under-250k

Click on Listings > How Much (Min)?
Add these terms to the Name field and click the Add New How Much (Min)? button
– 100k-250k
– 250k-500k
– 500k-750k
– Over-750k
– Under-250k

Click on Listings > What Type of Home (Type)?
Add your terms to the Name field and click the Add New Where? button. We used a mix of zip cods
– Apartment
– Single Family Home

Click on Listings > Features
Add these terms to the Name field and click the Add New Features button. These are the features in the demo, but you can add more.
– All Hard Wood Floors
– Full Finished Basement
– Fully Updated
– Granite Counter Tops
– Patio

Back to Top

How to Add a Property Listing

In WordPress dashboard, click Listings > Add New.
Below the editor, is the Property Details section.

agentpress listings property details

You can add Custom Text, Price, Address, City, State, Zip, MLS#, Square Feet, Bedrooms, Basement. When you are finished adding the information, place the cursor in the editor where you want the info to appear, and then click the Send to text editor button. A shortcode will be added to the editor. [property_details]

You can also add a Map Embed Code or a Video Embed Code the same way. Shortcodes [property_map] and [property_video] will be added to the editor. The demo doesn’t use a video.

The demo also shows a WordPress gallery.

This is how the editor for the demo looks. The demo has headings (Heading 4) added before each shortcode.

property listing in WordPress editor

Add a featured image that is at least 1350px wide. If you installed the Crop Thumbnails plugin, you can use it to select what will show in the Front Page 3 Featured Listings, and also the featured image above the single listing.
featured image

The Taxonomy you created will be available for you to select the terms that apply to a particular property.
property listing taxonomy

Back to Top


How to Add a Button

Any link can be changed into a button by adding a CSS class.

  1. First add a link to some text.
  2. Next, switch to the Text tab in the editor.
  3. Add this to the link – class=”button” – see gist below.
  4. Switch back to the Visual tab in the editor.
  5. Save.

If your link looks like the top line,
then add – class=”button” so it looks like the second line.

<a href="http://www.winningagent.com/">Button Text</a>
<a class="button" href="http://www.winningagent.com/">Button Text</a>

And you will see:
Button Text

Back to Top