• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

If you have a WordPress theme on the WordPress.org repository and you update the theme, everyone with your theme installed gets a notification in their dashboard that they can update the theme. But what if you host your themes on your own site – free or commercial ones? Thats where today’s tutorial comes in – I will show you how to add automatic notifications when a new version of your theme is available and direct people how to upgrade from within their dashboard.

Thank you to the following ThemeForest authors who very kindly worked on the code and allowed me to share it , João – Unisphere and Chris – Contempo.

What it Looks Like

As you can see from this image, when an update to your theme is available, a new menu item gets added at the top saying “New Updates” – when the user clicks that they are taken to a page telling them what version update is available. You can then give them instructions on how to do the update and finally underneath is a changelog where you can list the changes each time you make an update available.

How it Works

It’s quite simple, you will need two files – notifier.xml which carries the changelog and latest version of your theme number, you store this on your server and if the version number is higher than the version the user has installed then it triggers the update notification.

The other file is update_notifier.php you include this file within your theme directory and call it from the functions.php file – it points to the xml file on your server.

1. Create Notifier.xml

Save the following code as notifier.xml, enter your current theme version and host it on your website somewhere :

<?xml version="1.0" encoding="UTF-8"?>
<notifier>
	<latest>1.2</latest>
	<changelog>
		<![CDATA[
			<h4><strong>v1.0.x</strong> 1/14/2011</h4>
			<ol>
				<li>Enter any changes here</li>
			</ol>
			<h4><strong>v1.0.x</strong> 1/10/2011</h4>
			<ol>
				<li>Enter More Changes Here</li>
			</ol>
			<h4><strong>v1.0.x</strong> 1/5/2011</h4>
			<ol>
				<li>Enter More Changes Here</li>
			</ol>
		]]>
	</changelog>
</notifier>

2. Create update_notifier.php

Save the following code as update_notifier.php and put the file in your theme directory.


<?php
/**
 * Provides a notification everytime the theme is updated
 * Original code courtesy of João Araújo of Unisphere Design - http://themeforest.net/user/unisphere
 */

function update_notifier_menu() {  
	$xml = get_latest_theme_version(21600); // This tells the function to cache the remote call for 21600 seconds (6 hours)
	$theme_data = get_theme_data(TEMPLATEPATH . '/style.css'); // Get theme data from style.css (current version is what we want)
	
	if(version_compare($theme_data['Version'], $xml->latest) == -1) {
		add_dashboard_page( $theme_data['Name'] . 'Theme Updates', $theme_data['Name'] . '<span class="update-plugins count-1"><span class="update-count">New Updates</span></span>', 'administrator', strtolower($theme_data['Name']) . '-updates', update_notifier);
	}
}  

add_action('admin_menu', 'update_notifier_menu');

function update_notifier() { 
	$xml = get_latest_theme_version(21600); // This tells the function to cache the remote call for 21600 seconds (6 hours)
	$theme_data = get_theme_data(TEMPLATEPATH . '/style.css'); // Get theme data from style.css (current version is what we want) ?>
	
	<style>
		.update-nag {display: none;}
		#instructions {max-width: 800px;}
		h3.title {margin: 30px 0 0 0; padding: 30px 0 0 0; border-top: 1px solid #ddd;}
	</style>

	<div class="wrap">
	
		<div id="icon-tools" class="icon32"></div>
		<h2><?php echo $theme_data['Name']; ?> Theme Updates</h2>
	    <div id="message" class="updated below-h2"><p><strong>There is a new version of the <?php echo $theme_data['Name']; ?> theme available.</strong> You have version <?php echo $theme_data['Version']; ?> installed. Update to version <?php echo $xml->latest; ?>.</p></div>
        
        <img style="float: left; margin: 0 20px 20px 0; border: 1px solid #ddd;" src="<?php echo get_bloginfo( 'template_url' ) . '/screenshot.png'; ?>" />
        
        <div id="instructions" style="max-width: 800px;">
            <h3>Update Download and Instructions</h3>
            <p><strong>Please note:</strong> make a <strong>backup</strong> of the Theme inside your WordPress installation folder <strong>/wp-content/themes/<?php echo strtolower($theme_data['Name']); ?>/</strong></p>
            <p>To update the Theme, login to your account, head over to your <strong>downloads</strong> section and re-download the theme like you did when you bought it.</p>
            <p>Extract the zip's contents, look for the extracted theme folder, and after you have all the new files upload them using FTP to the <strong>/wp-content/themes/<?php echo strtolower($theme_data['Name']); ?>/</strong> folder overwriting the old ones (this is why it's important to backup any changes you've made to the theme files).</p>
            <p>If you didn't make any changes to the theme files, you are free to overwrite them with the new ones without the risk of losing theme settings, pages, posts, etc, and backwards compatibility is guaranteed.</p>
        </div>
        
            <div class="clear"></div>
	    
	    <h3 class="title">Changelog</h3>
	    <?php echo $xml->changelog; ?>

	</div>
    
<?php } 

// This function retrieves a remote xml file on my server to see if there's a new update 
// For performance reasons this function caches the xml content in the database for XX seconds ($interval variable)
function get_latest_theme_version($interval) {
	// remote xml file location
	$notifier_file_url = 'http://yoursitehere.com/notifier.xml';
	
	$db_cache_field = 'contempo-notifier-cache';
	$db_cache_field_last_updated = 'contempo-notifier-last-updated';
	$last = get_option( $db_cache_field_last_updated );
	$now = time();
	// check the cache
	if ( !$last || (( $now - $last ) > $interval) ) {
		// cache doesn't exist, or is old, so refresh it
		if( function_exists('curl_init') ) { // if cURL is available, use it...
			$ch = curl_init($notifier_file_url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_HEADER, 0);
			curl_setopt($ch, CURLOPT_TIMEOUT, 10);
			$cache = curl_exec($ch);
			curl_close($ch);
		} else {
			$cache = file_get_contents($notifier_file_url); // ...if not, use the common file_get_contents()
		}
		
		if ($cache) {			
			// we got good results
			update_option( $db_cache_field, $cache );
			update_option( $db_cache_field_last_updated, time() );			
		}
		// read from the cache file
		$notifier_data = get_option( $db_cache_field );
	}
	else {
		// cache file is fresh enough, so read from it
		$notifier_data = get_option( $db_cache_field );
	}
	
	$xml = simplexml_load_string($notifier_data); 
	
	return $xml;
}

?>

Edit the update_notifier.php file on line 57 and change : http://yourwebsite.com/notifier.xml to the location of your file on your hosting.

3. Include with your functions.php file

The final step is to include the update_notifier.php file in your theme’s functions.php file, so open and add the following line :

include("includes/update_notifier.php");

I put my file in a directory in the theme folder called “includes” so obviously change that if you put yours in a different location.

And there you have it – a nice easy wasy to keep your users updated about changes to your theme.

Download the Files Here »


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

19 Comments

  1. I had to clean up quite a bit of this code to even try to get it to work.  Your code snippets had lines that were missing carriage returns, leaving some of your functions commented out by //’s and almost all of the < characters had — after them, so <?php was <–?php (which I don’t think was intentional).  When I finally got past all that, I got a parse error when it was trying to load the xml file.  Any chance you could post the actual, working php/xml files to download?

    • Hello,

      Sorry about that, I think the code got messed up a bit when I posted it – have corrected it now.
      Ive uploaded the 2 files for you : http://wplift.com/notifierfiles.zip

      • Sweet. Thanks.  Looks a lot better now :)

        • Yep, done that now – dont know what happened, I obviously cant even copy and paste correctly!

          • Heh :)

            My only final comment is that if your theme directory does not match the theme name (or if your theme name is more than one word), you’d need to update this line from:

            add_dashboard_page( $theme_data[‘Name’] . ‘Theme Updates’,$theme_data[‘Name’] . ‘New Updates’, ‘administrator’,strtolower($theme_data[‘Name’]) . ‘-updates’, update_notifier);

            to 

            add_dashboard_page( $theme_data[‘Name’] . ‘Theme Updates’,$theme_data[‘Name’] . ‘New Updates’, ‘administrator’,’YourThemeDir-updates’, update_notifier);

            For me, that was actually the case, so I got a “You don’t have permission to access this page” when I tried to access the new dashboard page.  Not too difficult to spot and correct but thought I’d throw that out there.  So if your theme name is My Awesome Theme you’d need to set that parameter to ‘my-awesome-theme-updates’ (assuming that’s the correct directory name). Otherwise, seems to be working like a charm now.  Thanks for posting it! :)  

          • You should probably add quotes around `update_notifier`, too…

  2. Aaron

    Oliver,  great work!  This is what I was looking for…  Is there a way to add the automatic update feature?  I hate to sound like one of those people that is not happy with your work unless you do more.  I just need a way to have it upgrade automatically.  Sorry :(

  3. Hey Guys.
    I just started developing themes for my students .. I am in the affiliate marketing world .. I have a quick question – I’ve been searching this out with no avail. If I send out an update, how can I get to not effect the “current” files/page/posts ? 

  4. Michael

    This is great but will it also work if someone uses a child theme? Let´s say the customers parent theme is version 1.0 and the child theme is defined a version 2.0 which is then the version of the child not the parent. If I then release version 1.5 of the parent will the update notification work?

  5. R Dloin

    thanks for you corporation man

  6. I am getting a “You do not have sufficient permissions to access this page.” when I click on the notification. 

  7. Good stuff man, thanks for sharing!

  8. That’s what I need. Thank you!

  9. Exactly what I wanted. Thanks for sharing. Cheers…

  10. Does it only notify the user or does it have them install the update as well by clicking a link?

  11. Is this code updated? It doen’t work for me. I only changed the 57 url line phat to `$notifier_file_url = ‘http://yoursitehere.com/myTheme_notifier.xml';` and I changed the file name to this as well so that way I can have more files on the same folder for difrent themes, but it’s not workin I don’t know why… could it be because of the way my theme’s description is on CSS or something like that?

  12. Perfect working with WP 3.9.1. Thanks for sharing.

  • Comments are Closed

Search

Our Sponsors