Display Your Recent Envato Items With WordPress and the Envato API

Not long ago, Envato released their Marketplace API. The Envato API is an interface which allow developers to build applications and software that can easily utilize Envato user and item data. One convenient feature of the API is the ability to pull out recent items and products for a certain user. Today, we will develop a WordPress plugin that uses the Envato API to display a list of your Envato items. You will even be able to customize what Marketplace to pull the items from and how many to display! Let’s get coding!

Our Goal

Before we begin, let’s layout all the goals we wish to accomplish with this plugin. There are a few options we want to make sure we include as well:

  • Create a plugin that lists recent items of a certain username.
  • Allow the user to choose the marketplace (e.g. ThemeForest, AudioJungle, Flashden).
  • Allow user to choose how many items to display.
  • Allow the user to optionally display the price of the item.
  • Grab the links, title, and thumbnail of the item(s) needed, wrap them in some basic markup so the user can style as desired.

As you can see above, there are quite a few options and capabilities we want our plugin to have, but do not fear! The Envato developers have made the API super easy to work with and pulling out all of this information is not as tricky as you might think. Our next step needed to solve this problem is to gather up the resources we need for the job (below).

Resources You Need

You will need a few things and some basic knowledge to create this plugin. Below is a list of resources I suggest you browse through before going further.

The Envato API Thread

API Forum Screenshot

The first thing you should check out is the introduction to the API and the update to the API. This will help you understand the very basics of what and how the API works.

Envato API Documentation

Envato API Screenshot

Next, take a quick browse at the Envato API documentation, the current version at the time of writing is ‘Edge’. Pay special attention to the way you need to format the URL in order to access certain data types. In addition, Public sets mean you do not need an API key, user protected sets means you do need an API key.

Creating an iPhone App Using the Envato API

iPhone app Screenshot

Now I certainly don’t expect you to create an full blown iPhone app using the API (not yet at least), but it would not be fair for me not to mention this fantastic article by Hayden Gascoigne. This article inspired me to write this post, and is also a great introduction to working with the API. I suggest you at least give it a browse, you might learn something that is not mentioned in this article!

Wordpress Plugin Basics

Codex Screenshot

Lastly, it would behoove you to spend some time reading the Wordpress Codex introduction to writing a plugin. This will give you a general understanding of how functions work within WordPress and how we can add custom options to our custom function.

Plugin Basics

Now that we have some basic knowledge and goals defined, let’s start with our plugin basics. We need to do a few things for WordPress to recognize our plugin properly:

  • Create a new directory named ‘envato_recent_items’
  • Create a new file inside of that directory, we will name it index.php
  • Put some headers/comments at the top of our plugin so WordPress can handle our information properly.

Once you have created the directory and file above, open up index.php and put the following information at the top:

		<code>
		<?php
		/*
		Plugin Name: Envato Recent Items
		Plugin URI: http://blog.themeforest.net
		Description: Displays a custom number of your recent Envato items and thumbnails. Options such as price and item count can be customized.
		Author: Drew Douglass
		Version: 1.0
		Author URI: http://dev-tips.com
		*/?>
		</code>

If you save this file and navigate to your plugins section of the WordPress admin panel, you should be able to see our plugin information that we have entered above.

API Basics

Let’s have another look at the API documentation shall we? We know from the goals that we have defined for our project that we want to pull the latest (or newest) files from the user’s account. If we look at public sets, we see that there is a set named ‘new-files-from-user’. This will be the set that we will be working with for our plugin.

If I were to go to the url http://marketplace.envato.com/api/edge/new-files-from-user:creatingdrew,themeforest.json, then I would get a JSON file of my 10 latest items on ThemeForest. If I preformed a basic ‘print_r’ function, you would see the JSON file is organized like below:

JSON Screenshot

Now that we have a basic understanding of how the data is outputted, we can create our php function to handle that data and output it to the browser in the form of a WordPress plugin.

Creating Our Function

Moving on, let’s begin coding our function. I will post some code snippets one at a time, and then explain them below. I have also done my best to comment the code so you can better understand exactly what is going on. The first thing we need to do is to make sure a function with our function name doesn’t already exist like so:

		<code>
		if(!function_exists('envato_recent_items')){
 
		function envato_recent_items($username, $market = 'themeforest', $count = 3, $price = false){
 
			}
		}
		</code>

Basically, we are trying to make sure our function does not collide with any other functions/plugins already being used by WordPress. Another common solution to this issue is to use php classes and OOP techniques, but this is beyond the scope of today’s article.

You can see our function takes four parameters, but only requires one, which is the username. The $market variable is self explanatory, the $count variable is how many items you wish to show (10 being the max due to the api), and the $price variable decides wether or not the price of each item is shown. By default, prices are not shown.

Retrieving Our Data

Now that we have our function and its parameters set, we can grab the JSON from the user’s API url and decode it with PHP functions. Put the following code inside the ‘envato_recent_items’ function:

		<code>
		//Set the api url that we need according to username and market 
		//By default the market is ThemeForest unless specified
		$json_url = 'http://marketplace.envato.com/api/edge/new-files-from-user:'. $username . ','. $market . '.json';
 
		//Get the content of the url above 
		$json_info = file_get_contents($json_url);
 
		//Decode the contents of $json_info so we can use it to display our information 
		$json_data = json_decode($json_info, true);
		</code>

Important! You need to make sure your hosts supports the ‘file_get_contents’ function. If you are not sure you can contact your host. If they do not support it, tell them to get with the times! Disclaimer out of the way, let’s walk through the steps of the above code.

  • We set the url equal to $json_url. We use the parameters passed to the function ($market and $username) to decide which JSON file we want to grab.
  • Next, we use file_get_contents to grab the contents of the URL we defined.
  • Lastly, we use the php function ‘json_decode’ on our content so we are able to easily work with and extract the information from the URL.

Believe it or not we are already halfway done with our plugin! Let’s move on to the next step and loop through our data so we can display it to the user.

Loop and Process Our Data

Let’s look at the code and then discuss everything, I promise this is much simpler than it appears!

		<code>
		for($i=0; $i<$count; $i++){
			//Grab the item title
			$data .= '<div class="envato_item">' . $json_data['new-files-from-user'][$i]['item'] . '</div>';
 
			//Grab the thumbnail and wrap the items link around it.
			$data .= '<div class="envato_thumb"><a href="' . $json_data['new-files-from-user'][$i]['url'] . '" title="'. $json_data['new-files-from-user'][$i]['url'] .'"><img src=''.$json_data['new-files-from-user'][$i]['thumbnail'].'" alt="'. $json_data['new-files-from-user'][$i]['item'] .'" /></a></div>';
 
			//Grab the link to the item and the title for the URL text.
			$data .= '<div class="envato_link"><a href="' . $json_data['new-files-from-user'][$i]['url'] . '" title="'. $json_data['new-files-from-user'][$i]['url'] .'">Visit ' . $json_data['new-files-from-user'][$i]['item'] . '</a>.</div>';
 
			//If the user wants to display the price, grab that too!
			if($price === true){
				$data .= '<div class="envato_price">' . $json_data['new-files-from-user'][$i]['cost'] . '</div>';
			}
 
		}
		</code>

Woah! Whats going on here? Basically, we are looping through all of the items for a certain number of times. That number is determined by the $count variable we discussed earlier, and defaults to three. Again, I will break this down step by step below:

  • We declare a for loop, which performs a certain action until a condition is met (in this case until $i equals count).
  • Since the JSON data is stored in an array, we use the $count variable to grab each item one by one and store it in the $data variable.
  • The thumbnails have the links to the corresponding items wrapped around them, so a user can simply click on the thumbnail to view the item.
  • In addition, we have included a link and some text (using the items title).
  • Lastly, if the user wants to display the prices and has set $price to true, then we will also store that information in our $data variable.

Notice how we are using the following code to assign information to data:

		<code>
		$data .= 'our data....';
		</code>

We do this as we need to keep adding data on to the end of our variable, not overwrite it. If we used only an ‘=’ sign, then every time the loop ran the string inside the $data variable would be overwritten.

Our last step is to return the $data, like so:

		<code>
		return $data;
		</code>

Our Final Code

Here is our final plugin in all of its super simple glory!

		<code>
		<?php
/*
Plugin Name: Envato Recent Items
Plugin URI: http://blog.themeforest.net
Description: Displays a custom number of your recent Envato items and thumbnails. Options such as price and item count can be customized.
Author: Drew Douglass
Version: 1.0
Author URI: http://dev-tips.com
*/
 
if(!function_exists('envato_recent_items')){
 
	function envato_recent_items($username, $market = 'themeforest', $count = 3, $price = false){
 
		//Set the api url that we need according to username and market 
		$json_url = 'http://marketplace.envato.com/api/edge/new-files-from-user:'. $username . ','. $market . '.json';
 
		//Get the content of the url above 
		$json_info = file_get_contents($json_url);
 
		//Decode the contents of $json_info so we can use it to display our information 
		$json_data = json_decode($json_info, true);
 
		for($i=0; $i<$count; $i++){
			$data .= '<div class="envato_item">' . $json_data['new-files-from-user'][$i]['item'] . '</div>';
 
			$data .= '<div class="envato_thumb"><a href="' . $json_data['new-files-from-user'][$i]['url'] . '" title="'. $json_data['new-files-from-user'][$i]['url'] .'"><img src=''.$json_data['new-files-from-user'][$i]['thumbnail'].'" alt="'. $json_data['new-files-from-user'][$i]['item'] .'" /></a></div>';
 
			$data .= '<div class="envato_link"><a href="' . $json_data['new-files-from-user'][$i]['url'] . '" title="'. $json_data['new-files-from-user'][$i]['url'] .'">Visit ' . $json_data['new-files-from-user'][$i]['item'] . '</a>.</div>';
 
			if($price === true){
				$data .= '<div class="envato_price">' . $json_data['new-files-from-user'][$i]['cost'] . '</div>';
			}
 
		}
 
		return $data;	
	}
}
?>
		</code>

How to Use Our Plugin

Make sure you have uploaded the directory into your plugins folder, and navigate to your plugins administration panel. Now, activate your plugin. Our last step is to decide where we want our recent items to show up, say, underneath each individual article.

Open up single.php in your themes directory and insert the following code wherever you would like it to show up:

		<code>
			<?php echo envato_recent_items('collis', 'themeforest', 5, true); ?>
		</code>

This will display a list of the last 5 items Collis has had on ThemeForest, since this is a public set, I am sure he wont mind if you try it out using his name. No API key required! Of course, place it wherever you like, the sidebar.php might be a nice place for it. Use it to promote your latest themes, style it however you like! It’s as simple as activate, and placing the function where you would like it to show! I will leave the styling to all of you wonderful designers out there, but since we have added custom classes, styling should be a breeze! Below is a screenshot of the final output without any styling.

Activate Plugin Screenshot
Final Screenshot

Extra Credit

If you enjoyed this I urge you to check out all the API has to offer and make your own plugins and functions. A good idea would be to add a custom admin panel or use the username to also insert a referral link into the item URL. Let me know if you have any comments, questions, or suggestions. Until next time…happy coding!

Source Files

You may download the source code HERE.



26

Comments
  • xmdsys says:

    Very nice Drew! I wanted to put something like this together last week for my blog and didn’t have time so you rock! :-D

  • Kevinsturf says:

    very cool, I might make one.

  • kailoon says:

    Argghhh… you are faster … I am working on this … +_+

    Nvm, I just work on the output design then :P

    Great work!

  • CAMS says:

    cool. i like. i just used the RSS feed for this lol

  • Marko says:

    You guys rock!

  • Qiming says:

    Great work!

  • kailoon says:

    how to get popular files from wordpres?

  • Hayden Gascoigne says:

    Great article man. Love to see that others are embracing the power of the API. Also, thanks for the shout!

  • Clemente G says:

    Great Tutorial/

  • Brandon says:

    Awesome article… had no idea that there was an API, but I’m looking forward to playing with it. Been thinking about an iPhone Envato Author App for a while now… but the idea of integrating it into Wordpress is another great idea as well. Thanks for the excellent article (lots of great information here).
    Cheers!

  • Erwin says:

    Will be great if you also write a tutorial for getting bookmarked collection plus insert referral url …. please…

  • THE MOLITOR says:

    Schweet! I added this to my Wordpress site…

  • THE MOLITOR says:

    What do you think of my styling (click my name)…

  • kailoon says:

    I try to new-files: themeforest,wordpress but it is not working…

  • Gilbert says:

    I wrote a wordpress plugin just as the update to the API was released. It basically does the same thing as above but also presents you with an intuitive way to create and manage feeds for the Wordpress admin area.

    You can see it at http://www.gilbertpellegrom.co.uk/projects/envato-marketplace-feeds/

  • Just what I was looking for. I am currently just adding them manually. This will make it much easier.

  • jernigani says:

    Hey, just tried your script and if anyone is having problems it’s because there is a single quote instead of a double quote being used bear the beginning of the img tag.

    <img src=”.$json_data['new-files-from-user'][$i]['thumbnail'].’”

    needs to be

    <img src=”‘.$json_data['new-files-from-user'][$i]['thumbnail'].’”

  • THE MOLITOR says:

    I just realized that this is for recent items SOLD, not recent items UPLOADED. Still awesome though ;-)

  • alexxcz says:

    Great work! :D I was just thinkin’ that I wanna make a FD app for myself and now I see that the API is available. Thanks!

  • @ The Molitor-

    Are you sure about that? According to the API documentation the ‘new-files-from-user’ files shows the newest 10 files a user has uploaded to a particular site. I haven’t uploaded a theme recently, so it’s difficult for me to tell if it is pulling out the most recent sold or the most recent uploaded. Either way, according to the docs, it *should* be pulling out the 10 newest uploaded files.
    If its not, then I am a little confused :)

    BTW, I checked out your implementation of it and it is awesome, great work!

  • THE MOLITOR says:

    @ Drew Douglass

    Thanks for the feedback!

    Yeah, I’m certain that it displays recently *sold*, not the newest files. I was confused when the items listed would periodically change and I discovered that they were changing based on my sales.

    It’s nice though. I think having both features – recent items and recent sales – is great.

  • @ The Molitor-

    Thanks for getting back to me, I’ll continue to look into it but I am unable to replicate the recently sold issue you are having. Either way, I think it is still great for promotion :) Again, you did a very nice job of using the plugin to fit into your blog.

    @Everyone- This plugin is now featured on the WordPress plugins directory. I have added an option for you to enter a referral id as well. You can download the new (and future new versions) here: http://wordpress.org/extend/plugins/envato-recent-items/

    Enjoy and feedback is always welcome!

  • CAMS says:

    is there any way to set thechar llimit of the title?

    and also how do u grab the discription? and limit the chars on that aswell?

  • THE MOLITOR says:

    Has the API been updated recently? For some reason the thumbnails aren’t showing up anymore.

  • Clark says:

    With the example code, if you’ve got the count set to 5 and you’ve only got 3 items, 2 blanks will show (empty borders, the word ‘visit’ with no link, etc). What would be the easiest way to have a count in place back have it fall back on something like foreach when the count is higher than the actual number of items.