III. Create a WordPress Plugin

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…

Leave a comment

Your email address will not be published.