Canard screenshot

Meet Argent, Cerauno, and Canard

We’re proud to present a trio of new free themes, now available for your self-hosted site through the WordPress.org theme directory.

Argent is a modern portfolio theme, perfect for creative professionals like designers, artists, and photographers. Designed by Mel Choyce and developed by Ola Lacek, Argent lets you add portfolio projects through Jetpack’s Custom Content Types module.

Argent screenshot

A magazine-style theme designed by Mel Choyce, Cerauno was developed by Caroline Moore. On her inspiration, Mel says,

I designed Cerauno with subject bloggers in mind, like food, fashion, or travel bloggers. I wanted to make a theme for someone who’s been blogging for a little while, but wants to boost their traffic and bring their site into the spotlight with a clean and authoritative design. I’m so excited to see it launch!

Cerauno screenshot

Canard is flexible theme geared to magazines, news sites, and blogs. Created by Thomas Guillot, Canard lets you feature specific articles on the homepage and balances readability with a powerful use of photography.

Canard screenshot

Ellen Bauer and Manuel Esposito of Elmastudio.

Elmastudio on Running Your Own Business, Theming, Selling on WordPress.com and More

Devin Price of WP Theming recently interviewed Ellen Bauer and Manuel Esposito of Elmastudio about running your own theme business, selling on WordPress.com, and much more. You can listen to the interview or read the transcript. It’s a great peek inside a successful theme business. Here are a few of my favorite quotes:

Ellen, on the hardest parts of running a theme business:

You have to find a work routine yourself and be consistent. Over the long run, if you want to do your work or job for a couple years, you have to think a little bit ahead. I think this is what we’ve learned over the last years, that consistency is most important. You have to be there for your customers and for your people.

Manuel, on finding inspiration:

All of the stuff that’s happening in your life and around you. It could be food. Print magazines are great inspirations for typography, the detail stuff. But the main designs, the layout, the conception- it comes from weird stuff actually.

Ellen, on focusing a design:

From our experience, we just have the most fun and we can do the best job we can if we do design we just love and we would use. It’s okay, not everyone loves our style of design. I think it’s totally okay because there are so many solutions to doing a WordPress design.

Ellen, on selling themes on WordPress.com:

We always try to do very minimal themes and do them, if you can say, the WordPress way – don’t do a very custom development style, so it’s not that hard to get the themes [to] work on WordPress.com.

Image courtesy of Elmastudio.

Cyanotype and Satellite Available on WordPress.org

Cyanotype and Satellite, two fresh new themes geared to personal bloggers, are now available for download at WordPress.org.

Designed by Automattic Theme Wrangler Takashi Irie – of Twenty Fourteen and Twenty Fifteen fame – Cyanotype is a bold, original blog theme. Its distinctive high-contrast color scheme pays tribute to the classic photographic printing technique, which produced images known as blueprints. Change the background color to give your site a different look.

Cyanotype

A child theme of Scrawl, Satellite is a snappy personal-blogging theme brought to you by Automattic’s Caroline Moore. It tucks away the menu and widgets in a slide-out side panel, keeping the focus on your content.

Satellite

Take Scrawl For a Spin

Scrawl, a new monochromatic theme designed by Automattic’s Caroline Moore, is available at WordPress.org for self-hosted sites. Featured images get bold treatment on single posts, while snazzy image captions and pull-quote styles add pizzazz to your text. A slide-out sidebar provides easy access to secondary content like social links, a custom menu, and widgets. Download Scrawl or check out the demo.

Scrawl screenshot

South Beach Inspires Sobe Theme

Sobe, a new personal-blogging theme created by Caroline Moore, is now available in the WordPress.org theme directory.

“Sobe was inspired by the popularity of one of my other themes, Pachyderm. I wanted to create a theme with a similar look and feel in a more updated style. The color palette was drawn from a trip to South Beach, Miami–hence, the theme name.”

Adding widgets turns Sobe’s single-column layout into a two-column format; Sobe also supports a site logo upload with the Jetpack plugin. Get aquainted with Sobe by visiting the demo site or take it for a spin by downloading it from the theme repo.

Sobe theme screenshot

Photobloggers Take Note: Boardwalk and Cubic are Here

Two fresh photoblogging themes crafted by Automattic’s Thomas Guillot are now available to download in the WordPress.org theme directory.

Boardwalk features an unconventional horizontal-scrolling blog stream and large portrait-oriented featured images, as seen on the demo site. A child theme of Boardwalk, Cubic showcases square featured images in a large grid layout. Check out the demo site to see how the theme makes the most of strong photos.

boardwalk-ss

cubic-ss

Sela Puts a Vibrant Spin on the Business Theme

Designed by Automattic’s Ola Laczek, Sela puts a vibrant spin on the business theme and is now available for download at WordPress.org. With plenty of space to accommodate large images, Sela puts the focus on your company with a bold front-page template and a grid-page template perfect for showcasing products or services. With Jetpack, you’ll also get integrated testimonials and the option to upload a logo graphic. Sela is a beautiful canvas on which to tell your business’s story and looks great on all devices, from desktop to mobile. Download it now or check out the demo site.

Sela screenshot

What’s new in WordPress 4.1 for Theme Developers?

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.

Post Navigation

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 href="http://website.com/beautiful-sea" rel="prev">Beautiful Sea</a></div>
        <div class="nav-next"><a href="http://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 href="http://website.com/page/3">Older posts</a></div><div class="nav-next"><a href="http://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" href="http://website.com/page/3/">Previous</a>
        <a class="page-numbers" href="http://example.com/">1</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" href="http://example.com/page/3/">3</a>
        <span class="page-numbers current">4</span>
        <a class="page-numbers" href="http://example.com/page/5/">5</a>
        <a class="page-numbers" href="http://example.com/page/6/">6</a>
        <a class="next page-numbers" href="http://example.com/page/5/">Next</a>
   </div>
</nav>

Archives

Archives are an important feature in WordPress. By default, WordPress supports taxonomy (categories, tags and post formats), author, and date (year, month, day) archives.

Two of the default taxonomies, categories and tags, support archive descriptions. This feature allows users to add descriptions for each term in these taxonomies.

It has become a best practice among theme developers to display these descriptions on archive pages, along with a contextual archive title. WordPress 4.1 introduces two new template tags to help with this.

Archive titles

The the_archive_title() and get_the_archive_title() functions display the title of an archive, as in the term or the date, with a contextual text prefix. The prefix depends on the type of archive:

  • “Category: ” for category archives.
  • “Tag: ” for tag archives.
  • “Author: ” for author archives.
  • “Year: “, “Month: ” and “Day: ” for date archives.
  • “Asides: “, “Galleries: “, “Images: “, “Videos: “, “Quotes: “, “Links :”, “Statuses: “, “Audio: ” and “Chats: ” for post format archives.
  • “Archives: ” for custom post type archives.
  • Singular taxonomy name for custom taxonomy archives.

Theme developers that want to modify the default strings can use the get_the_archive_title filter to do so.

The the_archive_title() accepts two arguments, $before and $after, that can be used to add additional text or HTML before or after the archive title.

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;
    height: 1px;
    width: 1px;
    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!

A Duo of New Themes: Motif and Capoverso

Two new free themes from Automattic are now available at WordPress.org.

Long a popular business theme over at WordPress.com, Motif now makes its debut in the WordPress.org directory. A fork of Okay Themes’ Paradigm theme, Motif was completely overhauled by Frank Klein on both the design and code fronts, resulting in a responsive theme well suited to companies and organizations looking for a professional and contemporary web presence.

Motif

Designed by Davide “Folletto” Casali and developed by Caroline Moore, Capoverso is named after an Italian word for the indent in the first line of a paragraph. Davide describes its inspiration:

Capoverso was born as a minimalist typographic theme that could be massively customized with just a couple of images, allowing the expression of the author’s personality in a rich yet simple way. This shows at its best on the homepage: a full-screen image that has large text and the main navigation beneath. Just a couple of tweaks and it’s really your theme.

Capoverso

Two themes, two distinctive personalities: enjoy Motif and Capoverso!