10 Things to Learn from Twenty Fifteen Theme

twenty fifteen

Twenty Fifteen is now available. It was released with the WordPress 4.1. If you are a WP theme developer or you simply want to improve your current theme, you can learn much from the Twenty Fifteen. Here is a list of useful tips and tricks I learned form that theme:

 

1. You don’t need to add <title> tag in header.php

All you need to add this code in functions.php:

add_theme_support( “title-tag” );

In this way, you declare that WordPress will take the care about title in the website.

Note: If you add title-tag support, make sure that <title> tag is not included in your theme files.

 

2. Proper way to load Google Fonts in your theme

google fonts

You probably used to include google fonts in your style.css file. However, it has one big disadvantage: The font you include may not support the language of your WordPress website. This could be a language support hell.

However, there’s a way to set if a certain language to support or not your google font:

Add a string, i.e. ‘on’ in your .po file. If the font doesn’t support that language, set the value to ‘off’. Then in your code,  add a simple check if the lang string is translated, then load the font form your code or if its value is ‘off’, just skip loading it:

function twentyfifteen_fonts_url() {

$fonts_url = ”;

$fonts     = array();

$subsets   = ‘latin,latin-ext’;

 

/* translators: If there are characters in your language that are not supported by Noto Sans, translate this to ‘off’. Do not translate into your own language. */

if ( ‘off’ !== _x( ‘on’, ‘Noto Sans font: on or off’, ‘twentyfifteen’ ) ) {

$fonts[] = ‘Noto Sans:400italic,700italic,400,700’;

}

if ( $fonts ) {

$fonts_url = add_query_arg( array(

‘family’ => urlencode( implode( ‘|’, $fonts ) ),

‘subset’ => urlencode( $subsets ),

), ‘//fonts.googleapis.com/css’ );

}

return $fonts_url;

}

 

3. Enqueue all scripts and styles from a single function

Instead of including your styles and scripts from different parts of your code, it’s a good idea to include all of them in one function:

function twentyfifteen_scripts() {

// Load our main stylesheet.

wp_enqueue_style( ‘twentyfifteen-style’, get_stylesheet_uri() );

if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {

wp_enqueue_script( ‘comment-reply’ );

}

}

add_action( ‘wp_enqueue_scripts’, ‘twentyfifteen_scripts’ );

 

4. Use get_template_directory() to declare a path of files to include

require get_template_directory() . ‘/inc/template-tags.php’;

 

5. Make your theme translation ready

– declare all text strings using ‘__(‘, ‘_e(‘, and ‘_x’ methods, i.e.

<?php _e( ‘Comments are closed.’, ‘twentyfifteen’ ); ?>

– load text domain in functions.php

load_theme_textdomain( ‘twentyfifteen’, get_template_directory() . ‘/languages’ );

– generate and include pot file using a filename:

themefolder/languages/themename.pot

 

6. Comments

Good comments help users of your theme to understand easier the code of your theme. It’s a good idea to include a comment before every function, including a short description, @param for each of the parameters, @return information, @since which version of the theme the function is added.

/**

* Convert HEX to RGB.

*

* @since Twenty Fifteen 1.0

*

* @param string $color The original color, in 3- or 6-digit hexadecimal form.

* @return array Array containing RGB (red, green, and blue) values for the given

*               HEX code, empty array otherwise.

*/

function twentyfifteen_hex2rgb( $color ) {

}

 

7. Add a prefix before every function name. It could be the name of your theme in lowercase, i.e.

function twentyfifteen_categorized_blog() {

}

 

8. Add readme.txt file

readme.txt

The file could include theme name, description, installation instructions, frequently asked questions.

 

9. Less content-[Post Format].php files

In Twenty Fourteen theme there were more files for specific post formats, i. e. content-gallery.php, content-image.php, content-audio.php, content-quote.php, content-video.php. However, in Twenty Fifteen many of them are removed.

I think the idea of content-[Post Format].php is to define such file ONLY when its content is specific (different than the default content.php). In this way, there are no too many files in your theme folder as well as there is no copy-paste code in your theme.

 

10. Customize the Customization admin screen using the ‘customize_register’ action hook

function twentyfifteen_customize_register( $wp_customize ) {

$color_scheme = twentyfifteen_get_color_scheme();

$wp_customize->get_setting( ‘blogname’ )->transport        = ‘postMessage’;

$wp_customize->get_setting( ‘blogdescription’ )->transport = ‘postMessage’;

 

// Add color scheme setting and control.

$wp_customize->add_setting( ‘color_scheme’, array(

‘default’           => ‘default’,

‘sanitize_callback’ => ‘twentyfifteen_sanitize_color_scheme’,

‘transport’         => ‘postMessage’,

) );

}

add_action( ‘customize_register’, ‘twentyfifteen_customize_register’, 11 );

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply