php – custom plugin/widget causes elementor not loading


I’m working on a custom wordpress Widget which displays a simple input and output for a hash function. I implement the widget via a custom plugin as I found this to be the correct way to it (is it?).
However the plugin/widget works on my dublicated local website but not on the live server. It does not break the site but after activation it causes the elementor to be stuck in loading screen, so I can’t implement the widget or make other changes to the site.

I have three files which serve the plugin:


Plugin Name: Hash Calculator
Plugin URI: #noselfpromotion
Description: implement a showcase hash function tool
Version: 0.1.0
Author: #noselfpromotion
Author URI: #noselfpromotion

// Exit if accessed directly

// Load Scripts

// Load Class

// Register Widget
function register_hashcalculator(){

// Hook in function
add_action('widgets_init', 'register_hashcalculator');


  // Add Scripts
  function hc_add_scripts(){
    // Add Main CSS
    wp_enqueue_style('hc-main-style', '/wp-content/plugins/hashcalculator/css/style.css');
    // Add Main JS
    wp_enqueue_script('hc-main-script', '/wp-content/plugins/hashcalculator/js/main.js');


  add_action('wp_enqueue_scripts', 'hc_add_scripts');

and the widget, hashcalculator-class.php:

 * Adds Hash_Calculator widget.
class Hash_Calculator_Widget extends WP_Widget {

     * Register widget with WordPress.
    function __construct() {
            'Hash_Calculator_Widget', // Base ID
            esc_html__( 'Hash Calculator' ), // Name
            array( 'description' => esc_html__( 'Widget to try out SHA265'), ) // Args

     * Front-end display of widget.
     * Haseeb Asif WP_Widget::widget()
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
    public function widget( $args, $instance ) {

        echo $args['before_widget']; // Whatever you want to display before widget (<div>, etc)

        <h5>SHA256 Hash Function</h5>
        <p>Klick auf das Inputfeld und gib ein, woraus du einen Hash generieren möchtest!</p>
        <textarea id="input" placeholder="Input"></textarea>

        <button id="hashBtn">hash generieren</button>
        <p>Hier siehst du den Hash, der aus deinem Input generiert wurde:</p>

        <textarea id="output" placeholder="Output" readonly></textarea>

          var Sha256 = function sha256(ascii) {...}

          function generateHash() {
            var input = document.getElementById("input").value;

            document.getElementById("output").value = Sha256(input)

          document.getElementById("hashBtn").addEventListener("click", () => generateHash());

        if ( ! empty( $instance['title'] ) ) {
          echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];

        echo $args['after_widget']; // Whatever you want to display after widget (</div>, etc)

} // class Foo_Widget

jan.grp 1 month 2021-12-15T11:50:20-05:00 0 Answers 0 views 0

Leave an answer