It’s often useful to add page or user role dependent classes to the body element of a page. This allows you to develop context specific styles – perhaps a different colour header depending on the role of the logged in user. Continue reading “Add Body Classes in WordPress”
Author: David Egan
Custom Google Maps
Get a customised Google map on your page.

The Google maps Javascript API v3 offers lots of opportunities to customise Google maps. This gives you the best of both worlds – the map can be styled to match the client website’s branding, whilst retaining all the functionality of Google maps. Continue reading “Custom Google Maps”
Set Up New Roots Install with Grunt & GitHub

This post shows how to set up the excellent Roots WordPress starter theme on a local LAMP stack. This is how I set up my development environment in Ubuntu 13.10. Continue reading “Set Up New Roots Install with Grunt & GitHub”
Optimise Images for the Web

If you’re using images in a website, it’s very important that they are properly re-sized and compressed. If you have megabytes of over-large images, you could potentially slow down page loading time. Continue reading “Optimise Images for the Web”
jQuery Greyscale Filter

You can filter images by means of the pixastic Javascript filter. This can be used to desaturate images – making them greyscale. Continue reading “jQuery Greyscale Filter”
Add Related Content to a Post

When someone has read your content, it can help keep them engaged with your site if you suggest related content for them. Whilst there are plugins that create links to related content by means of related taxonomies, I prefer to give site admins the option of setting related content manually. Continue reading “Add Related Content to a Post”
Dynamically Generated Soliloquy Slider
Programmatically add soliloquy sliders in your themes.

Soliloquy is a premium WordPress plugin that allows you to create and customise excellent responsive image sliders with ease.
Though I find Soliloquy very easy to use, there are times when you’ll want to build sliders automatically, so that site authors (clients) can’t inadvertently mess things up. Continue reading “Dynamically Generated Soliloquy Slider”
Using Font Icons: Font Awesome
Take advantage of the excellent free font-icons that come bundled with Twitter Bootstrap – even if you’re not using Bootstrap!

The font-awesome icon set is available as a font. You can find more info about font-awesome here: http://fontawesome.io/. Continue reading “Using Font Icons: Font Awesome”
WordPress Custom Post Types: Archive Pages

Don’t you hate it when you’re banging your head against a problem you’ve already solved? When you forget one key piece of information that unlocks the problem in an instant?
In this case, I set up a site with custom WordPress post types (in this case “Projects”), and I was trying to create category archive pages to display project teasers. Continue reading “WordPress Custom Post Types: Archive Pages”
Custom Post Types & Thesis 2

I love to build WordPress websites, and I really love the Thesis framework. Thesis takes care of the heavy-lifting and allows you to focus on the style and functionality of a website.
When Thesis 2.0 came out last year, it was a big surprise – the framework changed almost beyond recognition. At first, change was painful. All those comforting little familiar nuances were gone.
I felt that after 3 years learning how to deploy WordPress sites using Thesis, it was back to the drawing board.
However I needn’t have worried – after a couple of weekends digging in to Thesis, I realized that the framework is more powerful than ever.
Custom Post Types & Thesis
Most recently, I needed to create WordPress custom post types. Thesis 2 handles this with ease – when you create a custom post type, Thesis 2 recognises this and automatically generates a HTML template for the new post type.
This template can be customised to your heart’s content, and the Thesis query box helpfully allows you to select posts, pages or your custom post types – giving you full control over how your custom post types are displayed.
Once my custom post types were set up, I needed to create a customised back-end, so that site administrators could easily add data. For example, in my “Person” custom post type, I needed it to be easy for administrators to add biographical data. In a similar way, I needed associated content to be linked – for example, the administrator should be able to select projects that the person has been involved with, and these should be displayed on that person’s page.
Once the backend has been built and content added, it isn’t immediately obvious how to display this data on the site using Thesis. By using Thesis hooks, you can create PHP functions to call the custom field data, and have this fire in the correct place in your page template.
Thesis Hooks: Custom Field Content
Here’s how you get custom fields into your Thesis page template:
- Add the function that calls your custom field in the customs.php file of your active skin
- Link to this to your page template by means of Thesis hooks
For example, to display the Advanced Custom Fields field “job_title” in a Thesis 2 template, add the following code to your skin’s custom.php. The “get_field” and “the_field” functions are part of the Advanced Custom Fields plugin API, and the slug for my custom field is “job_title”.
function add_job_title_field() {
//Next line: don't run function if field is empty
if (get_field('job_title')!= ""){
?>
<h3 class="subheading"><?php the_field('job_title'); ?></h3>
<?php
}
}
add_action('thesis_hook_container_job_title_top', 'add_job_title_field');
You then add the hook “job_title” – as referenced in ‘thesis_hook_container_job_title_top’ – where you want the field to display. You do this by entering the hook name in the “Unique Hook Name” field of the container in question, as shown in the screenshot below:
I created empty containers that use hooks to fire the functions, and I can attach a class or ID to the container for styling purposes. Sorted!
This is a really useful function – made me realise how powerful Thesis 2 is…