Change the WooCommerce Auto Generated Password

In WooCommerce, there’s a setting under WooCommerce > Settings > Accounts to automatically generate a customer’s password. This way user’s only have to enter an email when they register (with the password generated and sent to their email address), similar to how WordPress handles registration by default.

WooCommerce uses WordPress’ core wp_generate_password() function to generate the password, but you may want to change this.

You can do this by filtering woocommerce_new_customer_data, declared around line 102 of woocommerce/includes/wc-customer-functions.php:

So, if for example you wanted to make the password generate as the user’s email, you could use the following:

Or perhaps you want to use the wp_generate_password() function but customise it a little bit, so that it’s only 6 characters and uses all special characters. Something like this would work:

If it helps you out or you were able to customise and make something even more awesome, let me know!

How to Fix the WooCommerce Quantity Field in Firefox

As I’ve been settling into my new position as a WooCommerce Support Ninja at WooThemes, I’ve been seeing the following issue appear for some users in Firefox.

It’s important to note, that this is not actually an issue with WooCommerce, but often caused by Javascript conflicts/errors on one’s site.

You may notice an issue with the quantity field on a product’s page, where a user can’t use the jQuery number input form. It seems to be just another set of up/down arrows inside of the text box, with no ability to actually write a quantity number.

If you’re having trouble solving the Javascript problem (you should solve it), and you’re too lazy to get help and fix it (really, you should fix it), you can add the following to your custom.css / style.css file or with a plugin like Simple Custom CSS:

https://gist.github.com/bryceadams/d7d53ff7f831ba87d612.js

I hope that helps you out!

Check if Another WordPress Plugin is Active

Recently I’ve been spending a lot of time working on my new plugin Recipe Hero. Essentially, the plugin is an open-source, free item, but the extensions that I (and others) make for it, can be either free or premium.

Similar to WooCommerce, Easy Digital Downloads, WP Job Manager and even WordPress itself, the core item itself is a simple, sufficient plugin, but the functionality to take it that little bit further and do something ‘out of the norm’, should be in its own separate ‘extension’ or ‘add-on’.

However, what if a user doesn’t realise that and tries to add an extension without the ‘core’ plugin? Or how about when a user deactivates the core plugin but forgets about deactivating the extensions. We need to put a check in for that or you’re going to be dealing with some angry users.

WooCommerce actually has a great article on Creating a plugin for WooCommerce, that gives it a great example of how to check for another plugin. A lot of people like to use is_plugin_active, but I like WooCommerce’s method better, as is_plugin_active is a little bit less flexible. Themergency also has a post looking at different methods to check if a plugin is active.

The approach WooCommerce takes is to check if the woocommerce/woocommerce.php file is in the array of active plugins, using PHP’s in_array function.

So if we wanted to check if WooCommerce was active, they suggest to use the following:

In a Recipe Hero extension, Recipe Hero Likes, I need to check if Recipe Hero is active before requiring a couple files that contain most of the extension’s functions. The following is what I use:

How do you like to check if a plugin is active? Do you think there’s an issue using in_array? Let me know in the comments!

Adding a Header Image to Your WordPress.org Plugin

If you haven’t done it yet, I’m going to help you add a header image to your WordPress.org plugin.

Screen Shot 2014-06-24 at 4.52.41 PM

The plugin header image dimensions need to be 772px x 250px. You may also want to include a retina-ready high-res image, which would be 1544px x 500px.

In your plugin’s SVN repository, there are a few folders. You need to add your image to the assets folder, with the image names as follows:

  • banner-772×250.png
  • banner-1544×500.png

To make it even easier for you to add your own header image, I put together a very simple template file. It’s pretty much just set up with the correct 772×250 dimensions and the matching filename.

Download 772×250 Header Image Template

Stop Including Icon Fonts You Don’t Need

WordPress Theme & Plugin developers: stop it. Sure, I used to do it. I’m not ashamed. I don’t hide from the truth. However, I’ve realised my mistakes and so should you.

Screen Shot 2014-06-21 at 6.40.42 PM

Since WordPress 3.8, the super useful and awesome Dashicons has been included with every copy. You can find it’s home on GitHub here too.

There are almost 200 icons included with it, enough to cover almost every icon-requiring situation you’ll get into. You can easily include them on the front-end and back-end of any site, just by including the CSS for an icon or adding it to a span/div/etc.

For example, just add something like this to your site:

https://gist.github.com/bryceadams/f5112cd6858a1f8317d6.js

With no extra resources being loaded, an icon’s being displayed! Awesomeness.

Update: Devin reminded me in the comments below that most themes don’t actually enqueue Dashicons in the front-end (while a theme like Twenty Fourteen does, your standard run-of-the-mill theme probably won’t). That’s alright, just enqueue it yourself!

https://gist.github.com/bryceadams/84ea0a2bfeb881f8e34e.js

James Koster’s written a great article about using Dashicons in your theme or plugin too. Definitely check it out.

Of course, you’ll often be faced with situations that call for more icon fonts, and that’s ok. But if you can get away with using the included Dashicons set, go for it.

Keep in mind: Users will need to be on WordPress 3.8+ to see the icons! However, you should just include a fallback that will load the dashicons for 3.7 and under.

Outputting Function When Creating a WordPress Shortcode

So I was recently working on a new plugin that involved shortcodes but ran into a bit of a problem when the contents kept getting output at the top of posts/pages before the rest of the content.

Basically this happens because the shortcode is simply returning the data as soon as it’s generated it, not taking note to output it specifically where the user desires. Normally it’s because the content was echoed and not stored and later returned. You can read more about it in this great post but it’s really as simple as that.

However, I was recently faced with this issue and couldn’t figure out why! I was returning the data but it was still being output at the beginning of the post’s content before everything else. I was returning another function (that echoed the content) within my shortcode’s function but it wasn’t helping.

It looked a little bit like this:

https://gist.github.com/bryceadams/b2eef1d659507504f3b9.js

DON’T DO THAT!

What you need to do is run the function through an output buffer with ob_start(); and ob_get_clean();, like so:

https://gist.github.com/bryceadams/7d4a8343b312920c02af.js

And it works! For the PHP nerds, you may be interested why we’re using ob_get_clean(); instead of ob_get_contents(); and ob_clean(); – then check out this discussion.

How to Remove the ‘Your Ad’s’ Section from the Facebook Sidebar

I know I normally post WordPress / Web Developer related stuff but this really frustrated me and I couldn’t find a solution, so I solved it myself.

If you’ve ever run an ad campaign on Facebook, you’ve probably noticed this little information box in your right sidebar:

Screen Shot 2014-06-07 at 7.01.36 PM

Information! Yeah!

The problem is, once the campaign’s over, that box tends to stick around for a while. Personally, I found it extremely annoying and felt it was just there to subtly persuade me into running another campaign.

So if you want to hide it, here’s the solution:

Continue reading

How to Include a Retina Icon for Your Custom Post Type’s Menu Item

Here’s a quick little tip for you. Since WordPress 3.8, Dashicons has been included in the core and the menu item icons you see on the left in the dashboard are using the icon font instead of images. Why is this so cool? Well.. they’re retina ready, look awesome and scale infinitely!

So you’ve just created a new custom post type but want an awesome icon instead of the boring Posts pin icon? Well, it’s super easy.

When you’re creating the custom post type, make sure you have the menu_icon argument there and then just let it correspond to the Dashicon you want to use, like so:

https://gist.github.com/bryceadams/92ea4273a3ae09ab7392.js

Find a full list of the icons available and their CSS codes here.

For more on custom post types, visit the WordPress Codex.