Child Theme

In WordPress, as with all contemporary blog and content management systems, advantage is taken of the separation of content from structure and aesthetic formatting to make changing the style and functionality of a site instant and easy using what are called themes. WordPress themes contain a series of files and scripts, including javascript and php files, which are used to construct the webpages from various page parts such as the header, content area and footer. Changing the theme takes seconds and can completely change the functionality and look of a website, but not the content.

This Theme

The theme I am using on my blog is a child theme of the default Twenty Seventeen WordPress Theme. A child theme is used for making changes to an existing theme or customising a theme. Instead of editing the original theme, which will loose all the changes made when it is subsequently update, it is best practice to make a child theme.

WordPress will load the child theme after the parent theme, the sequential reading of code means that the child theme’s options will be read last and over rule the original instructions from the parent theme, before being served to the browser. This method is very advantageous as you only need to include the elements you want to change in the theme files and your changes will not be affected by updates of the parent theme.

A child theme requires the following files (although more can be added, as in the case with this child theme, as required)

    • The child theme directory (you tell wordpress that your theme is a child, and specify a relationship to the parent theme)
    • style.css ( you add the styling for only the elements you want to customise from the parent theme)
    • functions.php ( you can use this to add functionality to the website, expanding the range of the dynamic elements of the pages)

For this child theme, I added functions to include a side menu on pages whereas the parent theme only has them on the posts. WordPress has a system of pages and posts. Generally pages are for more static content which will not change often and are usually accessible from the main menu, for example “About” or “Contact”. Posts, by contrast, are usually topical or more dynamic, being posted regularly, and are normally grouped by categories and accessed through lists of articles on a side menu.

The custom files within the theme include a functions.php and style.css. I also  edited the php script in a number of the default php files to change the dynamic content loaded and added css classes to change padding, add background images, and change font weight on some font elements.

An example of customisation.

This is just one example of numerous ways I subtly changed the default Twenty Seventeen Theme with my child theme.

Elements of the footer were changed, including the WordPress attribution which has been replaced by a copyright sign followed by php code to display whatever happens to be the title of the site.

Original PHP:

<div class="site-info">
 <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->

Replacement PHP

<div class="site-info"> &copy; <?php bloginfo( 'name' ); ?> </div><!-- .site-info -->

I did this to avoid hard-wiring my copyright notice into the child theme, as it is accessible to all DH students and could, in theory, be used by them if they wanted.

However, I subsequently changed from a copyright notice to a Creative Commons licensing notice and therefore needed to edit this. Again, since the theme has the potential to be used by other students, I added the creative commons license to the footer widget area in the WordPress user interface, which will only affect this specific site.

I could then use the custom css field in the WordPress user interface (again only affecting this website) to edited the viability attribute of the “site-info” class which is the css style that formats the the copyright notice (originally the WordPress attribution notice).

Original CSS:

.site-info .sep {
 margin: 0 0.5em;
 display: inline;
 visibility: visible;
 height: auto;
 width: auto;
 }

Replacement CSS:

.site-info {
 margin: 0 0.5em;
 display: inline;
 visibility: hidden;
 height: auto;
 width: auto;
 }

 

Here I changed visibility: visible; to visibility: hidden; thereby hiding the content on this blog, but not affecting the child theme’s functionality.