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:
- remove the author info printed below each post (I don’t need it, I’m the only author at http://testinglikeaboss.com)
- show tags and categories descriptions on pages like http://testinglikeaboss.com/category/bad-tests-good-tests/
- print tags next to categories on posts list
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.