Building Your First Widget

So, I spoke at WordCamp Nashville today and I had an absolute blast! The other sessions were very informative, I especially enjoyed learning about some tools for debugging plugins and themes. My session was the last one in the developer track. You can download my boilerplate widget code using the nice, giant green button on my home page or the link below. Here are my slides, I hope you learn something new:

Download the Boilerplate Widget code

WordCamp Nashville 2013

I’m excited to say I’ve been invited to speak at this year’s WordCamp 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 to WordCamp, I’d love to meet you and we can all learn more about WordPress together!

Six Steps to Secure Your WordPress Site

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 sites. 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 secure 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. From my first-hand experience, changing this is an extremely important to making your site secure. Attackers always start by using the “admin” username and just having it as a valid account will leave you open.

Don’t stop there though!

2) Beef-up your passwords. While standard practice for a secure password is to use eight digits 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 to come up with a secure password? 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:

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 and secure your site 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. While it doesn’t seem like this can help make your site secure, this can prevent certain types of attacks as well as 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.

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 the $type parameter accepts any string, not just the WordPress defaults.

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.

/**
* Default WordPress submit() parameters
*
* @param string $text changes the text on the button
* @param string $type determines the style of the button. WordPress styling options:
* primary - the default
* secondary
* delete
* custom - add your custom class for styling here!
* @param string $name sets the name attribute for the button, its "Submit" by default.
* @param string $wrap determines if the button is wrapped in paragraphs tags or not, the default is true.
* @param array $other_attributes sets other attributes for the button.
*/
submit_button( 'Whatever Text', 'my-custom-class' );
view raw wp-submit-button hosted with ❤ by GitHub

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. You can see this method at the top of the gist below.

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.

/**
* The simplistic way to add a custom class to a specific metabox
*
* @param array $classes The current classes on the metabox
* @return array The modified classes on the metabox
*/
function add_metabox_classes( $classes = array() ) {
return array_push( $classes, sanitize_html_class( 'my-custom-class' ) );
} // add_metabox_classes()
/**
* {post_type_name} The name of the post type
* {metabox_id} The ID attribute of the metabox
*/
add_filter( 'postbox_classes_{post_type_name}_{metabox_id}, 'add_metabox_classes' );
/**
* The more thorough way to add a custom class to a specific metabox
*
* Uses the same add_filter call, but its easier to add additional classes
* and it checks if new class is already there.
*
* @param array $classes The current classes on the metabox
* @return array The modified classes on the metabox
*/
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;
} // 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!