Widget to show user progress in WordPress

If you run a membership site one way to encourage users to finish their profile is with a little bit of gamification. Here I’ll show how to make a widget to show user progress in WordPress.

At laernogetnyt.dk we wanted to give logged in users some advice on how to improve their profiles without having them searching around for stuff to do.

Also it adds a bit of gamification, to use a big word, and hopefully users would like to hit that 100%.

Progress parameters

Before we delve into any code let’s decide what we wan to track. At Lær noget nyt we track the following:

• profile text
• profile image
• profile cover image
• Creation of first post
• Creation of an additional post

Most fields are not standard WordPress user fields, Advanced custom fields to the rescue. You can of course code them yourself or use any other framework, ACF is just my weapon of choice.

The next step is to give each parameter a value. The profile text acounts to 30%, profile image 10% and so on. Just make sure it all adds up to a 100%.

The Widget code

Ok, lets get to it. First of all we need the WordPress widget class:

/*
 * IVP social links widget
 * Takes the link entered in the IVP settings panel
 *
 */
class lnn_user_progress_widget extends WP_Widget {

	function __construct() {
		parent::__construct(
		// Base ID of your widget
		'lnn_user_progress', 

		// Widget name will appear in UI
		'User Progress', 

		// Widget description
		array( 'description' => 'Not mush to say yet', ) 
		);
	}

	// Creating widget front-end
	// This is where the action happens
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );
		// before and after widget arguments are defined by themes
		echo $args['before_widget'];
		if ( ! empty( $title ) )
		echo $args['before_title'] . $title . $args['after_title'];

echo $args['after_widget'];
	}
			
	// Widget Backend 
	public function form( $instance ) {
	if ( isset( $instance[ 'title' ] ) ) {
		$title = $instance[ 'title' ];
	}
	else {
		$title = __( 'New title', 'ivp' );
	}
	// Widget admin form
	_e('Show the user progress', 'ivp');

"; } // Updating widget replacing old instances with new public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } // Class lnn_user_progress_widget ends here // Register and load the widget function lnn_load_user_progress_widget() { register_widget( 'lnn_user_progress_widget' ); } add_action( 'widgets_init', 'lnn_load_user_progress_widget' );

This will take of registrering the widget and show it both frontend and in the admin area. So far, so good.

Now for getting the user data. We set at progress variable and get the user post count.

$progress = '';
 global $current_user;
 $user_post_count = count_user_posts( $current_user->ID);

Now let’s assign a value of 30 if the post count is between 1-3 and add another 10% if above.

if( $user_post_count > 0){
			$progress = $progress + 30;
			if( $user_post_count > 1 && $user_post_count < 3){
				$progress = $progress + 10;
			}else{
				$suggestions[] = 'Overvej at oprette endnu et opslag';
			}
		}

If no posts are found add a suggestion text on what to do. Now do this for the rest of your paramters.

The last past is to simple print it all to the screen.

<h3>Din profil</h3>
		<div class="progress-bar">
		<div class="progress-bar__progress <?php echo $user_progree_status; ?>" style="height: %;">
			<span class="progress-bar__number"><?php echo $progress; ?></span><span class="progress-bar__unit">%</span>
		</div>
		</div>
		<?php
		if( $suggestions > 0 ){ ?>
			<ul class="suggestions">
			<?php foreach ($suggestions as $suggestion) {
				echo '<li>' . $suggestion . '</li>';
			} ?>
			</ul>
		<?php }

I hope this will get you well on your way to give your logged in users feedback on how far they are with their profile.