Child Themes

Creating a Child Theme in Osclass

A child theme in Osclass allows customization of a theme without modifying the original (parent) theme. This approach ensures that updates to the parent theme do not overwrite custom modifications. Child themes contain only the files that need modification, reducing redundancy and improving maintainability.

Why Use a Child Theme?

Child themes are beneficial for:

  • Preserving custom modifications while allowing updates to the parent theme.
  • Keeping customization separate, making it easier to manage and troubleshoot.
  • Allowing selective modification of specific files without affecting the entire theme.

Creating a Blank Child Theme

Step 1: Create the Child Theme Folder

Navigate to oc-content/themes/ and create a new folder for the child theme. The recommended naming format is yourtheme_child. For example, if the parent theme is gamma, the child theme folder should be gamma_child.

Step 2: Add Essential Files

Inside the newly created folder, add the following files:

  • index.php – Required to define the theme and set the parent theme.
  • screenshot.png – A preview image displayed in the backoffice.

Step 3: Define the Child Theme

Open index.php and add the following metadata:

<?php
/*
Theme Name: Gamma CHILD Osclass Theme
Theme URI: https://osclasspoint.com/
Description: Child theme for Gamma Osclass Theme
Version: 1.0.0
Author: Your Name
Author URI: https://osclasspoint.com
Widgets: header,footer
Theme update URI: gamma-osclass-theme
Product Key: XYZ123
Parent Theme: gamma
*/
?>

This defines the child theme and its relationship with the parent theme.

Working with a Child Theme

Understanding File Inheritance

Osclass loads theme files from the child theme first. If a file does not exist in the child theme, Osclass loads it from the parent theme. This allows selective customization without duplicating all files.

Replacing Theme Files

There are two types of file replacements:

  • Osclass-Initiated Files: Directly loaded by Osclass, such as main.php, search.php, item.php, and user-register.php.
  • Theme-Initiated Files: Loaded dynamically, such as header.php, head.php, loop-single.php, and search_gallery.php.

Adding Custom CSS

Step 1: Create a Custom Stylesheet

To add a custom stylesheet without modifying the parent theme’s head.php, use a function to enqueue the new stylesheet.

Create a functions.php file in the child theme folder and add the following function:

<?php
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');
?>

Next, create a css/ folder inside the child theme directory and add a style-child.css file. The website will now load this custom stylesheet.

Modifying the Footer

Step 1: Copy the Main Template File

To change the footer only on the homepage:

  • Copy main.php from the parent theme to the child theme.
  • Edit the copied main.php and replace this line:
<?php osc_current_web_theme_path('footer.php'); ?>

with:

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

Then, create a new footer.php file in the child theme and add custom content:

<footer>Hello world footer!</footer>

Adding Content to the Homepage

To insert custom content on the homepage:

  • Copy main.php to the child theme.
  • Open main.php and add the desired text.

Best Practices for Child Themes

Handling Translations

Translations for the child theme should be placed in oc-content/languages. Ensure the language files match the child theme name.

Tracking Parent Theme Updates

Since parent theme updates may introduce changes, use a version control system or compare files to keep track of modifications.

Recommended Use

It is best to use child themes for adding CSS, JavaScript, and functions via hooks rather than modifying core files. Extensive modifications may require frequent updates when the parent theme changes.

Conclusion

Using a child theme in Osclass ensures easy customization while maintaining compatibility with future updates. It provides a structured way to apply changes without affecting the parent theme. Always test modifications on a staging environment before applying them to a live site.