My first WordPress child theme

Posted on by Tomek Kaczanowski

I have made my first modifications to a WordPress theme today. I’m pretty proud of myself as I had no prior experience with WordPress-tweaking and the last time I touched PHP was around WWII 😉

Anyway, this post is to convince you that:

  • it is simple
  • you can do it

DISCLAIMER: I’m a WordPress noob. I achieved what I wanted but there might be better ways to do it (and if you happen to know about them, let me know, please!).

What I wanted

So, there are 3 main changes I wanted to introduce:

What I did

Child theme creation

Creation of child theme is dead simple and nicely described here. I used Cyclone Blog theme so I named my child theme cyclone-blog-child (how creative of me!).

There are 2 files you need to have in your child theme: functions.php & style.css.

As for functions.php file, I copied it from https://codex.wordpress.org/Child_Themes (without even trying to understand what it does, LOL).

My style.css file looks like this:

/*
 Theme Name: Cyclone Blog Child
 Theme URI: TODO unknown
 Description: Cyclone Blog Child
 Author: Tomek Kaczanowski
 Author URI: http://kaczanowscy.pl
 Template: cyclone-blog
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags:
 Text Domain: cyclone-blog-child
*/

The most important line is this one:

Template: cyclone-blog

It points out to another directory in my themes directory where the parent theme resides. Basically, it works like this: if some file is required (e.g. template-parts/content.php) then WordPress looks for it in the child theme directory. If the file is not found there, WordPress looks for it in the parent’s theme directory. So you put into your child theme directory only files that changed.

Eventually, I ended up with the following layout.

cyclone-blog-child/
├── functions.php
├── style.css
└── template-parts
 ├── content-detail.php
 └── content.php

Tools

I decided to keep everything in git repo (thx, http://bitbucket.org/ !) so I can easily revert stupid things I (unavoidably) do.

I used Visual Studio Code (https://code.visualstudio.com/) as my IDE.

Remove author info

I decided to start with removing (as it seemed easier than adding). I figured out (by inspecting elements with web developers tools) that I should get rid of the whole “blog-author” div. I found it in content-detail.php file. I copied the file to my child theme and modified it there.

Before the change, the ending of an article looked like this:

After the change:

Adding tag/category description

This one took slightly more time. But finally, I figured out that I should use the tag_description() function to display what I wanted. I already knew that content.php file is responsible for printing list of posts so I worked there. Surprisingly, it just worked! All I did was I added this snippet:

<?php if (tag_description() ) : ?>
<div>
   <?php echo tag_description(); ?>
   <hr />
</div>
<?php endif; ?>

Before the change:

After the change:

Tags list

The last thing I wanted to do is to enhance the list of posts with tags (currently only categories were shown). I looked at how the categories are printed and copied the function I found there changing “categories” to “tags”. Honestly, I did it hoping that it is gonna work. To my surprise, it does!

1) I added new function to functions.php file:

function cyclone_blog_post_tags( $post , $limit = false ){
  $post_tags = wp_get_post_tags( $post->ID );
  $tags = array();
  foreach($post_tags as $key => $t){
    if( $key == $limit && $limit != false ){
      break;
    }
    $tag = get_tag( $t );
    $tags[] = ‘<a href=”’ . esc_url( get_tag_link( $tag ) ) . ‘“>’ . esc_html( $tag->name ) . ‘</a>’;
  }
  echo implode( ‘ , ‘ , $tags);
}

2) I also added this snippet to content.php file:

`<span class=”entry-tags”>
 <i class=”fa fa-folder”></i>
 <?php cyclone_blog_post_tags( $post ); ?>
 </span>

Before the change:

After the change:

Ta-da!

All in all, this was surprisingly simple! I really like how the things are named in WordPress code so that I could assume things and they turned out right (e.g. I assumed the functions for tags and categories will be named identically and it was the case). Also the live preview allowed me to check the modifications I made on the fly, which is pretty cool.

    • Leave a Reply