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  se=ng  up  the  theme  to  look  like  the  Winning  Agent  

Pro  theme  demo.  

!You  might  find  it  helpful  to  have  the  demo  open  in  another  window  while  you’re  working  

through  the  setup.  The  setup  documentaCon  for  this  theme  has  been  broken  down  into  

the  following  secCons:  

Pre-Installation Setup!!Compa&bility  

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  acCvate  the  following  plugins.  Of  course,  

you  can  subsCtute  your  favorite  plugin,  but  we’re  using  these  in  the  the  Winning  Agent  

Pro  theme  demo:  

!•    AgentPress  LisCngs    

•    Genesis  eNews  Extended  

•    Simple  Social  Icons  

•    Gravity  Forms  (premium)  –  you  can  subsCtute  your  own  preferred  contact  form  plugin  

!!

Page � of �1 21

Theme Installation!!Once  you  have  completed  the  pre-­‐installaCon  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  bu`on  and  then  the  Browse  bu`on  to  locate  the  theme  zip  file  on  

your  local  machine.  

3. Click  Install  Now  and  acCvate  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. AcCvate  the  Winning  Agent  Pro  theme.  

!

How to Configure the Genesis Theme Settings!!In  your  WordPress  admin,  navigate  to  Genesis  >  Theme  Se=ngs.  Configure  the  Theme  

Se=ngs  as  follows:  

!Color  Style  

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

�  Page � of �2 21

Default  Layout  

The  Winning  Agent  Pro  theme  supports  three  layout  opCons:  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  

1. For  Content  Archives,  the  default  se=ng  of  “Display  post  content”  is  used  by  the  

demo.  

2. Set  the  “Limit  content  to  __  characters”  opCon  to  400  to  look  like  the  demo.  

3. Check  the  “Include  the  Featured  Image?”  checkbox  and  select  the  “thumbnail”  for  

the  “Image  Size”.  

4. Using  the  drop  down  box,  select  “Numeric”  for  the  “Post  NavigaCon  Technique.”  

Page � of �3 21

�  

Don’t  forget  to  click  the  “Save  Se=ngs”  bu`on!  

!

How to Set the Background Image!!The  Winning  Agent  Pro  theme  uses  a  backstretch  background,  meaning  your  image  will  

scale  to  fit  the  enCre  screen.  An  image  with  a  3:1  width:height  raCo  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.  

Page � of �4 21

�  

You  don’t  need  to  configure  any  other  se=ngs  –  Just  click  Save!  

!

How to Configure the Site Title Header Text!!The  site  Ctle  and  descripCon  for  your  site  can  be  set  by  navigaCng  to  Se=ngs  >  General.  

!1. The  Site  Title  will  display  in  the  upper  lel  corner  of  your  site.  

2. The  Tagline  Se=ng  does  not  display  in  the  theme,  but  may  show  in  your  browser  

tab,  depending  on  your  site  SEO  se=ngs.  

3. Be  sure  to  click  the  “Save  Se=ngs”  bu`on  to  preserve  your  changes.  

Page � of �5 21

�  

To  add  the  addiConal  style  to  custom  Ctle,  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  lel  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  Se=ngs”  bu`on  to  preserve  your  changes.  

Page � of �6 21

�  

!How to Configure the Navigation Menu!!The  Winning  Agent  Pro  theme  supports  the  Primary  menu  locaCon  provided  with  the  

Genesis  Framework,  however  the  demo  does  not  uClize  this  menu.  

!To  create  your  custom  menu,  go  to  Appearance  >  Menu.  Once  you  have  saved  your  

custom  menu,  click  on  the  “Manage  LocaCons”  tab  and  select  your  custom  menu  from  

the  Primary  Menu  dropdown  and  save.  Your  menu  will  show  beneath  the  header.  

Page � of �7 21

�  

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.  

!

�  

Page � of �8 21

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  se=ngs.  

!

�  

The  Winning  Agent  Pro  demo  uses  the  following  hex  color  values  in  the  Simple  Social  

Icons  widget  se=ngs:  

Page � of �9 21

!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  

!

!!

Page � of �10 21

How to Configure the Search Bar!!This  widget  area  appears  on  all  pages  on  the  site  (home  page  included).  The  demo  uses  

the  AgentPress  LisCngs  widget.  

!To  configure  your  site  like  the  demo,  first  you  must  create  some  lisCngs  using  the  

AgentPress  LisCngs  plugin.  

You  will  also  need  to  create  custom  taxonomies  with  the  plugin,  such  as  Price,  LocaCon,  

Bedrooms,  Status  (i.e.  For  Sale,  Sold),  etc.  Each  taxonomy  you  create  corresponds  to  an  

available  search  drop-­‐down  in  the  AgentPress  LisCngs  widget.  

!

�  

Once  you’ve  created  the  taxonomies  and  your  lisCngs,  go  to  Appearance  >  Widgets  and  

drag  the  AgentPress  LisCngs  widget  to  the  Search  Bar  widget  area.  Select  the  searchable  

taxonomies  and  save  the  widget.  

Page � of �11 21

�  

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  

This  widget  area  appears  over  the  background  image  on  the  home  page.  The  demo  uses  a  

Text  widget  with  just  a  widget  Ctle,  no  addiConal  text.  

!1.   Go  to  Appearance  >  Widgets  

Page � of �12 21

2.   Drag  a  text  widget  into  the  Home  Welcome  widget  area  

3.   Input  a  Ctle  

4.   Save  

!

�  

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  Ctle.  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  Ctle  

4. Select  the  page  to  link  to  

Page � of �13 21

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  

!

�  

!Note:  In  order  for  each  of  these  areas  to  link  to  a  featured  page,  the  featured  page  must  have  a  featured  image.  !!!

Page � of �14 21

Home  Lis&ngs  Widget  Area  

This  widget  area  is  designed  to  feature  property  lisCngs  created  by  the  AgentPress  LisCngs  

plugin.  Aler  you  have  created  some  lisCngs,  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  LisCngs  widget  into  the  Home  LisCngs  widget  

area  

3. Input  a  Ctle  

4. Input  “3″  in  the  “How  many  results  should  returned?”  field  

5. Save  

!

�  

Home  Communi&es  Widget  Area  

This  widget  area  takes  advantage  of  the  CommuniCes  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  

Page � of �15 21

2. Drag  an  instance  of  the  Featured  CommuniCes  widget  into  the  Home  

CommuniCes  widget  area.  

3. Input  a  Ctle  

4. For  “Number  of  Posts  to  Show”,  enter  “4″.  5. Use  the  sorCng/ordering  fields  to  modify  the  communiCes  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  

�  Page � of �16 21

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)  

!For  addiConal  configuraCon  instrucCons  for  Genesis  eNews  Extended,  go  here.  

!

�  

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.  

!

Page � of �17 21

�  

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:  

Page � of �18 21

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  CommuniCes  across  the  bo`om  of  the  page.  This  

secCon  is  a  custom  menu  assigned  to  the  Secondary  NavigaCon  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  selecCons  (note:  If  you  don’t  see  a  

secCon,  such  as  CommuniCes,  check  the  Screen  OpCons  tab  in  the  upper  right  

corner  of  your  screen)  

4. Save  your  menu  

5. Click  the  Manage  LocaCons  tab  located  near  the  top  of  the  page  

6. Assign  your  menu  to  the  Secondary  NavigaCon  Menu  area.  

!

How to Create a Blog Page!!When  using  a  widgeCzed  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:  

!Page � of �19 21

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  opCon  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.  

!

�  

How to Use Button Styles!!The  Winning  Agent  Pro  theme  has  a  built-­‐in  “bu`on”  style  that  you  can  apply  to  regular  

links  to  give  the  appearance  of  a  bu`on.  

!To  apply  the  bu`on  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">Visit My Site!</a>

Page � of �20 21

!Your  bu`on  will  automaCcally  inherit  the  color  of  your  selected  theme  color.  

!

�  

Give  yourself  a  pat  on  the  back,  ’cause  you  are  DONE!  Now  it’s  Cme  to  start  adding  your  

content  or  customizing  the  Winning  Agent  Pro  theme  however  you  desire.  Have  fun!

Page � of �21 21