Skip to Content
Documentation
Product Dev
AIOS ThemesAgentProAgentPro Child ThemeHow to Create Child Theme

Creating a WordPress Child Theme

If you haven’t created a child theme yet, follow these steps:

Create a new folder in the web/app/themes/ directory. For example, agentpro-elevate-child.

Edit vite.config.js

  • Go to web/vite.config.js and edit the following on line 12

Example:

vite.config.js
   const themeName = 'agentpro-elevate-child';
⚠️
Warning

Certain version of vite requires src folder and scss, js folder to be present in the root directory of your theme. If you are not using latest version of vite, you need to create a src folder and inside it create a scss and js folder to avoid pipeline errors. on latest version of vite it will work if you do not have src folder and scss js folder inside the src folder. Please see How to Update Vite for more informations.

Create a style.css file in the child theme folder and include the following header:

style.css
/*
 Theme Name: Agentpro Elevate Child
 Template: agentpor-elevate
*/

Replace Template with the folder name of the parent theme.

Create a functions.php file in the child theme folder and enqueue the parent theme styles:

function.php
<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

For Enqueue and Dequeue scripts and styles, refer to the Enqueue and Dequeue Scripts and Styles  documentation.

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

Activate the child theme in the WordPress admin dashboard under Appearance > Themes.

Last updated on
How to Update Parent ThemeFAQ's