How can I extend classes in wordpress child theme?

Question

I use a paid theme and unfortunately it does not offer the possibility to use own icons from a font. Since I have to observe the GDPR and cannot use Google icons, I would like to use local icons. The only possibility is to import my own CSS file and define the unicodes of the icons. I already use a child theme and have already successfully defined my local icon font in the parent theme, but I am not sure how to transfer my customisations to the child theme.

Parent: /themes/mytheme/includes/assets.php

I have not made any changes here. I just added the css definition of my font to the existing icons.css. But the goal would be to separate this. So here I have to add another line in the register_scripts function so that my CSS is loaded. wp_register_style( 'local-icons', c27()->template_uri( 'assets/dist/local-icons'.$suffix.'.css' ), [], \MyTheme\get_assets_version() );

class Assets {
  ...
  ...
  public function register_scripts() {
  ...
  ...
  ...
  wp_register_style( 'mytheme-icons', c27()->template_uri( 'assets/dist/icons'.$suffix.'.css' ), [], \MyTheme\get_assets_version() );
  ...
  ...
  }
}
  ...
public function enqueue_scripts() {
        global $wp_query;
  ...
  ...
  wp_enqueue_style( 'mytheme-icons' );
  ...
}

What is c27?

function c27() {
    return mytheme()->helpers();
}

Parent: /themes/mytheme/includes/src/admin/admin.php

*Here I have added the following to the enqueue_scripts() function:

wp_enqueue_style( 'mytheme-local-icons' );

In the function get_icon_packs() in the return of wp_send_json I added the following: 'local-icons' => array_values( \MyTheme\Utils\Icons\Local_Icons::get() ),*

class Admin {
  ...
  ...
  public function enqueue_scripts() {
    ...
    ...
    wp_enqueue_style( 'mytheme-icons' );
    ...
  }
  ...
  ...
  public function get_icon_packs() {
        if ( ! is_user_logged_in() ) {
            return;
        }
     return wp_send_json( [
            'mytheme-icons' => array_values( \MyTheme\Utils\Icons\mytheme_Icons::get() ),
            'font-awesome' => array_values( \MyTheme\Utils\Icons\Font_Awesome::get() ),
        ] );
     
  }
    ....
    ....
}

Parent: /themes/mytheme/includes/utils/icons/theme-icons.php

Here I created a new file and did the mapping for my font.

<?php
namespace MyTheme\Utils\Icons;
if ( ! defined('ABSPATH') ) {
    exit;
}
class Theme_Icons {
    public static function get() {
        return [
            '&#xe900' => 'icon-add-circle-1',
            '&#xe901' => 'icon-airplane',
            '&#xe902' => 'icon-alien',
            ...
            ...
        ];
    }
}

I have made my changes in each of the above files and everything was working as expected. But will be cause a problem when an update of the theme will be installed in future. How can I extend the classes in the child theme so that I can use my own local icons?

Hope there is somebody out there who can help me a bit.

PS: I'm not a developer, but understand a bit of programming

Answer 1

Create a child theme and add your file custom-icons.css

Then add following code to your file functions.php

add_action('wp_enqueue_scripts', 'enqueue_custom_icons', 20);
function enqueue_custom_icons(){
    wp_enqueue_style('custom-icons', get_stylesheet_directory_uri() . '/custom-icons.css', [], '1.0.0');
}

This will properly add your CSS file to your theme. And having a child theme allows you to update the parent theme (main theme) without having to re-add this code upon update.