Design, Themes

Behind the Design of the Forefront theme

If you’ve read my previous articles you’ll recognize the title of this post. For those of you who are new, … Continue reading →

Design, Tools

The Genericons Icon Font Story

Icon fonts are a truly great hack. They’re lightweight, scalable, and a clever way to use vector-based images on the … Continue reading →

Theme Development

Underscores.me — The Best Way To Get Started With The _s Theme

Back in February we introduced you to _s, or Underscores, the WordPress starter theme we use at Automattic to build … Continue reading →

Community

Up Your Theming Game by Reviewing Themes

January 29, 2015 David A. Kennedy 7 Comments

You have strong theme sense, you’ve started working on or released a theme into the world, and you want to get better. You can do just that and do it without one design iteration or a single line of code.

Join the WordPress Theme Review team.

Few communities like the WordPress community exist in the world. You’ll find many opportunities to make behind-the-scenes contributions that have huge ripple effects. The WordPress Theme Review team is one of those opportunities. If you’re a themer at any level, you can learn more than you ever would creating themes by yourself.

You’ll get to know the theme requirements. Reviewing themes taps you into the pulse of WordPress theming and its best practices. You’ll become an expert with the theme requirements in no time. With that knowledge, you’ll be able to create better themes, and create them faster. Plus, you don’t really know something until you have to explain it with clarity to someone else. You’ll do that with each review.

You can contribute without code. You know and I know it, seeing your name on the WordPress credits page is a thrill. However, you can help WordPress in many ways without knowing the ins and outs of code. Contributing to the Theme Review team can improve your code skills fast. You’ll read more code and provide more feedback than you could on your own. Each time a theme you reviewed goes live, you’ll feel just as good as seeing your name on the WordPress credits page – promise.

See better themes everywhere. This should go without saying, but with each theme you review, you’ll have a chance to make it a little better. That means better themes for the users of WordPress and better experiences across millions of sites. More people will be able to find a theme that fits them perfectly, and be more willing to publish and share their ideas with the world. What a great way to spend a few hours of your time.

You’ll find inspiration and become a better themer. Each new theme review will expose you to new ideas, from design to code to tools to process and so much more. Every theme has its own dose of inspiration. Take it in. Experiment. Iterate. Repeat.

Help people create. At the end of the day, you’re doing something incredibly special – you’re helping someone’s creation come to life. I love theming because you get to build something from scratch. You mix some art, science, and part of you into something that has never existed before. Creating is good, helping others create is even better.

Learn from shared knowledge and teamwork. When reviewing a theme, you’re not just helping or teaching – you’re on the same team. You have so much to share with each other. You both have the same goal. It’s not about who knows more, it’s about how much you know together. See what you can do with it.

Learn about the WordPress Theme Review team and become a reviewer today.

Happy ~~theming~~ theme reviewing!

Theme Development

What’s new in WordPress 4.1 for Theme Developers?

January 27, 2015 Fränk Klein 18 Comments

WordPress 4.1 has been a long-awaited release for theme developers. Not only does this version ship with the awesome Twenty Fifteen theme, but also with a number of new functions and features that make theme development faster and easier. In this post, we’ll have a look at these new features and show you how to use them in your themes.

Auto-generated Title Tags

Until the release of WordPress 4.1, each theme contained its own implementation of the <title> tag. This code often varied from theme to theme, making it difficult for plugins — for example SEO plugins — to customize the content of the title tags.

The new, recommended approach is to leverage the add_theme_support() function by declaring support for title-tag:

function theme_slug_setup() {
   add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'theme_slug_setup' );

By declaring theme support, you indicate to WordPress that the title tag should be auto-generated. This is done using the private function _wp_render_title_tag(), which is hooked to wp_head. You can still use the wp_title filter to customize the output of the new auto-generated title tags.

Navigation and Pagination

While WordPress has included functions to generate navigation links between posts or pages of posts for a while, each theme used these functions with different markup and text. WordPress 4.1 provides template tags that output the entire navigation for you.

This allows theme developers to focus on the most important element: styling. Additionally, when using the default strings, these are automatically translated in your theme, because the translations for these strings are included in Core.

The post navigation functions, the_post_navigation() and get_the_post_navigation(), output a set of links to the previous and next posts. These functions are used on single post views (like single.php).

These functions accept an array arguments:

prev_text: Text of the link to the previous post. Defaults to the post title.
next_text: Text of the link to the next post. Defaults to the post title.
screen_reader_text: Text meant for screen readers. Defaults to “Post navigation”.

Sample HTML output:

<nav class="navigation post-navigation" role="navigation">
    <h2 class="screen-reader-text">Post navigation</h2>
    <div class="nav-links">
        <div class="nav-previous"><a class="website.com/beautiful-sea" rel="prev">Beautiful Sea</a></div>
        <div class="nav-next"><a class="website.com/spring-landscape" rel="next">Spring Landscape</a></div>
    </div>
</nav>

Posts Navigation

The posts navigation functions, the_posts_navigation() and get_the_posts_navigation(), output a set of links to the previous and next pages of posts. These functions are used for post listings (like index.php) or archives (like archives.php).

These functions accept an array of arguments:

prev_text: Text of the link to the previous set of posts. Defaults to “Older posts”.
next_text: Text of the link to the next set of posts. Defaults to “Newer posts”.
screen_reader_text: Text meant for screen readers. Defaults to “Posts navigation”.

Sample HTML output:

<nav class="navigation posts-navigation" role="navigation">
    <h2 class="screen-reader-text">Posts navigation</h2>
    <div class="nav-links"><div class="nav-previous"><a class="website.com/page/3">Older posts</a></div><div class="nav-next"><a class="website.com/">Newer posts</a></div></div>
</nav>

Post Pagination

The posts pagination functions, the_posts_pagination() and get_the_posts_pagination(), output a set of page numbers with links to the previous and next pages of posts. These functions are used for post listings (like index.php) or archives (like archives.php).

These functions accept an array of arguments:

mid_size: How many page numbers to display to either side of the current page. Defaults to 1.
prev_text: Text of the link to the next set of posts. Defaults to “Previous”.
next_text: Text of the link to the next set of posts. Defaults to “Next”.
screen_reader_text: Text meant for screen readers. Defaults to “Posts navigation”.

Sample HTML output:

<nav class="navigation pagination" role="navigation">
    <h2 class="screen-reader-text">Posts navigation</h2>
    <div class="nav-links"><a class="prev page-numbers" class="website.com/page/3/">Previous</a>
        <a class="page-numbers" class="example.com/">1</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" class="example.com/page/3/">3</a>
        <span class="page-numbers current">4</span>
        <a class="page-numbers" class="example.com/page/5/">5</a>
        <a class="page-numbers" class="example.com/page/6/">6</a>
        <a class="next page-numbers" class="example.com/page/5/">Next</a>
   </div>
</nav>

Archive description

The the_archive_description() and get_the_archive_description() functions output the description of a taxonomy. These functions work with categories and tags as well as custom taxonomies.

The the_archive_description() template tag accepts two arguments, $before and $after, that can be used to add additional text or HTML before or after the term description.

Screen Reader Text

When using these new template tags, you might be surprised by extra text being displayed.

This is because these functions include text that provide contextual information for screen readers. This is a very important accessibility feature and it does not impact your theme’s design, as you can remove these elements while still keeping them accessible for screen readers with the following styles for the .screen-reader-text class:

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    px;
    px;
    overflow: hidden;
}

Deprecated Admin Screens

WordPress 4.1 also deprecates the Background and Header screens in the admin. When users click on these links, they are redirected to the Customizer, where they can make changes with a visual preview of the results.

When adding theme support for the custom background feature, you will no longer have to implement callback functions for the admin-head-callback and admin-preview-callback arguments of add_theme_support( 'custom-background' ).

Want to know more?

You might agree these new functions are awesome, but you might be unsure how to use them. I’d encourage you to have a look at the _s (Underscores) starter theme on Github. It is up to date with all the new functions added in 4.1 and provides backwards compatibility for older versions of WordPress. You can also look at the source code of Twenty Fifteen, which leverages all these new functions.

Happy theming!

Asides, Themes

Sequential

Aside December 22, 2014 Kathryn P. 3 Comments

Created by Thomas Guillot, Sequential is a multi-purpose business theme featuring three custom page templates, including a special homepage layout and one for a grid page. It supports Jetpack Site Logos and is now available in the WordPress.org theme directory, ripe for downloading.

Asides, Themes

Intergalactic Takes Flight

Aside December 18, 2014 Kathryn P.

Discover Intergalactic, a new free theme designed by Mel Choyce and developed by Caroline Moore. With prominent featured images, high-contrast typography, and a slide-out side panel for menu and widgets, Intergalactic makes a bold statement while keeping the focus on your images and text. Download it from the WordPress.org directory or explore the demo.

Asides, Themes

Penscratch

Aside December 17, 2014 Kathryn P.

Penscratch, a crisp new theme designed and developed by Caroline Moore, made its debut in the WordPress.org directory this week.

“Penscratch was inspired by a similar portfolio theme, Sketch, which I designed for visual art. I wanted a clean, minimalist theme with a similar look and feel, but tailored to writers.”

With support for Jetpack Site Logos and special styling for pull quotes, Penscratch is worth checking out.

Theme Development, Tools

Working with the Eventbrite API Plugin

December 8, 2014 Kirk Wight

Eventbrite and WordPress are the perfect fit, but until now, integrating the two has not been for the faint of heart. In early 2014, Eventbrite announced its new upcoming REST API, and this became the perfect opportunity to give theme developers an easy-to-use set of tools for working with Eventbrite events: the Eventbrite API plugin.

The plugin gives theme developers three ways to interact with the Eventbrite API:

Theme support
The Eventbrite_Query class
Helper functions

Theme Support

While the Eventbrite API plugin can display events in any theme, events look their best if the theme declares support and provides tailored templates. This simple process guarantees that events fit perfectly with the theme design, and adding support should take no more than ten minutes.

Add a support declaration, hooked to after_setup_theme. There are no arguments, and usually this can be added to a theme’s existing setup function.

function themeslug_setup() {

	...

	/**
	 * Add theme support for the Eventbrite API plugin.
	 * See: https://wordpress.org/plugins/eventbrite-api/
	 */
	add_theme_support( 'eventbrite' );
}
add_action( 'after_setup_theme', 'themeslug_setup' );

Create an eventbrite folder in your theme, and copy over the plugin’s main template files (tmpl/eventbrite-index.php and tmpl/eventbrite-single.php).
Compare the markup in eventbrite-index.php to your own index.php and adjust as necessary. Also, verify that your markup for archive titles matches the Eventbrite template’s page title. The Eventbrite templates don’t use template parts for the post markup, so you may need to compare with content.php or the like. Of course, there’s no reason you couldn’t add a content-eventbrite.php to your theme, if you prefer.
Repeat step 3 with eventbrite-single.php and your own single template.

That’s it! If support is declared, the plugin will use those templates if they exist, or fall back to the plugin’s templates. To see some custom templates in action, check out any of the Twenty* default themes; their templates are included in the plugin.

Eventbrite integration with Twenty Fifteen.

The Eventbrite_Query Class

It was important to us that working with the Eventbrite API plugin should be a simple and familiar process for theme developers, with a low barrier to entry. With that in mind, we developed the Eventbrite_Query class, so fetching and displaying events is as simple as making a secondary loop (in fact, the class extends WP_Query). This allows for easy creation of special-purpose loops, widgets, creative page templates – any combination of events you want to display in a theme.

<?php
	// Get the next three unpublicized events for the Apollo Planetarium.
	$events = new Eventbrite_Query( apply_filters( 'eventbrite_query_args', array(
		'display_private' => true,
		'limit' => 3,
		'venue_id' => 6955925,
	) ) );

	if ( $events->have_posts() ) :
		while ( $events->have_posts() ) : $events->the_post(); ?>

There are a few things to keep in mind while working with Eventbrite_Query loops.

You can continue to use familiar template tags in event loops, such as the_post_thumbnail(), the_title(), the_content(), etc. They’ve simply been filtered to provide content from the current event.
For technical reasons, a few template tags need their Eventbrite equivalent, such as eventbrite_is_single() and eventbrite_edit_post_link().
Being a secondary loop, don’t forget to add wp_reset_postdata() at the end.
All of the plugin’s template tags are pluggable, and filters exist at various points for further customization.

Helper Functions

If you’re happy processing your own results, and just want an easy-to-use set of tools to handle the API requests, the included helper functions are for you. Each supported API endpoint has its own helper function, and these functions in turn use the Eventbrite_Manager class for the heavy lifting. Not only does this class make the actual API requests, but also handles validation and transients, so you can concentrate on results rather than mechanics.

The Eventbrite API plugin is developed on GitHub, and issues or questions can be posted there or in the forums. Additional info and documentation can be found here.

Along with the Eventbrite Services plugin, it’s never been easier or more fun to display events in your WordPress website. Let us know what you’re doing with Eventbrite, and tell us if there’s anything the Eventbrite API plugin can do to make your Eventbrite integrations easier for you!

The Eventbrite API plugin requires the Keyring plugin for managing OAuth2 authorization to Eventbrite. If you get stuck, check out our detailed instructions for getting connected to Eventbrite.

ThemeShaper

Behind the Design of the Forefront theme

The Genericons Icon Font Story

Underscores.me — The Best Way To Get Started With The _s Theme

Up Your Theming Game by Reviewing Themes

What’s new in WordPress 4.1 for Theme Developers?

Auto-generated Title Tags

Navigation and Pagination

Post Navigation

Posts Navigation

Post Pagination

Archives

Archive titles

Archive description

Screen Reader Text

Deprecated Admin Screens

Want to know more?

Sequential

Intergalactic Takes Flight

Penscratch

Working with the Eventbrite API Plugin

Theme Support

The Eventbrite_Query Class

Helper Functions