Finally. An easy way to style dropdowns (select elements)

Do you know what I hate the most about CSS? Styling form elements.

Yes, most browsers provide some sensible defaults, but clients never seem to want those in their designs. Good luck getting the form to look the same across all browsers. Some even say it’s downright impossible.

Do you know what I loathe about CSS? Styling dropdowns (select elements).

It may be simple to style the select box itself, but what about the options? As far as I know, no browser provides a way to do so.

On a recent client project the designer requested custom styling for both the select box and its options. After throwing a fit for 30 seconds I went to work on finding someone who had been kind enough to do this for me. Eventually I came across Select.js from the wonderful team at HubSpot.

How does it work? Well. I haven’t really looked into the code too much so for now I’ll just say “Magic.” All you have to do to use it is include the proper javascript & CSS files, add 3 lines of JS to your project and you’re good to go! Check out the documentation for all of the details. It’s even easily themeable!

Here’s my client’s form after Select.js has been applied:

Nice Form

 

If you’re looking for something geared towards more complex dropdowns, take a look at Chosen from the Harvest team.

Packaging your WordPress plugin with Grunt

A show of hands, please!

For those of you who distribute their own plugins, who enjoys selecting your plugin files and directories, compressing them and then uploading that zip file to the server for distribution every single time you wanted to release a new version?

…crickets…

Continue reading Packaging your WordPress plugin with Grunt

Easy-peasy sites on Varying Vagrant Vagrants

My love for Varying Vagrant Vagrants is no secret. Just like Franks Red Hot, I use that s*** on everything. I started using it back in the summer of 2013 and haven’t touched Mamp, Xampp, DesktopServer or Parallels since. Why would I bother when I can have a perfectly configured WordPress installation in two terminal commands?

Continue reading Easy-peasy sites on Varying Vagrant Vagrants

Update to Multisite Maintenance Mode for WordPress

MMM Admin Screen

My little plugin that I created for a former employer, Multisite Maintenance Mode for WordPress has finally been updated. This latest update takes care of some long-standing requests from users in the support forum as well as some emails directly to me. For those who waited so long, I apologize.

Why should you use this plugin?

Many maintenance mode plugins block the content for all visitors. This isn’t terribly useful, especially if you have a high traffic site. More traffic = more money. Most of the time you only need to keep anything in the database from changing. This plugin does just that for WordPress multisite installations.

Changelog

  • Added internationalization functions to all the strings.
  • Added a .pot file to allow others to translate the plugin.
  • Now using the proper actions to save the plugin settings.
  • Fixed ‘Headers already sent’ error upon save.
  • Consolidated the PHP for easier maintenance.
  • Added filter mmm_allow_user_with_capability. Allows you to change the minimum capability required in order to access the WordPress backend.
  • Ready for WordPress 4.0

If you would like to contribute a translation, go a head and fork the repo then submit a pull request. Otherwise, you can find the plugin on the WordPress.org Plugin Repository

What I wish I knew when I started developing WordPress plugins

I stared at my laptop in disgust. We had just wasted an hour chasing a problem with a small (but not insignificant) part of our plugin all because we had used a function that wasn’t supported in a certain version of PHP. It was something so simple yet it had a business-halting effect on a number of our users.

Starting down the road of plugin development

Continue reading What I wish I knew when I started developing WordPress plugins

My Talk on WordPress + Vagrant

Before we get started, I want to apologize for how late this post has come (My talk was on October 1).

Anywho…

Fact: Starting a project sucks

Kind of. Getting that contract signed and seeing that deposit clear the bank is an amazing feeling. What’s next? Getting the client site setup on your computer. That’s the part that sucks. Let’s think about how most of us started with development environments. XAMPP and MAMP are a great start, but it takes up a good amount of time to setup a new WordPress site. How long does it take you to complete the following steps? Continue reading My Talk on WordPress + Vagrant

Making the Mundane Magical (now with more alliteration!)

Setting up your dev environment for each WordPress project is arguably the most difficult step. You have to setup your server configuration, create the database then install WordPress. But wait, there’s more! After all of that you then install your plugins and themes, then add dummy content. Two hours later you have an environment that doesn’t resemble your production server or have all the tools you need for development.

You are a developer, not a server administrator. There’s a better way.

Join me on Oct. 1 at Improving Enterprises (6:15pm) to learn about WordPress development with Vagrant. I’ll show you how to make the setup process quick and painless while giving you the tools you need for effective development. Not a WordPress developer? Even you will come away with knowledge to help you in whatever language or library you choose.

If you’d like to follow along during the talk, I’d suggest getting your laptop setup in advance

You can RSVP here. See you there!

Setup Instructions

You’ll need to have two things installed on your laptop in order to follow along:

Yeah. That’s it. I hope you weren’t expecting more.

Powering Through the WordCamp Hangover: Re-Think Your Assumptions

My previous posts in this series have been pretty technical, so for the last two posts I’d like to tone it down and focus on some bigger-picture ideas. This post is about re-thinking how users interact with your theme or plugin.

Prepare your theme/plugin for translation

Do you think your theme users all speak the same language? Think again. As worldwide WordPress usage continues to grow so will the number of users likely to make use of that wonderful theme you just created. Do you need any more encouraging? How about explosive growth in Internet usage in Asia and the Pacific islands. Now, I’m not saying you need to learn 20 languages and translate your theme all on your own (though you could). There are plenty of people out there who are willing to translate your theme as long as you’ve made an effort to follow some WordPress best practices.

WordPress offers a few functions to get your theme or plugin ready for translation and it takes very little effort on your part. Shannon Smith did an excellent touching on almost everything you needed to know about WordPress i18n (that’s internationalization) but I’d like to go over a few things with you. You should use these functions for every hard-coded string in your files. Here’s a simple example:

__( 'Read more', 'textdomain' );

Let’s break this down. ‘Read more’ is the sting you want to translate and ‘textdomain’ is the, we’ll, text domain. It tells WordPress which language files to load. Usually you will change ‘textdomain’ to something unique to your theme/plugin.

I don’t want to spend too long on this topic because there’s still much more to cover. WordPress i18n could take up an entire blog to cover. I just wanted to get you interested.

Make your theme play nice with mobile devices

I don’t know much about you but I can tell you that your site has been viewed on a mobile device. More than once. What did those visitors see? Did they have to pinch, pan and curse just to view your content? If so, you should be converting your site to a responsive design. Now. Not tomorrow. How can you argue with the great Ethan Marcotte? And with the ever-increasing growth of mobile web usage I don’t see how you could continue with a ‘desktop-only’ experience on your site.

That’s all I’m going to say on the subject. It’s 2013. Get with the program.

Create great experiences on the backend

As WordPress continues to grow as an application framework the complexity of the back end will grow along with it. As the director of UI engineering for 10up, Helen Hou-Sandi has brought sanity to what could otherwise be mass chaos for the solutions 10up creates for its clients.

While it’s so easy to be content with the structures built into WordPress, let us all learn from the examples Helen showed us at WordCamp San Francisco. For structured data create meta boxes and fields for easy entry. Make it easy for users to find the content they are looking for by customizing the post lists. When you have the privilege to create plugins that change a great deal of how WordPress operates, push yourself to make custom admin screens that provides the user an exceptional experience. You’ll likely learn new technologies such as AJAX in the WordPress admin and Backbone.js, making you a well-rounded developer.


Do you have other ideas? Share them in the comments.