How to Create a Real Estate Website with WordPress?

In this tutorial I’m going to show you how to make a real estate website with WordPress under 50 minutes. It’s a full weight site with filterable real estate objects, galleries contact forms etc. So, let’s dive in.

Prerequisites

Theme

In order to create a real estate website with WordPress in a way that I’ll show you today you need a Blocksy Pro theme which allows you to outputu taxonomies and custom fields in a archive and single post pages without any hassle. You can grab it it here (SAVE 10% coupon is WPSH10).

Plugins

Other plugins are optional but if you would like to accomplish similar result as I did you need also a Kadence Blocks Pro plugin. This allows you to output dynamic content (custom fields etc) in a Gutenberg Blocks. Grab Kadence Blocks Pro with a 10% discount here (use coupon SIMPLEHACKS).

During the tutorial I’m going to create a Properties custom post type without any fancy plugin and I use Code Snippets plugin to add the snippets to my site. It’s a free plugin that you can grab here.

For a custom fields I will use a Advanced Custom Fields plugin and for creating a filter it is a Filter Everything plugin. Both are free plugins.

And that’s about it. Take a look at the video here below which will walk you through the process. All the code snippets and CSS used in the video you can also find below.

Oh, one mor thing. Take a look at the screenshot below. This is what will be the end result.

How to Create a Real Estate Website with WordPress?

VIDEO: How to Create a Real Estate Website with WordPress?

How to create a Custom post types in WordPress without a plugin?

In order to create a real estate site with WordPress we need to add a custom post type and some custom taxonomies.

Previously I have made this in-depth tutorial on how to create custom post type in WordPress. Also, in this tutorial I’ll show you how to add a custom taxonomies (categories and tags) and connect them with this WordPress custom post type. It is really easy and since we’ll do it without any extra plugin and it will take only couple of minutes.

Online CPT and taxonomies generator I use in bot tutorials is here https://generatewp.com/

Move Blocksy taxonomy labels on top of the featured image

This on here below is for moving taxonomy labels on top of the featured image.

/* Move Blocksy taxonomy labels on top of the featured image */
[data-layout*="grid"] .entry-card>*:not(:last-child).entry-meta {
    margin-bottom: -40px;
    z-index: 1;
}

Change Blocksy taxonomy label background and text color

In the video above I showed how to change the taxonomy terms with the help of CSS but Sergiu from the Blocksy team pointed out that Blocks has a built in option for that. That is, just go and open up you taxonomy and youll see the option to change all the accent colors. See the screenshot below.

Change Blocksy taxonomy label background and text color

Move real estate filter on top of the archive loop

If you’re using a Filter Everything plugin as I do in the video and you want to move the filter on top of the archive loop, then add this code to your Code Snipepts code box.

NB! As I said in the video you need to change the custom post type and taxonomy slugs for the ones you have on your site.

// Create a new widget area called Property filter
add_action( 'widgets_init', 'property_filter_widget_area' );
function property_filter_widget_area() {
	register_sidebar( array(
		'id'            => 'property_filter_sort',
		'name'          => __( 'Property filter', 'themename' ),
		'description'   => __( 'Here goes your filter widget', 'themename' ),
		'before_widget'	=> '<div class="filter-widget">',
		'after_widget'	=> '</div>',
		'before_title'  => '<h4 class="widgettitle">',
		'after_title'   => '</h4>'
	) );
}
// Add this widget area on top of the category and shop pages
add_action( 'blocksy:loop:before','show_filter_widget_area' ); // Hook it after headline and before loop
function show_filter_widget_area() {

// CHANGE CPT AND TAXONOMY SLUGS ACCORDINGLY. For example, listings instead of properties etc.
	if ( (is_post_type_archive('properties') || is_tax('property_location') || is_tax('property_category')) && is_active_sidebar( 'product_filter_sort' ) ) {
	dynamic_sidebar( 'product_filter_sort' ); 
	}
}

And now add this piece of CSS to the Customizer >> Additional CSS. Pay attention thought, that if you have more than 4 filterable object then you may want to change “width: 23% “part accordingly.

@media only screen and (min-width: 667px) {
.wpc-filters-section {
    width: 23%;
	margin-right: 2%;
display: inline-block;
vertical-align: top;
}
}
.wpc-filter-title {
    display: none;
}

Hide reset button on tablets and desktops

In the video I’m showing how to add a reset button. Also, I added a resetbutton calass to the block and I’m using this piece of CSS for hiding it on tablets and mobiles

@media only screen and (max-width:1024px) {
	.resetbutton {
		display: none;
	}
}

How to use a custom post type as front page in WordPress?

In the video I’ll show you how to to use a custom post type as front page in WordPress. If you need a similar solution then add this code tou your Code Snippets code box.

// Use a custom post type as front page in WordPress

add_action("pre_get_posts", "custom_post_type_front_page");
function custom_post_type_front_page($wp_query){
    if(is_admin()) {
        return;
    }
    if($wp_query->get('page_id') == get_option('page_on_front')):
        $wp_query->set('post_type', 'properties');
        $wp_query->set('page_id', ''); //Empty
        $wp_query->is_page = 0;
        $wp_query->is_singular = 0;
        $wp_query->is_post_type_archive = 1;
        $wp_query->is_archive = 1;
    endif;
}

And that’s about it. Take a look at the video above and follow the tips and you will make an awesome real estate site with WordPress.

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72