Why is my custom plugin not working after accidentally deleting a different plugin?
I accidentally deleted a plugin called WP File Manager that seems to only allow me to access my websites files via the WordPress dashboard. After I deleted it, a custom plugin I have stopped functioning properly. The custom plugin is for a shortcode to generate a JS table that is editable by the user which will divide some nutritional information by how many servings they want. I have included the .php .js and .css files that make up the plugin below. If you could help me figure out what is happening i would appreciate it!!
It looks like this when functioning properly:
Currently, all of the pages that have this specific shortcode on the page look like this(below) and nothing happens when you update the number in the Servings column:
Here is my .php code
<?php
function ls_nutritional_table_resources() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'nutrition_table') ) {
wp_register_style( 'ls-nutritional-table-css', plugin_dir_url( __FILE__ ) . 'nutritional-table.css' );
wp_enqueue_style( 'ls-nutritional-table-css' );
wp_enqueue_script('ls-nutritional-table-js', plugin_dir_url( __FILE__ ) . 'nutritional-table.js' );
}
}
add_action( 'wp_enqueue_scripts', 'ls_nutritional_table_resources');
add_shortcode('nutrition_table', 'ls_nutritional_table');
function ls_shortcodes() {
function ls_nutritional_table($atts) {
$attributes = shortcode_atts(array(
'servings' => '1',
'carbs' => '100',
'protein' => '400',
'fats' => '90',
'calories'=> '2810'
), $atts);
$output = '<div class="nutrition-table">
<div class="nutrition-table__column">
<div class="nutrition-table__head">Servings</div>
<div class="nutrition-table__content">
<input type="number" value="' . esc_html($attributes['servings']) . '" min="1" autocomplete="off" class="nutrition-table__number">
</div>
</div>
<div class="nutrition-table__column">
<div class="nutrition-table__head">Carbs</div>
<div class="nutrition-table__content nutrition-table__content--carbs">' . esc_html($attributes['carbs']) . 'g</div>
</div>
<div class="nutrition-table__column">
<div class="nutrition-table__head">Protein</div>
<div class="nutrition-table__content nutrition-table__content--protein">' . esc_html($attributes['protein']) . 'g</div>
</div>
<div class="nutrition-table__column">
<div class="nutrition-table__head">Fat</div>
<div class="nutrition-table__content nutrition-table__content--fat">' . esc_html($attributes['fats']) . 'g</div>
</div>
<div class="nutrition-table__column">
<div class="nutrition-table__head">Calories</div>
<div class="nutrition-table__content nutrition-table__content--calories">' . esc_html($attributes['calories']) . ' cals</div>
</div>
</div>';
return $output;
}
}
add_action('init', 'ls_shortcodes');
?>
Here is my .js code
var NutritionTablesPlugin = (function() {
'use strict';
/**
* Create the Constructor object
*/
var Constructor = function(selector) {
//
// Variables
//
var publicAPIs = {};
var nodes = document.querySelectorAll(selector);
//
// Methods
//
var allNodes = function(callback) {
for (var i = 0; i < nodes.length; i++) {
callback(nodes[i], i);
}
};
/**
* A private method
*/
var updateNutritionValues = function(table, multipler, macros) {
var carbs = table.querySelector('.nutrition-table__content--carbs');
var protein = table.querySelector('.nutrition-table__content--protein');
var fat = table.querySelector('.nutrition-table__content--fat');
var calories = table.querySelector('.nutrition-table__content--calories');
carbs.textContent = (macros.carbs / parseInt(multipler)).toFixed(1) + 'g';
protein.textContent = (macros.protein / parseInt(multipler)).toFixed(1) + 'g';
fat.textContent = (macros.fat / parseInt(multipler)).toFixed(1) + 'g';
calories.textContent = (macros.calories / parseInt(multipler)).toFixed(0) + ' cals';
};
/**
* Another public method
*/
publicAPIs.init = function(options) {
allNodes(function(node) {
var originalValues = {
carbs: parseInt(node.querySelector('.nutrition-table__content--carbs').textContent),
protein: parseInt(node.querySelector('.nutrition-table__content--protein').textContent),
fat: parseInt(node.querySelector('.nutrition-table__content--fat').textContent),
calories: parseInt(node.querySelector('.nutrition-table__content--calories').textContent)
};
node.addEventListener('change', function(e) {
updateNutritionValues(node, parseInt(e.target.value), originalValues);
});
});
};
//
// Return the Public APIs
//
return publicAPIs;
};
//
// Return the Constructor
//
return Constructor;
})();
document.addEventListener("DOMContentLoaded", function(event) {
var nutrition = new NutritionTablesPlugin('.nutrition-table');
nutrition.init();
});
Here is my .css code
.nutrition-table {
display: flex;
flex-flow: row wrap;
width: 100%;
max-width: 740px;
margin: 20px auto;
border: 1px solid black;
}
.nutrition-table__column {
flex: 1;
border-right: 1px solid black;
}
.nutrition-table__column:last-child {
border-right: none;
}
Traversy Media screen and (max-width: 740px) {
.nutrition-table__column {
flex: 0 0 100%;
}
}
.nutrition-table__head {
padding: 8px 0;
background: #474b56;
font-weight: bold;
font-size: 14px;
color: white;
text-align: center;
text-transform: uppercase;
}
.nutrition-table__content {
display: flex;
justify-content: center;
padding: 8px 0;
font-weight: bold;
color: black;
}
.nutrition-table__number {
width: 60px;
}
Leave an answer
You must login or register to add a new answer .