Jump to content

Creating a child theme under the parent theme

Documentation

Creating a child theme under the parent theme

The process of installing a new theme was explained in the previous tutorial. In this tutorial, we will discuss how to install a child theme under the main theme.

This issue is very important here. Parent themes should never be edited and are generally hidden from all users.

Once the parent theme is installed, we will create a Child theme that can be edited via the theme settings (to change colors, logos, etc.) and this will be displayed as the default frontend theme to all your visitors.

Steps 1:

Once the main theme installation is complete, click the pencil icon (aka the Edit button) at the far right of your theme and deselect all settings and user groups, like this:

parant-theme-settings.thumb.png.5ba431679a51927bea5ed7aa8434d1e2.png

What you need to do on the page that opens is as shown in the picture below.

child2.thumb.png.78858b085cafc7efab8f6c0ce4e686fc.png

 

As you can see in the picture, we hide the theme display permissions from all user groups. In this way, users will not be able to see our parent theme. The Parent theme should never be edited beyond this, so press the Save button at the bottom and proceed to creating the Child theme.

Step 2

Click the + Create New button again, but this time select Manual Mode and press Next. Enter a Name for your theme (I'll use "Fantastic Light" for this example). In the Parent field, un-check the box and select your Parent theme (from the above step). If you would like to set this theme as your Default theme, make sure to enable that setting. Your page should now look like this:

child1.thumb.png.251036334766ad0d1ed370dbbadf3f8f.png

Then we continue by selecting the Manual Mode option.

child2.thumb.png.d4c522b9d25cc40631f154673da9770a.png

We uncheck the box in the Parent field and select our Parent theme from the drop-down menu here. If this theme will be the default theme, we enable this setting.

child3.thumb.png.d81715c7b61ef55eeca3bc23cec33122.png

Your page should now look like this:

result.thumb.png.d193e86eb91ac18e9b30a9dfefb72e15.png

A quick summary: The Parent theme which we installed is hidden from all members, and your site will be using the Child theme, named "Fantastic Light". The Child theme inherits everything from the Parent theme. If you need to edit the theme, make sure you only edit the Child theme. The Parent theme should never be edited and should stay untouched.

This precaution is due to theme updates being done through the Parent theme. Therefore, any changes to the Parent theme may cause theme updates to not work properly and templates to remain in the old version.

 


  Report Page

shape1
shape2
shape3
shape5
shape7
shape8
×
×
  • Create New...