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.
A little while ago I announced the launch of a plugin that allows you to easily display your team members on your WordPress site.
The plugin has been generally well received and we’ve worked integrations into several of our themes already.
However, by far the biggest query so far has been:
Why did you not include some basic CSS for layout?
Can you give me the CSS please?
It’s quite likely you will be landing here looking for 2 with little care for 1. So let’s get that out the way right now:
This snippet will arrange your team members into fluid columns. This is a basic catch-all solution that you can add to your child theme / custom css plugin. So have at it.
Why did you not include some basic CSS for layout?
Still here? Good! A big part of what we’re doing at WooThemes in 2014 will be based around the belief that a clear definition needs to exist between themes and plugins. This has always been the intention ever since plugins became available way back when. Themes are for style, layout and general presentation. Plugins are for functionality and in this case content separation. Somewhere along the road the lines blurred and before you knew it we started to see themes shipping with 15 sliders, 48 post types, 500 page layouts and 8 billion shortcodes bundled in.
I digress. We did not include any CSS in Our Team because it is not the purpose of the plugin to apply style. The plugin alone allows you to add, manage and display your team members. In any theme. If you want to customise the appearance you simply do so in your child theme (or custom CSS plugin).
It’s easy to say that the above snippet could have been included in the plugin, but there are arguments against even this simple piece of CSS being included. Say, for example that you’re using a theme with a strict grid system. It would be a shame if your team page didn’t match up. So now you find yourself not only having to rewrite the CSS anyway, you also have to dequeue the stock CSS. This is a pain and un-necessary.
It’s far better for us to keep that split (design vs functionality) clearly defined and provide people with the design snippets as and when they need them.
Generally if a theme is well built with styles to account for all common (and even uncommon) html elements, and the plugin written in semantic markup this should rarely be an issue anyway. Applying layout via CSS is definitely not a big challenge in a well written theme.
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!
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.
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).
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.
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.
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
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.
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 has just gone live on WordPress.org introducing a couple of fun new features.
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
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.
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.
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