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.
Note to self-hosted users: Ryu is going to be available on Extend in the near future.
EDIT: Thanks for waiting! Ryu now is available for download on Extend
- Post Formats: Standard, Image, Video, Gallery, Aisde, Link, and Quote are supported.
- The background color of a post with the image post format matches the image inside that post.
- Gravatar as the default header image.
- No sidebar & Infinite Scroll first
- Four optional widget areas in the top panel.
- Social link badges to your profiles on Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, Tumblr, YouTube, and Vimeo.
- No default menu or a Custom Menu
- Support for flexible height Custom Header, and a Custom Background.
- And of course it’s responsive. It looks and works great on smaller screens, such as the iPad and iPhone.
What I mean by “the Facebook, Tumblr, and Twitter generation of personal bloggers” is bloggers who don’t necessarily spend a long time writing long articles but often post shorter ones — or just images, videos, galleries, links, and so on. Therefore, supporting those post formats is a must in this theme so that I can apply visual treatment that enhances each format’s content. They say a picture is worth a thousand words, and the Image format is specially popular in personal blogs.
Do you remember the classic theme called Duotone? One of my teammates, Matías Ventura created Tonesque, a fantastic plugin inspired by Duotone. Tonesque lets us grab the average color of an image. Ryu uses it as an instrument to automatically change the background color of each post with image post format.
As you can see in the screenshot above, the image in the format will be displayed as wide as the page. Who doesn’t like to show off images in a big size? If you want to add some text after the image, you can use the excerpt which appears below the title like a paragraph in the standard format.
The gallery format also displays galleries at full width, but it does not use the background color treatment.
Gravatar as the default header image
You’ve set your Gravatar, right? Your personal blog should have your Gravatar!
Ryu will display the site owner’s Gravatar by default. If you want to display something other than your Gravatar, you can upload a Custom Header Image (Appearance → Header) or you can remove it completely by selecting Remove Header Image.
No sidebar & Infinite Scroll first
Ryu doesn’t have sidebar at all, and yes, this is a feature.
For personal blogs, the traditional sense of a sidebar is often less important and filled with junk that its readers just simply ignore. Filling pages with stuff has never helped usability, right? So why not let readers to concentrate on the most important stuff — your content?
You may ask, “What about widgets? Are they in the footer?” Nope. Ryu was designed with Infinite Scroll first in mind. Like I mentioned before, the target audience often writes shorter posts or just images, videos, galleries, and links. Infinite Scroll really enhances the reader’s experience on blogs that have shorter posts.
Don’t panic, widget lovers! Ryu has four optional widget areas that appear in the togglable panel at the top if you configure widgets.
Also from the Customizer, you can add links to your profiles on Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, Tumblr, YouTube, and Vimeo.
No default menu or a Custom Menu
Does your personal site really need a menu? Didn’t you add some menu items because an empty menu looked strange? Well, let’s not do that anymore. A personal blog should only have a menu if it needs one. This is why I’ve decided to not to display a menu as a default. Of course if your blog needs a menu you can easily set up a Custom Menu.
OTHER DESIGN DECISIONS
Fixed-width columns and gutters
Responsive design in WordPress themes is, in most cases, essential nowadays and I like it, but fluid grids have been bothering me greatly because of the following reasons.
- Gutters that are proportional to the screen or whatever the max width of the page can make the content elements look either squashed together or pulled away from each other depending on the viewport.
- Typographic elements such as headings and paragraphs can be stretched at some breakpoints.
I’m not saying they are impossible to solve but it is time-consuming to get it right pixel by pixel, and they are pain points — for me, anyway. So instead of using fluid grids, I decided to try the Frameless approach and I really liked it! The approach is basically using fixed-width columns and gutters to adapt the layout column by column. It’s a simple idea but I think it’s brilliant. This approach makes so much easier to help elements on a page stay in columns. As a result, we can display them in balance proportions that are pleasing to the eye all the time.
What I mean by “grand” here is both magnificent and big in size. Have you ever needed to increase the font size in your browser because you want to read blogs while you sit back in your comfortable chair? I have.
With Ryu, your readers don’t need to adjust anything. It uses 23px for body text, and for entry titles, it’s 68px (Whopper!). I really wanted to use a large font size so I chose Playfair Display for the titles. It’s stylish and beautiful, especially at large sizes. It also has short descenders, which make it work well with a tight line height. As a bonus point — Playfair Display looks great when paired with Georgia, the typeface used for body text. Usually I stick with two typeface families, but this time, it made sense to me to use one sans-serif as the third typeface to give visual contrast and hierarchy. I used Lato in all-caps in post meta, navigations, and site title.
To match with the Playfair Display’s round terminals, I chose to use circles in several places such as the site owner’s Gravatar, post format icons, social profile links, and post navigation.
It’s time to let you play with Ryu now. I hope the theme as well as this post give you something to think about as you design your next WordPress theme. I’ve really enjoyed the process of creating Ryu. Creating themes never makes me feel bored. As Ryu says…
“The more I learn, the more I realize how far I am from the end of my journey.”