Blog - Latest News

We built a Classipress based classified site for a niche in our local country and one of the things we needed to have were various ‘badges’ that helped end-users of the site identify what type of account the listing was created by.

For example, was the account personal or commercial? As a consumer may have different rights depending on what type of entity they were purchasing products from, it was important to be able to set this information.

We did have a few requirements for this project:

  1. Only the admin can set the account type (all accounts are ‘personal’ by default due to our common userbase)
  2. We needed an easy selector in the user’s profile (in the admin dashboard)
  3. The ‘badge’ needed to show on the ad listing page
  4. The ‘badge’ needed to show on the users ‘author’ page

We had a bespoke design on our site with a completely custom child theme, so in this tutorial, we’re going to look at how you can create something similar on your own ClassiPress (version 4.x) website.

classipress user badge example

Here’s an example of what you’ll be creating.

With this tutorial we are going to be adding some custom code to your functions.php file, we’ll also be editing 2 other files that make up the user information area in the ad listing sidebar widget and the author page itself. As such we strongly recommend using a Child Theme to make these changes so that when you update ClassiPress in the future, your changes aren’t overwritten. Click here to view AppTheme’s official documentation on creating a child theme.

The 3 files we’ll be editing:

  1. functions.php // this is where we put the ‘main’ part of our code
  2. author.php // this is where we show the badge on the user profile page
  3. parts/widget-listing-author.php // this is where we show the badge on the ad listing

1. Editing the functions.php file

The first file we’re going to edit is our functions.php file and this is where we add the main part of our code.

This is the code that allows us to set the account type for the user (if we’re an admin user). If the user has the ability to view their profile in the dashboard it will simply show them the account type image (not allowing them to change it).

You’ll want to put this code directly at the bottom of your functions.php file (don’t forget to update the URL placeholders to your 2 different images for your badges).

function user_acc_field( $user ) {
  
    $userACC = get_user_meta( $user->ID, 'user_acc', true ); 
        if(empty($userACC)){
            $userACC = get_user_meta( $user->ID, 'user_ACC', true ); 
    }
?>
       
<table class="form-table">
    <tr>
    <th>
        <label for="address"> Account Type:</label>
    </th>
        <td>
            <?php if(is_admin()): ?>    
                <select name="user_ACC" id="user_ACC">
                    <option value="personal" <?php if($userACC == "personal") echo "selected"; ?> > Personal Account </option>
                    <option value="commercial" <?php if($userACC == "commercial") echo "selected"; ?> > Commercial Account </option>
                </select>
            <?php else: ?>
                
<?php 
    $img = "https://yoursite.com/url-to-your-personal-account-image.png"; // ADD YOUR IMG URL HERE
        if($userACC == 'commercial'):
        $img = "https://yoursite.com/url-to-your-commercial-account-image.png"; // ADD YOUR IMG URL HERE
        endif;
?>

<img style="display:inline-block;" src="<?php echo $img; ?>" />
            
<?php endif; ?>
            
        </td>
     </tr>
</table>

<?php }

function customUserACC( $user_id ) {
    
    if ( !is_admin( 'edit_user', $user_id ) )
        return FALSE;
    update_usermeta( $user_id, 'user_ACC', $_POST['user_ACC'] );
}

add_action( 'show_user_profile', 'user_acc_field' );
add_action( 'edit_user_profile', 'user_acc_field' );

add_action( 'personal_options_update', 'customUserACC' );
add_action( 'edit_user_profile_update', 'customUserACC' );

2. Editing the author.php file

As you should be working with a child theme, you’ll have copied the author.php file from your /classipress/ folder and will be editing the copy.

We’re looking at lines 33-38 which will look like the below:

<div class="post-user post-user-profile">

    <?php echo get_avatar( $author->ID, 300 ); ?>
    <h1 class="h4 user-display-name"><?php echo esc_attr( $display ); ?></h1>
</div>

Before the closing </div> tag, we’re going to want to add the following code:

<?php

    $userACC = get_the_author_meta( 'user_acc', get_query_var('author') ); 
        if(empty($userACC)){
            $userACC = get_the_author_meta( 'user_ACC', get_query_var('author') ); 
        }
    $img = "https://yoursite.com/url-to-your-personal-account-image.png"; // ADD YOUR IMG URL HERE
        if($userACC == 'commercial'):
        $img = "https://yoursite.com/url-to-your-commercial-account-image.png"; // ADD YOUR IMG URL HERE
    endif;

?><img style="display:inline-block;" src="<?php echo $img; ?>" />

So the final code for your author.php file will look like this:

<div class="post-user post-user-profile">

    <?php echo get_avatar( $author->ID, 300 ); ?>
    <h1 class="h4 user-display-name"><?php echo esc_attr( $display ); ?></h1>
<?php

    $userACC = get_the_author_meta( 'user_acc', get_query_var('author') ); 
        if(empty($userACC)){
            $userACC = get_the_author_meta( 'user_ACC', get_query_var('author') ); 
        }
    $img = "https://yoursite.com/url-to-your-personal-account-image.png"; // ADD YOUR IMG URL HERE
        if($userACC == 'commercial'):
        $img = "https://yoursite.com/url-to-your-commercial-account-image.png"; // ADD YOUR IMG URL HERE
    endif;

?><img style="display:inline-block;" src="<?php echo $img; ?>" />
</div>

Don’t forget to update the URL placeholders to your 2 different images for your badges again here.

3. Editing the widget-listing-author.php file

Like the author.php file, you should be editing a child theme so your main Classipress theme is not affected. In your child theme folder, you’ll want to create a new folder /parts/ and then copy the widget-listing-author.php file into this file and then edit it.

We’re going to want to add the following code to line 51 (it’s a blank line). So you know exactly where you’ll want to place the code, it’s the line after this code:

<p><a data-open="contactOwnerModal" class="button hollow expanded" id="contact-owner-link"><?php _e( 'Contact Owner', APP_TD ); ?></a></p>

The code we’ll be adding to this page is the same as the code we just added to author.php:

<?php

    $userACC = get_the_author_meta( 'user_acc', get_query_var('author') ); 
        if(empty($userACC)){
            $userACC = get_the_author_meta( 'user_ACC', get_query_var('author') ); 
        }
    $img = "https://yoursite.com/url-to-your-personal-account-image.png"; // ADD YOUR IMG URL HERE
        if($userACC == 'commercial'):
        $img = "https://yoursite.com/url-to-your-commercial-account-image.png"; // ADD YOUR IMG URL HERE
    endif;

?><img style="display:inline-block;" src="<?php echo $img; ?>" />

Don’t forget to update the URL placeholders to your 2 different images for your badges again here.

Wrapping up

That’s all it takes! The only real editing you need to do is set the URL to the 2 images you want to use for your badges.

Our most recommended services…

Recommended for all our domains names…

Recommended all our webhosting…

Our chosen WordPress theme…

For conversion focused selling…

Generate leads from your visitors…

About Us

TheWPGuru was created to help businesses and entrepreneurs convert more of their visitors into customers using high-quality tools and services.

We provide tips and training around these services and WordPress plugins we use and create ourselves.

Custom Dev

Looking for specific functionality on your website? We can help you achieve your goals.

For custom development, our rates are USD$59/hour (minimum 2 hours).

Please note, at this moment in time we are not taking on any further development work. 

© Copyright - TheWPGuru 2019+ All rights reserved.