More on Child Themes

In my last post I left a few things rather up in the air. We saw that to create a child theme we would have to create a new directory on the server and populate it with one or more files. If you haven’t done this sort of thing before you may be at a loss as to how to go about it.

First, to recap: we want to create a directory called (say) child, in the themes directory of the WordPress installation that implements a given website. As a reminder, here’s how we’re expecting the relevant part of the directory structure to be organised:

httpdocs
    |
    + -- wp-content
    |       |
   ...      + -- themes
            |       |
           ...      + -- twentyfifteen
                    |       |
                    |       + -- (etc.)
                    |
                    + -- twentysixteen
                    |       |
                    |       + -- (etc.)
                    |
                    + -- (etc.)

It’s worth mentioning that httpdocs isn’t the top directory of the system, but it may well be the highest level directory you have access to. This depends on the ‘interface’ you’re using. If you use a control panel like Plesk or cPanel you will be protected against damaging your system (and more importantly against other people damaging your system) by only allowing access to directories and files you might reasonably want to view or change. You can do whatever you like to the files in those directories (subject to the permissions that have been set), even if you mess up your site in the process, but you cannot change system files or, if you’re using a shared server, files belonging to other people.

On the other hand, if you have ‘shell’ access to a VPS (Virtual Private Server) via SSH, particularly if you have ‘root’ access, you have much more power — and correspondingly more responsibility, so use it carefully!

I’m going to assume we’re working through Plesk or cPanel. (If you’re using shell access you don’t need me to tell you how to find or access files!)

The first thing we have to do, then, is log into cPanel or Plesk, whichever is installed on your system. How you do this is to some extent system dependent, but your hosting provider should have given you all the access details you need. For example, to get into Plesk you will probably need to put something like

https://example.com:8443

in your browser’s address bar, where example.com is your website’s domain.

8443 is the ‘port number’. Normal HTTP or HTTPS accesses use different port numbers, which the server will assume by default, but when it sees that the port number is 8443 it ‘knows’ not to serve the usual HTTP stuff (i.e. index.html, index.php, or whatever) but to access the Plesk interface instead. (Yes, I know, ‘https’ implies port 443 and we’re adding port 8443 to the end. Other things are going on behind the scenes, but I don’t think this is the place to go digging any deeper! For a more detailed explanation you could try https://en.wikipedia.org/wiki/HTTPS.)

CPanel has a similar arrangement, but using port 208x, where x depends on the services it’s providing.

Once you’re into the control panel, you need to home in on the appropriate webspace for your site. Then look for ‘Files’, ‘File Management’ or ‘File Manager’, where you will see a structure like the one illustrated above.

Here it is in the Plesk File Manager for OBSON.NET. You’ll find something very similar for cPanel.

plesk-cp-httpdocs

File Manager for Plesk, showing httpdocs subdirectories for OBSON.NET

Navigate into the themes directory under wp-content, find the button to create a new directory, and click the button. Call the new directory child (or something else if you prefer). Navigate into the new directory and create a new file called style.css. Click on style.css.

Your control panel, whether Plesk or cPanel brings up style.css in its built-in viewer. It is, of course, completely empty. For WordPress to recognise and handle the file correctly as a child theme we need to insert some very simple identifying text. To do this we must first switch the viewer into ‘Edit’ mode by clicking the ‘Edit as Text’ button.

Now the important bit. Highlight the text below and copy it (Ctrl-C or menu: Edit > Copy):

/*
Theme Name:   [My Super-useful Child Theme] 
Theme URI:    http://[my.website.tld]/
Description:  Extends TwentySixteen
Author:       [My Name]
Author URI:   http://[my.website.tld]
Template:     twentysixteen
Version:      1.0.0
*/

@import url("../twentysixteen/style.css");

Then paste it into the new file (Ctrl-V or menu: Edit > Paste). Replace everything in square brackets as you see fit, and replace the template name with the name of the directory containing the theme you want to extend. Make the same change to the @import statement. Check everything carefully and click Save.

You now have a child theme. It doesn’t change anything as yet, but we’re about to fix that. You can exit the editor and log out of your control panel now, as we’ll do the rest in WordPress.

OK, now go back into your WordPress dashboard and select ‘Themes’. Your new theme should be displayed as one of the options. If everything looks OK, activate it. Nothing should change.

Empty child theme

Activating your new (empty) child theme

If you don’t want to change anything just yet, you can switch back to the parent theme, but for purposes of this exercise, let’s assume you want to make the changes we discussed in the last post.

Go back into the dashboard and select ‘Editor’ under the ‘Appearance’ menu. You should see exactly what you entered into style.css file in the control panel. From here on you can make your changes to the stylesheet directly from WordPress. Copy (Ctrl-C) the following, and paste it (Ctrl-V) below the @import statement.

.entry-title {
  hyphens: none;
  -moz-hyphens: none;
}

.site-branding .site-title a {
  color: #228833;
}

a {
  color: #007700;
}

Now change it however you wish (e.g. perhaps just change the link colour for now), click Save, and you’re done! View the website to see the result.

Congratulations! You now have a working child theme. It’s pretty basic, but it’s a start, and in future posts we’ll explore some of its more interesting possibilities.