7 Code Practices From Twenty Ten Theme For Developers

twenty ten wordpress 3.0 7 Code Practices From Twenty Ten Theme For Developers

Twenty Ten is the next default theme in WordPress which is released in version 3.0. Twenty Ten theme comes with new features of WordPress 3.0 like custom navigation menus, custom headers and backgrounds. Not like old Kubrick theme, the code of Twenty Ten theme is well improved, and as a theme developer, we will explorer some interesting points of it in this article.

1. HTML 5

HTML 5 is a next standard of web. It’s still new and being developed. But some of its techniques can be used right now. And the Twenty Ten theme is doing that by declaring in the header.php file new DOCTYPE and meta tag for charset:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />

2. Using get_template_part to avoid duplication code

WordPress 3.0 has introduced new function get_template_part for including custom template into current page. This will help developers reduce the maximum of duplicated code. The Twenty Theme uses this function to detach code for loop into a separated file loop.php. Let’s see the code in index.php file:

<div id="container">
    <div id="content" role="main">

    <?php
    /* Run the loop to output the posts.
     * If you want to overload this in a child theme then include a file
     * called loop-index.php and that will be used instead.
     */
     get_template_part( 'loop', 'index' );
    ?>
    </div><!-- #content -->
</div><!-- #container -->

You might want to check my previous post for better understanding of using get_template_part function.

3. Creative usage printf, sprintf and escape functions

printf, sprintf are PHP functions used to display a string in given format. In WordPress, their strength is showed in localized theme strings. Escape functions, such as esc_attr() and esc_html() are very useful for escaping unwanted characters in given strings. In Twenty Ten theme, these functions are used together in a very creative way, for example to display the post title in a loop (in loop.php file):

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Another example in loop.php file, too:

<p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ), 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', $total_images); ?></em></p>

You can find many places of theme files where these functions are used together to get a powerful and flexible way of displaying strings.

4. Special styles for Asides and Galleries Categories

Twenty Ten provides special styles for posts in the “Asides” or “Gallery” categories. When viewed on an index page, asides get a simplified look that seamlessly fit between full-length posts, while galleries give a peek at the photos that lie within. If you don’t already have those categories on your blog, just add them and start assigning posts to them. Twenty Ten will recognize the category name and start applying the correct styles automatically. The code for this functionality is located in loop.php file:

<?php /* How to Display posts in the Gallery Category */ ?>
    <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
...
<?php /* How to display posts in the asides category */ ?>
    <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>
...
<?php /* How to display all other posts */ ?>
    <?php else : ?>
    ...
    <?php endif; // if different categories queried ?>
<?php endwhile; ?>

5. SEO for meta title tag

If you use a SEO plugin, such as All-In-One SEO Pack, it will care all about SEO for you. But it’s work a look at new improvement for meta title tag for better SEO in Twenty Ten. Let’s open header.php file, you’ll a bunch of code like this:

<title>
<?php
    if ( is_single() ) {
        single_post_title(); echo ' | '; bloginfo( 'name' );
    } elseif ( is_home() || is_front_page() ) {
        bloginfo( 'name' );
        if( get_bloginfo( 'description' ) )
            echo ' | ' ; bloginfo( 'description' );
        twentyten_the_page_number();
    } elseif ( is_page() ) {
        single_post_title( '' ); echo ' | '; bloginfo( 'name' );
    } elseif ( is_search() ) {
        printf( __( 'Search results for %s', 'twentyten' ), '"'.get_search_query().'"' ); twentyten_the_page_number(); echo ' | '; bloginfo( 'name' );
    } elseif ( is_404() ) {
        _e( 'Not Found', 'twentyten' ); echo ' | '; bloginfo( 'name' );
    } else {
        wp_title( '' ); echo ' | '; bloginfo( 'name' ); twentyten_the_page_number();
    }
?>
</title>

This code will display the title in format:

  • Post Name | Blog Name for posts, pages
  • Blog Name | Blog Description for homepage
  • Seach results for Keywords Page Number | Blog Name for search page
  • Post Name | Blog Name Page Number for other pages

This format is the default template in many popular SEO plugins, and it’s already well-doned in default WordPress 3.0 theme.

6. Limit the maximum width for post images

In a previous post, I’ve mentioned about the $content_width variable, which is used for limiting the maximum images width of posts. Although this variable has existed for a long time, but until the version 3.0 it wasn’t used.

7. New editor style

WordPress 3.0 provides function add_editor_style() to add ability to change default editor style (TinyMCE), and Twenty Ten them uses it to make the post content looks like its version in the front-end.

These are 7 things from Twenty Ten theme in WordPress 3.0 package that I think very useful for theme developers. Understanding and learning from Twenty Ten theme can help developer better code as well as better organize theme files. Reading Twenty Ten code is also a good way to learn how to use new features in WordPress 3.0, how to implement them in our themes. I hope this article is useful for you. And if it can help you in theme development process, it will be my great pleasure.

Leave a Reply