Premium

Real Estate Ajax Filter with Search and Dropdown Fields for WordPress

I kept thinking about my previous ajax filter projects and I was messing around with this over the weekend. If You are developing a WordPress website for a real estate company, this article might be useful. You can filter apartments and houses by 3 criteria: location, type and status.

I created an ajax filter component for a fictional real estate company. If You are a kind of developer like me, who like to avoid the plugin bloat, just implement it directly in your WordPress theme.

This is a developer level, so please buy membership only if you have a basic understand with WordPress template hierarchy, PHP, JavaScript, and Sass. Never experiment on a live website! I recommend to use LocalWP by Flywheel, that makes your work a lot easier.

Step #1 – The file structure should be look like this

Create the following empty files and folders in your theme:

your-theme/components/ajax/inc/ajax-callback.php
your-theme/components/ajax/inc/ajax-filter.php
your-theme/components/ajax/inc/post-types.php
your-theme/components/ajax/js/script.js
your-theme/components/ajax/real-estate.php
your-theme/front-page.php
your-theme/template-parts/content-filter.php
your-theme/template-parts/content-apartments.php

Step #2 – Define some constants in functions.php

This code will activate the ajax component.

functions.php

Step #3 – Enqueue Scripts

Create this file in the ajax folder:

real-estate.php

Step #4 – Create a Custom Post Type for Apartments

We are going to create two taxonomies for this post type

Type: Apartment / House
Status: For Sale / For Rent

post-types.php

Step #5 – Create the Custom Fields for Apartments Post Type

In this case I’m going to use the Advanced Custom Field plugin. Create these fields on your own, or You can download it as an importable template.

Step #6 – We have got the Apartment post type with the previously created custom fields

Just fill the posts with your own data, or download my content below.

[Read more…]

Ajax Filter with Images and Hover effect for WordPress CPT

View Demo Membership

In this project we are going to create an Ajax filter from WordPress Custom Post Type, that displays images with fancy hover effects. You can filter posts without refreshing the page. I didn’t use either a page builder or a plugin to create this feature.

Step #1 – Create a Custom Post Type for Cities

In this example I’m going to create a Custom Post Type named City, but it could be anything You want. Please care about the taxonomy’s slug in this case “city_cat“. You need to change it to Your custom slug.

Add this snippet to functions.php

your-child-theme/functions.php

Step #2 – Create some Taxonomies for City Custom Post Type

Step #3 – Add some posts in City

You can download the XML file from the demo to import.

Step #4 – Enqueue scripts in functions.php

Step #5 – Build the filter

Create a file named filter.php

your-child-theme/ajax/filter.php

Find and replace the taxonomy and post type:

#6  'taxonomy' => 'YOUR_TAXONOMY' 
#28 'post_type' => 'YOUR_POST_TYPE',

[Read more…]

Isotope Gallery from WordPress Featured Images

View Demo Youtube Video

In this project I created a WordPress gallery from Custom Post Type’s featured images using Isotope filter combined with lightGallery.

With Isotope You can filter items like portfolio, gallery images or any kind of HTML elements.

lightGallery displays images in Lightbox in a very fancy way with captions and paginations. During WordPress development, I strive to use as few plugins as possible. So I implemented these features directly in my child theme. I prefer Genesis Framework, but it can be used in any WordPress Theme.

Step #1 – Create a Custom Post Type

Create a Custom Post Type called Gallery and upload some images from Pixabay.

Step #2 – Upload Images

You can upload your own images, but if You want to use that pictures that I used, click here to download the demo file.

Every post has a featured image we’re going to sort them by category and display the title dynamically in the gallery.

Step #3 – Build the filter

To Loop through the categories and echo out as buttons create a file named templates/filter.php and paste the following code in it:

[Read more…]

Dropdown Ajax Filter for WordPress Categories in Genesis

View Demo Youtube Video

In this tutorial I’m going to show You how to create a dropdown filter with AJAX for WordPress Categories.

Step #1 – Filter posts by category

Create a file named dropdown-filter.php

/your-child-theme/ajax-dropdown/dropdown-filter.php

If You want to filter by default WordPress Posts by Categories, the following lines must be look like this

#3  'taxonomy' => 'category'
#20 'post_type' => 'post',

Step #2 – Create a shortcode and place it wherever You want

Just copy this code in the functions.php

[Read more…]

Dropdown Ajax Filter for WordPress Custom Post Type Taxonomy

View Demo Youtube Video

In this tutorial I’m going to show You how to create a dropdown filter with AJAX for WordPress Categories.

Step #1 – Filter by taxonomy terms

Create a file named dropdown-filter.php

/your-child-theme/ajax-dropdown/dropdown-filter.php

Position of your WordPress Custom Post Type's Taxonomy

Search and replace “YOUR_TAXONOMY” and “YOUR_POST_TYPE” in following the code!

#3  'taxonomy' => 'YOUR_TAXONOMY' 
#20 'post_type' => 'YOUR_POST_TYPE',

Step #2 – Create a shortcode and place it wherever You want

Just copy this code in the functions.php

[Read more…]

Isotope Filter with Multiple Dropdown for WordPress Categories

View Demo Youtube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with multiple dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

Please don’t experiment on a live website, but if You do make sure that You have access to FTP
I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 – Create the Custom Post Type named Jobs

Add this to functions.php

Create Taxonomy for Stack of the Job

Add this to functions.php

Create Taxonomy for City of the Job

Add this to functions.php

Step #2 – Add some dummy content

Let’ go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

[Read more…]

Isotope Filter with Single Dropdown for WordPress Categories

View Demo Youtube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with single dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

Please don’t experiment on a live website, but if You do make sure that You have access to FTP
I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 – Create the Custom Post Type named Jobs

Add this to functions.php

Create Taxonomy for Stack of the Job

Add this to functions.php

Step #2 – Add some dummy content

Let’ go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

[Read more…]

Isotope Filter in Genesis with Buttons for WordPress Categories

View Demo Youtube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with buttons. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

Please don’t experiment on a live website, but if You do make sure that You have access to FTP
I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 – Create the Custom Post Type named Jobs

Add this to functions.php

Create Taxonomy for Stack of the Job

Add this to functions.php

Create Taxonomy for City of the Job

Add this to functions.php

Step #2 – Add some dummy content

Let’ go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

[Read more…]

Isotope Filter with Search Field for WordPress Categories

View Demo Youtube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories using Search Filed and live reload without refresh the browser. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

Please don’t experiment on a live website, but if You do make sure that You have access to FTP
I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 – Create the Custom Post Type named Jobs

Add this to functions.php

Create Taxonomy for Stack of the Job

Add this to functions.php

Create Taxonomy for City of the Job

Add this to functions.php

Step #2 – Add some dummy content

Let’ go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

[Read more…]

Multiple Dropdown Ajax Filter for WordPress Taxonomies

View Demo Youtube Video

In this tutorial I’m going to show You how to create multiple dropdown filter with AJAX for WordPress Taxonomies. AJAX allows to update parts of the website, without reloading the whole page. Web pages going to be updated asynchronously by exchanging data with a web server behind the scenes.

Step #1 – Filter by taxonomy terms

Create a folder named ajax in your child theme.
Create a file named dropdown-filter.php in the ajax folder.

Step #2 – Create a shortcode and place it wherever You want

Just copy this code in the functions.php

[Read more…]

AJAX Filter for WordPress Custom Post Type Taxonomy with Buttons

View Demo

Step #1 – Create a Custom Post Type for FAQ

In this example I’m going to create a Custom Post Type named FAQ, but it could be anything You want. Please care about the taxonomy’s slug in this case “faq_cat“. You need to change it to Your custom slug.

Copy this code in functions.php

Step #2 – Create some taxonomies for FAQ Custom Post Type

Step #3 – Create some posts in FAQ

You can download the XML file from the demo to import.

Step #4 – Enqueue scripts in functions.php

Step #5 – Build the filter

Create a file named filter.php

your-child-theme/ajax/filter.php

Find and replace the taxonomy and post type:

#6  'taxonomy' => 'YOUR_TAXONOMY' 
#27 'post_type' => 'YOUR_POST_TYPE',

[Read more…]

AJAX Filter for WordPress Categories with Buttons in Genesis

View Demo

Step #1 – Enqueue scripts in functions.php

[Read more…]

[Storefront] Disable Sidebar for specific Pages and add Full Width Layout

I this tutorial I’m going to show You how to create a checkbox with Advanced Custom Fields. You can disable sidebar and add full width layout with one single click.

#1 Create a Field Group named “Layout” with Advanced Custom Fields

[Read more…]

[Upsell] How to create a modal when clicking the “Add to cart” button in WooCommerce

Would You like to create an upsell popup for WooCoomerce, when the customer clicks to the “Add to cart” button? You don’t need to buy any kind of plugins to do it. In this post I’m going to show you how to code the functionality to boost your sales in WooCommerce.

You can place and style any kind of upsell content in this popup:

[Read more…]

Display post and custom post types categories in one loop

<?php
wp_reset_postdata();
  
    $args = array(
        'post_type' => array(
            'post',
            'unicorn'),
            'tax_query' => array(
                'relation' => 'OR',
                    array(
                        'taxonomy' => 'category',
                        'field' => 'slug',
                        'terms' => array( 'test' )
                    ),
                    array(
                        'taxonomy' => 'unicorn_category',
                        'field' => 'slug',
                        'terms' => array( 'blur' )
                    )
        ),
    );
     
 
  
$the_query = new WP_Query( $args ); ?>
  
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
 
    <h2><?php the_title(); ?></h2>
  
<?php endwhile; endif; ?>
  
<?php wp_reset_postdata(); ?>

Split Menu Around the Logo in Genesis Sample

1) Install and activate WP Nav Plus plugin

WP Nav Plus has been designed to fill gaps in the WordPress menu system which make it difficult to accomplish many popular website design patterns.

2) Add this snippet to functions.php

//Remove original genesis header
remove_action('genesis_header','genesis_do_header');

//Crate Left / Right menu widget areas
genesis_register_sidebar( array(
	'id'          => 'header-left-menu',
	'name'        => __( 'Header Left Nav Menu', 'wpflames' ),
) );

genesis_register_sidebar( array(
	'id'          => 'header-right-menu',
	'name'        => __( 'Header Right Nav Menu', 'wpflames' ),
) );

//Create the function that split the navigation around centered logo
function wpflames_header_widgets() {

if ( is_active_sidebar( 'header-left-menu' ) || is_active_sidebar( 'header-right-menu' ) ) { 
    
    echo '<div class="row">';
	
	genesis_widget_area( 'header-left-menu', array(
		'before' => '<div class="col-lg-5 header-nav-menu header-left-menu">',
		'after'  => '</div>',
	) );
    echo '
      <div class="col-lg-2 logo">
          <img src="YOUR_IMAGE_SOURCE" alt="">
      </div>';
       
	genesis_widget_area( 'header-right-menu', array(
		'before' => '<div class="col-lg-5 header-nav-menu header-right-menu">',
		'after'  => '</div>',
	) ); 
    
    echo '</div>';
	}
}
add_action( 'genesis_header', 'wpflames_header_widgets' );


function remove_hamburger_menu_from_desktop(){
    if(!wp_is_mobile()){
        remove_action( 'genesis_header', 'genesis_do_nav', 12 );
    }
}
add_action('init', 'remove_hamburger_menu_from_desktop');

3) CSS

/*ONLY MOBILE*/
@media (max-width: 768px) {  
        .header-left-menu,
        .header-right-menu {
        display: none;
    }  
}


@media (min-width: 768px) {  
        #menu-left-menu, #menu-right-menu {
        display: flex;
        justify-content: space-evenly;
    }
}

How to align Storefront navigation beside the logo

1) Add this snippet to functions.php

// =========================================================================
//CHANGE DEFAULT STOREFRONT HEADER LAYOUT 
// =========================================================================
function remove_storefront_actions() {
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50);
    remove_action( 'storefront_header', 'storefront_secondary_navigation', 30);
    remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}
add_action( 'init', 'remove_storefront_actions' );
 
add_action( 'storefront_header', 'storefront_header_cart', 40 );
add_action( 'storefront_header', 'storefront_primary_navigation', 30);

2) CSS

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
.woocommerce-active .site-header .site-branding {
	width: 20% !important;
}
   
    .woocommerce-active .site-header .site-header-cart {
	width: 15%;
}
.site-header .col-full {
	padding: 0 !important;
	max-width: 100% !important;
	margin: auto;
	display: flex;
}
    
}/*END*/

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .site-header .col-full {
	max-width: 90% !important;
}
    
}/*END*/

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.site-header .col-full {
	max-width: 90% !important;
}
    .woocommerce-active .site-header .main-navigation {
	width: 70% !important;
}
}/*END*/
    
    /* XXL Large devices*/
@media (min-width: 1400px) { 
.site-header .col-full {
	max-width: 80% !important;
    }
    .woocommerce-active .site-header .main-navigation {
	width: 60% !important;
}
}/*END*/

Swiper Plugin for WordPress

Download

How to add SVG logo to Genesis

1) Create an image sprite – images/sprite-map.svg

2) Add this snippet to functions.php

// =========================================================================
// CUSTOM SVG LOGO
// =========================================================================
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );

function add_sprite_map(){
    include('images/sprite-map.svg');
}
add_action('genesis_before', 'add_sprite_map');


function add_svg_logo_to_header(){
    if(is_front_page()){
         echo '
         <div id="site-logo">
            <h1>
                <a href="'.home_url().'">
                    <svg class="svg-logo">
                        <use xlink:href="#YOUR_SVG_ID" />
                    </svg>
                </a>
            </h1>
        </div>';
    }
    else{
         echo '
         <div id="site-logo">
            <h4>
                <a href="'.home_url().'">
                    <svg class="svg-logo">
                        <use xlink:href="#YOUR_SVG_ID" />
                    </svg>
                </a>
            </h4>
        </div>';
    }
   
}
add_action('genesis_site_title', 'add_svg_logo_to_header');