Our first review!

We were lucky enough to get our first ever review of Styles today — an article written by Brian Krogsgard! We’re big fans of Brian’s contributions, articles, and interviews in the WordPress community, so it’s an honor to be getting attention from him. 🙂

Brian brought up some great thoughts in his article, and it’s our pleasure to address them here. We’re really excited to hear you think it will be useful for people who don’t know CSS!

Integration with WordPress Customizer

One year ago, we already had 2 years invested in our own user interface, complete with a gradient picker and image replacement. Even with all that time invested, though, we couldn’t continue working on Styles unless it did everything possible to compliment the WordPress Customizer. We refuse to use plugins that conflict with WordPress core functionality.

We think the result of this decision has been phenomenal. Now, when theme designers choose to use Styles, users don’t even have to be aware that they’re using anything except default WordPress. Ease of use is our primary goal — for users and theme developers alike.

Selling support for more themes

The plugin homepage has a cart icon and a “free” banner on each of these themes, hinting rather obviously that their intention is to offer paid extensions for customizing other popular themes.

Brian caught on to our hint. 😉 But we don’t want to be the only people selling these themes. Our hope is to foster a marketplace similar to Easy Digital Downloads, where developers can benefit by releasing support for their own themes.

We make it crazy easy for theme developers to add options to the WordPress theme customizer. Just look at the link. Setup takes 2 minutes. The first option group takes less than 5 minutes. These videos weren’t rehearsed — this was my first time looking at that theme!!! If you’re a theme developer, give it a try. You won’t be disappointed.

If you’re interested in creating or selling theme options with Styles, get in touch!

More layout options in the future

I wanted to change padding and margins on various elements, and it didn’t have them available for my demo. In general, if a user knows CSS, I think it’s just as fast to customize a site with CSS alone.

The very first version of Styles did have margin and padding, but then we came to the same realization that Brian did — users who understand margin and padding likely understand CSS, and it’s just as fast to code it as it is to use the interface.

We don’t want to add features to Styles “just because” — we want them to truly make people’s lives easier.

That said, there are some features we plan on adding in the future, some of which existed before the rewrite. First on the list is bringing back the gradient picker that behaves just like Photoshop. Another feature at the top of our list is color palettes.

First, though, we want to get Styles into the hands of as many users and theme developers as possible. 🙂

Including CSS in the theme header

I like that the plugin is interfacing directly with the WordPress Theme Customizer API. At the same time, like other visual “frameworks”, Styles spits all of these customizations into the head of the document, and has potential for bloating a website.

We’re not sure this is the case, but we’d love to hear more from Brian if he’s seen otherwise. In the past, Styles was able to output CSS in three different ways: in the theme header, in a saved CSS file, and at a custom URL served by WordPress.

In the end, we reverted back only outputting in the head for a two reasons:

1. Saving to the head was faster

Saving to a file added another HTTP request to users’ sites, and serving from WordPress slowed down the request even more. In the end, the amount of CSS output from the plugin was short enough to include in the header efficiently, and it made the plugin play nicely with all caching plugins without any additional configuration. Performance won all the way around.

2. Saving to a file caused issues for Style’s target audience

As Brian pointed out, Styles is for people who don’t understand CSS. File permissions are much more complex than CSS. We found that even mentioningthem caused panic for many users!

At one point, we output to the header only if we had to, and then notified users that if they wanted to set their permissions correctly, we could save output to a file. You’d be surprised how many users thought this was an error because they didn’t understand what it meant.

We’re open to adding file output back in the future, but we’d want to see that it does in fact improve performance, and even then, we’d likely only release it as a feature for developers.

Questions?

We’re really excited to see that Styles is making people’s lives easier. How has it helped you? How can we make it better?

I’m glad to hear you’re enjoying Styles! At the same time, that’s certainly a major issue if Styles is ever losing any of your settings. Can you send some details about which specific settings you had issues with, and what actions you took when they were lost? If we can get steps to repeat your issue, we can take steps to make sure it doesn’t happen again!

Not yet at the moment. Abstracting layout changes across all themes gets ridiculously complex, because you have to take into account all the different ways any given theme might set up its columns initially, and then adjust them across responsive widths. For now, I think it’s still best served by custom CSS.

hi
i’ve just downloaded your plugin and i really really like what it does as i’m not very good with css nor do i have the time to play around with it for hours! – however, everybody on wordpress says to make customizations in a child theme, but if i understand it correctly this plugin only works with the original? what if an update comes out, would i lose all my customizations i made using this plugin?
any input would be appreciated, thank you!

Styles is designed to enable options for the parent and child theme if you choose to use it that way. Depending on how different the child is from the parent, some options may no longer be able to be applied, but everything that *can be* used still will be.

You will need to download the Styles Plugin which is on the wp.org plugin repository, along with the Styles Twenty Thirteen Plugin from stylesplugin.com. (Think of it like a parent plugin and child plugin.)

Once your parent/child themes and parent/child plugins are all installed you will be able to customize your fonts, colors, etc for your site. Let us know if you need any help and we’d love to see your site when you’re finished with it!

I am using Styles for 2010 and 2013. I love the flexibility! Looking into Custom as well…
For 2013, what is the easiest way to get a sample of each of the available fonts? are thee samples posted somewhere?

The appropriate place for support questions is the WordPress.org support forum. As far as a settings reset, the only option available right now is deleting the plugin through the WordPress admin and re-installing. Doing this will delete all your options.

Hi – thanks for such a great plug-in! When I go to adjust colors and font sizes of my header font, for example, I can see the changes in the preview window to the right, but after about 15 seconds, it reverts back to the default.

I have tried to use Styles to customize my website (I use the Twenty Thirteen theme) and I do not know why the instant feedback feature did not work. Any idea why this may happen and what the solution could be?