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:
hashcalculator.php:
<?php
/*
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
if(!defined('ABSPATH')){
exit;
}
// Load Scripts
require_once(plugin_dir_path(__FILE__).'/includes/hashcalculator-scripts.php');
// Load Class
require_once(plugin_dir_path(__FILE__).'/includes/hashcalculator-class.php');
// Register Widget
function register_hashcalculator(){
register_widget('Hash_Calculator_Widget');
}
// Hook in function
add_action('widgets_init', 'register_hashcalculator');
hashcalculator-scripts.php:
<?php
// 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:
<?php
/**
* Adds Hash_Calculator widget.
*/
class Hash_Calculator_Widget extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__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.
*
* @see 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)
?>
<html>
<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>
<script>
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());
</script>
</html>
<?php
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