ryu

Behind the Design of the Ryu Theme

Much like I did for the Further theme, I’d like to share my thoughts behind Ryu — the free theme I released recently.

Yes, you guessed right. It’s named after the main character of the classic game. If you know why the character was named Ryu, you will understand why I named this theme Ryu, too. :)

I mentioned this in my previous post about the Further theme, Behind the Design of the Further Theme, too that I strongly believe that we, as WordPress theme designers, should create amazing themes for specific purposes/audiences rather than multi-purpose themes that are just good. In many cases, themes designed for a specific purpose or a targeted audience perform better when people use them for that purpose. I’ve created Ryu specifically for the Facebook, Tumblr, and Twitter generation of personal bloggers.

Continue reading

The Recipe for a Great Theme

Have you ever looked at a WordPress theme and thought, “Man, I wish I could do that!” Well, here’s a little secret: You totally can.

Yes, you can make a theme, and you don’t need to be a theme expert to do so. You just need three things:

  • An idea,
  • a healthy dose of curiosity,
  • and time.

An Idea

Until five years ago, I’d never touched a WordPress theme. I didn’t have a lot of experience, I’d never experimented with dynamic programming languages, and I’d never had to design for a vast and varied audience.

But what I did have were ideas – how about a theme for babies? Or a theme with changing seasons? Or a theme with animated fish? I didn’t know how to make these themes happen – I just knew I wanted to make them.

Without an idea, there is no theme! So before you do anything, figure out what you want to build. Have a goal to strive for, write up some notes, sketch it out.

It doesn’t have to be mind-blowing, or revolutionary, or the Next Big Thing, as long as you’re excited about it. You’re probably not going to make history with your first theme, but why let that deter you from making something really cool?

A Healthy Dose of Curiosity

If you like to learn, you’ve already taken a huge step toward becoming a themer. WordPress changes often, so theming techniques change often, too. You don’t have to venture far for learning material – you’re looking at a wealth of theme-makin’ goodness right here at ThemeShaper!

But I encourage you not to get mired in the technical details. You know how you may use Photoshop, but you probably don’t use one-tenth of its capabilities? Theming is like that. You don’t need to know how to do it all – you just need to figure out one piece at a time.

Think of your theme as a puzzle, and break it into smaller components – a fixed sidebar, an animated drop-down menu, a customizable header that changes colors – together they’re an intimidating obstacle, but if you tackle each piece individually, you’re likely to find it’s not as difficult as you think.

Also keep in mind, you don’t necessarily need to start from scratch (unless you want to!) Maybe you’re less interested in coding a theme, but you want to illustrate one – you can always build a child theme, or use a starter theme, so you don’t have to dive as deeply into the code.

Here are some of our favorite ThemeShaper resources to get you started:

And finally, tutorials have their place, but don’t be afraid to play around! Some of the best learning experiences and discoveries are hands on. Remember: There are very few things you could do to your WordPress theme that a quick Ctrl+Z can’t fix.

Time

We’ve come to the part I can’t help with. You have the idea, you have the tools, now you just have to make it happen. Easier said than done, but as they say, Rome wasn’t built in a day. Some of the best themes take weeks, months, or possibly even years, to come to fruition.

But beware: Theming is addictive. If you spend enough time with it, you may find yourself staying up late into the night to squash a CSS float bug, or research scripts for a post slider, or find just the right shade of blue for that navigation menu. Don’t say I didn’t warn you!

I hope this inspires you to give theming a chance if you haven’t already – it’s a great opportunity to try something new and make something cool!

The Line Between “Feature” and “Integral Part”

Last week, in light of the Evernote hack and a few others, I took the time to finally update all of my passwords to using 1Password. It’s a fantastic app that does its job very well, and I had tried it once before, but was turned off by the pop-ups, alerts, autosubmit, and the cluttered mess that auto-save created with my account (I’m OCD like that). Even though I needed to use the service, I tabled 1Password until I had “some time to get it setup correctly” (aka never, unless a security scare prompted me to).

I realize that this is similar to an issue that many newer users face in selecting themes. Often, users peruse new themes by their screenshots or demo sites, settle on one that’s especially appealing to them, and activate it only to find a stripped-out half-version of the theme due to unset (or too-set) options, missing content, page templates… the list goes on and on. I had always viewed those as first-world user problems – that people would complain about having too many options available or not having their complex site “just work” right out of the box – until I was faced with a similar issue and gave up without a second thought… and mine revolved around personal security, not a blog of pictures of my dog. :)

Hero demo site on WordPress.com vs. User theme activation

Hero demo site on WordPress.com vs. User theme activation

All of my complaints with 1Password were feature-related, not bug-related, which in particular resonated with me. A developer, or team of developers, had built these features, turned them on by default, and left them up to me to turn off. They’re cool features that I’m sure people like to use, but they’re not integral to the app, and they cluttered my new experience to the point that I walked away. This of course brought me back to something Takashi mentioned in his post about further, where one of our teammates, Philip Arthur Moore, compared theme options to a native app’s preferences and how a number of users probably never touch them:

“I wonder how many “normal” computer users start a program and never even look in the preferences page. It’s like, they open the program and that’s what they get… It makes me think themes out of the box should just work and theme options should be viewed like preferences sometimes… Food for thought.”

I’m not advocating the removal of special features from themes (or even screenshots) – I’m still a huge believer that these are some of the biggest selling points for users – I’m just wanting to keep the discussion going of where the line is between “feature” and “integral part”. It very likely shifts on a theme-by-theme basis (a banner image on Superhero, the homepage template on Responsive,  or just simply a first post in a theme like Minimalizine), and I think that there are probably a number of ways that we can make a theme either “just work” or better hold a new user’s hand through the setup of those integral parts. It’s easy to forget the first time we stepped inside the WordPress admin. I don’t know about you, but I’m comfortable saying that I was pretty lost. If making the web a more open place is ultimately our goal, I think encouraging the next generation of new users to stick with it as they start out is a great first step.

Further: Home Page

The Further Theme: Now Available On Creative Market

Our friends at Creative Market announced last week that all themes sold on their marketplace are now 100% GPL. We couldn’t be more thrilled about this and send hearty kudos to the gang at CM for doing the right thing.

To show our support, we’ve jumped into the fray by offering for the first time ever a WordPress.com premium theme for self-hosted WordPress blogs. Further was designed and developed by our very own Takashi Irie. He put his heart and soul into the work, and oh boy does it ever show.

Further: Home Page

For everyone who’s been asking when Further, which really shines with Jetpack, will be available for self-hosted blogs, you now have your answer. We hope you’ll love Further as much as our beloved users on WordPress.com do and can’t wait to see the amazing blogs that you build with it.

The WordPress.com Public Theme Guide

wpcom-theme-guidelines

They say Valentine’s Day is all about love. Well, the thing I love the most about working on the Theme Team at Automattic is the attention to detail that goes into each theme launch. There is an inital build process followed by a series of peer reviews. More times than not a theme will be put under the microscope of 2, 3, or sometimes 4 different team members before launch. The sheer number of things that can potentially go awry in a theme can be overwhelming at times. This review process allows us to catch as many bugs as possible before people start using our themes.

Our peer reviews focus on a mixture of three areas: code quality, usability, and discovery of theme-specific anomalies. Over the years, our review process has grown organically. When we discover a new issue we will generally post about it to an internal P2-powered website for team discussion. While this process works really well, it can be a bit time-consuming to navigate through three years’ worth of posts to find an isolated conversation about a particular issue.

Recently, we thought it was a good idea to collect all of our theme guidelines and create an easy-to-follow resource. Instead of posting this internally, we decided that we would like to share our guidelines with theme developers everywhere. I would like to present to you the first installment of The WordPress.com Public Theme Guide. We hope that you get as much use out of this as we do!

Finding the Perfect Theme

Our very own Lance Willett spoke recently at WordCamp Phoenix about the art of finding the perfect theme:

Feel free to get started by checking out our latest four themes that were added to the WordPress.org theme repository: Forever, Vertigo, Reddle, and Quintus!

_s Version 1.3 Ready For Download

I’m happy to announce that _s 1.3 is ready for download on both Underscores.me and GitHub. The most notable changes introduced during the last two versions are basic support for Infinite Scroll, theme customizer integration, and additional Post Formats.

There was no blog post published for _s 1.2, so consider the following notes to be a brief overview of fixes and enhancements performed on _s since version 1.1:

Version 1.3:

- Basic support for Infinite Scroll (ref.)
- Add additional Post Formats into functions.php (ref.)
- Provide context for comments title strings (ref.)

The following files changed from Version 1.2 to Version 1.3:

404.php
README.md
comments.php
functions.php
image.php
inc/jetpack.php
inc/template-tags.php
style.css

You can also run the following command in Terminal to see a log of file changes between Version 1.2 and Version 1.3:

git diff --name-only 7b7489 f1e9b4

For a full log, visit the commit history page on GitHub.

Version 1.2:

- Theme customizer integration (ref.)
- Add folder into theme for translations and additional instructions into the readme.md file (ref.)

The following files changed from Version 1.1 to Version 1.2:

404.php
README.md
archive.php
comments.php
content-single.php
content.php
footer.php
functions.php
header.php
image.php
inc/custom-header.php
inc/customizer.php
inc/extras.php
inc/jetpack.php
inc/template-tags.php
inc/theme-options/theme-options.php
inc/tweaks.php
index.php
js/customizer.js
js/html5.js
languages/readme.txt
layouts/content-sidebar-sidebar.css
layouts/content-sidebar.css
layouts/sidebar-content-sidebar.css
layouts/sidebar-content.css
layouts/sidebar-sidebar-content.css
no-results.php
page.php
readme.txt
search.php
searchform.php
single.php
style.css

You can also run the following command in Terminal to see a log of file changes between Version 1.1 and Version 1.2:

git diff --name-only f1e9b4 175ef5

For a full _s commit log, visit the commit history page on GitHub.

There are open issues that we’d like to revisit for _s 1.4, namely post format archive labeling (ref.) and a load of other Open Issues.

Please jump into the ongoing discussions on GitHub and if there’s an issue with _s that has not been raised yet, feel free to open it up.