WordCamp Nashville 2013

I’m excited to say I’ve been invited to speak at this weekend’s WordCamp here in Nashville. I’ll be speaking on Building Your First Widget and giving away from boilerplate code here on my site to get you started with building your first widget. I’ll also post my slides here after Saturday’s talk. I hope anyone near Nashville can come, I’d love to meet you and we can all learn more about WordPress together!

Six Steps to Protecting Your WordPress Site Against Attacks

There’s a great breakdancing move called 6-step. If you’ve seen breakdancing, you’ve probably seen this before, but, like me, didn’t know what to call it. Basically, the dancer supports himself on his arms while moving his feet around in a circle. It’s great for getting momentum and launching other moves.

Why do I bring this up? You may have heard about the ongoing attacks against WordPress blogs. It appears someone is using up to 90,000 different IP addresses to launch brute-force attacks against sites built with WordPress and are gaining access to some sites. Stupidly, they are trying to gain access with the username “admin” and trying to figure out the password for said user.

Here’s the WP 6-step, which will help protect your WordPress site against attacks:

1) If you have a username “admin” on your site, create another administrator user with a different name, log in as that user, and delete “admin”. If you don’t have a user named “admin”, they will just waste their time attacking your site.

Don’t stop there though!

2) Beef-up your passwords. While standard practice is to use an 8-digit password with a mix of lowercase and uppercase letters, numbers, and symbols, there’s a better way. Create a password from a story. Something memorable to you. Something people can’t easily find out without knowing you personally.

As an example: My band and I played a show in Johnson City, TN at a coffee shop and while we played one song, this guy gets up and starts dancing. He was probably in his late 50’s and he’s doing this wiggly, hippie dancing literally feet from us. We were trying not to die laughing while finishing the song. After the show, we discovered the coffee shop owner also owned the laundromat next door and had to go fix a washer. Did I mention it took an hour longer than normal to get there because a bunch of big rigs crashed on the same stretch of highway?

Some passwords one could glean from this story: DanceWasherBigRigCoffee, CoffeeWasherJohnsonLaundry, HighwayCoffeeDanceHippie, etc. See how easy that is? You could then throw in the year and an exclamation point, just to have all the traditional password requirements too. Attackers wouldn’t know the story and the length of the password is over 15 digits, making it’s basically impossible to figure out using a brute-force attack.

3) Limit login attempts. Part of this current attack is trying different passwords over and over again until they get it correct. While its silly WordPress allows this, you don’t have to. There are several great security plugins that allow you to limit login attempts before locking that IP address out of your WordPress site:

  • Better WP Security
  • WordFence
  • Limit Login Attempts

I’m sure there are more, but those are three I have experience with. Each have their upsides and shortcomings, but anything you can do to thwart an attacker is a good thing.

4) Use some kind of caching plugin. WordPress, by itself, is pretty good, but it still needs to talk to the database to load each page. Caching plugins make copies of everything so your site loads faster. This can prevent certain types of attacks and sudden increases in popularity.

5) This is standard WordPress advice: keep WordPress, plugins, and themes up-to-date. I usually advise people to check once a week. You should be adding content each week anyway, so knock out both at the same time.

6) Delete unused plugins and themes. While this won’t help much with the current attack, these unused items could cause problems in the future. And if you’re not using them, why keep them around?

See? Six simple steps and you’re more secure and don’t need to worry about people attacking your site. Yeah ok, I’m not a comedian and the dance thing was random. But seriously, take steps to secure your site before you have to call someone like to me to fix it.

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:


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


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">
            dateFormat : 'D, m/d/yy'
} // 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.