Create child theme in Osclass - detail guide

What is child theme?

Child theme in osclass (as in wordpress, prestashop or other classifieds scripts) is tool that allow to modify theme without affecting original theme. Child theme allows to update original theme, without affecting your modifications. Objective of child theme is not to replace everything, but allow slightly modifications in particular files, it's good to note that child theme will contains only files those should be replaced or modified.

Make sure to check our CSS customization guide with simple examples: https://docs.osclasspoint.com/customizations-of-theme-basic

Create blank/empty child theme

We will need several files to create our blank child theme, for next of this article we will be using Gamma Osclass Theme and will try to create Gamma Child Osclass Theme.

1. Create folder for our child theme in oc-content/themes in format yourtheme_child, so in our case it is gamma_child
2. Into gamma_child copy index.php and screenshot.png
3. Open index.php and add Parent Theme value and update name (so you see difference in oc-admin), referencing what is parent theme for our child, in our case it's gamma. Index.php will look like this:

   <?php
   /*
   Theme Name: Gamma CHILD Osclass Theme
   Theme URI: https://osclasspoint.com/
   Description: Responsive fast and clean premium osclass theme
   Version: 1.0.0
   Author: MB Themes
   Author URI: https://osclasspoint.com
   Widgets: header,footer
   Theme update URI: gamma-osclass-theme
   Product Key: GFE1crrhnvi0AtRiagJp
   Parent Theme: gamma
   */
   ?>

Child theme is created and ready to use activate from oc-admin! Keep in mind you cannot remove parent theme when using child theme. This step is last in most of tutorials, but what you should do next? Noone knows that even osclass docs does not provide more details.... so let's continue!

Working with child theme

There are few things to remember when working with your child theme.

• In PHP, each function must have unique name. If you want to update some function from parent theme, you can copy & paste it, but name of it must be changed and usage of function updated in child theme
• There are 2 types of files replacement: 
  • Osclass initiated - for files directly loaded by by osclass as: main.php, search.php, item.php, user-register.php, ...
  • Theme initiated - files loaded from theme files as: header.php, head.php, loop-single.php, search_gallery.php, ...

Let's do something on example. Our objective is: 

1. Create custom CSS stylesheet in child theme and add it into theme
2. Replace theme footer on homepage with custom text: Hello footer!!!
3. Update home page and add there text: Hello world!!!

a) Create custom CSS stylesheet for child theme

Stylesheet is referenced from head.php, this file from header.php and header is called from each file, so creating custom head.php does not make sense. Rather then we will create function to add our stylesheet via hook from functions.php

• create blank functions.php
• Add there following functions:
  

  function gam_child_custom_css() {
   osc_enqueue_style('style-child', osc_current_web_theme_url('css/style-child.css'));
  }
  
  osc_add_hook('header', 'gam_child_custom_css')

• Create folder css in child theme folder and enter to this folder
• In oc-content/themes/gamma_child/css/ create file style-child.css 
• You now can put own styling & css code into style-child.css, site will now contain your stylesheet:

  <link href="https://dev3.abprofitrade.eu/oc-content/themes/gamma/css/style-child.css" rel="stylesheet" type="text/css" />

b) Replace theme footer on home page

Now we will update footer.php to have custom footer on home page. Note if you would like to have custom footer in all the pages, you would repeat bellow procedure for every file in theme.

• create copy of main.php (copy file from gamma folder into gamma_child
• update main.php in child folder, find following line:

  <?php osc_current_web_theme_path('footer.php'); ?>

  
  and replace it with:

  <?php include osc_base_path() . 'oc-content/themes/gamma_child/footer.php'; ?>

• create blank footer.php in child theme folder (you could also copy one from parent theme) and put there:

  <footer>Hello world footer!</footer>

Your footer is now updated.

c) Update home page - add custom text

We will now update home page and put there own text or block.

• from parent theme copy main.php (if you've tried point b), this step is not needed
• open main.php and put there own text or code and save

Your home page is now updated.

Note from author to child themes

We have created custom child theme in classifieds, can now freely update our parent theme etc... however there some questions unanswered:

• How to handle translations in child theme?
• How to keep on track no modifications made in parent theme, i.e. if we have custom home page in child and home page in parent has been updated?

Basically we recommend to use child themes just for custom stylesheets, javascripts and functions to be added via hook, hence copying all the files from parent into child and updating it all the time there is new update in parent is making usage of child theme useless. Before using or bying your classifieds theme make sure it match your expectation and avoid redeveloping it from scratch, as it may be contra productive.