Skip to Content
Documentation
Product Dev
AIOS ThemesAgentProAgentPro Child ThemeHow to Make Changes

How to Make Changes to the Child Theme

This guide explains how to work with a child theme and provides instructions for overriding specific template files (like home.php) by copying them from the parent theme to the child theme.

Directory Structure

Child Parent Structure

Things to remember

  • The parent theme is now part of the Agent Image package. You can update the theme version or switch to a different theme using the Composer command:
bash
   composer require "aios-packages/PARENT_NAME":"VERSION"

How to Update Parent Theme

Go to https://aios-resources.forge99.com/package/themes  and check the latest version of the parent theme.

Run the Composer command:

For example, if the parent theme is agentpro-elevate, the command would be:

bash
   composer require "aios-packages/agentpro-elevate":"VERSION"

Once you are done editing the files, add or stage your changes.

terminal
   git add .

Commit the changes you’ve made.

terminal
   git commit -m '<commit_message>'

Push your changes.

terminal
   git push origin 'Branch_Name'

Create Merge Request.

   https://gitlab.forge99.com/your_project_group/your_project_url

Copying and Modifying Files in the Child Theme

If you want to modify a specific template file (like home.php), follow these steps:

Copy the File:

Paste into the Child Theme:

  • Navigate to the child theme directory: web/app/themes/<child-theme-name>/.
  • Paste the home.php file into the child theme directory. Ensure the directory structure of the parent theme is maintained if you’re working with subfolders.

Edit the File:

  • Open the copied file (e.g., home.php) in a code editor.
  • Make your desired modifications.

Commit Changes:

3: Once you are done editing the files, add or stage your changes.

terminal
git add .

4: Commit the changes you’ve made.

terminal
git commit -m '<commit_message>'

5: Push your changes.

terminal
git push origin 'Branch_Name'

6: Create Merge Request.

https://gitlab.forge99.com/your_project_group/your_project_url

Example: Overriding home.php

Parent Theme Location:
|Downloaded Parent Theme

Child Theme Location:
web/app/themes/<child-theme-name>/home.php

After copying and modifying the file, WordPress will use the home.php file from the child theme instead of the one in the parent theme.

Example: Overriding scripts.js

Just in case you need to modify scripts.js of parent theme you can overwrite it by follow the instructions below:

Copy the File:

Paste into the Child Theme:

  • Navigate to the child theme directory: web/app/themes/<child-theme-name>/src/js.
  • Paste the scripts.js or single.js file into the child theme directory. Ensure the directory structure of the parent theme is maintained if you’re working with subfolders.

Option 1 : Dequeue and Enqueue Method:

  • Navigate to the child theme directory: web/app/themes/<child-theme-name>/inc/enqueue.php.

  • Edit the enqueue.php file to de-queue scripts.js or single.js.

enqueue.php
   wp_dequeue_script( $handle:string );

for single.js file you can use the same name as parent theme.

enqueue.php
   wp_dequeue_script( $handle:string );
⚠️
Warning

Please go to view sources and check which script or style you want to dequeue

  • Then go enqueue.php file to enqueue scripts.js or single.js.
enqueue.php
   wp_enqueue_script('agentpro-child-global-script', get_stylesheet_directory_uri() . '/assets/js/scripts.js');

for single.js file you can use the same name as parent theme.

enqueue.php
   wp_enqueue_script('agentpro-child-single-script', get_stylesheet_directory_uri() . '/assets/js/single.js');
⚠️
Warning

Dont change agentpro-child-global-script or agentpro-child-single-script name, it is used in the parent theme to vertify if child needs to be used.

  • Then go enqueue.php file to enqueue scripts.js or single.js.

Option 2: Deregister and Enqueue Method:

  • Navigate to the child theme directory: web/app/themes/<child-theme-name>/inc/enqueue.php.
  • Edit the enqueue.php file to de-register scripts.js or single.js.
enqueue.php
   wp_deregister_script('aios-agentpro-global-script');

for single.js file you can use the same name as parent theme.

enqueue.php
   wp_deregister_script('aios-agentpro-single-script');
  • Then go enqueue.php file to enqueue scripts.js or single.js.
enqueue.php
   wp_enqueue_script('agentpro-child-global-script', get_stylesheet_directory_uri() . '/assets/js/scripts.js');

for single.js file you can use the same name as parent theme.

enqueue.php
   wp_enqueue_script('agentpro-child-single-script', get_stylesheet_directory_uri() . '/assets/js/single.js');

Commit Changes:

3: Once you are done editing the files, add or stage your changes.

terminal
git add .

4: Commit the changes you’ve made.

terminal
git commit -m '<commit_message>'

5: Push your changes.

terminal
git push origin 'Branch_Name'

6: Create Merge Request.

https://gitlab.forge99.com/your_project_group/your_project_url
Note

WordPress will automatically use the file in the child theme, overriding the parent theme’s file. This allows you to customize the functionality or appearance of your site without modifying the original parent theme files.
This is particularly useful for maintaining customizations when the parent theme is updated.

Additional Notes

  • Fallback Behavior: If a file is not present in the child theme, WordPress will fall back to the corresponding file in the parent theme.
  • Best Practices: Only copy and modify files that you need to customize. Avoid duplicating unnecessary files.
  • Functions.php: Unlike template files, the functions.php file in the child theme does not replace the parent theme’s functions.php. Instead, both files are loaded, with the child theme’s file loading first.
Last updated on
Get StartedHow to Switch Composer Base Theme