A Style Tile assembled with WP Style Tiles

Announcing WP Style Tiles beta

A Style Tile assembled with WP Style Tiles

I’m thrilled to announce that the WP Style Tiles plugin beta is ready! The plugin has come a very long way since I first mentioned it on the blog, and I think it could be a really useful tool for designers who work primarily with WordPress.

What are style tiles?

Style Tiles are a visual aid that help designers establish a visual design language for a website. Falling somewhere between moodboards and full-scale comps (mock-ups), Style Tiles allow designers to try out a variety of interface elements in a quick, iterative fashion. Each Style Tile might offer a different set of colors, fonts, patterns and textures, and other user interface elements. The designer then presents the Style Tiles to the client. The client can give targeted feedback about which elements she  would like to see in her new website. The Style Tiles website sums up this idea quite nicely:

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. 
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

The very nature of Style Tiles allows the client to pick and choose their favorite elements from each tile presented. The designer can iterate based on that feedback, and quickly create a new tile that represents the desired visual design style for the client’s website.

Why not use the PSD template?

Samantha Warren's PSD Style Tiles template
An export of Samantha Warren’s PSD Style Tiles template

Samantha Warren, the brains behind the idea of Style Tiles, created a handy very handy Photoshop template for creating Style Tiles. While I think the template is a great starting point, there are several thing I didn’t like about it.

PDS files do not scale well

One of the things that immediately turned me off of working with the Style Tile PSD template was the fact that the text became fuzzy whenever I zoomed in on it. Even at 100 percent zoom, the text looked fuzzy, which I thought detracted slightly from the entire Style Tile experience.

Sometimes you don’t want to deal with Photoshop layers

Trying to find the right PSD layer to edit can be like a treasure hunt. Despite the Style Tile template being very well organized, it was still confusing to trying to figure out which layer altered a specific bit of text, or which layer controlled a specific color.

PDS files offer no interactivity

The Style Tiles template displays two elements which are normally interactive in a website:

  1. Links
  2. Buttons

Clearly, rolling over a PSD, jpg, or other image format doesn’t offer any sort of interactivity. If you’re anything like me, you like to see a button or link change color whenever it’s hovered.

How does it work?

Adding a WP Style Tile button
Adding a WP Style Tile button

WP Style Tiles works by adding a handful components via shortcodes. This allows you to add elements to your tiles in any combination you’d like. If you’re not comfortable working with raw shortcodes, no worries! I’ve added integration with Shortcake UI, which makes adding shortcodes a piece of cake (pun definitely intended). 😉

WP Style Tiles Style Tile CPTAfter installing and activating WP Style Tiles, you will see a new Style Tiles custom post type (CPT) on the WordPress dashboard menu. The Style Tiles CPT allows you to keep your style tiles organized, and easy to find without cluttering your pages or other posts.

You can add a new Style Tile post like any other post, and you’ll see that the post edit screen looks just like the blog post edit screen.

If you’re using Shortcake, you can easily add a new element to your tile by click Add Media > Insert Post Element and selecting the element you’d like to add.

WP Style Tiles gives you the flexibility to add as many or as few elements to your tiles as you’d like. And any element that has interaction, like buttons and links will work!

Once you’ve created a few tiles for your client, you can share the link, and ask your client to leave feedback on directly on the tile. And because this is all within WordPress, you can limit who has access to the style tile posts by adding a password to the post. 🙌

Where can I get WP Style Tiles?

If you want to try integrating style tiles in to your workflow, you can grab a copy of the plugin from Github. If you want to see an example tile, visit the Test Tile.

Remember, this plugin is in beta, and doesn’t currently have fully fleshed out features. In a future iteration, I’d like to figure out how to better integrate fonts, and add front-end styles to the tiles.

Reporting bugs & requesting enhancements

If you download and test the plugin, I’d love your feedback! You can report issues and request enhancements on the Github issues page.

[carrie_forde_button button_text=”Download WP Style Tiles” href=”https://github.com/carrieforde/WordPress-Style-Tiles/archive/master.zip” title=”Download WP Style Tiles from Github” alignment=”center” icon=”download”]

WP Style Tiles progress

I’ve been chipping away at WP Style Tiles all day today. I’m at a point where I’m between trips away, and I’ve been focusing mostly on brushing up on WordPress skills, and the plugin has been a good test.

Here’s what I’ve crossed off the list:

Remove CPT UI dependency
I think there is some sort of glitch with the way CPT UI exports CPT code. It only had to entries in the $labels array, which I’m 99% certain was the issue with my fields not working correctly. This may have only happened because I didn’t fill in all of the fields like I have in the past. So maybe that would fix it…something to look into later.

Remove ACF dependency; move to CMB2
I’m so happy this is done, and now am seeing the pros and cons of both Advanced Custom Fields, and CMB2. ACF has that handy AF interface for setting up fields, but CMB2 has better, more intuitive ways of grouping fields together. There was quite a learning curve updating the output template, but it’s there, and I have more familiarity with CMB2, which is nice. 🙂

Here’s what’s in progress

General code clean up
Oh man, yesterday, I embarrassingly realized I was abusing & misusing esc_attr() when I should have been using esc_html(). Anyway, I’ve fixed that within the plugin (as well as a few other things where I was doing that), and started working on transferring my styles from inline styles to <style> tags injected into the head of the post. It’s somewhat debatable whether it looks nicer, but it will definitely be easier for a user to write custom styles to overwrite things (#deathto!importanttags).

There’s still code to be cleaned up, but I will keep chipping away at things as I go.

New to-do items

Design and coding are iterative processes, and I often find as I’m working through improving something, there are even more things I notice that could be improved in the next pass.

Add isset or ! empty checks on all fields / groups
There are fields or groups in the template that won’t always be completed (like subheadings). In those instances, it seems like a good idea to not print the wrapping code for those groups.

Figure out front-end metaboxes in CMB2
I spent about an hour in a bit of a daze trying to figure out how to get the custom CSS metabox to load on the front end with no success. I think taking a step back will help me gain some perspective so I can figure it out tomorrow.

Other notes

One side benefit of working on WP Style Tiles is working with a few different themes to test things out. Yesterday, I started using it in my theme to make sure it was compatible with Alcatraz (which is working great so far!), and since I was looking at my theme so much, I went in a fixed a few style issues that have been bothering me (namely, pre tags and tables). I want to do a more thorough review before I deploy, but they’re definitely looking better. 🙂