It’s time for a thorough autumn cleaning. We show you ten free WordPress themes that have just been released, and we guide you through the steps to create a proper child theme from whatever theme you choose.
Look For a Solid Starting Point
Of course could you start from scratch and create yourself a perfectly new WordPress theme beginning on an empty screen. I cannot imagine a case where this mode of operation would seem sensible to me, however. It’s much easier and more efficient to just choose a proper theme that fits your needs as closely as possible and then alter it to meet your needs perfectly. This is done by deriving a child theme from the original theme files. We will come to how this is done later on in the article.
WordPress Themes Galore: The 10 Best Free New Entries This Autumn
Let us first take a look at the hottest new entries in the free WordPress theme repository. As we know that our audience is international we will only feature themes that are translation ready.
1. Canuck
Canuck is a modern theme in grid layout that can be customized to any look you like. Flexibility is its biggest benefit.
|
2. Mercia
Mercia is a magazine theme with a heart for typography and responsiveness. It’s near perfect for any website that focuses on fast changing dynamic content.
|
3. Rinzai
Rinzai was originally created as a motor for food-related websites, foremost those that present recipes. Its strict grid layout and visual hierarchy support that usecase ideally. Rinzai can still be used for other projects, such as portfolios or even a corporate website.
|
4. Hestia
Hestia offers quite a few child offspins already. Hestia adheres to the Material Design guidelines, thus sporting a very contemporary look. The theme is positioned towards creative workers in need of a totally flexible foundation to build any client project on. It is even WooCommerce-ready.
|
5. Neville
Neville is a very visual theme. It fits best with publications that want to draw their readers into the pictures they post. Generally any magazine could use Neville but as soon as you are lacking visuals the theme would be much less impressive.
|
6. Oblique
Oblique attracts the viewer’s eye with its unusual aesthetics. Diagonal lines and asymmetrically cut images make for that special look you don’t see too often in our squares grid new world. As an example of how you can use Oblique as a corporate site take a look at one of the child themes named CoffeeIsle. Oblique is fully responsive.
|
7. HitMag
Finding a usable magazine theme was painful in the past but is not anymore. HitMag is one of the most contemporary magazine designs that I have seen in quite a while. It’s not necessarily the best for highly visual sites but does a great job for just about any other publication thinkable.
|
8. Headstart
Headstart is a very flexible theme for blogging and less dynamic websites alike. Its responsive design can be fully customized using widgets that carry almost any type of content you like. Build a dynamic blog oder build a static modern landing page. It will equally work great. Headstart is built upon the popular Foundation framework.
|
9. ClubFitness
ClubFitness breaks with design conventions and is the most unusual new entry this autumn. If you like Pinterest ClubFitness might just be what you need. Its heavily card-oriented layout fits best with visually heavy websites. Despite its orientation towards images it runs perfect on mobile devices as well.
|
10. Redxun
Redxun is a theme for the writers. Based on Bootstrap and giving access to all Google Fonts it offers a near perfect playground for anyone who wants to see their content strive on any platform.
|
More Great Themes
Not the right theme for you in here? Take a look at this evergrowing collection of the best WordPress themes of 2017. There is something for everyone.
What’s a Child Theme and How Do I Create One?
A child theme is the child of a full-fledged, regular theme as we’ve shown you ten of right above. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScript – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.
Should you need more basic support with WordPress, I advise you to thoroughly read this great tutorial. It will have you covered.
All Changes Remain, Even After an Update
A newly set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. From there, you can make any change you want, without any dangers, and these changes will remain even after an update of the original theme. That’s the big advantage.
Every WordPress theme that is capable of receiving updates should only be used with a child theme. It’s very simple, and in today’s article, we’ll show you the pitfalls that can break open.
The Preparation for Creating a Child Theme
To create a child design, you need an FTP program, as well as an HTML editor. You can get both for free. To work with the FTP program, you’ll also need the FTP access information for your web host. Your host will provide this information.
- I can recommend the FTP program “FileZilla” as it’s feature-rich and free for both Windows and Mac.
- The HTML editor I’d recommend is the program “Brackets.” It’s free as well, and due to its many expansions, it can be tailored to your needs.
Of course, there are other reasonable HTML editors. Thus, we have compiled a list of programs for Windows, and for Mac.
- The 9 Best Free HTML Editors for Web Developers (Windows-Edition)
- The 5 Best Free HTML Editors for Web Developers (Mac-Edition)
Creating and Using Child Themes
I’ll use WordPress’ popular Twenty Fifteen Standard Theme as an example for the creation of a child theme. You’ll learn to create a child design, use your own stylesheet for the CSS, and to adjust theme files. I will also introduce you to all tripping stones that may come up when working with child layouts.
1 – The Creation and Activation of a Basic Child Theme
A child theme only requires three things: the index to the parent theme, a style.css file, and a functions.php.
First, create a folder on your desktop, and name it “twentyfifteen-child.” Next, please create an empty file named style.css using the HTML editor. Enter the following into the CSS file:
/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes at the Bottom */
This Header Defines the Following Things:
- The name of your theme
- The description that states that it’s a child theme of the Twenty Fifteen Theme
- Under Template, you’ll find the “address” that your theme needs to be able to display the template files. It’s the name of the parent theme’s theme folder. When creating a child theme for another theme, of course, the folder name of your theme has to be included. So, if you need a child theme for the popular “Hueman” theme, this will say “hueman”.
- Under Text Domain, your child theme finds the translation files, so that the theme will continue to be displayed in the language you chose.
Next, set up an empty file called functions.php. The following has to go into this file:
<?php
/*
=============================================================================
The functions.php for Your Child Theme
=============================================================================
*/
/**
* This Function is Necessary. It Installs the Parent Theme's CSS
* The CSS of Your Child Theme Will be Installed Automatically.
*/
add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' );
function tb_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/*
=============================================================================
From This Point Downwards is Where You Can Enter Your Changes
===============================================================================
*/
Optional: Create a Preview Image For Your Theme
Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed in the main index, not in a separate folder.
The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be shown well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended.
2 – Activating the Child Theme
Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under “Design => Themes.”
Now, the child theme is active. Thanks to the new screenshot, it is effortless to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.
3 – Customizing Child Themes – CSS
Now, write all adjustments into your child theme’s style.css. A few very simple adjustments would be changing the background color, the color, size, and font of the header, and so on. With just a few lines of CSS, we’ve already changed the theme’s design entirely:
/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: Your Name
Author URI: http://yourdomain.com
Template: twentyfifteen
Version: 1.0.0
Text Domain: twenty-fifteen-child
*/
/* Enter All of Your Changes Below */
body { color: #666; background: #444; }
h1.site-title { font-size: 38px; }
h1.site-title a { color: #900; }
#main { padding-top: 10px; }
h2.entry-title { font-family: Arial, sans-serif; font-size: 38px; }
h2.entry-title a { color: #900; }
4 – Working With Template Files
Your new theme is fully customizable, you can also use your own templates, or revise the files of the parent theme. WordPress checks the child theme folder for template files first. If there are none, the files from the parent theme will be used.
This means, that a file header.php in the child theme folder is being used, instead of the file in the parent theme. If you want to change the display of a specific file, just copy it from the parent theme into your child. Now you can either change the entire presentation or add specific elements only.
Two Examples: Changing Post Images and Static Share Buttons
Example 1: Reversing the Display of the Post Images
Copy the file content.php from your parent into the child folder. The original code of the file in the lines 14 to 27 looks as follows:
<?php if ( is_single() ) : the_title( ' ', '
' ); else : the_title( sprintf( '', esc_url( get_permalink() ) ), '
' ); endif; ?>
For the fun of it, let’s reverse the code, and insert the post image under the header.
<?php if ( is_single() ) : the_title( ' ', '
' ); else : the_title( sprintf( '', esc_url( get_permalink() ) ), '
' ); endif; ?>
Of course, our CSS needs some adjustments, so that the final result looks superb.
/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: Your Name
Author URI: http://yourdomain.com
Template: twentyfifteen Version: 1.0.0
Text Domain: twenty-fifteen-child
*/
/*
Enter your changes below
*/
body {
color: #666;
background: #444;
}
h1.site-title {
font-size: 38px;
}
h1.site-title a {
color: #900;
}
#main {
padding-top: 10px;
}
h2.entry-title, h1.entry-title {
font-family: Arial, sans-serif;
font-size: 38px;
padding-top: 20px;
margin-bottom: 20px;
}
h2.entry-title a{
color: #900;
}
h1.entry-title {
color: #444
}
Screenshot of the Final Result:
Example 2: Adding Static Share Buttons
This task is also done using the content.php file. You don’t have to place another file in the child folder.
Part 1: The Snippet for the functions.php
<?php } add_action( 'wp_enqueue_scripts', 'tb_fontawesome' );
The buttons need two functions. Number one creates the buttons, and number two adds the required icon font “Font Awesome” to your header.
Part 2: The CSS
For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.
/*
=============================================================================
STATIC SHARE-BUTTONS
============================================================================= */
div.share-buttons.top {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px }
div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee}
.share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5; max-width: 100%; display: inline-block; overflow: hidden}
.share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.print, .share-buttons a.fb-like { display: block; width: 112px; font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;}
.share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important}
.share-buttons a.facebook { background: #3e64ad; }
.share-buttons a.twitter { background: rgb(0, 172, 237); }
.share-buttons a.googleplus { background: #cd3627; }
.share-buttons a.fb-like {background: #4267b2}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; }
.share-buttons a.print{ margin-right: 0;}
a.print{background:#13475e;}
a.print:before{content:'f02f';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.facebook:before{content:'f09a';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.twitter:before{content:'f099';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.googleplus:before{content:'f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.fb-like:before{content:'f164';font-family:FontAwesome;font-size:16px;padding-right:8px}
Part 3: The Correct Placement in content.php
<?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '', '', false ) ) ); wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyfifteen' ) . '', 'after' => '', 'link_before' => '', 'link_after' => '', 'pagelink' => '' . __( 'Page', 'twentyfifteen' ) . ' %', 'separator' => ', ', ) ); ?>
The correct position is still within the DIV .entry-content, right above the closing
tag.
The Final Result of Our Efforts:
We get these beautifully formatted share buttons with icons for Facebook, Twitter, Google+, the Facebook page, and a button that activates the browser’s print function.
5 – Now, Let’s Get Serious. Including Files
One of the pitfalls when working with child themes. Many clueless beginners fail this seemingly simple task, because the snippets from the web are always meant for independent themes. That’s why they can’t work.
If you want, or have to include a file, the internet will give you the following code:
require_once( get_template_directory() . '/my_included_file.php' );
This small tag tries to load a file from the parent theme. That’s where the child theme’s templates are located. As we overwrite the parent theme’s stylesheet with ours, the following tag has to be used instead:
require_once( get_stylesheet_directory() . '/my_included_file.php' );
The tag above searches for the needed file from the child folder. Thus, always use the get_stylesheet_directory() variant, and you’ll get the desired result.
Check every snippet from the internet, to see if it has been modified for this small difference.
6 – Adding Widget Areas
Additional widget areas are possible without any problems. For example, we could create an area that wasn’t meant to contain widgets – the footer. Add the following code to the functions.php of your child theme:
'Footer Widget', 'id' => 'footer-widget', 'description' => __( 'An additional widget area in the footer' ), 'before_widget' => '' ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );
Afterward, copy the footer.php from the “Twenty Fifteen” theme folder into your theme folder, and add this small code in beforehand:
At this point in the footer.php the code seems to be in good hands: