22 Dec 2015

Create a click/tap dropdown menu from a simple nested list

Here's a bit of jQuery for creating a simple click/tap triggered custom dropdown menu from a nested list. First, we detect where the user clicks. If the area clicked has a parent menu class we disable its default action and then give it an 'open' class while simultaneously removing the…


18 Sep 2015

Useful developer tools and resources

Here’s a few useful tools and resources from my current stack: Bootstrap – front-end framework BrowserStack – crossbrowser testing tool, no more virtual machines Codekit – LESS/SASS compiler with browser auto-refresh and much more HTML_CodeSniffer – client-side validator MAMP – local server environment solution Real Favicon Generator – generate every flavour of favicon Sublime Text – text editor…


11 Sep 2015

Centre align image within a fluid element using jQuery

Following on from the pure CSS approach to centring an image within a fluid element, here is a jQuery approach. The CSS approach used a CSS3 method not supported in older browsers. This jQuery approach simply calculates the width and height values of the image and applies 50% negative left and top…


9 Sep 2015

Centre align image within fluid element using CSS

Centering an image within a fluid width element can be done by applying relative positioning to the containing element and by applying absolute positioning and CSS3's transform translate to the contained image. This approach is IE9+ compatible.


31 Mar 2015

Link directly to a tab in Bootstrap

Here's a couple of simple scripts to allow direct linking to tabbed content using Bootstrap 3 tabs. This assumes your tabs are using Bootstrap's 'nav-pills' for navigation. You'll need to change the target class if you're using a different style navigation.


6 Nov 2014

Fix CSS height auto in IE8+

Simple fix for using CSS ‘height: auto’ in IE8: [crayon-5e2f90ef82283080255494/] You might find that it gets overridden, if so try adding !important and/or more specificity.


3 Nov 2014

Display author meta for authors without posts in WordPress

When creating an author template in WordPress, it's normally quite straightforward to retrieve author meta. You can use WP's author template tags. However if the author has no posts in the database, these tags will not work unless you also supply the author's ID. Here's how to get it.


14 Mar 2014

Simple pure CSS equal height columns in Twitter Bootstrap 2 or 3

Here’s a simple way to achieve equal height columns in Twitter Bootstrap 2x or 3x. Typical row/column markup in Bootstrap 3: [crayon-5e2f90ef829dd176050580/] Typical row/column markup in Bootstrap 2: [crayon-5e2f90ef829e4458328867/] Simply add the following to your styles for Bootstrap 3: [crayon-5e2f90ef829e7314376003/] Or the following for Bootstrap 2: [crayon-5e2f90ef829ea408673813/] Obviously it’s better to…


21 Jan 2014

Trim your text in WordPress

A handy little WordPress function that’s been around since WP 3.3 is wp_trim_words(), this little function allows you to easily trim text to a chosen word length and gives you the option to append the text however you like. How it works: [crayon-5e2f90ef82e7a863578482/] Example usage: [crayon-5e2f90ef82e80892857697/] Read more about wp_trim_words()…


3 Nov 2013

Return a WordPress page by title

The get_page_by_title() WordPress function returns a page by its title. Useful if you need to show the content of a page within another page template, which is sometimes preferable to defining a widget area. [crayon-5e2f90ef83484829832692/]


15 Sep 2013

Remove menus and submenus from the WordPress Dashboard

Sometimes you might need to remove posts, pages, plugins or other menus and submenus from the WordPress dashboard. Here’s two handy functions put together to remove all by Chris_O over at StackExchange. Simply add these to the functions.php file in your WordPress theme then delete or comment out whichever options…


1 Jul 2013

Pagination for Custom Post Types

Insert this after the endif for your loop. [crayon-5e2f90ef83b25559668774/] Pitfalls: If you have ‘posts_per_page’ set in your loop $args, make sure it corresponds to whatever you have set in ‘Blog pages show at most’ in Dashboard > Settings > Reading. By default this is 10. If the two have different…


28 Jun 2013

Create a WordPress Single Page Website

Here’s a simple way to create a WordPress one pager with individual pages outputted as list items and ordered using WordPress’s page order option. For the menu, simply set up your menu items as custom links with each URL set to #your-page's-name. The args: [crayon-5e2f90ef83d9c345097966/] The loop: [crayon-5e2f90ef83da2299935652/] Lastly, a…


31 May 2013

Single thumbnail WordPress gallery

By default WordPress’s built-in gallery shortcode outputs all thumbnails for each gallery. But what if you don’t want the clutter of lots of thumbnails? The default gallery output code can be found in wp-includes/media.php. All you have to do is take this, customise it however you like, drop your customised code…


19 Apr 2013

Get WordPress’s categories widget to validate

Because WordPress adds a rel attribute to links in the default categories widget, posts or pages using the widget do not validate as HTML5. Although HTML5 validation is still a work in progress and subject to change, this little function will get rid of those rels and get you the…


17 Mar 2013

Add classes to parent Li tags in WordPress navigation menus

While WordPress adds many useful CSS classes and IDs to li and ul tags within menus, for some reason it adds nothing to li tags that have other lists nestled within them. This is unfortunate, as it’s impossible to add some kind of indicator (e.g. a background image) to help users…


12 Feb 2013

Creating a jQuery/CSS multi-level dropdown menu in WordPress

WordPress’s navigation HTML can look quite confusing when you first look at it with its various classes and IDs. But on closer inspection, it’s actually outputting a straightforward unordered list. The classes and IDs are added in so that you can customise it to your heart’s content. The HTML (stripped…


7 Jan 2013

Display WordPress Menu Names

Surprisingly, there’s no template tag for displaying menu names in WordPress. Here’s a simple function by Steve Jones to retrieve them: [crayon-5e2f90ef85086933017840/] And then call the function: [crayon-5e2f90ef850a9687637264/]


12 Dec 2012

WordPress specific code hinting in Dreamweaver

Code hinting is a useful little tool within Dreamweaver – it provides auto-complete hints to help with WordPress code. To set up: Go to Site > Site-Specific Code Hints At the top of the window that opens you will see a dropdown labelled Structure Select WordPress


8 Dec 2012

Key WordPress theme snippets

Tired of searching for WordPress theme code snippets? Here’s a few key ones to scatter into your HTML. Header [crayon-5e2f90ef85600141727639/] Get IE and HTML5 to play nice: [crayon-5e2f90ef85607265565735/] Comments: [crayon-5e2f90ef8560a269220983/] Title: [crayon-5e2f90ef8560d197290669/] Slogan: [crayon-5e2f90ef85610407377609/] Navigation: [crayon-5e2f90ef85613018757260/] Footer [crayon-5e2f90ef85615983116911/] Sidebar [crayon-5e2f90ef85618162700194/]