Shane Osbourne
I'm a freelance Web Developer covering both front & back end development. I'm passionate about best practices and I'm always looking to incorporate the latest 'new' thing into projects.
Tutorials
  • Code
    Cross-Platform Sass and Compass in WordPressSass compass preview
    31 shares
    I find it particularly interesting when other developers share their workflow tips and tricks. It can be very helpful to take a sneak-peak into somebody else's development world and find out what tools they are using to make their own life easier. Well today I'm going to show you a portion of my own workflow - specifically how to use Sass and Compass when developing a WordPress theme. Instead of simply explaining the configuration and tools needed, I thought it would be better to start from scratch and show you exactly what's needed to get going when developing a WordPress theme that uses Sass and Compass. I hope this article sounds interesting to you and I'm looking forward to sharing a small part of my workflow with you - I encourage you to do the same.Read More…
  • Code
    Using Backbone Within the WordPress Admin: The Front EndThumbnai02l
    Welcome to the second part of Using Backbone Within the WordPress Admin. In the first part, we set up the 'back-end' of our plugin and now in the second part we'll finish off by adding our 'client-side' or 'front end' functionality. For an overview of what we're building in this tutorial along with our folder structure and files, please review the first part.Read More…
  • Code
    Using Backbone Within the WordPress Admin: The Back EndThumbnai02l
    11 shares
    The rumours are true! The WordPress Admin Panel is now using Underscore and Backbone! This means that with minimal effort, we can begin to utilise these fantastic JavaScript libraries in our own plugins. This tutorial will show you exactly how you can do that. We'll create the Admin part of a Quiz plugin. We'll use a simple Custom Post Type to save Questions, and then within each question we'll add a meta box that will allow us to enter up to 4 answers and select which is the correct one. We'll be going through how to use templates, how to hook into click and key-up events, how to save data back to the WordPress database and most importantly, how to 'get your truth out of the Dom', as the creator Jeremy Ashkenas likes to put it.Read More…
  • Code
    Improving Your Work-Flow - Separate Your Mark-Up From Your Logic!Vr
    17 shares
    In this tutorial I'm going to explain a technique that allows you to utilize a template file for all of your HTML needs! No longer will you need to 'echo' strings from inside your functions, or worry about dropping in and out of PHP just to output some mark-up. I've spent many years utilising MVC frameworks (such as Zend and nowadays Laravel) where it's a best practice to separate your 'programming logic' (functions or methods) from your 'view' (the resulting HTML mark-up). This always leads to a more maintainable code-base and it's actually a lot easier to write. Having this background prompted me to come up with a similar solution when developing plugins for WordPress! It's nothing too fancy - it's just a little 'helper' that will allow you to remove all the HTML snippets and awkward 'escaping' from your functions and place them safely away in their own 'template' file. So, I hope this tutorial sounds interesting to you and without further ado, let's begin!Read More…
  • Code
    Use Geo Location to Give Your Customers Driving DirectionsThumbnail
    16 shares
    This tutorial is an update to a previous one in which we looked at how to show driving instructions directly on a WordPress Website using the the Google Maps API. In the first tutorial, our users had to manually enter their address into a form on the website – then the directions would be displayed. This was a good example of how to use the Google Maps API but the ability to detect a users' current location, in addition to being able to enter an address manually, was a feature often requested.Read More…
  • Code
    Give Your Clients Personalised Screencasts in the WordPress Admin PanelPreview
    19 shares
    In this tutorial, I'll show you an easy way to provide your clients with some personalised video screencasts directly in the WordPress Admin Panel. We'll be doing this using a open-source media player and a little bit of PHP trickery to automate the process of making new videos available to the client.Read More…
  • Code
    Give Your Customers Driving Directions With the Google Maps APIThumbnail 2
    12 shares
    Instead of just showing your business location on a Google Map, why not offer your users the opportunity to get driving directions on the same page? No need for them to open up a new browser window and find it themselves, we can do better than that! Using the Google Maps API within your WordPress website is a relatively simple process and we'll explore exactly how to do it in this tutorial.Read More…
  • Code
    Create an FAQ Accordion for WordPress With jQuery UIThumbnail
    49 shares
    Creating an FAQ section for your WordPress website is incredibly simple. We're going to use WordPress Custom Post Types for the questions & answers. Then we'll use a jQuery UI accordion to make a nice cross-browser accordion widget. Finally we'll assign a shortcode so that we can put our FAQ on any page or post.Read More…