Objective
To expand the width of the main content page when using the WordPress Twenty Fourteen theme.
Solution
In order to expand the main content page, you need to modify the WordPress Twenty Fourteen theme by creating a new child theme. A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. If do not use a child theme, and you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
- The child theme directory
- style.css
- functions.php
The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required,) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. Forthis exercise, we will call our child theme ‘twentyfourteen-child’, indicating that the parent theme is the Twenty Fourteen theme.
[root@nowherelan www]# cd wp-content/themes/
[root@nowherelan themes]# ls -l
total 24
-rw-r--r-- 1 apache apache 28 Jun 5 2014 index.php
drwxr-xr-x 6 apache apache 4096 Dec 22 04:50 twentyfifteen
drwxr-xr-x 8 apache apache 4096 Dec 22 04:50 twentyfourteen
drwxr-xr-x 8 apache apache 4096 Dec 22 04:50 twentynineteen
drwxr-xr-x 5 apache apache 4096 Dec 22 04:50 twentyseventeen
drwxr-xr-x 7 apache apache 4096 Dec 22 04:50 twentysixteen
[root@nowherelan themes]# mkdir twentyfourteen-child
[root@nowherelan themes]# chown apache.apache twentyfourteen-child/
The next step is to create your child theme’s stylesheet by copying the style.css file.
[root@nowherelan themes]# cp -p twentyfourteen/style.css twentyfourteen-child/style.css
Modify the style.css stylesheet file so that it begins with the following header:
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
A couple things to note:
- You will need to replace the example text with the details relevant to your theme.
- The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fourteen theme, so the Template will be “twentyfourteen”.
Find the section that says:
.page-content {
margin: 0 auto;
max-width: 474px;
}
Change it to:
.page-content {
margin: 0 auto;
max-width: 990px;
}
The final step is to enqueue the parent and child theme stylesheets
in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory containing:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'twentyfourteen-style'; // This is 'twentyfourteen-style' for the Twenty Fourteen theme
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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
where parent-style is the same $handle used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfourteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is 'twentyfourteen-style'.
Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance> Themes. You should see your child theme listed and ready for activation.
Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.
My System Configuration
- WordPress version 5.0.2
- WordPress Twenty Fourteen theme version 2.4
References
