Editing a Theme

Posted 04th October, 2018

Wordpress themes are downloadable and installable through the Admin area. There are thousands available.

Styling on a website, including Wordpress, is handled though CSS (Cascading Style Sheets). On a Wordpress site this handles colours. fonts, formatting and more. Minor tweaks are easily done in CSS.

Every Wordpress theme contains a style.css file, which sits within the theme folder. In most cases, this contains all the styles for the theme.

It is important to read official theme documentation if a custom theme is being used. Often themes allow for basic modification within the admin area. This should be used wherever possible, as an update of the theme may overwrite custom code if this is the case.

Avoid Directly Editing CSS

Most themes provide the user the ability to edit the css on top of the current one. That means that no actual changes are happening to the files but instead all is saved within the database. This means that whenever there is an update of the theme - the changes will not be overwritten. Usually this option would be placed within Appearance >> Customize >> Custom CSS but can also be found within the Theme Options menu if such is available.

When using this option you can directly write the new CSS using the element classes as usual.

Another way of editing a theme is to create a child theme, which inherits, and supersedes, a parent theme.

The parent theme can be directly edited to change the lookout of the website, for example by changing the style.css, or by adding an additional stylesheet to the header of the theme. However, this may be overwritten when a theme is updated.

Child Themes

A child theme has the same folder structure as any other theme, and includes a style.css and functions.php file as a minimum.

A child theme can be created as follows:

• Create a directory for the child theme. Standard convention is to create a folder within wp-content/themes called yourParentTheme-child.
• Create a style.css file, which includes the following code (replace 'Parent Theme' with your own theme parent)

 Theme Name:   Parent Theme Child
 Theme URI:    http://example.com/parent-theme-child/
 Description:  Parent Theme Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     parenttheme
 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:  parent-theme-child

• Create a function.php file, with the following content (again, replace Parent Theme with your theme parent).

<?php 
function my_theme_enqueue_styles() {

    $parent_style = 'parenttheme-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parenttheme_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parenttheme_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

• This theme can now be enabled in the Wordpress Admin area, and the css edited without danger of it being overwritten by an update to the parent theme.

Useful Links

Child themes - official documentation