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. 🙂

WP Style Tiles POC

I think I’m near the end of the proof of concept phase for WP Style Tiles. At this stage, the plugin isn’t pretty, but it is functional, which is the whole point of a proof of concept. 🙂

Here’s a run down of what needs to be addressed as we move out of the POC phase:

Remove CPT UI dependency

If you look at the code for WP Style Tiles, you can see I have the code for the Style Tile CPT already included, but it’s commented out because I was having trouble with one of my Vagrant sites, and it was working weirdly. This should hopefully be a quick, easy thing to fix.

Remove dependency on Advanced Custom Fields Pro; move to CMB2

A few things I love about ACF include the interface for creating the metaboxes, the ability to create repeating elements, and the ability to create flexible content elements. However, the later two are only included in the Pro version, which cannot be included in an open source plugin (and currently, I’m using it as an outside dependency). In the next phase, I’d like to move toward utilizing CMB2 for the metaboxes because it is open source, and can be included in a freely distributed plugin.

Add remaining UI elements

Two user interface elements that I think would be super handy for a Style Tile are buttons (truly interactive ones that change colors, etc. on hover) and icons.

Find a better way to deal with fonts

Again, I have another dependency on a plugin (ACF Google Font selector), which provides a neat drop-down for Google Fonts, but doesn’t seem to enqueue on the front end correctly, and seems a bit overkill. And, what if I want to use a Typekit font (which, incidentally, is what I’m doing here)? I think having a radio to select whether you want to use a Google Font and showing the drop-down conditionally is a better idea. Or maybe just eliminate Google Fonts altogether and just have the designer enter the font they want to use, and write custom CSS. I dunno, but this point definitely needs more consideration.

General code clean up

My plugin is adding a lot of inline styling, and it’s looking rather ugly. Example:

<p class="wpst-type-paragraph" style="font-family: <?php echo esc_attr( $font['font'] ); ?>; font-size: <?php echo esc_attr( $size ); ?>px;"><a href="#" class="wpst-type-link" style="color: <?php echo esc_attr( $a_color ) ?>; text-decoration: <?php echo esc_attr( $text_decoration ); ?>; border: <?php echo esc_attr( $text_decoration ); ?>; box-shadow: <?php echo esc_attr( $text_decoration ); ?>;" onmouseover="this.style.color='<?php echo esc_js( $a_hover_color ); ?>'" onmouseout="this.style.color='<?php echo esc_js( $a_color ); ?>'">Click here for more information.</a></p>

Can you even tell that’s supposed to be a link? I think I have a pretty decent solution, which is to try hooking into wp_head and outputting the styles in <style> tags.

Improve front-end experience of the Custom CSS

I added what I think is really neat functionality to add custom CSS to a each style tile on a post-by-post basis. Visibility is currently limited to admins (so if you look at a sample tile now, you won’t see it), so no need to worry about some random dude adding malicious things to your tile.

The best part about the Custom CSS is that there is an event listener on the input box which updates the selectors that are being modified in real time. That way, you can see what your changes will look like before you save them to the post.

The main thing I want to improve here is add a fixed toggle in the approximate current location of the Custom CSS input box, and add a toggle to close the box, so it’s more like a fixed modal.

Add comment support

The entire point of WP Style Tiles is to enable collaboration between designers, developers, and clients, which to me means making sure comments are enabled on these posts by default so you as a client can tell me what you do or do not like about a style tile I’ve assembled, or I can dive deeper into what you’re thinking with your comments.

Improve CSS generally

I’m trying really hard to keep WP Style Tiles lean on CSS, but I do think there are layout considerations I need to make. In the original Style Tiles PSD template by Samantha Toy Warren, the type is grouped together on one side of the tile, while the visual elements are grouped together on the other. This allows the viewer to get a better sense of what’s going on at a glance, whereas now, a user needs to scroll through the Style Tile post and figure out how the items relate.

Give proper credits

Naturally, this project wouldn’t have come about if it wasn’t for the brilliant work that Samantha Toy Warren has done on the original Style Tiles project. She’s definitely getting a huge shoutout in my plugins readme.

Alright, time to get back to work!