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!

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.

How to Fix the WordPress Error ‘Fatal error: Call to undefined function wp_get_current_user()’

You may be seeing the following error on your WordPress site:

Fatal error: Call to undefined function wp_get_current_user()

It’s being caused by the wp_get_current_user() being called too early. You first have to wait for plugins_loaded.

If for example you were trying to do something like:

https://gist.github.com/bryceadams/0598a529118eab052180.js

…in a plugin, WordPress may throw back the above error.

To fix it, wrap it in a function and then add it to the plugins_loaded action, like so:

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

Any questions, let me know!

Custom Download Templates for Easy Digital Downloads

Recently when developing a site powered by Easy Digital Downloads, I wanted one of my products to display differently from the others in the store.

When this problem arises with pages, we can easily create a page template to solve the problem. However, when it comes to creating custom templates for other items such as posts and custom post types, we need a plugin. That’s where the incredible Custom Post Template plugin by Simon Wheatley comes in. By installing the plugin you can easily create templates for your posts, but what about for downloads? Also very easy due to the extensible nature of the Custom Post Template plugin.

Continue reading

Add Image Sizes to Media Insert Dialog / Thickbox

This is such a cool little snippet. It’ll allow you to add a custom image size that you’ve added using <?php add_image_size() ?> to the media insert pop-up, so your custom image sizes can be inserted into posts as well as used through <?php the_post_thumbnail(); ?>.

Just add the following to your functions.php file:

Adjust as needed!