ArtistDataPress version 0.6 released!

I’ve added some really cool stuff in this release and I’m proud to announce its officially out!

First off, I’ve added feed caching. Let me ‘splain. Before, ADP would go ask ArtistData’s servers for your info every time you reloaded the page. You may have noticed how slow that was. Fortunately, WordPress has a way that I could save the feed data when I fetch it from ArtistData and it makes everything much, much faster! The one trade-off is you’ll need to wait about an hour for new events to show up on your site. If that needs to be changed, please let me know and I’ll alter the timing based on your feedback. But I figure an hour is short enough.

Second, all the layouts, including widgets, are now responsive, which means they look good on mobile and tablets, as well as your laptop. This is just the way things are going in the web development world and I’m still surprised I hadn’t already built this in before.

The rest of the changes are fairly minor. I altered the way some layouts were done in the CSS to name things more consistently, and make them easier to read. I also lightened up the code a bunch by getting rid of stuff I didn’t need.

Hope you all enjoy the update, let me know of any bugs and/or suggestions.

Returning a submit button

If you need a submit button returned instead of echoed, for example, returning a form from a function, use the get_submit_button() function, which accepts the same arguments as the submit_button() function.

Adding a Custom Class to a Submit Button

While you can hand-code the HTML for a submit button in a form, WordPress has a nice function, submit_button(), that can drop in the correct code for you. The function accepts five arguments: $text, $type, $name, $wrap, and $other_attributes.

$text changes the text on the button.

$type determines the style of the button. The common options are primary, secondary, and delete, with primary being the default.

$name sets the name attribute for the button, its “submit” by default.

$wrap determines if the button is wrapped in paragraphs tags or not, the default is true.

$other_attributes sets other attributes for the button.

For a recent project, I wanted to restyle some buttons to make them look like links, like on the posts page, rather than buttons. While you don’t NEED an special class to pull this off, it certainly makes it easier and neater in the CSS. I thought this would be achievable in the $other_attributes, but through trial-and-error I discovered you add your custom class in $type instead of using one of the defaults, like this:

submit_button( 'Whatever Text', 'my_custom_class' );

Basically, whatever you put there will be added to the class attribute of the button and you’re good to restyle the button however you want using your custom class.

Introducing ArtistDataPress 0.5!

Its been a while since ADP was updated and I know lots of people haven’t cared for the previous update that, in some cases, took away their ability to view their plugin settings. That should be resolved with this 0.5 update.

Previously, ADP was using a PHP library called cURL to fetch the XML feed (the raw shows data) from ArtistData. Fortunately, there’s a nice built-in WordPress function called wp_remote_get that uses HTTP’s GET method to fetch an external URL. This means, your server settings really shouldn’t matter because every server supports HTTP. Hopefully, that’s the last we hear of issues getting the XML feed. :)

I also perused the support forums on WP.org and found several requests for features. I’ve added some great new features that have been highly requested:

You can now have multiple instances of ADP by using the [artistdatapress] shortcode to specify how many show you want to display and from which url. Use it like this:

[php]

[artistdatapress maxshows=20 feedurl=http://feeds.artistdata.com/xml.shows/artist/AR-8FAD4948ACC579CB/xml/future]

[/php]

The values in the shortcode will override the plugin settings.

I also added the iCal layout for the widget and you choose that on the widget’s settings.

Overall, I streamlined the code and improved the logic and a bunch of other stuff under the hood that should make it easier to update later. Hope you enjoy!

How to Add a Class to a Metabox

While developing a new plugin, I had needed to show/hide some metaboxes based on which radio button is selected from another metabox. Fortunately, I found this method and wanted to share my findings. Here’s the code you’ll need to start off with:

add_filter( 'postbox_classes_{post_type_name}_{metabox_id}, array( $this, 'add_metabox_classes' ) );

function add_metabox_classes( $classes ) {

	array_push( $classes, {class_to_add} );
	return $classes;

} // End of add_metabox_classes()

Just a note: the “array( $this,” part of the add_filter() statement is because I put all my plugins inside a class and you need to write all callback functions this way. If you’re not using a class, the add_filter() statement would be:

add_filter( 'postbox_classes_{post_type_name}_{metabox_id}, 'add_metabox_classes' );

The add_filter() statement works like this: the {post_type_name} is exactly that, the name of your post type. In my plugin, it would be “slushman_portfolio”, but if you’re doing this with the built-in WordPress posts, it would “posts”. The {metabox_id} is the id attribute of the metabox for which you want to apply the filter.

The add_metabox_classes() function grabs the $classes array and adds your additional class to the end, then returns the array. When the metabox gets created, the $classes array contains all the classes that are put into the class attribute.

Now, you’re all finished. The class you want to add to your metabox is added. I’ll write another tutorial on how to use jQuery to show or hide that metabox based on the value of the radio buttons.

 

EDIT (4/7/2014):

I’ve recently updated this method in four ways to make it simpler and easier. First of all, the $classes parameter passed in from WordPress is an array, so make sure the parameter itself is optional by assigning it as a blank array if its empty. Second, create an array of the class or classes you’d like to add. Third, check the existing $classes array to make sure you don’t add a class that’s already in there. Fourth, instead of using the array_push function, just assign it to the next place in the $classes array using the brackets after the variable. Check it out:

function add_class( $classes = array() ) {
	$add_classes = array( 'new_class1', 'new_class2' );
	foreach ( $add_classes as $class ) {
		if ( !in_array( $class, $classes ) ) {
			$classes[] = sanitize_html_class( $class );
		}
	} // End of foreach loop
	return $classes;
} // End of add_class()

BP Profile Video Widget for BuddyPress updated to 0.3

I released the 0.3 update for BP Profile Video Widget earlier today.  This update includes one big change: the elimination of the Service profile field.  The plugin will auto-detect the service being used based on the video’s URL.  I also included support for the new Youtube short URLs and embedding of Facebook videos.  I’d happily include other video services, but I’ll need some feedback as to which ones, so if you have uggestions, let me know in the comments!  Otherwise, happy updating!

ArtistDataPress Version 0.4 released!

Version 0.4 brings major changes to ArtistDataPress.  Most noticeably, you’ll see tabs on the options page now, with one dedicated to your choice for how your show listings appear on the page.

ArtistDataPress Layout Settings page

ArtistDataPress Layout Settings page

I’ve added a second layout option there and you should also notice the preview uses your actual data!  FYI, if your feed is empty or you don’t have a feed entered, I’ve got some example data in there to show you what it would look like with data.  Underneath, I’ve built a templating system, which will make it easier to add new layouts for both the page/post version and the widgets.  Version 0.4 includes two layouts for the page, Classic and iCal, and one for the widget, Classic.  I’ll be adding new layouts from now on, hopefully adding some cool options that will make displaying your show listings much more visually interesting.  Or at least different.

ArtistDataPress "Classic" Layout

ArtistDataPress “Classic” Layout

ArtistDataPress "iCal" Layout

ArtistDataPress “iCal” Layout

On a related note, if you’ve customized the CSS for your shows page, it will need to be updated.  I changed the CSS naming scheme for ADP to make it easier to add more layouts in the future.  The scheme for IDs and classes for all ADP properties is now: slushman_adp_(layout name)_(property name).  For example, the div containing the date and time on the Classic layout  for the Classic layout would be: slushman_adp_classic_date_time.  For the iCal layout, it would be: slushman_adp_ical_date_time.  Make sense?

I also fixed a bug relating to the Google micro-formatting I added a few updates ago.  Google can look at your page and, based on the formatting and meta data, can display your events in search results.  Part of that micro-formatting requires knowing the zip code where the event takes place.  Some artists use their “past” feed instead of the “future” feed, which causes an error with the zip code because ArtistData only started adding the zip code to shows in February of 2010.  Meaning any shows before then would throw an error.  Now, it simply comes back blank and no zip code is provided.  Which shouldn’t be a big deal since we’re talking about shows that have already happened. :)

So there you have it, ArtistDataPress 0.4.  Oh yeah, I also added some support links and a Paypal button on the General Settings page, in case you’re feeling generous.  It’s been a long two weeks and I know my wife will be happy to have me working on something else (or not working at all after hours).  Happy updating!

How to Add the jQuery UI Datepicker to a Plugin

I recently decided to dive into jQuery and figure out how to add a Datepicker to the Seminar system plugin I’m building for the Curb College at Belmont.  Thankfully, I didn’t need to write one from scratch because jQuery UI already makes a great Datepicker and including it in a plugin is super easy.  While I owe a great deal to Zigpress’s great tutorial, the instructions are unfortunately outdated, so I’m going to update them here.

If you’re using WordPress 3.3 or higher, then the jQuery UI Datepicker is already included, otherwise you should update your WordPress install or include the files.  In either case, you will need to include a theme for the Datepicker and add a few lines of code.  FYI, all the following code samples are written within a class, which you should be doing in your plugin, but feel free to adapt as necessary.  First thing, in your __construct() function, you’ll need to add a few lines that tells the plugin to reference a function that will include the jQuery references.

Add Actions

// Add jQuery calender
add_action( 'admin_print_scripts-post.php', array( $this, 'seminar_scripts' ), 1000 );
add_action( 'admin_print_scripts-post-new.php', array( $this, 'seminar_scripts' ), 1000 );
add_action( 'admin_footer', array( $this, 'admin_footer' ) );

In my plugin, I’m using the Datepicker for a meta box on the custom post type pages in the admin area, so I’m using the actions admin_print_scripts-post.php and admin_print_scripts-post-new.php and they both call the ‘seminar_scripts’ function.  I also have the admin_footer action call the admin_footer function.  Calling the Datepicker only on the required admin pages lowers the overhead for loading the Admin pages, keeping things as small as possible without sacrificing functionality.

Enqueue the Script and Theme

Now we have to functions to define two functions: seminar_scripts() and admin_footer().

function seminar_scripts() {
   global $post_type;
   if( 'cemb_seminar' != $post_type ) { return; }
   wp_enqueue_script( 'jquery-ui-datepicker' );
   wp_enqueue_style( 'jquery.ui.theme', plugins_url( '/css/jquery-ui-1.8.17.custom.css', __FILE__ ) );
} // End of seminar_scripts()

Seminar_scripts() starts by checking what post type you’re looking at.  If it’s not cemb_seminar (my custom post type – be sure to change this to match your plugin), then stop.  If it is cemb_seminar, then enqueue the Datepicker and it’s theme.  If you use a different folder structure for your plugin, you’ll need to change the plugins_url() line to match your structure.

For now (2/23/2012), you will need to include a theme for your Datepicker.  WordPress doesn’t include a theme for the Datepicker, but that should be resolved in a coming update.  To get a theme, go to the jQuery UI ThemeRoller, select the Gallery tab on the right sidebar, and choose your theme.  I’m using Smoothness because I think it most closely matches the WordPress Admin UI.

Clicking the Download button under a theme will take you to a page where you can select options for your jQuery UI download.  Select your theme from the Theme drop menu, select the stable version, and click the Download button.

When it finishes downloading, unzip the file and go to the css > smoothness folder.  In my plugin, I’ve got a CSS folder.  Drag the jqery-ui-1.8.17.custom.css file and images folder from the zip file into your plugin’s css folder (or wherever you pointed the plugins_url() line in the enqueue statement in seminar_scripts()).

Add the jQuery Script

function admin_footer() { ?>
   <script type="text/javascript">
      jQuery(document).ready(function(){
         jQuery('.seminar_date').datepicker({
            dateFormat : 'D, m/d/yy'
         });
      });
   </script><?php
} // End of admin_footer()

Admin_footer() includes the actual jQuery statement to make things happen on the page in the footer of your admin page.  There are two things here you will need to customize for your plugin: the selector and the date format.  jQuery works by looking at the page and finding a part of the page – aka the selector – and performing the script.  My selector is the CSS class (.seminar_date) for the date field in the meta box.  You’ll need to modify that to match the CSS class (or ID) for your date field.  The date format is just how the date is printed on the page.  For my plugin, I choose a format like: Mon 2/22/2012.  You can see all the options on this page.

That’s it!  Once you’ve added all that code and uploaded the jQuery UI theme, test it out and see the Datepicker appear when you click in the field you selected in the selector.

Using SVN and Coda to Develop for WordPress

I’ve been using Panic’s Coda to develop my WordPress plugins and manage my sites and I love it.  When I published my first plugin, it took me quite a while to find any real resources on using Coda with WordPress’s Subversion servers.  It’s fairly simple stuff really, but updating plugins baffled me for the longest time and I’ve finally figured out the proper steps to do it without errors or partial uploads (as evidenced by the version 0.32 of ArtistDataPress plugin that didn’t include the widget, css, or images folders…).

Random tip: when developing, use the trunk files.  These files aren’t the ones given to the public and if you have more than one developer, this is where each of checks out the files you’re working on.

For those using Coda and wanting to develop for WordPress, these are tested instructions for updating a plugin:

Make changes as needed to your plugin files.  Be sure to update the stable version number in your main plugin and readme files.

Go into the tags folder.  Duplicate the latest tag folder in there.  When it asks if you want to update, say yes.

Change the name of the folder to the latest version number.  Say yes to updating.

Copy the updated files from the trunk folder into the newly-created tag folder.  At this point, there should be a green A next to that tag folder.

After all the files have been copied to the tag folder, click the green A.  This will add this folder to the SVN repository.  Coda will ask you to type in notes about the changes – make them as detailed as possible, this is the only thing people in the future will see when looking at why the plugin was changed to a new version.

The new tag folder and all the updated files should be added to the SVN repository.  Wait about fifteen minutes and you should see the changes reflected on the plugin’s page in the WordPress plugin directory.

If the steps above don’t work or you start getting odd errors (like you need to force an update), copy your trunk files to your desktop and remove the site.  Then add the site back and check out the repository again.  Then follow the steps above.  I just ran into this today (2/11/2012) and this worked for me.

How to Change the Welcome User Email

I recently needed to customize the welcome new user email that goes out when WordPress registers a new user. While there are several plugins that handle that, I wanted to learn how to do myself (if anything, just to learn). After comparing several plugins and code I found on StackExchange, I came up with this plugin.

<?php

/*
Plugin Name: Slushman Welcome Email
Plugin URI: http://slushman.com/plugins/slushman-welcome-email
Description: Customize the output of the welcome email sent by WordPress.
Version: 0.1
Author: Slushman
Author URI: http://slushman.com
License: GPLv2

**************************************************************************

  Copyright (C) 2011 Slushman

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General License for more details.

  You should have received a copy of the GNU General License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.

**************************************************************************

*/

// Redefine user notification function
if ( !function_exists( 'wp_new_user_notification' ) ) {

    function wp_new_user_notification( $studentID, $plaintext_pass = '' ) {

		// URLs
		$site_url = site_url();
		$seminar_url = site_url( 'seminars/' );
		$login_url = wp_login_url();
		
		// Email variables
		$student 			= new WP_User($studentID);
		$student_data 		= get_userdata( $studentID );
		$firstname 			= $student_data->first_name;
		$student_login 		= stripslashes( $student_data->user_login );
		$headers 			= 'From: CEMB Seminar System - DO NOT REPLY <seminars@curbcollege.info>' . "rn";
		$blog_name 			= get_option( 'blogname' );
		$admin_subject 		= 'New User Registration on ' . $blog_name;
		$welcome_subject 	= 'Welcome to the CEMB Seminar system!';
		$welcome_email		= stripslashes( $student_data->user_email );
		$admin_email		= get_option('admin_email');
		
		$admin_message = 
<<<EOT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div class="content">
			<div class="wrapper">
				<p>New user registration on your blog: {$blog_name}.</p>
				<p>Username: {$student_login}</p>
				<p>Email: {$welcome_email}</p>
			</div><!-- End of wrapper -->
		</div><!-- End of content -->
	</body>
</html>

EOT;
	
		$welcome_message = 
<<<EOT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div class="content">
			<div class="wrapper">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td align="center" valign="middle" bgcolor="#141415"><img src="http://makemeanexpert.com/beta.curbcollege.info/wp-content/uploads/2011/08/header.jpg" /></td>
					</tr>
					<tr>
						<td><br /><br />
							Hello {$firstname},<br />
							<br />
							Welcome to the new CEMB Seminar system! You can log in to change your password and email address, as well as see your seminar credits and which seminars you've attended.  When you receive credit for attending a seminar, you will recieve an email confirming your attendance credit, how many credits you've earned so far, and any upcoming seminars (if you still need some credits).<br />
							<br />
							To log into your account, go <a href="{$login_url}">visit the new seminar site</a> and use the credentials below.<br />
							<br />
							Your Username: {$student_login}<br />
							Your Password: {$plaintext_pass}<br />
							<br />
							See you at seminar!<br /><br />
						</td>
					</tr>
					<tr>
						<td style="background-color:#141415;">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td colspan="3">
										<center><img src="http://makemeanexpert.com/beta.curbcollege.info/wp-content/uploads/2011/08/emailfooter.jpg" style="width:700px;height:80px;" style="align:center;" /></center>
									</td>
								</tr>
								<tr>
									<td align="right" valign="center">
										<a href="{$site_url}" style="color:#fffffe !important;width:234px;">Curb College Info</a>
									</td>
									<td align="center" valign="center">
										<a href="{$seminar_url}" style="color:#fffffe !important;width:234px;">Seminar Page</a>
									</td>
									<td align="left" valign="center">
										<a href="{$login_url}" style="color:#fffffe !important;width:234px;">Seminar Login</a>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div><!-- End of wrapper -->
		</div><!-- End of content -->
	</body>
</html>
EOT;

		wp_mail( $admin_email, $admin_subject, $admin_message, $headers );
		wp_mail( $welcome_email, $welcome_subject, $welcome_message, $headers );

	} // End of wp_new_user_notification()
	
} // End of 'if wp_new_user_notification doesn't exist'
	
?>

Thankfully, wp_new_user_notification is a pluggable function, which means it can be overridden with a plugin. This simple plugin replaces that function and allows you to customize the HTML however you need it displayed. There’s no admin page for it, you simply edit the HTML in the file itself, save it (or update it if you’re using the Plugin Editor in WordPress), and your new welcome message will be shown when a new user is registered.

I chose to use the heredoc technique for the message for the simplicity. Any PHP variables you surround with brackets and put in the HTML will be replaced with the variable’s value, so it’s much simpler to figure out how the message will appear to the user.