HOW TO CREATE A CHILD THEME IN WORDPRESS

1

HOW TO CREATE A CHILD THEME IN WORDPRESS
2
As a WordPress website owner youve likely
thought of tweaking your theme to make it appear
to be unique, to add some custom functionality to
it, or simply to try out different calls to
action. Fortunately, there is an easy way to
modify your themes design and functionality
without worrying about losing your
customizations child themes. They allow you to
preserve theme modifications and can even speed
up your next WordPress development project. With
this in mind, in this post, well talk about what
child themes are and how they work within the
context of WordPress. Then, well walk you
through a quick tutorial to show you how you can
create and customize your own child theme the
right way.
3
THE BASICS OF WORDPRESS CHILD THEMES
A child theme is essentially a theme that
automatically inherits the design and
functionality of another theme which well call
its parent theme. When you activate a child theme
on your website, WordPress will check to see if
it has code for design or functionality in it.
Since the functionality coded into the child
theme overrides that of the parent theme, youll
see the child themes design and functionality
reflected on your website. On the other hand, if
the child theme doesnt contain any code for
implementing or modifying existing functionality
then WordPress will refer to the parent themes
files and apply those to your WordPress
,Wordpress Website Development Florida. Simply
put, child themes are the themes that you add
code to whenever you need to modify your themes
design or its functionality. Here are a few
reasons why youd want to use child themes
4

• Preserve modifications 
• The changes you make to your themes files
  directly will be lost whenever your update the
  (parent) theme.
• Organized code

Having separate files for custom code snippets
will help you keep track of the modifications
you make to your theme.
5

• Speedy development 
• Child themes inherit functionality from their
  parent themes which eliminates the need to
  rewrite chunks of code and speeds up development
  time.
• Now that youre familiar with what child themes
  are and why its a good idea to use them in your
  next WordPress development project, lets take a
  look at how you can create your own.

6
HOW TO CREATE A CHILD THEME IN WORDPRESS
7
Although most high-quality themes come with child
themes right out of the box, its a good idea to
know how to create one manually in case yours
doesnt or youve already used up the free child
theme. The good news is that creating a child
theme is super easy even if youre not
particularly technically inclined! To get
started, youll need access to your sites cPanel
(or an FTP client) and a text editor. For the
purpose of this tutorial, Ill create a child
theme for the Twenty Seventeen theme and create
its files using cPanel.
8
STEP 1 CREATE A NEW THEME DIRECTORY IN YOUR
WORDPRESS INSTALL
To kick things off, log in to your cPanel account
(or FTP client) and navigate to your sites theme
directory. It should be located
in /wp-content/themes.
9
Next, create a new directory for the child theme
and name it twentyseventeen-child. Giving the
child theme the same name as the parent theme
with a -child appended at the end is in line with
the best practices.
10
STEP 2 CREATE A STYLE.CSS FILE FOR YOUR CHILD
THEME
By now you should have an empty theme directory
for the new child theme. In this step, well
create a stylesheet for it and add some code in
it thatll define its name and its parent theme.
The code will also import the parent themes
style sheet to the child theme.
Note If your theme has multiple style sheets
(yes, thats entirely possible) then youll have
to add the corresponding code snippet given in
the following step, too. Open up the new child
theme directory (i.e. /wp-content/themes/twentysev
enteen-child), create a new file in it, and name
it style.css.
11
Next, copy and paste the following lines of code
into the style.css file
In the lines of code given above, the values
for Theme Name and Template define the child
themes name and tell WordPress which theme to
consider as the parent theme respectively.
The _at_import line adds the parent themes CSS
rules to the child theme which means that when
you activate the child theme to your website
youll be able to see both the content andits
styling. At this stage your child theme is
(technically) ready to go. If youre only going
to make stylistic changes to your sites theme
then you can skip down to Step 4. However, if you
think that you may need to modify your themes
functionality or add custom functionality to it
then youll need to add a functions.php file to
your child themes directory.
12
STEP 3 CREATE A FUNCTIONS.PHP FILE FOR YOUR
CHILD THEME
As a WordPress developer you might want to add
some custom bits of functionality to your
WordPress theme. However, if you modify or add
custom code to your (parent) themes functions.php
 file, the changes you make will be removed from
the script whenever you update your theme to the
latest version. To preserve the changes you make
to the functions.php file, well create a
separate functions.php file for the child theme,
as well. Head over to your child theme directory
(i.e. /wp-content/themes/twentyseventeen-child),
create a new file in it, and name
it functions.php.
13
Next, copy and paste the following lines of code
into the functions.php file
Weve simply added the PHP open tags to
the functions.php file in the code given above.
Whenever you have to add custom functionality to
your child theme all you have to do is add its
code below the comment line (i.e. Line 2). If
your parent theme contains multiple style sheets
then youll have to use the wp_enqueue_style() fun
ction to add the style sheets to your child theme
without slowing down your site. To do this,
simply add the following lines of code to
the functions.php file
14
STEP 4 ACTIVATE THE CHILD THEME TO YOUR WEBSITE
Now that our child theme is created and ready to
go, lets activate it to our WordPress website
and test it out. Log in to your sites admin
panel and navigate to Appearance gt Themes. The
new child theme you created should be added to
your list of installed themes.
Click the Activate button to activate the child
theme. Now, when you preview your site on the
front-end, it should look exactly like it did
when the parent theme was activated. This is
because we imported the parents themes style
sheet in Step 2.
15
A NOTE ON CUSTOMIZING CHILD THEMES
Your child theme is installed and activated on
your website which means that you can finally
start customizing it! Heres a few different ways
you can go about modifying your themes design
and functionality
16
ADD CUSTOM CSS STYLES
To begin adding custom CSS code to your child
theme, simply head over to Appearance gt Editor and
add it there. Youll also be able to access the
other files from this screen.
17
PLAY AROUND WITH THEME HOOKS
Action hooks will let you add custom
functionality to your sites theme whereas
with filter hooks you can modify existing
functions.
18
INCLUDE TEMPLATE FILES
If youd like to make large-scale modifications
to your theme (such as by defining a new
template) then you can create template files for
your child theme following the same steps for
creating the style.css and functions.php files.
19
CONCLUSION

• Using child themes is the recommended way to make
  modifications to your WordPress websites theme.
  It allows you to eliminate the risk of losing
  customizations every time the parent theme
  updates and helps keep your custom code
  organized.
• Lets quickly recap the main steps you need to
  follow to create a child theme
• Create a new theme directory in your WordPress
  install for the child theme.
• Create a new style.css file and add it to the
  child themes directory.
• Optionally, you can create a functions.php file
  for your child theme.
• Activate the child theme to your WordPress
  website and begin customizing it.

20
ZENEROM CREATIVE LAB
India 31/1790 B2, Sree Shaivam,May 1st Rd, DD
Village,Thammanam,Kochi, Kerala
682032info_at_zenerom.com91 98953 33308
Australia Level 3,81 flushcombe road,Blacktown
NSW 2148.Australiainfo_at_zenerom.com61 433 838
577