Highwind 1.2.2 is here!

1.2.2 is not a major release but it includes a neat little feature that I thought I’d blog about.


Highwind 1.2.2

Since introducing the Content Background Colour option, it bugged me that when the content background was a different colour from the main background, the header and footer still spanned the full width of the browser. It looked wrong.

Setting the content background to a different colour caused the header to 'overflow' that content area.

Setting the content background to a different colour caused the header to ‘overflow’ that content area.

Sitting down and thinking about this I came up with a very simple solution. In Highwind 1.2.2 there’s a query in the body_class filter which compares the background & content background colour settings. If they match the header / footer span full width. If they don’t match, they don’t. Et voila!

Now the header image is cropped appropriately.

Now the header image is cropped appropriately.

There’s a few other tweaks and fixes as well. Read the full changelog here.

Download Highwind

WP-ragadjust – adjust your rag, WordPress style!

banner-772x250

Adjust your rag? What??

In typography, “rag” refers to the irregular or uneven vertical margin of a block of type. Usually it’s the right margin that’s ragged (as in the flush left/rag right setting), but either or both margins can be ragged
fonts.com

I’m a true nerd for all things typography and have often been known to bore Hayley by pointing out typefaces I see in the ‘real world’.

The level of detail Mark Boulton discussed in his 24 ways article this year really got me going (well worth a read if you’re a fellow typo-geek). And I was delighted to find, as I read on that Mr Nathan Ford had put theory into practise and written a nifty little script to address the typographical violations outlined in Marks post which can harm readability.

My immediate reaction was “I need to add this script to Highwind and our starter theme at WooThemes.”

But no. A big theme for me late 2013 (and continued into 2014) is the separation of code in our products, themes & plugins alike. Adding this script to one theme (which would then become 2, 3, 4 themes) makes no sense from a code management perspective. The theory is generic enough to be applied to almost any web site so duplicating code multiple times would only end one way; badly, with lots of my hair torn from my head lying on the floor. A plugin makes much more sense in this regard, as it does for so many other features we find ourselves building for WordPress these days.

And so, WP ragadjust was born. Catchy name, right? It’s by far one of the simplest plugins you’re ever going to see / use. Essentially all it does it enqueue a script with some filters for the customisation thereof. But the little things can make a big difference and for me, readability is just about the most important facet of a web site.

Good typographic design — on the web, in print; anywhere, in fact — relies on small, measurable improvements across an entire body of work.

So what exactly does ragadjust.js do? Put simply, it addresses each of the violations outlined in Marks post elegantly via the insertion of non-breaking spaces where appropriate. The result is improved readability.

So enjoy! You can install WP ragadjust from the dashboard by searching ‘wp ragadjust’ and you can even contribute on github if the mood takes you. You can also download directly from wp.org:

Download WP ragadjust

Caveat: ragadjust.js only supports English prepositions currently. If your site is written in a different language that part of the script isn’t going to work.

2013 in books

Screen Shot 2013-12-24 at 13.07.22

I’ve always loved reading, but since buying my Kindle Paperwhite around this time last year I’ve found myself reading more and more often. During 2013 I’ve managed to crunch through 18 19 books. Not especially prolific I concede, but considering there’s a couple of monsters in my completed list I’m fairly proud of the achievement. Continue Reading…

The Devil is in the details

As any Apple customer knows, the pleasure of owning one of their products begins before the first press of the power button. Apple has ploughed millions in to R&D, working tirelessly to make every part of ownership a pleasure, from ordering on their website (or in store) to unboxing, all the way through to recycling. This enhances the overall ownership experience and helps nurture their cult following. Apple have truly lead the way in demonstrating that the ownership experience is not restricted to the use of a product, but in building a meaningful relationship through service and support as well, every step of the way.

The devil is in the details as they say, and sometimes the small things often overlooked can make a big difference. In a recent HipChat discussion with some of my colleagues at WooThemes I questioned why our changelogs looked the way they did. The way we chronicle changes, while efficient is not particularly easy to read or scan. It’s been a little bugbear of mine for some time so I thought it would be good to engage the team and see if we could improve them at all.

Continue Reading…

Using WordPress 3.8′s dashicons in your theme or plugin

Screen Shot 2013-12-05 at 10.59.42

WordPress 3.8 is just around the corner (scheduled for release in December) and with it comes a brand new admin interface built upon the ‘top secret’ MP6 plugin.

In this re-skin a lot of attention has been paid to making all graphic elements HiDPI (retina) friendly by use of an icon font. The benefits of using a font instead of bitmaps for this purpose has long been discussed & accepted so I won’t go in to details on that here. All you need to know is that Icon Fonts are awesome.

What this post is here to do is explain how you can use this new utility in your WordPress themes or plugins, specifically on the frontend.

Continue Reading…

New WordPress theme: Upstart

upstart-blog

Yesterday we launched a brand new WordPress theme that I’ve been working on over the last month of so.

Upstart is a clean and simple theme featuring a flat design.

We’ve received a lot of feedback on our themes recently and one thing that stood out is that people feel a lot of them follow a very similar design pattern and therefore look very closely related to one another. So for the overall aesthetic of Upstart I really tried to think out side the box – literally – and give our customers something they haven’t seen before.

The homepage features a slider which dynamically resizes to fill the browser window on page load. So whether you view the theme in a small window or a large one you’re always immediately immersed in whatever content is in that slider.

Several sections of content break out of the standard page boundaries to fill the screen too. The blog and shop pages hit you with wall to wall content delivering a patchwork quilt of imagery.

There’s a more standard layout on single posts / pages with one exception; there’s no sidebar. A controversial decision perhaps, but removing the sidebar increases focus and readability.

Anyway, I hope you folks like this theme. We’re working on some pretty big changes with our themes behind the scenes and there are exciting times ahead!

View the full demo Purchase Upstart


If you purchase Upstart today using the coupon blackfriday2013 you’ll get 35% off!

CSS Rainbow Divider

Time for a CSS Snippet! I’m working on a theme that requires a content divider formed by strips of different colours. Kind of like a rainbow. This is fairly easy to achieve using a hr with some css applied to the before or after pseudo class:

Unfortunately the box shadow size cannot be set using percentages, but this works OK for now.

Houston – p2 child theme available now!

houston-650x487

Some time ago I teased that I was working on a p2 child theme. Well, that child theme is now available for you to download and use!

I built the theme initially for use at WooThemes. We love p2 but a number of people were clamouring for better responsiveness and a few little features that are missing from stock p2. After some testing and tweaking we felt it made sense to make the theme openly available. So that’s what we did.

Houston is available from the WordPress.org theme repository and can therefore be downloaded directly from your Dashboard. Just search for ‘Houston’ (and obviously make sure you have p2 installed as well).

Features

In addition to p2 Houston offers;

  • All new design with refreshed layout and typography.
  • Fully responsive – browse on any device and see an optimised UI.
  • Additional widget region beneath the post box.
  • Inline reply link making it easier to reply to posts.
  • Integration with p2 likes plugin by Scott Basgaard.

Contributing

Finally, if you’re using Houston and notice any issues, or would like to contribute, please do so on our github repository.

Enjoy!

Download Houston

Introducing WooCommerce Product Image Flipper

banner-1544x500

It’s time for another WooCommerce plugin! This one introduces a nifty little feature that I’ve seen showcased in several ThemeForest themes. However, I always felt it really should be a plugin rather than a theme feature. And so, the WooCommerce Product Image Flipper was born.

It’s a very simple plugin really. It takes the first image in your product gallery (excluding the featured image) and displays it (along side aforementioned featured image) in product categories / archives. This secondary image is revealed on hover.

WooCommerce Product Image Flipper reveals a secondary image on hover.

WooCommerce Product Image Flipper reveals a secondary image on hover.

This plugin is perfect for displaying shots of clothing and allowing the user to flip it over to see it from the back (hence the name). There are probably many other useful applications as well though :-)

Enjoy!

Download Now

New WordPress plugin for organising your team page

Today “Our Team”, a WordPress plugin I’ve been working on at WooThemes has gone live on wordpress.org.

“Our Team” allows you to easily collate team member profiles and then display them via shortcode, action or template tag.

Display team member profiles

Display team member profiles

A simple plugin that solves a common problem. Out-of-the-box features include;

  • Manage team members via Custom Post Type
  • Organise team members categorically
  • Add data such as gravatar, role, url and Twitter handle
  • Display via shortcode, template tag or action

Read about usage over here.

Add team members via custom post type

Add team members via custom post type

The plugin has been engineered for flexibility so that you can easily remove default fields or add your own without touching core files. You can read more about these customisations, and how to contribute on the FAQ page.

Download Our Team now

Enqueue Masonry in your WordPress theme

Strap yourselves in, it’s time for a ground-breaking WordPress snippet. </sarcasm>

Today I wanted to include a popular jQuery plugin in a theme I was building so decided to check if the script was bundled in WordPress core. Turns out it wasn’t, but I noticed another script which is, that I didn’t expect; Masonry.

Masonry is a really fun script for arranging blocks of content based on available vertical space.

So that means you can call masonry in your plugin / theme without actually including the file in your assets.

Unfortunately it’s a pretty old version (2.1.05) but there’s a ticket on Trac reporting that issue. There’s no milestone set, but hopefully we’ll see masonry updated soon.

Highwind 1.1.0 – now with WooCommerce support

Highwind 1.1.0 has just gone live on WordPress.org introducing a couple of fun new features.

WooCommerce Integration

WooCommerce is now fully supported. This means that setting up an online store using WooCommerce & Highwind is a piece of cake. With both Highwind and WooCommerce activated simultaneously you will see some new options within the Customizer.

Highwind WooCommerce Options

Highwind WooCommerce Options

Product search Bar

Product search bar

Product search bar

Once enabled a full-width product search bar will be installed beneath the site header providing a convenient way for your users to locate products.

Header Cart

The Header Cart

The Header Cart


Optionally inform your users of how many products they’ve added to their cart and what the current sub-total is.

WooCommerce Layout Options

Choose to display WooCommerce product archives / details pages in a full width format.

Content Background Color Option

Sometimes you want to visually separate your content from the background. Whether that’s because you’re using a background image or you just want to add some contrast, you can now do so.

Other tweaks and fixes

1.1.0 also introduces several minor design tweaks and bug fixes. View the full changelog on github.

Enjoy!

Highwind now available for WordPress.com

Digging through the gargantuan backlog of emails that always accumulates when you’re away I came across one from Nate at WordPress.com that was particularly exciting.

He informed me that the theme wranglers were working on a port of Highwind, to make it available to .com users.

Well, that port is now live! It’s mostly the same on the frontend but has been rebuilt on _s on the backend. This means some of the options are a little different, but seeing as it’s a totally different audience it’s not a big deal.

It’s very cool to see my theme available to WordPress.com users :-) Get on it now!

In other news, when I have some time and have caught up with everything I will be looking to release Highwind 1.1.0 with some cool new features. Stay tuned :-)