1st thing to do is to create subfolder in your /wp-content/plugins directory. It must have specific name. Then create a php file with same name as containing folder. As an example, there’s this custom plugin named shortlist here and so the main file is called shortlist.php, contained in a subfolder /wp-content/plugins/shortlist.
shortlist.php
<?php
/* Plugin Name: Shortlist
Plugin URI: https://smokingscript.com/
Description: a WordPress Plugin - a popup to collect user selected info and paste it into comment form for further email posting
Version: 1.0
Author: hendra d.
Author URI: https://smokingscript.com
*/
//make sure we don't expose any info if called directly
if(!function_exists('add_action')){
echo 'Hi there! I\'m just a plugin, not much I can do when called directly.';
exit;
}
//ok to go: for any pages / posts
function shortlist(){
wp_register_style('shortlist-style', plugins_url('/style.css', __FILE__), false, '1.0', 'all');
wp_enqueue_style('shortlist-style');
wp_register_script('shortlist-script', plugins_url('/script.js', __FILE__), false, '1.0', true);
wp_enqueue_script('shortlist-script');
}
add_action('wp_enqueue_scripts', 'shortlist');
As you could see in shortlist.php source above, it requires 2 files to work, both are in same subfolder as shortlist.php and are as follows:
script.js
/* module: JS for WordPress plugin Shortlist */
'use strict';
const PLUGIN_NAME = 'shortlist';
+function(){
//build pop structure and set it up:
var el = document.body.appendChild(document.createElement('div'));
el.id = PLUGIN_NAME;
//a checkbox
el = el.appendChild(document.createElement('input'));
el.id = 'toggle';
el.type = 'checkbox';
//a label
el = el.parentNode.appendChild(document.createElement('label'));
el.setAttribute('for', 'toggle');
//a textarea.
el = el.parentNode.appendChild(document.createElement('textarea'));
el.setAttribute('placeholder',
'Select some text and drag-and-drop it to this window. ' +
'When done, select all or some of shortlist text and drag-and-drop it to Comment textbox.'
);
if(localStorage.getItem(PLUGIN_NAME) !== 1)
el.value = localStorage.getItem(PLUGIN_NAME);
el.addEventListener('change', function(){
localStorage.setItem(PLUGIN_NAME, this.value);
}, false);
}();
style.css
/* module: CSS for WordPress plugin Shortlist */
#shortlist{
position: fixed;
top: 1em;
right: 0;
padding: 0 0.5em;
background-color: white;
box-shadow:0 0 1em rgba(0,0,0,0.2);
}
#toggle{
display: none;
}
#shortlist label{
display: inline-block;
vertical-align: middle;
}
#shortlist label:after{
display: block;
content: '\203a';
vertical-align: middle;
line-height: 1em;
width: 1em;
text-align: center;
}
#toggle:checked+label:after{
transform: rotate(180deg);
}
#shortlist textarea{
margin-bottom: 0.5em;
font-size: 0.8em;
width: 16em;
height: 10em;
}
#toggle:checked~textarea{
width: 4em;
height: 3em;
}
Done? Not yet. Now go to Plugins menu in Dashboard to find whether WordPress may be able detect it. If it is, activate plugin…