Introduction

The Real Estate Website Builder plugin can be used with any WordPress theme. That’s because all the real estate functionality built into the plugin, can also be inserted into anything via shortcodes. Using shortcodes is the perfect way to create a completely custom real estate website using themes available on various WordPress theme galleries or creating a custom website without having to jump into the complicated world of php, hooks and callbacks!

Here’s a quick guide on how to get started. For a more comprehensive guide, please checkout the shortcode outline article. It should also be mentioned that

  1. Installing & Configuring WordPress
  2. Activating a theme.
  3. Real-estate-ify your theme: Search Forms
Here’s a quick video walking you through the entire process:

Installing & Configuring WordPress

In order to use the Real Estate Website Builder plugin, you’ll need to have an internet accessible WordPress instance. If you don’t have a copy of WordPress installed and set up on your server, please feel free to create a free account here https://placester.com/user/register/website.

Activating a Theme

Next, login to your WordPress instance and activate  the desired theme, for example 2010. For more information on how to activate themes check out this guide.

Real-estate-ify your theme: Search Forms

Once you have your desired theme activated we’ll need to embed some real estate functionality into the site. To do this, you’ll need to embed shortcodes, create pages and update your menus. This guide isn’t going to walk you through all the steps to fully sit up you site.

To start, let’s create some search forms and get them on the home page and the listing pages. To do this, we’ll navigate to the widget section of the Placester plugin (see image below) and then click “Create New”.

Once you’ve clicked create new enter a title for the widget. Choose a title that will help you remember where the widget is located. In this example, name the widget “Home Page Search Form”. Select “Search Form” from the select type dropdown (see image below).

Enter a size of 600 width by 400 height. Next, set the “Form Address” text field as “listings”. The form address is where the form redirects the searcher to if the “search now” button is clicked and there isn’t a list of listings shortcode on the page.  This allows you to redirect the user to your search page from anywhere on your site.

For example, let’s say your site is example.com and you entered “homes-for-sale” in the form address box. When users clicked the search now button, they would be redirected to the page located at http://example.com/homes-for-sale (where you’ve created a page with a list of listings shortcode embedded).

Your settings should look like this:

search form shortcode settings

search form shortcode settings

Finally, copy and paste the “Shortcode” text so that we can paste it into our home page. The shortcode text is highlighted below:

Next, we need to embed this shortcode into our home page. This is a three step process. First we need to create a page. You can read about how to create pages here. Once the page is created you’ll need to make the page your “front page”. To do this, navigate to the settings tab and then the “reading” subtab. See the image below.

setting front page

setting front page

Next, set the page you created as the home page of your sit by selecting it from the dropdown under the static page settings shown below.

Great! Now we just need to insert the shortcode into the home page we’ve just created. To do this, navigate to the page (via the Pages > All Pages link) and then click the edit button that appears when hovering over the page you just set as your home page. It should look something like this:

After you click the edit button, you’ll be in the page editor. Take the copied shortcode (shown above) and paste it into the page content section. You should have soemthing that looks like this:

Next update the page, and then click the “view page” link in order to see what it looks like to a potential client. This is what it looked like using twnetyten:

Ok – now we need to create a “listings” page so that when you click the “search now” button you are taken to a page with listings. To do this create a page called “listings” (Note: it could be called whatever you want, but it just needs to match the form address you entered when creating your search form).

Now that you’ve create a “Listings” page. We’ll need to embed a “Search Listings” shortcode into the page. Navigate back over to the Placester > Widget page and click create new widget. Give your new widget a name like Search Listings, and then select type “Search Listings” as shown here:

Once you’ve clicked search listings, click the publish button and then copy and paste the shortcode generated into the content section of your listings page. You should have something that looks like this:

Now your search listings page should look something like this:

search listings page

search listings page

Awesome, we’re displaying real estate listings! But we’ll probably want to allow the user to search through them. No worries. We’ll just drop a search form shortcode on the listings page just like we did for the home page. Once we create the shortcode, and copy and paste it into the listings page, we should have something that looks like this:

Notice how when you filter the beds search element, the list below updates? You now have the beginnings of a real estate website.