Remove hyphenation from WordPress Twenty Fifteen theme

After using the same WordPress theme since 2007, the time had come to switch. I quite like the default Twenty Fifteen theme, so I switched to that. I immediately noticed words in the site started automatically hyphenating. I don’t like that.

A quick inspection of the hyphenated words in Safari’s Web Inspector later, I learned this was done through the hyphens CSS property set to auto in conjunction with word-wrap set to break-word. This means the browser itself may (or may not) hyphenate words, based on the language of the text. The language of the text is inferred from the HTML lang attribute.

After a bit of googling around, I found the “correct” way of editing a WordPress theme: create a child theme.

Using my FTP client I created a new folder twentyfifteen-child in the wp-content/themes folder (you may want to create it locally first and add the following files, after which you can copy the entire folder to the server).

Next, I created two empty text files in this folder:

• style.css
• functions.php

The contents of the functions.php file are the default recommendation and make sure the child CSS is loaded after the parent CSS, which makes it possible to override the parent’s styles.

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

The contents of the style.css file are filled with the parts of the parent CSS that I want to override (a basic principle of CSS is overriding earlier defined styles by redefining them again later on). So I did a Find for hyph in the style.css file of the Twenty Fifteen theme. The CSS default for hyphen is manual. I’ve seen some recommendations to set it to none, but this will prevent all hyphenation, even with the ­ character (which is an explicit way of defining where the browser may hyphenate). I don’t like that, so I’m replacing hyphens: auto with hyphens: manual.

Next I replace word-wrap: break-word with the CSS default of word-wrap: normal. Boom, order restored!

/*
Theme Name:   Twenty Fifteen No-Hyphenation
Theme URI:    https://www.broes.nl/twenty-fifteen-no-hyphenation/
Description:  This theme is a child theme of Twenty Fifteen https://wordpress.org/themes/twentyfifteen with hyphenation returned to its default (meaning manual, not automatic).
Author:       Thijs Kuipers
Author URI:   https://www.broes.nl
Template:     twentyfifteen
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen-child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.widget {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-wrap: normal;
}

.entry-content,
.entry-summary,
.page-content,
.comment-content {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-wrap: normal;
}

.type-attachment .entry-title {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-wrap: normal;
}

.entry-caption {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    word-wrap: normal;
}

To make the theme look better in the WordPress Theme selector, I copied the screenshot.png file from the Twenty Fifteen theme to the Twenty Fifteen Child theme.

That’s it, you now have the Twenty Fifteen theme without automatic hyphenation!

I’ve put these changes together into a Zip file that you can download.