Introducing Recipe Hero

I’ve been working on something close to my heart for the past few weeks. It’s called Recipe Hero and it’s going to change the way we eat food.

UPDATE: Website’s Up!

Okay, that’s a little much.


It’s pretty much just a new WordPress plugin for easily adding recipes to your WordPress site. It has a lot of neat features packed into it, from automatic mark-up to its own template engine.

I wanted to make it as easy possible for WordPress users to share their amazing food, and I feel like Recipe Hero will do just that.

It’s available now for free on the Plugin Repository.

I’ve got a lot of awesome stuff planned for it. In the next few weeks I’m hoping to move it out of beta into Version 1.0.0 (we’re at 0.6.7 at the time of writing). I’m building the website too at the moment, trying to get all the documentation and a few add-ons ready for it too.

It’s also a completely open-source, GPL-licensed project, and I would love for you to stop by the GitHub Project and contribute in any way you can.

Adding a Header Image to Your Plugin

If you haven’t done it yet, I’m going to help you add a header image to your 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:

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!

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.

A New Captain Theme

Captain Theme started over 2 years ago. As I’ve grown as a web developer, so too has Captain Theme.

In the 18 months I haven’t given it the time it deserved. Themes and plugins went un-updated and I’m sorry for that.

I’m back to give it another go and I feel I’ve got a lot more to bring to the table this time around. I’ve already released a new plugin this month, Captain Admin. It’s a premium plugin being sold over at CodeCanyon for $18. I feel it offers a pretty cool set of tools to customise the WordPress admin!

There’s also Captain Team, another new plugin I’ve just released. You should check it out too!

The site has just been given it’s 4th (or maybe 5th?) make-over. I’m happy with how it’s turned out. It’s originally based on James Koster’s Highwind – an awesome free WordPress theme, customised to suit the purpose of the Captain Theme site. So what is the purpose? Really just to provide an easy way to access documentation, support and see the plugins I’ve put together over the years, all in one place.

At the moment I’m working on something pretty special. It’s going to be two things:

  • Free
  • Food Related

I spent a lot of time trying to decide whether or not I should release it as a premium plugin. I decided to head in the same direction as some of the big guys like WooCommerce, Easy Digital Downloads and WP Job Manager and take the free route. I still need to put food on the table though so I will be offering some premium add-ons for a small price too.

I’ll post more about it soon. For now, back to coding!

coding with chloe 2(

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:


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

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:

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:

…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:

Any questions, let me know!

PHP: Convert 24 Hour Time to 12 Hour Time (and Vice Versa)

I just came across this in a time of need and thought I would share.

If you want to convert a time in 24 hour format, such as 14:00, to 12 hour format, which would be 2PM, you can use the following code.

24 Hour to 12 Hour:

Additionally, if you wanted to convert the 12 hour time format to 24 hour, you can use the next bit of code.

12 Hour to 24 Hour:

PS. Sorry I haven’t posted in a long long time. Been travelling, living, etc. Coding again and working on some new stuff so will try to post more often and reply to questions. Cheers readers!