Display custom field data icons when listing ads

When you setup a Classipress theme, you will probable use your own custom fields that are important for your site. This fields are used then mostly for searching and also displaying data. This plugin will use this data and display it on first page where ad listings appear.

There is also a plugin version of this modification.

On my site I had some custom fields that were important to the user, but users always had to click on an ad to see if specifications met their expectations. And that was only slowing down my site. That’s why I decided to create Custom field data icons mod.

With this mod we will put custom fields with icons to front page, so the users can quickly see main specs when scrolling trough ads.

You can see a working site with this functionality here.

It is recommended to remove count statistics from ad listing, so you will have more room for displaying custom data. This is a post on how to do that.

Please make a backup of your files before doing any changes.

Step 1

Decide which custom fields you will show when listing ads. Go to Classipress -> Custom Fields and write down META names of every field you wish to show (cp_country in this case).

Step 2

Then you should find icons that will suit your page style for every custom field. A good place to start would be Icon Archive

Icons must be 16 x 16px in size.

Name every file with the same name as META name with .png extension.
Example: cp_country.png

Save these images in Classipress’s images folder.

Step 3

Now we need to edit some files for this to work. We’ll start with loop-ad_listing.php.
If you are using Classipress v3.4 then edit this file: content-ad_listing.php

Around line 46 locate this code:

	<!--?php appthemes_after_post_content(); ?-->

And then after that insert this code:

          <!--?php cp_get_loop_ad_details($post--->ID);?&gt;

Then open your Classipress (not child theme) file called ctyle.css and add this code at the end:

div#custom-stats {float:left;}
.custom-stats {clear:both; font-size:11px; padding-right:12px;}
.custom-stats-icon { height:16px; width:16px; padding-right:5px; margin-bottom:-4px;}

Then open your Classipress (not child theme) file from includes folder called functions.php.

Go to the end of file and add this code:

// display some custom fields on the loop ad listing
if ( ! function_exists('cp_get_loop_ad_details') ) {
  function cp_get_loop_ad_details( $post_id, $location = 'list') {
    global $wpdb;
 
    $post = get_post( $post_id );
    if ( ! $post )
      return;
 
    $allowed_fields = "'cp_country', 'cp_size', 'cp_year'"; // replace with your selected fields
    $sql = "SELECT field_label, field_name, field_type FROM $wpdb->cp_ad_fields WHERE field_name IN (".$allowed_fields.")";
 
    $results = $wpdb->get_results( $sql );
 
    if ( ! $results )
      return;
 
    echo '

‘; foreach ( $results as $result ) { $post_meta_val = get_post_meta( $post->ID, $result->field_name, true ); if ( empty( $post_meta_val ) ) continue; $args = array( ‘value’ => $post_meta_val, ‘label’ => $result->field_label, ‘id’ => $result->field_name, ‘class’ => ” ); $args = apply_filters( ‘cp_ad_details_’ . $result->field_name, $args, $result, $post, $location ); if ( $args ) echo ‘‘ . $args[‘value’] . ‘‘; } echo ‘

';
  }
}

Don’t forget to insert your own meta names into variable $allowed_fields. Entering only meta names of variables you would like to see is important due to performance reasons or your loops will take too long.

Here you should enter meta names of variables for all fields you would like to see on your front page. For instance:
If you have a field called Weight and it’s Meta Name is cp_weight, then you enter ‘cp_weight’ into this variable like this:

$allowed_fields = "'cp_weight'";

Separate multiple fields with a comma like this:

$allowed_fields = "'cp_weight', 'cp_height', 'cp_length'";

Check Step 1 to see Meta names of your fields.

Additional info:

If you have removed ad statistics from front page and would like to align custom statistics to right do this:

In style.css change

div#custom-stats {float:left;}

to

div#custom-stats {float:right;}

This is it.

Compatibility

This mod was tested on Classipress 3.2.1, 3.3.X, 3.4.x and 3.5.x.

Version history

04/16/2014 – Initial version
06/04/2014 – Added option to align custom data to right

If you find any issues with this tutorial, please be so kind and write a comment. I’ll try to help as much as I can.