Flipbox Awesomes with this theme

This post is just offering a solution for people that want to use Flipbox Awesomes with the theme. When trying to use Flipbox Awesomes, it breaks the display of the theme and Font awesome images will not show when the site is published. They show perfectly when in preview or edit mode.

To correct this I have manually added code to the /wp-content/themes/newsphere or newsphere-pro/functions.php file.

<?php
/**
 * Font Awesome Kit Setup Theme Hack Added By Me
 * 
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}
fa_custom_setup_kit('https://kit.fontawesome.com/thecodegivenbyfontawesome.js');

/**
 * Font Awesome Conflict Resolution
 */
if (! function_exists('fa_custom_remove_conflicts') ) {
  function fa_custom_remove_conflicts($blacklist = array()) {
    foreach ( [ 'wp_print_styles', 'admin_print_styles', 'login_head' ] as $action ) {
      add_action(
        $action,
        function() use ( $blacklist ) {
          $collections = array(
            'style'  => wp_styles(),
            'script' => wp_scripts(),
          );

          foreach ( $collections as $key => $collection ) {
            foreach ( $collection->registered as $handle => $details ) {
              if ( FALSE !== array_search(md5($details->src), $blacklist) ) {
                $collection->dequeue([ $handle ]);
              } else {
                foreach ( [ 'before', 'after' ] as $position ) {
                  $data = $collection->get_data($handle, $position);
                  if( $data && is_array($data) &&
                    FALSE !== array_search(
                      md5("\n" . implode("\n", $data) . "\n"),
                      $blacklist)
                    ) {
                    unset( $collection->registered[$handle]->extra[$position] );
                  }
                }
              }
            }
          }
        },
        0
      );
    }
  }
}

fa_custom_remove_conflicts([
  '7ca699f29404dcdb477ffe225710067f',
  '3c937b6d9b50371df1e78b5d70e11512',
]);
/**************************************************************************
*****************************End Custom Code Added to Theme By Brian*********************************************

/**
 * Newsphere functions and definitions

Please note that you need to customize this line in the above code
fa_custom_setup_kit('https://kit.fontawesome.com/thecodegivenbyfontawesome.js');
This will need to be changed to the code you receive from Font Awesome which will look something like 7dab******.js

Then you need to also comment out a line from /wp-content/plugins/flip-box/Page/Public_Render.php

The line I had to comment out from that file is wp_enqueue_script('flipbox-addons-jquery', OXI_FLIP_BOX_URL . '/asset/frontend/js/jquery.js', false, OXI_FLIP_BOX_PLUGIN_VERSION);

to comment it out add to // in front of it so it appears as

// wp_enqueue_script('flipbox-addons-jquery', OXI_FLIP_BOX_URL . '/asset/frontend/js/jquery.js', false, OXI_FLIP_BOX_PLUGIN_VERSION);

I then use the widget I want to display the flip boxes that I have created. I usually either use the custom Html widget with the slide-anything shortcode to display multiple flip boxes as I want them to appear. Or you could use the Flipbox Awesomes widget.

I hope this helps anyone that wants to use flip boxes with this particular theme.

• This topic was modified 5 years ago by Brian. Reason: added functions.php location and corrected typo
• This topic was modified 5 years ago by Brian.

The page I need help with: [log in to see the link]