Oops. I did it again…

I played with my theme, got lost in the game… and installed a brand new one ;) So yesterday I spent long hours tuning my new wordpress theme up :) Today I’m going to show you how to make small changes so that the theme’s layout meets your needs.

I decided to get myself a new layout because I wasn’t 100% happy with my old one, The Publisher. Both of the themes are pinterest like, but I missed a sidebar and a decent footer in the first one. There was also something not right with the infinite scrolling of posts. The author of The Publisher explained me they are relying on Jetpack plugin and there’s nothing he can do about the behavior I was concerned about. In this case I was forced to enable pagination of my posts. And I started looking for a new theme. Since I blog mostly about needle felted animals and my journeys I think pinterest layout suits me most.

I went for Pin theme, which has many customization options, advert support (maybe I’ll use this in the future), a sidebar on the first page and a nice footer. I also like the black and red accent colors and how post’s category name is displayed in the main stream:

I’ve made the above printscreen just now, when I’m in a process of writing this post. Yesterday it looked like this:

There are a few differences. I highlighted elements that I wanted to get rid off. I didn’t want to have social icons under my featured image (too many colors) and since I’m the only person publishing here I thought the information about the author is useless.

So how do I modify my theme in order to achieve the goal? I have to say that my css and php knowledge is based on what I learned at school, which is a long time ago ;) I know the basics and in most cases it’s enough. Back in the old times if I needed a change I was modifying template’s files directly. This did the trick but the trick lasted only for as long as the theme was not updated, so this is was not an ideal solution ;) The key to success are wordpress child themes. A child theme is like a new class derived from the base wordpress theme. You create a child theme and choose which functions you want to modify, which is like overriding a method in a derived class. Cool.

To create a child theme:

1. Navigate to your wordpress folder with themes: wp-content/themes and create a new folder named %yourtheme%-child 
2. Create style.css file and place it the new folder. The stylesheet must begin with the header:

   /*
   Theme Name: Pin WP Child
   Theme URI: http://themeforest.net/user/An-Themes/portfolio
   Template: pin-wp
   Author: An-Themes
   Author URI: http://www.anthemes.net/
   Description: Pin = Grid Personal Magazine / Resume WP Theme
   Version: 3.2.1489174612
   Updated: 2017-03-10 20:36:52
   */
   

   Just copy and paste the header from your original theme and replace the name with something relevant, like Pin WP Child in my case.

3. The last step is to hook two those two themes together. Create functions.php file with the following lines, as described here:

   <?php
   function my_theme_enqueue_styles() {
   
       $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
   
       wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
       wp_enqueue_style( 'child-style',
           get_stylesheet_directory_uri() . '/style.css',
           array( $parent_style ),
           wp_get_theme()->get('Version')
       );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
   ?>
   

   Replace 'parent-style’ with the relevant name from your theme. Upload functions.php to your child theme directory.

4. Go to your wordpress dashboard and activate child theme.

Now that I have my child theme active I can make some adjustments. First of all I want to get rid off the „written by” section. The view of the main page is generated in index.php file. I downloaded the file from my main theme’s directory and opened it in Notepad++. I’m not familiar with WordPress function names, but I looked for keywords like author and written by. And I found this line:

 <span class="vcard author"><span class="fn"><?php esc_html_e('Written by', 'anthemes'); ?> <?php the_author_posts_link(); ?></span></span>

Bingo ;) I removed the line, placed the index.php in my child theme’s directory and thus I overrode the function from my main theme. After hitting refresh button I can no longer see the Written by section. Perfect. The same goes for removing social buttons. This time it took me a little longer to find the right place in code. The function was included in a file placed in one of the theme’s subdirectories. Again, I downloaded the file, commented out some fragments of code and placed the file in my child theme, recreating directories structure: functions/custom

The last thing I wanted to tweak was the length of the text shown in the main page. I wanted it to be longer. I looked for a keyword excerpt in index.php

<?php echo anthemes_excerpt(strip_tags(strip_shortcodes(get_the_excerpt())), 100); ?>

And replaced value 100 with 250. Now my excerpt contains more words.

I also tweaked the view of a single post (single.php) and my child theme directory looks now like this:

I played around with typography (still not happy with the results), a new logo (this is not my final version either) and did theme’s translation. Maybe I’ll write another post about this in the future :)