How to Display CubePoints Logs on the Front End

Since writing this, development of the CubePoints plugin has slowed to a halt. So I’ve created my own points plugin, WordPoints. It offers a shortcode that you can use to display logs on the front end of your site. Please give it a try!

 

NOTE: The following tutorial is based on CubePoints 3.2.1 and WordPress 3.4.2 (the latest versions as of this writing). I will try to keep it updated if anything changes in future versions.

In this tutorial we will learn how to show a user a paginated list of recent points transactions from the logs on the front end of WordPress. The CubePoints plugin comes with this functionality already built in, for the admin area. All we have to do is bring it to the front end. We will give ourselves the option of doing it one of two ways:

  1. We can do it on any page or post using shortcode.
  2. Or, for those who are more WordPress savvy, we can also do it through an action hook.

(For those of you who don’t know PHP or WordPress, you may want to skip this explanation and just grab the finished code below.)

Getting Started: Understanding the Built-in Functionality #

To get started, we need to first understand the functionality that CubePoints has already built-in. Otherwise we might end up doing a lot of extra work that the CubePoints developers have already done for us. For one thing, CubePoints is a modular plugin. That means that we don’t have to build our own plugin to do this, we just need a custom CubePoints module.

Creating a CubePoints Module #

CubePoints modules are not too hard to understand, especially if you know a little about WordPress plugins. To create a CubePoints module, you need to create a new file in the CubePoints modules directory (/wp-content/plugins/cubepoints/modules/). You can name the file whatever you like, and in this case we might call it something like ‘frontend_logs.php’.

Inside the module file, the first thing the module needs to do is register itself, so that CubePoints knows that it exists. That code would look something like this:

<?php
/** Front-end Points Log */
cp_module_register(__('Front-end Points Logs', 'cp'), 'frontlogs', '1.0', 'J.D. Grimes',
   'http://efieldguide.com', 'http://efieldguide.com/how-to-display-cubepoints-logs-on-the-front-end',
   __('Allow users to see a history of their point transactions on the front end.', 'cp'), 1);
?>

Lets take a look at exactly what happens here. The comment (/** Front-end Points Log */) doesn’t really do anything, accept tell us the name of the module. The real meat of this, of course, is the cp_module_register() bit (this function is defined in /plugins/cubepoints/cp_core.php). As you can see, this function takes 8 parameters. Here is what each of them is:

  1. The name of the module (displayed on the CubePoints->Modules page)
  2. The module’s id or slug (the unique name of the module)
  3. The version of the module (displayed on the CubePoints->Modules page)
  4. The module’s Author (displayed on the CubePoints->Modules page)
  5. The module Author’s URL (used on the CubePoints->Modules page)
  6. The module’s URL (used on the CubePoints->Modules page)
  7. The module’s description (displayed on the CubePoints->Modules page)
  8. Whether the module can deactivate (1 = yes, 0 = no)

As you can see, parameters 1 and 7 are wrapped in WordPress’s __() function. This is not absolutely necessary, but it enables translation of the message into different languages, without directly editing the plugin files.

Using the cp_show_logs() Function #

Now that we have registered our module, we need to add the code to enable front-end display of the points logs. As I noted above, CubePoints already has the ability to display the logs. All we need to do is bring that functionality to the front end. In order to do that, we need to understand how CubePoints does it. The code that shows a user their recent points transactions is in the My Points module which is included with CubePoints (/cubepoints/modules/my_points.php). If you have this module enabled, you can navigate to the CubePoints->My Points page on your WordPress Dashboard, and see your last 15 point transactions. Here is that module’s code:

<?php

/** My Points Module */

cp_module_register(__('My Points', 'cp') , 'mypoints' , '1.0', 'CubePoints', 'http://cubepoints.com', 'http://cubepoints.com' , __('Allow users to see a history of their point transactions.', 'cp'), 1);

if(cp_module_activated('mypoints')){

	add_action('admin_print_scripts-cubepoints_page_cp_modules_mypoints_admin', 'cp_datatables_script');
	add_action('admin_print_styles-cubepoints_page_cp_modules_mypoints_admin', 'cp_datatables_style');

	function cp_module_mypoints_add_admin_page(){
		add_submenu_page('cp_admin_manage', 'CubePoints - ' .__('My Points','cp'), __('My Points','cp'), 'read', 'cp_modules_mypoints_admin', 'cp_modules_mypoints_admin');
	}
	add_action('cp_admin_pages','cp_module_mypoints_add_admin_page');

	function cp_modules_mypoints_admin(){

		echo '<div class="wrap">';
		echo '<h2>CubePoints - ' . __('My Points', 'cp') . '</h2>';
		echo __('Manage and view information about your points.', 'cp');
		echo '<br /><br />';
		echo '<div style="background:#EFEFEF;display:inline-block;margin-right:25px;"><div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Points', 'cp') . ':</div><div style="float:left;padding:18px;font-size:20px;">' . cp_getPoints(cp_currentUser()) . '</div></div>';
		if(cp_module_activated('ranks')){
			echo '<div style="background:#EFEFEF;display:inline-block;"><div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Rank', 'cp') . ':</div><div style="float:left;padding:18px;font-size:20px;">' . cp_module_ranks_getRank(cp_currentUser()) . '</div></div>';
		}
		echo '<div style="clear:both;"></div><br />';
		
		echo '<p style="font-weight:bold;">' . __('Your recent point transactions:', 'cp') . '</p>';
		
		cp_show_logs(cp_currentUser(), 15 , false);
		
		echo '</div>';
	}
	
}
	
?>

It adds the CubePoints->My Points page, and on that page it displays a table with the last 15 points transactions for the current user. The part of this which is most important is on line 31:

cp_show_logs(cp_currentUser(), 15 , false);

This is the part that actually displays the point logs table. The declaration of the cp_show_logs() function is in /cubepoints/cp_logs.php. As you can see, the function takes three parameters. The first parameter is either 'all', meaning display the logs for all users, or the id of the specific user to show logs for, as in this case. The second parameter is the maximum number of transactions we want to display. In this case, we only display the last 15 logs. The third parameter tells CubePoints whether we want the results paginated or not. In this case, we are only displaying the 15 most recent transactions, so there is no need to paginate the tables.

This is the same function that is used in /cubepoints/cp_admin_logs.php to display all of the logs to the administrator. The only difference is that it uses different parameter values:

cp_show_logs('all', apply_filters('cp_admin_logs_limit', 0 ) , true);

In this case, CubePoints shows transaction logs for all of the users, so the first parameter is 'all'. The second parameter is 0. It is filtered through the 'cp_admin_logs_limit'. This enables compatibility with the Limit Logs Display module that comes with CubePoints, which allows administrators to define a limit to the number of logs displayed on the CubePoints->Logs page. And the third parameter is true, since we are displaying many logs, and want to paginate them.

In a moment we will learn how to use this function with a shortcode to display the logs on the front end of your site. But there is one thing we need to do first.

Bringing the JavaScript and CSS to the front end #

The CSS styling is necessary for the tables to display properly. And without the JavaScript, the pagination will not work. The My Points module shown above, does that with this code:

add_action('admin_print_scripts-cubepoints_page_cp_modules_mypoints_admin', 'cp_datatables_script');
add_action('admin_print_styles-cubepoints_page_cp_modules_mypoints_admin', 'cp_datatables_style');

However, that will only work on the Admin side of the site. Here is the code we need to add these scripts to the front end:

       // Adding the necessary JS and CSS files to the front end.
       function cp_frontload_scripts(){
              wp_register_script('datatables', CP_PATH . 'assets/datatables/js/jquery.dataTables.min.js', array('jquery'), '1.7.4', true);
              wp_enqueue_script('datatables');
              wp_register_style('datatables', CP_PATH . 'assets/datatables/css/style.css');
              wp_enqueue_style('datatables');
       }
       add_action( 'wp_enqueue_scripts', 'cp_frontload_scripts' );

This code is based on the code from CubePoints itself, found in cp_admin.php. We can’t just enqueue the scripts, we have to actually register them, because CubePoints only registers them on the Admin side of the site. If you don’t know exactly what’s going on in this code, check out the WordPress Codex. Note that I have the final value of wp_register_script(‘datatables’) set to true. This causes the JavaScript to load at the bottom of the page. I did this because it wasn’t working properly when loaded in the <head>. I don’t know exactly why, perhaps because of a conflict with another script. Anyway, it only worked when loaded at the bottom for me, though I suggest you try setting that to false to see if it will load from the top for you.

Note that if you are only displaying the logs on one or two pages (and you probably are), you could add a conditional statement to only load the CSS and JS on those page(s). Something like if ( is_page($page) )  { /* add scripts here*/ } (see Codex)

Building a Function to Display the Logs #

Now we have our CSS and JS ready, our points logs will display properly. We just need to build a function to display them. We can base it on the code from the My Points module above. But we can change it a little to give us the option to set each of the three parameters of the cp_show_logs() function. Then, we can either show all of the logs, or show just the logs for the current user with the same function. We can also specify any limit to the number of recent points transactions to display when we call the function, or ultimately in our shortcode. And we can also set whether we want to paginate the logs or not. This requires a few modifications, but is still fairly straightforward.

	function cp_modules_frontlogs_display($type = 'user', $limit = 0, $paginate = 1){

		echo '<style>.widefat{border-radius:3px 3px 3px 3px;border-width:1px;border-style:solid;border-spacing:0px;
				width:100%;clear:both;margin:0px;border-color:rgb(223,223,223);background-color:rgb(249,249,249);}</style>';
		echo '<div class="wrap"><div style="background:#EFEFEF;display:inline-block;margin-right:25px;">';
		
		if ($type == 'user'){
		
			if ( is_user_logged_in() ){

				echo '<div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Points', 'cp') . ':</div>
					<div style="float:left;padding:18px;font-size:20px;">' . cp_getPoints(cp_currentUser()) . '</div></div>';
		
				// If the 'ranks' module is activated...
				if(cp_module_activated('ranks')){
					echo '<div style="background:#EFEFEF;display:inline-block;">
						<div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Rank', 'cp') . ':</div>
						<div style="float:left;padding:18px;font-size:20px;">' . cp_module_ranks_getRank(cp_currentUser()) . '</div></div>';
				}
		
				echo '<div style="clear:both;"></div><br />';
				echo '<p style="font-weight:bold;">' . __('Your recent point transactions:', 'cp') . '</p>';
			
				$type = cp_currentUser();

			} else {
				echo '<p><b>'.__('You must be logged in to view your points.').'</b><p>';
				echo '</div>';
				return;
			}
			
		} elseif ($type == 'all') {
			$limit = apply_filters('cp_admin_logs_limit', $limit);
		}
		
		cp_show_logs($type, $limit , $paginate);
		
		echo '</div>';
	}
	add_action( 'cp_modules_show_logs_front_end', 'cp_modules_frontlogs_display' );

For clarity, the three parameters are:

  1. The type of log we want to display ('user' for current user only, 'all' for all users)
  2. The maximum number of logs to display (0 = no limit)
  3. Do we want the logs to be paginated? (1 = yes, 0 = no)

If we are loading the logs only for the current user ( if ($type == 'user') ), then we also want to show the user how many points they have. That is what the first if statement does. Inside of that we have to check if the user is logged in. If they aren’t, then we just give them a message that tells them they need to log in to view their points. At the bottom of that if statement, we also do $type = cp_currentUser(); to set the id of the user which we are displaying the logs for. On the other hand, if we are displaying all the logs, we want to filter the $limit through apply_filters('cp_admin_logs_limit', $limit); so that this module is compatible with the Limit Logs Display module. Finally, at the bottom we call the function to display the logs with whatever the parameters are, like this cp_show_logs($type, $limit , $paginate);.

We also have to add one more piece of CSS so that the table will display properly. That’s what this part does:

		echo '<style>.widefat{border-radius:3px 3px 3px 3px;border-width:1px;border-style:solid;border-spacing:0px;
				width:100%;clear:both;margin:0px;border-color:rgb(223,223,223);background-color:rgb(249,249,249);}</style>';

If you want to display the logs in a custom template, then you can do_action( 'cp_modules_show_logs_front_end' ), or if you want to pass parameters other than the default, you can simply call the function like this: cp_modules_frontlogs_display($type, $limit, $paginate). However, we could also do this with a shortcode on any post or page.

Creating the Shortcode #

The next thing we need to do is create a function to handle the shortcode. That will look something like this:

function cp_modules_show_logs_shortcode( $atts ){
              extract( shortcode_atts( array(
                     'type' => 'user',
                     'paginate' => '1',
                     'limit' => '0',
              ), $atts ) );

              ob_start();
              cp_modules_frontlogs_display($type, $limit, $paginate);
              $html = ob_get_contents();
              ob_end_clean();

              return $html;
       }
       add_shortcode( 'cp_modules_show_logs', 'cp_modules_show_logs_shortcode' );

If you aren’t familiar with how to add WordPress shortcodes, here is a link to the Codex. All this function does is get any parameters that were set in the shortcode, and filters them through extract( shortcode_atts() ). Then we call the cp_modules_frontlogs_display($type, $limit, $paginate) function. But we need to call that function within PHP output buffering, so that the logs will appear in the right place on the page. If you are familiar with PHP output buffering, you know that this will catch everything that would have otherwise have been echo‘ed directly to the page. We turn output buffering on, execute cp_modules_frontlogs_display(), and then empty all of the stuff we caught into the $html variable, which we then return to WordPress to display on the page in place of the shortcode. Now you can include the shortcode in your WordPress pages and posts like this:

[cp_modules_show_logs]

Or with parameters:

[cp_modules_show_logs type="all" limit="15" paginate="0"]

And that’s all there is to it.

Conclusion #

Putting all the code together, our module looks like this:

<?php

/** Front-end Points Log Module */

// Register the module.
cp_module_register(__('Front-end Points Logs', 'cp') , 'frontlogs' , '1.0', 'J.D. Grimes', 'http://efieldguide.com', 'http://efieldguide.com' , __('Allow users to see a history of their point transactions on the front end.', 'cp'), 1);

// If the module is active...
if(cp_module_activated('frontlogs')){
	
	// Adding the necessary JS and CSS files to the front end.
	function cp_frontload_scripts(){
		wp_register_script('datatables', CP_PATH . 'assets/datatables/js/jquery.dataTables.min.js', array('jquery'), '1.7.4', true);
		wp_enqueue_script('datatables');
		wp_register_style('datatables', CP_PATH . 'assets/datatables/css/style.css');
		wp_enqueue_style('datatables');
	}
	add_action( 'wp_enqueue_scripts', 'cp_frontload_scripts' );

	// Function to display the logs...
	function cp_modules_frontlogs_display($type = 'user', $limit = 0, $paginate = 1){

		echo '<style>.widefat{border-radius:3px 3px 3px 3px;border-width:1px;border-style:solid;border-spacing:0px;
				width:100%;clear:both;margin:0px;border-color:rgb(223,223,223);background-color:rgb(249,249,249);}</style>';
		echo '<div class="wrap"><div style="background:#EFEFEF;display:inline-block;margin-right:25px;">';
		
		if ($type == 'user'){
		
			if ( is_user_logged_in() ){

				echo '<div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Points', 'cp') . ':</div>
					<div style="float:left;padding:18px;font-size:20px;">' . cp_getPoints(cp_currentUser()) . '</div></div>';
		
				// If the 'ranks' module is activated...
				if(cp_module_activated('ranks')){
					echo '<div style="background:#EFEFEF;display:inline-block;">
						<div style="float:left;font-size:17px;font-weight:bold;background:#E0E0E0;padding:18px;color:#565656;">' . __('My Rank', 'cp') . ':</div>
						<div style="float:left;padding:18px;font-size:20px;">' . cp_module_ranks_getRank(cp_currentUser()) . '</div></div>';
				}
		
				echo '<div style="clear:both;"></div><br />';
				echo '<p style="font-weight:bold;">' . __('Your recent point transactions:', 'cp') . '</p>';
			
				$type = cp_currentUser();

			} else {
				echo '<p><b>'.__('You must be logged in to view your points.').'</b><p>';
				echo '</div>';
				return;
			}
			
		} elseif ($type == 'all') {
			$limit = apply_filters('cp_admin_logs_limit', $limit);
		}
		
		cp_show_logs($type, $limit , $paginate);
		
		echo '</div>';
	}
	add_action( 'cp_modules_show_logs_front_end', 'cp_modules_frontlogs_display' );

	// Function to add shortcode...
	function cp_modules_show_logs_shortcode( $atts ){
		extract( shortcode_atts( array(
			'type' => 'user',
			'paginate' => '1',
			'limit' => '0',
		), $atts ) );
		
		ob_start();
		cp_modules_frontlogs_display($type, $limit, $paginate);
		$html = ob_get_contents();
		ob_end_clean();
		
		return $html;
	}
	add_shortcode( 'cp_modules_show_logs', 'cp_modules_show_logs_shortcode' );
}

?>

Once you have saved that to a file in the /modules/ directory, you can go to your WordPress Dashboard, and navigate to CubePoints->Modules, and activate the Front-end Points Logs module that you just created. You can then display the logs on the front end using the shortcode, or, if you prefer, with a custom template.

Remember, I am not one of CubePoints’ developers, so I don’t know everything, and what you see here is just the product of a few hours of studying the plugin’s code. If you have any tips or find something I missed, please leave a comment and let me know.

13 thoughts on “How to Display CubePoints Logs on the Front End

  1. Jeff Rose

    This is a great tutorial, and will help me build my code.

    Just a question on the fragility of the modules…

    When you run an update to the core plugin, your custom modules will be lost, right? WordPress deletes all existing plugin files.

    Not that updates seem to happen recently.

    Reply
    1. J.D. Grimes Post author

      Yes, unfortunately, updating the plugin will delete any custom modules. Though I don’t know if CubePoints is going to be seeing any updates. I’m actually working on building a points plugin with the same modularity that will store the modules in another directory so they wont be overwritten.

      Reply
  2. Travel Lesvos

    Very good and analytic job!
    Well Done!
    Sometimes you search and you find something sooOOO useful for your job and only this!The analysis is so good that learn you how to use wordpress and its features!
    Thank you very much!!!
    Very soon you will se live our new website with your helpful addon at Travel-Lesvos.com!

    Reply
  3. woocommerce and cubepoints (wordpress gamification)

    Great tutorial. We use your “cp_modules_show_logs” shortcode on our woocommerce “My account page”. Since we use WooCube during checkout, customers are using cubepoints to fund some or all of their purchase. Your shortcode idea provides them with a summary of their points activity. This is a great incentive for them to try using the points i.e. purchase another product. Thanks for sharing this snippet of code!

    Reply
  4. Joe

    Great read and a great description of the functions.
    I was wondering if it was possible to add an auto pagination script to display all logs within different pages specifically when the admin limits the logs to 10 per page.
    I’m not sure if it’s actually built in or not but i’ve been editing the version i’m using and there’s no auto pagination in the one i’m using.

    Reply

Leave a Reply

Your email address will not be published.