Building a completely custom real estate website is very simple using Placester’s open source WordPress platform. To start, you’ll need to have the “real estate website builder” plugin installed and active. You can download and install the plugin directly from wordpress.org or at github.com.

This guide assumes you are experienced with building themes for WordPress. If you aren’t experienced in building WordPress themes, consider checking out one of the other guides about modifying Placester’s existing open source themes, modifying a theme’s css using the web interface, or using shortcodes to turn any theme into a real estate website.

We will be transforming the existing TwentyTen theme into a basic Real Estate theme. This Quick Start will just focus on the content leaving the styling for you to complete on your own.

InitialTwentyTen

Once you have the real estate website builder plugin is installed, make sure you either add some listings manually or setup your Placester account. Then follow the steps below:

Initialize Blueprint

  1. Create a local copy of Blueprint. There are two ways to do this:
    • If you are familiar with basic Unix commands, make a symbolic link in the theme’s root directory to the Blueprint directory in the Placester plugin. This is the preferred method.
    • If you are not familiar with Unix, navigate to the Placester plugin directory and copy the Blueprint directory into your theme’s root directory.
  2. Add the following PHP code to the TwentyTen functions.php file:
    /* Load the Placester Blueprint Theme Framework. */
    require_once( trailingslashit( TEMPLATEPATH ) . 'blueprint/blueprint.php' );
    new Placester_Blueprint('2.5');
    

    If your theme’s style changed after adding the Placester Blueprint code, also add the following which will remove the CSS that Blueprint defines:

    add_action( 'after_setup_theme', 'pls_setup', 10 );
    function pls_setup() {
      // Remove Blueprint's built in CSS
      remove_theme_support( 'pls-default-css' );
      remove_theme_support( 'pls-default-normalize' );
    }
    

Add Listings To The Site

One of the first things we need to add to our theme are some listings.

  1. Open index.php and modify it as shown:
    get_header(); ?>
    
        <div id="container">
          <div id="content" role="main">
    
          <?php
    
          echo PLS_Partials::get_listings("limit=3");
    
          ?>
          </div><!-- #content -->
        </div><!-- #container -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    

    If you haven’t installed the plugin, you will see a single listing with the address of 123 Fake Street. When you go to the wp-admin page for your site, you will see a button at the top which will guide you to the install for the plugin. Install, activate, and either sign up for an account or enter your existing account information.

    To see just listings that are featured on this front page, change the get_listing code to:

    When the plugin is installed and index.php has been modified, you will see a page like this:

    BasicListings

    Notice that you get a link to property details with this one line of code as well.

    PropertyDetails

    To find out more about customizing the Listings HTML, check out the two articles about this:
    Add Listings To Your Website
    Add Dynamic Listings To Your Website

Add a Slideshow

A slideshow will display images from each of your listings in an attractive and adjustable format.

  1. Immediately above the get_listings code, add the following:
    echo PLS_Slideshow::slideshow(
       array(
        'width' => 610,
        'height' => 320,
        'listings' => 'limit=5'
      )
    );
    

    Now you have a slideshow and a list of property listings. To learn more about the options available for customizing the slideshow, see this article.

    ListingWithSlideShow

Add a Search Page

Create a new file called listings-search.php

  1. Add the following code to the file:
  2. Go to the wp-admin page for your site.
  3. Click the Add New link on the Pages menu.
  4. In the Title field at the top, type Search.
  5. Immediately below Title, Edit the Permalink to be /search
  6. Scroll down to the bottom and change the Template under Page Attributes from Default Template to Listings Search.
  7. Click Publish.Now make a few selections and watch the list of listings change dynamically.

Add a Map

  1. In the listings-search.php file, add the following code between the search and the results:
    <?php echo PLS_Map::dynamic(null, array('width' => 600,'height' => 300)); ?>
    

    You should now see a map of the listings shown.

    WithMap

    To learn more about customizing the map, see this article.

Now you have a basic theme ready. The next step is to style the theme in whatever way you feel is appropriate. There are a lot of things you can do to customize the HTML that gets generated as well. Review the other available articles to learn how.