Making the content area of the WordPress twenty-fourteen template wider.



This tutorial shows you how to make the content area of the WordPress twenty-fourteen template wider in 4 easy steps.

Why should I do this?

The default content with of 474 pixels is rather small and content is wrapped quickly. This may reduce the reading quality of your content.

To fix this issue you could simple modify the style.css in the /wp-content/themes/twentyfourteen folder, but a better way is to create a child template and specify the style changes in there:

1. Create a child folder
Go to the /wp-content/themes folder of your WordPress installation and create a new folder.
You can call it [main-template-name]-child but that is not required.
In this case we will create the folder twentyfourteen-child.

2. Create a file style.css
In the newly created folder, create the style.css file and add the following content to it:

The only real important part in this section is the “Template: [name-of-parent-template]” line. You need to reference an existing template here.

In order to enlarge the page content area we need to add the following css to this style.css.


3. Inherit the default of the theme style.
We only want to adjust the width of the page content. All other styling should be retained.
In order to inherit the style from the parent theme, we create a second file in the child theme folder with the name functions.php.

Very important is to make sure you have no text or whitespace (spaces, newline) before the <?php and after the last }.
Else you might expect a php exception like “Cannot modify header information – headers already sent by …”

 4. Select the child theme in the dashboard

In the WordPress administration go to Appearance > Themes and select the newly created “twentyfourteen-child” theme.

You may want to read this similar tutorial Making the WordPress twenty-fourteen template centered.