Add Multiple Property Listing Views

By default when you install Property Hive, the property search results will be available in a single layout. You can turn this layout into a list or a grid depending on your website design.

Sometimes however, there is the requirement to display properties in multiple layouts, such as a list AND a grid. This is possible using Property Hive in two ways, depending on whether or not you’re currently using our Map Search Add On.

The instructions for both are included below, however what we are ultimately trying to achieve is a new parameter in the query string such as ‘view=grid’, ‘view=map’ etc.

I am NOT using the map search add on

If you’re not using the map search add on we need to use the existing template hooks to add the list of views where we want them. If you’re not familiar with how to use hooks we recommend you read how to use hooks before continuing.

Once you’re comfortable with how hooks work, we can use them to insert our views at a particular location on the page like so:

add_action( 'propertyhive_before_search_results_loop', 'propertyhive_result_views', 25);
if ( ! function_exists( 'propertyhive_result_views' ) ) 
{
    function propertyhive_result_views()
    {
        // Remove 'view' parameter from existing query string
        $new_query_string = '';  
        parse_str($_SERVER['QUERY_STRING'], $output);
        if (isset($output['view']))
        {
            $output['view'] = '';
            unset($output['view']);
        }
        $new_query_string = http_build_query($output);
 
        echo '<div class="propertyhive-views">
            <ul>
                <li class="list'; if (!isset($_GET['view']) || (isset($_GET['view']) && $_GET['view'] == '')) {echo ' active';} echo '"><a href="?' . $new_query_string . '">View In List</a></li>
                <li class="grid'; if ($_GET['view'] == 'grid') {echo ' active';} echo '"><a href="?' . $new_query_string . '&view=grid">View In Grid</a></li>
            </ul>
        </div>';
    }
}

Once the above has been added you should have to links: ‘View In List’ and ‘View In Grid’. Of course the hook, priority and wording can all be amended in the above. This is simply an example.

I AM using the map search add on

The Map Search add on by default introduces it’s own ‘views’ hook where it will display ‘View In List’ and ‘View On Map’ links by default once installed. As a result, we can hook into this using a filter and adding something like so to our themes functions.php file:

add_filter( 'propertyhive_results_views', 'add_additional_view', 1 );
function add_additional_view( $views )
{
    $views['grid'] = array(
        'content' => __( 'View In Grid', 'propertyhive' )
    );
 
    return $views;
}

After adding the above, you should have three options; ‘View In List’, ‘View In Grid’ and ‘View On Map’

I've done the above. Now what?

Now we have the views we want being listed you should be able to click them and see ‘view=X’ being appended to the query string. If that’s the case, great.

The next step is to amend the layouts to match the view. There are a few ways to do this, however our preferred option is to add a class to the loop-start.php template containing the view.

For example, the default loop-start.php looks like so:

<ul class="properties clear">

We would normally change this to be something like so:

<ul class="properties clear view-<?php
if ( isset($_GET['view']) && $_GET['view'] != '' )
{
    echo $_GET['view'];
}
else
{
    echo 'list';
}
?>">

Now we have a class on the unordered list element surrounding our properties and, using CSS, we can now amend the layout accordingly.