Add Icons To The AgentPress Featured Listings Widget For Beds, Baths & Property Size

This file contains the code which enables you to fully customize the AgentPress Pro featured listings widget and add custom fields with icons like this :

The file includes code which enables you to :

• Add custom taxonomy terms to each entry displayed using the AgentPress Pro Featured Listings widget.
• Display multiple taxonomy terms inline including parent, child and child of child terms.
• Link terms to each term archive page.
• Add icon images or dashicons/font awesome icons before or after each property details field
• Custom archive and taxonomy term templates which also display listings exactly the same as the featured listings widget.
• Modify the entire output of the default featured listings widget

Demo Video

Shows the AgentPress Featured Listings widget modified to show icons before property details. Also includes taxonomy terms displayed inline and linked to term archives.

Tested using the AgentPress Pro child theme by StudioPress in the Home Top widget area however will work in any Genesis child theme.

Installation Steps

There’s 4 steps :

1. # Upload the file named listings-mods.php to your child theme folder like this :

 


2. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 


3. # You can then add this line of PHP code to the end of your child themes functions.php file.

 


require CHILD_DIR . '/listings-mods.php';

Step 4 – Optional

You may also need to swap out the taxonomy name/slug in the code with your own if you choose to use different taxonomies to whats used in this demo. Here’s the taxonomy id’s used in 3 files :

You can find the taxonomy id on lines 43,44,49,67,79 & 98 in listings-mods.php and lines 42,43,50,68,80 & 91 in archive-listings.php and taxonomy.php if also using these templates.

Download Folder

Icons

The file is coded to use icon images which are also included in the images folder located inside the download folder. You will need to upload these to your child themes images folder or replace them with your own using the same file name and extension.

You could also replace the icon images with dashicons or any other type of icon or SVG simply by changing the value for the content property for each property detail.

From this :

content: url('images/land.png');

To this :

content: "\f106";

Taxonomy Terms Setup

The templates are coded to work with 3 taxonomy terms named Bedrooms, Bathrooms and Locations. Here’s how they need to be setup with the names for Bedrooms and Bathrooms edited, after creation, so they only display the number like you see in the following images :

Hierarchical Terms Order

Related Content

• Order Taxonomy Terms By Hierarchy With Separator 4 Ways