Creating this Website – Part 3: Customising a theme

Part 1 and Part 2 of this series described the changes made to WordPress without doing any programming.

Part 3 describes how to customise an existing theme and create a custom post type. For this, some programming is involved.

All the source code can be found in my GitHub repository.

Ways of creating themes

There are several ways to change a theme in WordPress. Here are some ways:

  1. The easiest way to change a theme is to use the built-in theme customisations features in WordPress. Some of these were described in Part 2.
  2. Select a new existing theme from the admin interface. There are many free and commercial themes available.
  3. Copy an existing theme and edit it to be the way you want it to be.
  4. Create a child theme of a theme that is mostly what you want. A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. For more information, see the WordPress Theme Handbook and read about some pros and cons of child themes.

I chose option 4 because I wanted to ensure that as WordPress upgraded the theme I used (TwentyFifteen), I would benefit from the changes. Writing a theme to work on different browsers and different devices is time-consuming. There was plenty to do without creating a new theme, even if I did have all the types of devices that people use to browse the web!

Creating a new theme

The Theme Handbook describes the how to create a child theme. In this section, I’ll describe how I customised the TwentyFifteen WordPress theme.

header.php file

At one point, I changed this file to include some Google fonts. Eventually, I didn’t use those fonts.

If you want to add Google fonts, change the <head> section to add the font after the last <link> tag. Here’s an example of adding the Roboto font so that you can use it on your site:

<head>
...
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

</head>

footer.php file

The footer.php file contains the text that appears at the bottom of every page on the web site. I changed it to add copyright notice and extra links.

content.php file

The content.php file handles the logic for displaying the feed of posts on the home page. By default, complete posts are shown. I added a new content.php to my child WordPress theme. The new file shows the excerpts for posts instead of the complete posts. Furthermore, instead of showing "Continue reading" for excerpts, the link is changed to display "Continue reading" or "View photos" or both depending on what the post contains. The customisation of the links is done in functions.php.

style.css file

The style.css contains custom css information. I created a new style.css file to override some of the styles defined in the parent theme and add new styles.

It’s easiest to look at style.css on GitHub whilst reading the description below.

The custom style.css file has the following additions:

  • Adds new styles for the custom post type that I created to show and edit photo albums.
  • Changes the font for headings and other related fonts.
  • Changes the font colour for sidebar text to white.
  • Changes the position of the dropdown ("hamburger") menu to be visible against header.

functions.php file

Most of the above changes are relatively trivial. Less trivial are the changes in functions.php, which required me to learn php.

It’s easiest to look at functions.php on GitHub whilst reading the description below.

The custom functions.php file has the following additions:

  • Notifies WordPress that a child theme has been created.
  • Stops WordPress from overwriting the .htaccess file, which I’ve modified to handle servers running FastCGI.
  • Adds an action to sort photo albums alphabetically instead of by publication date.
  • Adds a filter to create an extract for posts on the home page (instead of displaying the complete post). If the extract is not the complete post, then "Continue reading" and/or "View photos" is appended to the extract so that readers know whether there is more to read or more photos to view or both.
  • Adds a filter to show recently modified albums on the home page (under Recent Updates). The sort order is changed from date of publication to modified date (although I ended up changing this back to publication date).
  • Change the links at the bottom of each album so that the next/previous links are ordered alphabetically. The default order is publication date.

Creating the album custom post type

WordPress comes with many post types; the more familiar include the post, page, and attachment post types. You can also create your own post types if the pre-defined ones don’t meet your requirements. Any post that is not part of standard WordPress is a custom post type. You can read about them here. I created a photo album post type for my photo albums. There are plugins for this but I wanted something fairly simple.

The source code for the album custom post type is on GitHub.

The album custom post type does the following:

  • Registers itself as a new post type once it’s installed as a plugin.
  • Provides properties about itself, such as what it should be called under various conditions (singular, plural, on menus, etc).
  • Lets you add, edit, search for and delete albums.

An album itself is displayed in the same way as a standard post. However, to display all albums (the archive of albums), I’ve created a custom archive file for the child theme described above. I deferred its description until the album custom post type was introduced.

archive-pk-photo-album.php

Whether you want to display a single post, a collection of posts or the equivalent for custom post types, you can provide WordPress with the appropriate content or archive files.

I created archive-pk-photo-album.php to display all photo albums.

Most of the code is standard for displaying archives. However, I created new styles (in styles.css) to format the album archive page so that:

  • Two albums appeared per row unless the reader is using a small device (in which case one album appears per row).
  • Only the album’s featured photo appears; no content text (if there’s any).
  • The position of the album’s title is overlaid on the featured photo.

You can see the result here.

Next

As you can see customising a theme is not overly complicated but did require that I learn WordPress and PHP from a programmer’s perspective.

The next part of this series will describe how I populated WordPress with posts and albums from my Facebook account.

Leave a Reply