This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Getting a Custom Icon to Save in Icon Widget

6 years ago · Last reply by Alex S 6 years ago

Hi friends,

I am adding a custom icon set to the Icon widget via filter hook, per this guide:
https://siteorigin.com/docs/widgets-bundle/form-building/icons-and-fonts/

Everything seems to work up until the point of saving. After hitting the save button, the icon disappears from the “Choose Icon” button, and the selection is not saved (see screenshot below). The default set of icons all seem to have no problem being saved.

View post on imgur.com

Have I missed something? Is there another action or filter I need to pass data to before saving? My filter hook code is attached below, and also the plugin code itself is on GitHub (https://github.com/ridgekuhn/so-widgets-icon-fap).

Could you help me with stack tracing the save function for debugging? ie, where in the so-widgets-bundle is this form data prepared and passed to the database?

function rjk_sow_icon_fontawesomepro_filter( $icon_families ) {
  /** @var string $icon_meta_uri Path to the Font Awesome Pro icon metadata generated by parser.js */
  $icon_meta_uri = plugin_dir_url( __FILE__ ) . 'inc/fap-icons.json';
  /** @var string $style_uri Path to the Font Awesome Pro stylesheet */
  $style_uri = plugin_dir_url( __FILE__ ) . 'css/all.css';
  // Cache busting
  $style_uri .= '?ver=' . filemtime( plugin_dir_path(__FILE__) . $font . '/style.css' );
  /** @var array $styles Set up icon Styles list for SO Icon widget form */
  // [key] is rendered as a class name by siteorigin_widget_get_icon()
  $styles = array(
    'fab' => __( 'Pro - Brands', 'so-widgets-bundle' ),
    'fad' => __( 'Pro - Duotone', 'so-widgets-bundle' ),
    'fal' => __( 'Pro - Light', 'so-widgets-bundle' ),
    'far' => __( 'Pro - Regular', 'so-widgets-bundle' ),
    'fas' => __( 'Pro - Solid', 'so-widgets-bundle' )
  );
  /** @var array $icons Icon metadata generated by parser.js */
  $icons = rjk_sow_icon_fontawesomepro_import( $icon_meta_uri );
  // Register the icon set with SO Icon widget
  $icon_families['fontawesomepro'] = array(
      'name' => __( 'Font Awesome Pro', 'so-widgets-bundle' ),
      'style_uri' => $style_uri,
      'icons' => $icons
  );
  // Register style list with SO Icon widget
  $icon_families['fontawesomepro']['styles'] = $styles;
  return $icon_families;
}
add_filter( 'siteorigin_widgets_icon_families', 'rjk_sow_icon_fontawesomepro_filter' );

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Alex S Staff 6 years, 1 month ago

    Hi Ridgekuhn,

    I’m sorry to hear you’re having trouble adding custom icons. I attempted to use your plugins but the icon.json file is missing so none of the icons are visible for me during preview, and (potentially related to the missing icons) the following error occurs when you attempt to preview the widget:

    Uncaught Error: Cannot use object of type WP_Error as array in C:\Users\Alex\Documents\local-sites\siteorigin\app\public\wp-content\plugins\so-widgets-bundle\base\inc\fields\icon.class.php on line 87
  2. ridgekuhn 6 years, 1 month ago

    Hi Alex, thanks for your response!

    Since the plugin uses Font Awesome Pro and this is a public forum, is there an email address I can send a pre-compiled version of the plugin to? Otherwise, the plugin requires a Font Awesome Pro license and npm auth token to compile icons.json and other assets (see the readme for instructions)

    Post-compile, the plugin is largely based off of the free Font Awesome set included in

    so-widgets-bundle

    , except it uses the

    icons.json

    file instead of hardcoding the

    $icons

    array into the filter hook.

    To compile, the Node installer grabs the Font Awesome Pro npm package, parses the

    metadata/icons.yml

    file and converts it to the same array structure used in the

    siteorigin_widgets_icon_families

    function. (I don’t know what you do in-house for the free Font Awesome set before distributing the plugin code, but this same method could be applied to the free version’s

    metadata/icons.yml

    to update it more easily). It also copies the webfonts from the npm package, and appends the two

    .sow-icon-FONTNAME

    classes to the default css/all.css stylesheet (link)

    tl;dr, unless I’m mistaken, the only difference between this plugin and the default Font Awesome set should be that the class names aren’t prepended with

    sow-
  3. ridgekuhn 6 years, 1 month ago

    oops, sorry, I didn’t realize the code tag would put everything on its own line!

  4. Alex S Private Staff 6 years, 1 month ago

    This is a private message.

  5. ridgekuhn 6 years, 7 days ago

    Hi Alex,

    I had to put this project on the shelf for a couple weeks and am just now returning to it.

    Renaming it didn’t work, but thanks to your suggestion, I was able to understand the problem. I found that a couple lines earlier, this line is being called: https://github.com/siteorigin/so-widgets-bundle/blob/5f5b695766b342ce3faa00b56a1017ef8d681418/base/inc/fields/icon.class.php#L120

    The `siteorigin_widgets_icon_families` filter hook is flexible enough to let you add an array of styles to `$icon_families[‘my_icons’][‘styles’]`, and will create the dropdown menu in the widget for you, etc; but when `SiteOrigin_Widget_Field_Icon::get_value_parts()` tries to get the value parts to save or render the widget, it’s hard-coded to look for a style key beginning with `sow-fa*`, instead of the style keys that were stored in `$icon_families[‘my_icons’][‘styles’]` in the filter hook.

    So, the easiest solution for me was to just prefix all my `$icon_families[‘my_icons’][‘styles’]` keys with `sow-fa`, and make sure the corresponding values matched them in `$icon_families[‘my_icons’][‘icons’][$my_icon_name][‘styles’]`.

    I’ve also created a patch for the so-widgets-bundle, and a pull request in GitHub to help make this feature a little more flexible.

    Thanks!

  6. Alex S Staff 6 years, 7 days ago

    Hi Ridgekuhn,

    Awesome work mate, we really appreciate it. :)
    I’ve provided some feedback to your PR.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread