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