Learn how to create an Extra child theme. In this post, you’ll know the most important steps to having an Extra child theme: how to create one and add your own CSS and JS, how to translate it to your own language and how to sell it to others.

I don’t have a child theme to sell yet, because until last week I didn’t even know how to create a child theme…

Now that I know how it’s done by searching some great tutorials on Google – it’s time to document it so it’s easier to do it again – and I hope you can manage to learn something from it too!

Enough said, let’s start!

Creating an Extra child theme is easier than you think

You can easily achieve it by following 3 simple steps:

  • Create a folder
  • Put some files in it
  • Zip that folder

Done! Really, everything is hard until you learn how to do it. That’s life.

Manually create an Extra child theme

Please, follow every step of the tutorial. If you have any questions feel free to contact me.

First, create a folder with the name of your child theme. I’ll create with you the “youdivi” child theme.

How to create an Extra child theme 1

Secondly, add 4 files inside of it: functions.php, lang, screenshot.png and style.css.

How to create an Extra child theme

Functions.php

Every PHP file needs to start with <?php and end with ?>.

Add the following code inside a .php file:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
function c_lang_function() {
load_child_theme_textdomain( 'extra', get_stylesheet_directory() . '/lang' );
}
add_action( 'after_setup_theme', 'c_lang_function' );
?>

You can create it using a simple notepad and insert .php to the end of it or download and install a software for that. It has better features and a syntax highlighter.

I recommend Sublime Text 2 and Brackets.

Lang – for translating Extra

If you don’t need to translate Extra to another language, you may skip this part of the tutorial.

I’m Brazilian and I need to translate Extra to Portuguese (Brazil) – pt_BR.

I had the help from Abd Ur Rehman from ET Support to better understand how to translate the Extra theme.

I opened a ticket in ET Support. As his answer helped me a lot, I’m just going to copy and paste his reply below:

01. Download and install the Poedit software.

02. Navigate with FTP to wp-content\themes\Extra\lang And download the en_US.pot file to your desktop.

03. Open the en_US.pot file with the Poedit software, and click the Create new translation button below.

04. Select the new language e.g. “Portuguese” and start translating the strings.
(You do not have to translate all the strings. You can search for a specific string by pressing Ctrl+F or Cmd+F).

05. When you finish translating the strings, click save. Poedit will generate two new files (a MO and a PO file).

06. Now all you need to do is moving the translation to child theme:

0.6.1 Create a folder in your child theme called lang.

0.6.2 Move those two files (MO and PO) into this newly created folder.

0.6.3 Add this code in your child theme’s functions.php file:

function c_lang_function() {
load_child_theme_textdomain( 'extra', get_stylesheet_directory() . '/lang' );
}
add_action( 'after_setup_theme', 'c_lang_function' );

Remember, you can remove this part above from the code in your child functions.php if you’re not willing to translate the theme.

Screenshot.png

If you want your child theme to have a nice picture in the Appearance > Themes in your WordPress follow this steps.

How to create an Extra child theme

Go to canva.com or use any other software you like. Create a 1200px x 800px PNG file. Save it with the name screenshot.png.

If you don’t name it screenshot.png the WordPress won’t know you want that file to be your child theme image.

Style.css

This is one of the most important steps to create a child theme in Extra. And it’s pretty easy as well.

Just create a .css file and add the following code:

/*
Theme Name: youdivi
Theme URI: https://youdivi.com
Description: Add your description here.
Author: Add your name here
Author URI: https://blog.youdivi.com
Template: Extra
Version: 1.0.0
*/

Pay attention to Theme Name – it should be the same as your folder’s name. And, check the Template field too. If you don’t put Extra, WordPress won’t recognize it as your parent theme and WordPress will tell your child theme is “broken”.

After successfully adding all 4 files inside your child theme folder is time to finish it.

Just zip the folder and upload it to your next project – or even sell it as a child theme!

In iMac, you can achieve it by right-clicking the folder and selecting Compress.

How to create an Extra child theme

Important notes

If you want to add custom CSS to your child theme – so you can sell it to others – you can paste all your CSS code after the */ of your style.css – it’ll overwrite the currently Extra CSS code.

Nick Roach advised – in a Facebook comment – adding the CSS inside Extra > Theme Options > Custom CSS – because it reduces one request making your website faster (a little bit).

If you want to add custom jQuery code to your child theme you can add it in between <script> tags inside Extra > Theme Options > Integration > Add code to the < head > of your blog.

Conclusion

Did you like this tutorial on how to create an Extra child theme? Hope you managed to create, translate or even sell a child theme based on this tutorial.

Please, leave a comment or send me some feedback so I can keep on improving.

See ya!