The majority of my waking hours are spent feverishly obsessing over making premium themes a world-class experience for all WordPress users. This means a lot of different things: ensuring that customers are well-supported in our premium themes forum; auditing every single line of code in every premium theme; educating the WordPress theming community on proper approaches to WordPress theme development; and with my colleagues coming up with strong, robust guidelines for developing themes the WordPress.com way.

Philip also spends a ton of time working on _s. I love everything about this quote.

It’s hard to understand the power of _s unless you see what’s built with it. Further, Ryu, A Simpler Time, and Untitled were all created using _s, but you’d never know it without being told and that’s what makes the starter theme so powerful. To date, Underscores has around 34 total contributors and it’s always open to more. I’ll continue to work on it because it provides a solid benchmark on which to grade other themes and it also gives me a chance to interact with the theming community.

Anyway, quit reading this post and check out the interview with Philip.

In this post, I’ll outline a few online resources that can help you continue your education in web design and development (or to get started, if you’re just joining us).

Code Academy

If you like hands-on learning, then you might want to give Code Academy a try. It’s free, and the courses consist of a series of interactive exercises that have you typing code in an in-browser console as you read through lessons. You earn badges as you complete courses. The courses offered that are most relevant to WordPress themes include PHP, HTML/CSS, and JavaScript.

Code School

Code School is another fun way to learn to code. It uses screencasts and in-browser coding exercises to provide an interactive experience. Like Code Academy, you earn badges and points as you complete courses. Code School does charge a fee, but some courses are free. There are several courses that are relevant to creating WordPress themes: HTML 5 and CSS3, and JavaScript (with a focus on jQuery). The “tryjQuery” course is free.

There are also free courses in Git and Chrome Dev Tools, which can be great tools to add to your development arsenal.

Lynda.com

Lynda.com has been around for a long time, and it’s got a large library of courses that are relevant to web design and development. Since the courses are all video-based, you can learn at your own pace. There is a monthly fee for full access, but most of the courses let you view a few videos for free.

Skillshare

Skillshare offers relatively inexpensive courses in a variety of subjects. It’s community-based, with peers sharing their skills with other peers. The course selections change regularly, so it’s worth checking periodically for something that interests you. Please note that these courses are instructor-led and follow a specific timeline, with due-dates for projects and discussions.

Coursera and Udacity

If you’re up for some university-style learning, you might be interested in Coursera and Udacity. Both allow you to take college courses online for free. In general, these courses are broader in scope than Code Academy and Code School, but sometimes it’s nice to take a step back and enhance your current knowledge with a “big picture” view. Not to mention, to try something different!

Coursera has a number of upcoming courses in Information Technology and Design. Udacity’s course catalog includes a Computer Science section with classes that might interest you.

Like Skillshare, the courses on Coursera and Udacity are all instructor-led, with specific timelines and due dates.

CodePen

CodePen is a community-based environment to learn and practice HTML, CSS, JavaScript, and other languages through a browser-based interface — a coding playground. Check out this cool animation my teammate Michael Fields created. CodePen even featured it recently!

Have you found other cool resources for learning all the things? Share them in the comments!

If you are not too familiar with how you can use the Customizer for your theme projects, I recommend the three posts Sam “Otto” Wood wrote on the subject. This article assumes a familiarity with its basic concepts.

The Customizer handles everything, from creating theme options’ markup, to saving settings, to updating the theme preview. It does not, however, handle validation and sanitization.

Similar to the Settings API, the Customizer comes with a designated way to validate or sanitize user input. There are two ways to achieve this:

1. Defining a callback function for each customizer setting.
2. Hooking into an action prior to saving all settings to the database.

Per Setting Sanitization

The add_setting() method of the WP_Customizer object accepts an 'sanitize_callback' argument, that can be used to specify a sanitization callback. This is how it might look:

function prefix_customize_register( $wp_customize ) {
	$wp_customize->add_section( 'prefix_theme_options', array(
		'title'    => __( 'Theme Options', 'textdomain' ),
		'priority' => 101,
	) );

	$wp_customize->add_setting( 'prefix_layout', array(
		'default'           => 'content-sidebar',
		'transport'         => 'postMessage',
		'sanitize_callback' => 'prefix_sanitize_layout',
	) );

	$wp_customize->add_control( 'prefix_layouts', array(
		'label'    => __( 'Layout', 'textdomain' ),
		'section'  => 'prefix_theme_options',
		'settings' => 'prefix_layout',
		'type'     => 'radio',
		'choices'  => array(
			'content-sidebar' => __( 'Content on left', 'textdomain' ),
			'sidebar-content' => __( 'Content on right', 'textdomain' ),
		),
	) );
}
add_action( 'customize_register', 'prefix_customize_register' );

function prefix_sanitize_layout( $value ) {
	if ( ! in_array( $value, array( 'content-sidebar', 'sidebar-content' ) ) )
		$value = 'content-sidebar';

	return $value;
}

The callback will only be called when the setting is saved to the database. If you use the refresh method to update the preview, sanitization is complete.

In our case, since we opted to use the postMessage method of updating the preview, we would have to validate (and sanitize) the the value in the corresponding JavaScript file, too.

In many cases it is not even necessary to define a custom callback function. In cases where you want to sanitize a URL or an email address for example, you can pass 'esc_url_raw' or 'is_email' directly:

$wp_customize->add_setting( 'prefix_email_address', array(
	'default'           => '',
	'transport'         => 'postMessage',
	'sanitize_callback' => 'is_email',
) );

$wp_customize->add_setting( 'prefix_twitter_url', array(
	'default'           => '',
	'transport'         => 'postMessage',
	'sanitize_callback' => 'esc_url_raw',
) );

All Settings Sanitization

For completeness sake: a second possibility is to use the 'sanitize_option_' . $option hook for theme mods or register_settings() for options.

function prefix_sanitize_customizer( $value ) {
	if ( ! isset( $value['prefix_layout'] ) || ! in_array( $value['prefix_layout'], array( 'content-sidebar', 'sidebar-content' ) ) )
		$value['prefix_layout'] = 'content-sidebar';

	return $value;
}

// For theme mods:
add_action( 'sanitize_option_theme_mods_twentythirteen', 'prefix_sanitize_customizer' );

// For options:
register_setting( 'prefix_option_group', 'prefix_option_name', 'prefix_sanitize_customizer' );

I hope you now have a better understanding of how to write more secure code when dealing with the Customizer. It’s a great tool for users and theme developers alike, and I am very excited about the opportunities it creates.

If you have any questions or comments, feel free to add them below!

1. GPL-incompatible Licensing

Just because it’s “free” doesn’t mean it’s open source. If you’re building your theme on a framework or starter theme, or if you’re building a child theme, the foundation/parent theme must be GPL or GPL compatible.

In addition to the theme’s license, always check the licenses for bundled resources – images, scripts, fonts, or icons sets – to ensure they’re GPL compatible, and state their respective licenses in the theme’s README. When in doubt, contact the original author to inquire about the license (and perhaps encourage them to switch to a GPL-compatible one if they haven’t already).

The WordPress Codex has helpful information regarding GPL and theming:

• WordPress and GPL
• Theme Licensing
• GPL-Compatible Font Licenses
• GPL-Compatible Icon Sets

2. Poor Code Quality

Reviewing code can be time consuming, especially when it’s not your code. Inconsistent styles and lack of spacing makes your theme’s code harder to debug and maintain… and it’s just plain messy. Adhering to the WordPress Coding Standards for PHP, CSS, and Javascript makes it easier for yourself and others to read, understand, and maintain your theme going forward.

3. Fails the Theme Unit Test

The Theme Unit Test is a set of data used to test for visual bugs and inconsistencies. We know you’re excited to share your theme with the world, but before you do, test it thoroughly with the dummy content provided. You’ll catch a lot of the common issues that come up in theme review, which in turn speeds up the review process.

4. Copy Pasta Code

Does this scenario sound familiar? Your favorite blog uses a unique Javascript slider, and you want to use it in your theme. You look at the source, then copy and paste the blog’s script into your theme and it appears to work – success!

Well, maybe, or maybe not. It’s important for you to understand the code that goes into your theme for a number of reasons – security, usability, compatibility, and licensing concerns among them. In short, if you didn’t write the code, you should still familiarize yourself with its source and license, and have an understanding of what the code is doing and how it works.

Don’t get me wrong – sharing and working with open source code is encouraged! It’s a great way to learn. But simply finding a script and copying it into your theme does not help you grow as a developer, and there is a good chance it won’t help your theme in the long run, either.

5. Improper Data Validation/Sanitation

Last but definitely not least, it’s important to make your theme as secure as possible. If you allow users to change settings, there are that many more entry points for harmful data. A common misstep in theme development includes failing to validate data going to the database and sanitize data coming from the database, leaving your theme (and your users) open to malicious code. There are a number of ways to prevent this, and you can read about them in the Codex:

• Security and Privacy requirements
• Data Validation

It is also recommended that themes use the Settings API to include theme options, but I prefer to use the Customizer, and keep theme options to a minimum. Either method is valid as long as you follow appropriate validation/sanitation procedure. Read more about the Settings or Customization APIs:

• Settings API
• Theme Customization API
• How to leverage the Customizer in your own themes – a helpful tutorial from Otto

As always, if you’re looking for a secure, stable, properly coded, and GPL-compatible base theme, you can’t go wrong with our very own _s starter theme. _s addresses several of the above concerns out-of-the-box, which speeds the development process and decreases your chances of making one of the above mistakes.

I hope this guide will help make your future themes that much more awesome!

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.

Ryu: Home Page Example

Demo Site | Activate it for your WordPress.com blog

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

MAIN FEATURES

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

Post Formats
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.

Image Post Format Example

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.

Gallery Post Format Example

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.

Responsive Pattern

Grand Typography
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 des­cend­ers, 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.

Standard Post Format Style

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

Round Terminals

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.”
- Ryu

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:

• The ThemeShaper WordPress Theme Tutorial: 2nd Edition
• Introducing The _s Theme
• WordPress Child Theme Basics

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!

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

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.

I designed Further for professional publishers who want to build authority and an audience with a content-rich website. Their posts are in-depth, and they use advertising to pay for the costs of publishing. You might ask, “Why does Further have such a specific audience?” or “Can’t anyone use this theme?” Sure, anyone can use Further. But I’d rather create amazing themes for a specific purpose than multi-purpose themes that are just good. In my experience, I’ve found that WordPress themes designed for a specific purpose perform better when people use them for that purpose.

Main features

• Responsive Layout (of course): Further looks and works great on smaller screens, such as tablets and smartphones, as well as on laptops and desktops.
• Featured Content Area: At the top of the front page, Further displays a maximum of six featured posts. (this requires the latest version of Jetpack if you are using it for a self-hosted WordPress blog)
• Further supports the Standard, Video, Image, Gallery, Aside, and Quote formats are supported.
• Post Format Feed: On the front page, the theme displays the latest two posts from each format in the right sidebar.
• Fixed header on screens wider than 770px.
• Social “Connect” Area: Optional links to your profiles on Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, YouTube, and Vimeo in the header.
• Seven Widget Areas.
• Two Custom Menu locations, flexible height Custom Header, and Custom Background.
• Full-width Page Template

Demo | Purchase at WordPress.com | Purchase at Creative Market (for self-hosted users)

Things that I think could be improved in current magazine themes out there

Magazine themes have been popular for years and there are many great themes available, but typical magazine themes tend to share some issues… at least from my point of view…

1. Featured content sliders with huge images

This sort of slider is great for a portfolio site showcasing photos and products, but I don’t see it as the best option for a content-heavy site. When I have a moment to visit a fast-paced news site, I don’t want to wait for the huge slider to loop through every item and see if something interesting comes up. Do you? And yes, I know that sliders often provide navigations and thumbnails but unfortunately, they don’t still make me spend time clicking through them all in hopes that I might find something interesting in there. I prefer to skim the site quickly to find stories I want to read.

Don’t get me wrong, I see the value of a featured content area. It allows editors to highlight articles they feel are important. I like it, but not with huge images and fancy transitions (except maybe for image-centric online magazines).

For Further, I chose a grid format to display a maximum of six featured posts. They are sufficiently set apart visually from the rest of the articles and help to see what’s featured at a glance. And it’s simple!

2. Too many options to get a site running

Another common issue in many magazine themes is that they tend to have a large number of options required in order to get a site running. One of the common questions I’ve seen with magazine themes is something along the lines of: “My homepage doesn’t look like the demo site. Help!”. We hear this often from users of themes that require them to publish a page with a specific page template (to supply front page specific elements such as a featured content area), and then set it as the front page in Reading Settings. For theme developers like you, it might sound simple, but you would be surprised to learn how many users get confused about this.

One day, one of my teammates, Michael Fields, brought up the idea of using front-page.php to reduce this sort of confusion. As you can see in the template hierarchy in the Codex, front-page.php will always be used for the front page, regardless of whether it displays latest posts or a static page. This means users wouldn’t need to choose a specific page template for the front page. This is a neat idea and works great for a theme like Further. We haven’t heard the front page question from users… yet

Another typical example of magazine theme options is the “what, where, and how many to display” kind of setting. Instead of this approach, Further displays the latest two posts from each supported format in the right sidebar of the front page.

Yes, there are limitations with this implementation, but it’s part of an effort to minimize theme options and user confusion. From the Customizer, you can add a link to your email, as well as links to your profiles on major social media services in the header. This option is crucial for professional publishers nowadays, but it’s the only theme option Further uses, and it’s totally optional. There are no mandatory settings that users have to go through to get their sites up and running, just activate it and it works.

Another teammate of mine, Philip Arthur Moore, said:

“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.”

This is a great point and I really love this idea for WordPress themes. I’m glad to see that some theme developers are cutting down on the number of theme options lately, but we can make it even better.

3. Body text line length that’s too long

Readability is crucial for a content-heavy site, especially in regards to the body text, and many magazine themes could do better. It seems to vary depending on research but my personal rule of thumb is that 55 – 75 characters per line, including space is best for legibility purposes. If you ever need to count characters or words, you’ll find this bookmarklet handy. An even greater challenge is making sure that we give optimum settings for line length and line height in responsive themes.

I chose Lato as the typeface family for Further because I wanted to use a typeface that has a bit of character in larger sizes, such as for headings, but can also be transparent and neutral when it’s used in body text for better readability. Lato is designed by Warsaw-based designer Łukasz Dziedzic. It’s described as follows:

“The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.”

Lato is absolutely beautiful and a great fit for a magazine theme for professional publishers.

Other design decisions

• I used Genericons for post meta info such as date, sticky posts, and author instead of the traditional sentence format (eg. This entry was posted in ____ on ____ by ____.). This structure makes sense in English, but if I translate it to Japanese, it ends up being a lengthy sentence that’s hard to translate into something that flows well. There’s a good chance that translators from other languages will run into these challenges. That’s why I’d rather use icons — their meanings are universal.
• Spaces for ads: As mentioned earlier, ads can be important elements on a site to pay for the production. In Further, the max width for the right sidebar is 306px, which is wide enough to house a Mid Page Unit (300px wide, 250px high) and the left sidebar is 168px wide where users can put a widesky (160px wide, 600px high).
• Featured Images: The featured image of an article should grab the reader’s attention. For standard format posts without a featured image, the theme displays a patterned placeholder. Placeholder use is debatable, but the idea is to encourage editors to add a featured image to support the article. In Further a featured image that is at least 672px wide will work best.
• Fixed header: On screens wider than 770px, the header (which contains a navigation area, search, and social media buttons) remains fixed at the top of the page as the user scrolls. This way, the user can access the menu at anytime without having to scroll back to the top and leave their current place in your content.
• Pull quotes: On screens wider than 1150px, editors can take advantage of pull quotes. By adding a simple class of pull to a blockquote that is either left- or right-aligned, the quote floats into the margin accordingly. It’s a small visual treatment, yes, but it makes articles more dynamic and draws attention to key points.

I could go on, but those are the main points where I put more emphasis on improving, with the goal of providing the best solution for our users and their visitors.

If you’d like, you can check out more information about Further on the theme showcase page.

I devoted a great amount of attention and thought to the details in Further, but it’s far from perfect yet. Over time, I will continue to iterate on this theme to make it even better.

Enter Genericons, a new icon font made especially for blogs by Joen Asmussen with contributions from Sheri Bigelow and Takashi Irie. They were designed with simplicity in mind to keep a minimal, “generic” aesthetic so they can be used in a wide range of projects. They look sharp at small sizes because each icon has been aligned to on a 16×16 pixel grid.

The font name itself puts emphasis on the word “generic,” but Genericon is both an anime/science fiction/gaming convention in upstate NY as well as cannon fodder for Decepticons. I think you’ll agree that’s pretty fantastic as far as namesakes go.

Genericons began as indicators inside the notifications feature on WordPress.com. Word got out about the font-based icons, and soon there were requests to use them for post formats in WordPress themes, support tools, and various other projects. And so, they were wrapped up into a 100% free, GPL-licensed font. You’ll even see them baked into the newest default WordPress theme, Twenty Thirteen, which is currently under development.

Making an icon font is a labor of love. It involves a meticulous eye for detail and the skill to scale down a concept like “asides” into one tiny symbol. Genericons has gotten a lot of love. All of the icons were carefully aligned to a 16×16 grid. Each symbol is mapped to the Private Use Area of Unicode to avoid being read out by screen readers. Much inspiration was taken from Github and their glorious “The Making of Octicons” article. The bulletproof @font-face syntax used was graciously generated by Font Squirrel (we love those guys). The OpenType font file (.otf) is even included so you can can drop it in your system fonts folder and use the font in Photoshop if you like.

Icon fonts are awesome because you can easily change their size, color, opacity, shadows, rotation, outline, or add gradients/textures (although you lose scalability if you do that last one). The flexibility you get from being able to use CSS to change the way they look, like re-coloring all the icons with one simple rule, makes them superior to SVG for this use case. They also work in all modern browsers, and they can even have transparent knockouts that work in IE6.

To give Genericons a try, go to http://genericons.com/ and download the font. Copy the font folder and the genericons.css file together into your project. Link the CSS in your HTML:

<link href="path/to/genericons.css" rel="stylesheet">

Then try out the following CSS examples that will change icon color in one fell swoop, swap standard bulleted lists with the checkmark icon, or style your blockquotes to make them stand out.

Turn every icon a Salmon color:

.genericon {
        color: #fa8072;
}

Or turn the stars Gold:

.genericon-star {
        color: #fa8072;
}

Use icons for bulleted lists:

<ul class="my-checklist">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
</ul>

.my-checklist {
        list-style-type: none;
        text-indent: -16px;
}
.my-checklist li:before {
        padding-right: 16px;
        content: '\f418';
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        font: normal 16px/1 'Genericons';
        vertical-align: text-top;
}

Use icons to style blockquotes:

<blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. &mdash;<em>Lewis Carroll</em></blockquote>

.my-blockquote {
        background: #eee;
        border-left: 32px solid #ddd;
        padding: 10px;
}
.my-blockquote:before {
        margin-left: -42px;
        padding-right: 10px;
        content: '\f106';
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        font: normal 32px/20px 'Genericons';
        vertical-align: bottom;
}

Check out the example.html file that comes with the download for demos and more examples. I hope you find Genericons as much fun to use as I do!

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.

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.

1. Clean Retina
As the name suggests, the Clean Retina theme is a simple, clean, and and responsive, retina-ready theme.

Author: Theme Horse | Demo

2. Hum
Hum is a child theme of Twenty Eleven. So you get all of the goodness of a WordPress core theme included.

Author: Daryl Koopersmith

3. Landscape
With a bold header image and the wide single column, the Landscape theme is great for photo blogs.

Author: Blank Themes | Demo

4. Minimalizine
Minimalizine is an elegantly simple solution for your blog or website.

Author: Rizqy Hidayat

5. Publish
The Publish theme is a clean minimal theme, which puts you and your content on stage.

Author: Konstantin Kovshenin

6. Quintus
The Quintus theme offers an air of old-style appeal, semi-academic graciousness with elegant typography, while also offering an overall fresh look with room for customization and the latest WordPress features under the hood. Designed by Matías Ventura.

Author: Automattic | Demo

7. Reddle
Everything about Reddle’s minimal design elegantly adapts to how you want to use your blog and what you want to use it for. Designed by Ian Stewart.

Author: Automattic | Demo

8. SemPress
A highly semantic, HTML5 template, responsive and seo optimized. SemPress supports most of the new HTML5 tags, the new HTML5 input-types, microformats, microformats v2 and microdata.

Author: pfefferle

9. Spun
A minimalist, mobile-friendly design that puts the focus on your content.

Author: Caroline Moore | Demo

10. Something Fishy
A parallax animated undersea theme with a fun, whimsical design.

Author: Caroline Moore | Demo

These themes are not only beautiful but coded well. It’s incredible and I’m happy to see many of them are build on the starter theme, _s. So if you are a theme author, you can take away some of best practices from those themes.

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!