This post will help you customize your WordPress 2020 twentytwenty theme. We are going to create a child theme inheriting scripts, styles and templates from WordPress TwentyTwenty 2020 theme, which in this case will be a parent theme for the child theme that we are going to create.
Features to be added
I am going to add three features that I think WordPress 2020 twentytwenty theme lacks so the very first feature that I am going to add to the child theme is the read-more button on every blog post with excerpts, the second feature that I am going to add is – I am going to add an else clause which will work as a default thumbnail on pages and blog posts, that do not have thumbnail or featured- image on them and very last, the third thing that I am going to add to the child theme is custom template to list blog posts, I am going to create custom template to list all the blog-posts with thumbnail, excerpts and read- more button.
Watch me customize or continue reading the post
Create 20-20 child theme
To create a child theme for any wordpress theme, we first create a folder under wp-content/themes directory and then we create two files in it, the very first file that needs to be created is style.css and the second one is functions.php
Remember: When naming the child theme folder do not put any space between the words.
Type the following comments in style.css and save it to create a WP child theme.
You can replace anything on the right side after the colon. Just remember to name your child theme without any spaces in between.
#style.css
/*
Theme Name: myChildTheme
Template: twentytwenty
Author: TubeMint
Author URI: https://tubemint.com
Description: 2020 child theme with custom blog template, read-more button and default thumbnail..
*/Type the following php code in functions.php to enqueue styles and scripts from the parent theme
#functions.php
<?php
/* enqueue scripts and style from parent theme */
function twentyChild_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyChild_styles');Activate the child theme and have a look at the view
Now make sure you already saved style.css and functions.php. To activate this newly created child theme, login to your WordPress admin area and make sure you already have WordPress 2020 theme installed in your WordPress installation.
Otherwise you may get an error saying the parent theme is not installed.
Look for the child theme that you just created and hit the activate button. Go ahead and visit the site.
Customize the child theme
To customise the child theme what I do I simply go ahead and copy all the templates folders and files including header.php, footer.php, index.php and 404.php in my child theme from the parent theme.
This process saves me time so I won’t have to create these files and folders. I only have to change something that I do not like or add something that I want to add to my templates and child theme.
Create custom template to list blog post teasers
Create a PHP file in your child theme under /template-parts/postlist.php. you can name it whatever you want, in my case I named it postlist.php. Now copy everything from content.php which is under the same /template-parts directory and paste in newly created postlist.php.
To render excerpts, we need to make a change in our newly created templates for blog post teasers. Look for entry-content div and change full to summary like the code below.
# /template-parts/postlist.php
<div class="entry-content">
<?php
if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'summary' ) ) {
the_excerpt();
} else {
the_content( __( 'Continue reading', 'twentytwenty' ) );
}
?>
</div><!-- .entry-content -->After making changes do not forget to save the file.
To Render this newly created template in index.php to display a blog post teaser/excerpts
Open the index.php file, Look for while have_posts() control flow and change ‘template-parts/content’ to ‘template-parts/postlist’
#myChildTheme/index.php
while ( have_posts() ) {
$i++;
if ( $i > 1 ) {
echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
}
the_post();
get_template_part( 'template-parts/postlist', get_post_type() );
}Wonderful, now go ahead and save this index.php and visit your site and have a good blog section.
Add read-more button to blog post excerpts
Open your functions.php and add the following code in it.
#functions.php
// Read More Button
function excerpt_readmore($more) {
return '<div class="ReadMore"><a href="'. get_permalink($post->ID) . '" class="readmore">' . 'Read More' . '</a></div>';
}
add_filter('excerpt_more', 'excerpt_readmore');Style your Read-more button
Style your read more button paste the following CSS code in style.css and save it and visit your site.
#myChildTheme/style.css
a.readmore {
text-decoration: none;
font-size: 25px;
}
.ReadMore{
text-align: center;
border: .5px solid lightgray;
}
.ReadMore:hover{
background: yellowgreen;
color: gray;
}
.ReadMore:focus{
background: yellowgreen;
color: gray;
}Add default thumbnail to wordpress child theme
To add default thumbnails in 2020, child theme, we simply need to open featured-image.php template under templet-parts folder and at the very bottom just add the following code and save it.
at the very bottom of the file
#/template-parts/featured-image.php
else{
?>
<p style="text-align: center;">
<a href="#">
<img style="margin: auto;" src="http://localhost:8080/wp/wp-content/uploads/2020/02/default-thumbnail.png">
</a>
Sponsered ad..
</p>
<?php
}Upload the default thumbnail for your blog, copy the image file url and replace it with the default in the code.
Don’t forget to save the featured image file.
Here you have it everything that I promised in the beginning of this blog post, so we just added the read-more button, created a custom template to view our blog post, rendered it in index.php and at last we added default featured image thumbnail for the both pages and posts.