Using a Child Theme

Besides the col­ors, fonts and spac­ing options, we know that at a cer­tain point you will like to dig deep­er and make advanced changes which include HTML, JavaScript or PHP code. The best way to make them hap­pen while pre­serv­ing the cus­tom code changed from being over­writ­ten the next time your theme is updat­ed, is through a child theme. You can eas­i­ly mod­i­fy and add func­tion­al­i­ty with­out chang­ing any code. So this is very impor­tant most­ly because you don’t lose the pos­si­bil­i­ty to update the theme with­out los­ing your changes.

Download and install the Child Theme

Word­Press con­sid­ers a Child Theme as an entire­ly sep­a­rate theme so the process of installing is sim­i­lar to the installing a Par­ent Theme. We rec­om­mend you fol­low these steps in order to get a Child Theme up and run­ning.

  1. Down­load our starter Child Theme.
  2. Down­load our starter Child Theme.

    You can do that by fol­low­ing this link.

  3. Nav­i­gate to Appear­ance Themes and click Add New but­ton.
  4. Select Upload Theme.
  5. Click Browse and choose the file you just down­loaded and click Install Now.
  6. When the theme is installed click Acti­vate.

Start Customizing

The great part of this process is that you don’t have to wor­ry about the next ses­sion of theme’s updates. If you add cus­tomiza­tions in the Child Theme all the changes you made will be auto­mat­i­cal­ly saved.

Adding custom CSS styles

There are two dif­fer­ent ways to add cus­tom CSS to your Child theme — use an FTP client or the Word­Press Dash­board. If the first method requires con­nect­ing to your site via FTP and edit­ing the style.css file, the sec­ond one is much eas­i­er because you just have to go to your Word­Press Dash­board site under Appear­ance → Edi­tor and select style.css from the right side and start adding your CSS. Sim­ple as that.

Editing the functions.php file

If most files in your Child Theme over­write the par­ent theme’s files (like style.css does for instance), functions.php file is pret­ty dif­fer­ent. Instead of over­writ­ing the par­ent theme’s functions.php file, you can sim­ply load it in addi­tion to it. Basi­cal­ly, your child theme’s functions.php file is loaded right before the par­ent theme’s functions.php file. You have to use a functions.php file only if you want to replace or mod­i­fy a func­tion from the Par­ent theme.

Editing or adding a new template file

Beyond CSS and Func­tions changes, we let you do struc­tur­al changes to your theme by chang­ing the PHP tem­plate files. In most sce­nar­ios, we rec­om­mend you to cre­ate a copy of the tem­plate files you want to change from the par­ent theme and make your mod­i­fi­ca­tions to the copied files. This way you make sure you’re on safe ground.

For exam­ple, if you want to mod­i­fy the content-single.php tem­plate, just copy and paste this file to your Child Theme fold­er and do the changes you want there.

Addi­tion­al Resources

Updated on March 29, 2018

Was this article helpful?