Frequently Referenced

List of frequently referenced resources to help in Web Application / WordPress Development, HTML, CSS, JavaScript, PHP, Unicode, and more.

Posts and pages about software.


G Color Utilities R Cool or Can B
Hex Color Picker with Complimentary Colors


Convert Strings
Comprehensive! Just about any possible string conversion you could probably need for web dev, HTML stuff, and more. The site is Online String Tools.
General Conversion Tools
The site is


CSS Pre-processor Compiler
Prepros is a convenient way to develop with SASS. It will link with the browser to create a “Live Preview” environment, refreshing the page each time the .scss file is saved, compiles the CSS file, and updates the browser view with the newly compiled CSS.


Entities / Hex Quick Ref
If you know what it means. This is the quick one. Check it out here. NCR / Hex codes / Entities
Usage: type “x3e” into the search box there. You can actually append the 2-char code to the end of the url, and get results. (e.g. you could script it into something. for what purpose? probably none, but: (where you’d put, e.g. 3e after the slash)
Elements of HTML5 – published by the Web Hypertext Application Working Group

Images (traditional / raster / pixel)

Pexels Royalty Free Stock Images
Edit Images Online
Merge Images


Linux Posts and Pages
All posts and pages on this website with a reference to Linux.

MySQL / MariaDB


Create a User and assign global privileges. (e.g. for use in development, or if you know what you’re doing.)


NVM – Node Version Manager
If you work with a lot of Node.js apps, you should have NVM installed to ensure packages install correctly.
Node Dependency Time Machine
When you’re so far down you just need something to take the edge off, just install your very own little co-dependent enabler! For all of your addictions and dependencies. Get your sh!t together, man!.


Install PHP
Follow this complete step-by-step guide to install Apache, PHP, and MySQL or MariaDB on Linux or Windows WSL.
Test PHP Code/ Logic/ Functions/ etc – Live test PHP code: work with individual functions (e.g. str_replace , preg_replace, etc. ). Makes it easy to figure out what you might be doing wrong in your code without sifting through several unrelated of lines. (different from CodePen and the like)

PHP Debug

Comply with Standards

PHPStan – Check out this article about the PHP Standards tookit PHPStan, and some suggestions for debugging PHP manually.

Xdebug (required)

Do the phpinfo() thing. If you don’t already have a file providing you the phpinfo(), you can get the information instantly via command line:

BASH$ php -i
CMD$ cd /D X:\path\to\php
CMD$ .\php.exe -i

copy and paste the resulting output into the text field at from there, you’ll be guided properly on your next steps.

The diagnostic info produced by xdebug_info() (an HTML page display, like phpinfo(); ) is quite useful if you’re having difficulty with step debugging. If you encounter problems with Xdebug not detecting the activity on your configured port, check the Browser page on this site for a link to the Xdebug helper extension as you might need it for Xdebug to function as desired.

SSH Port Forwarding (Xdebug Remote Debugging)

Obtain a copy of KiTTY or PuTTY. KiTTY has more features, but PuTTY is the original. Personally, I use KiTTY because it is a bit more friendly about saving stuff. It’s basically the same software.

Details about what Port Forwarding does, from the PuTTY site.

Note: The text of some resource links here advise port 9000 for Xdebug. If you’re using Xdebug 3 (which of course, you should be) then you should use port 9003.

The developers of the CodeLobster IDE made a nice little visual for you. Look for the text that reads, “Open Connection | SSH | Tunnels and Add new forwarded port.” If you can see the pictures, you can probably figure it out!

Visual Studio Code users should read the recommendations on the VS Code app page.

Once you have established port forwarding for remote debugging (if necessary), be sure to reference the xdebug_info() output, as described above. Go here to get the Xdebug browser extension (necessary in some environments).

Why does no one (myself included) ever post a proper tutorial about this topic? Hmm. That’s probably something to ask Dr Crane.

Pay real $ for PHPStorm
Now hide your head in shame and cry because you couldn’t figure out how to do the above on your own. Now laugh at yourself because you believed exchanging your hard-earned money for PHPStorm would be like legally paying for sex, and you still aren’t remote debugging like the advertisement made you believe. Check onlyfriends. Cheer up.
No? Don’t worry. I cried, and laughed enough for both of us, and the other thing.

PHP Deprecated

Transform deprecated mysql code to mysqli

Regular Expressions

Free Online Regular Expression Testing Tools
Test PHP RegEx

Scalable Vector Graphics (SVG)

Convert to SVG – Free Online Tool

VectorMagic – Create an Account to save your work!

At Convertio upload jpg png etc to easily convert to SVG for free.

Alternative FreeConvert is similar to Convertio but offers some customization options

SVG Logos / Popular Brands

Vector Logo Zone


Emoticons / Complete Emoji list at
Encode / Decode Unicode / HTML NCR
Nice, simple, no-nonsense conversion – backward and forward, and upside down?
Hexadecimal NCR Quick Ref
Quick and easy Hex reference. Just put the code in the URL to see what it is. Or, vice versa. You’ll see what I mean. Check it out here. Hex codes are better than Decimal or HTML Entities. Trust me.

E.g. Try changing the last two chars in the URL at the link from 5c to 3c. Then try 3e. Try any number in the “20’s”, then try 2A, 2B, 2C, 2D etc (like you would with the Hex codes for CSS colors, if you know how to do that and understand it). I bookmarked it because it’s the kind of thing I find useful.
Online String Tools
Just about any possible character conversion you could probably need for web dev, HTML stuff, and more at Online String Tools.
Unicode Resources
Check out this nice resource for a summary of different Unicode stuffs…

Visual Studio Code

(Microsoft VS Code) Official Documentation

VS Code Extensions

AI Assisted Coding


Status Bar File Details
FileStatus – Simple Plugin to display File Size and modification time in the statusbar.
Preview PHP Files on Server

Open PHP with

If you’re interested in trying a handful of extensions, just place the following in a file called extensions.json and place it in a folder named /.vscode in your workspace directory. Note the .dot prefix as this is a special, hidden folder that VS Code understands.

    "recommendations": [

Please feel free to add your own recommendations in the comments.


Direct link to the WordPress Site Editor / WordPress Block Editor: “wp-admin/site-editor.php (dev resources)

Landing page for General WordPress Development resources.
Make (everybody poops)
Landing page for General WordPress Make resources, because that’s not the same as Development.
Plugin Development
The WordPress Plugins Handbook
Theme Creation
The WordPress Themes Handbook. Includes “Full Site Editing” / Block themes, and “Classic” themes resources. This would be your WordPress themes starting point for understanding.

WordPress Unofficial Documentation and Alternative Resources

Adam Brown’s Hooks Database (@poliARB)
All hooks, actions, and filters with some charts and stuff. I don’t know how I found it, but I really like this resource! Check it out – it shows versions and deprecation info too!
Alternative Doc – Plugins – functions, action hooks, filter hooks, “shortcodes” and classes list. Site no longer exists (on last attempted access).
Manual Debugging

Place the following inside of a function that you believe is causing your code to malfunction, or just to gain perspective on your code’s order of operations. I used this particular bit to debug a custom plugin’s .JS file path. It can be easily modified for other situations of course. Add your own custom CSS classes for emphasis as desired:

echo '<div class="css_be_stylish">File: '. __FILE__ . ':' .__LINE__.'<br>';
echo '<div>At function: <strong>' . __FUNCTION__ .'</strong>:' .__LINE__ .'</div>';
     wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ , 2) . 'admin/js/admin.js', array( 'jquery' ), $this->version, false );
echo '<div>this->plugin_name: '. $this->plugin_name .', '. plugins_url('admin', __FILE__ ) . ' plugins_url( admin, FILE__ )  in file: '. pathinfo(__FILE__, PATHINFO_BASENAME) .':'.__LINE__.'</div>';
Namespaces and WordPress
Check out Tom McFarlin on using Namespaces (in WordPress).
WordPress Plugin Namespace Boilerplate
This person created a WordPress Plugin Boilerplate for Namespace structure. I’ve found that Namespaces greatly improve the ease of editing and organization. Try this next time you are starting out with a new plugin. I discovered it while following the author’s WP_List_Table tutorial.


Official Related to WP_List_Table
WP_List_Table Tutorials and Code

WordPress Full Site Editing / FSE / Block Themes

Block Theme Tutorial on YouTube
Note: unlike many (dare I say, most) YouTube “tutorials” about WordPress– which aren’t just a walkthrough of how to use a plugin, or another waste of your time– you can understand this well spoken, non-native English speaking presenter!
I haven’t viewed all episodes in the complete playlist, but this WordPress FSE Block Theme tutorial presents itself as a a comprehensive overview, top to bottom.
Block Theme Generator
Create a bare-bones block theme with the Block Theme Generator from Customize a few options.
Block Theme – Navigation
Jump to Edit Navigation Menu from Dashboard (as displays in a block theme’s ./parts/header.html) .

Open the WP admin Dashboard then paste the following after the wp-admin/ part of the URL in the address bar:

WordPress Plugins for Production (+ menus)

Appearance / Theme
Do you want to use the Gutenberg / new Full-Site WordPress Editor, but you just can’t get used to how to find the features, and what you need to achieve your vision? Try Twentig. It’s not super advanced like Elementor or other so-called “site builders”, but the enhancements it provides are still cool. I personally like the ease of use of Google Fonts it provides.
NOTE: For best results, a cache management plugin is required for Autoptimize to function to its potential. We recommend WP Super Cache:
Related Content / Call to Action / Special Effects

WordPress Plugins for Use in Development

Black Bar
Black Bar is an unobtrusive Debug Bar for WordPress developers that attaches itself to the bottom of the browser window.
Child Theme Configurator
Child Theme Configurator is a fast and easy to use utility that allows you to analyze any theme for common problems, create a child theme and customize it. Creates a functions.php and style.css file so you can create a custom theme with the original as a Parent theme, so the parent theme will continue to update without affecting your custom styles.
Debug Bar
Another means of checking and monitoring for errors etc during development. Use with the Actions and Filters addon to see an amazing amount of detail about what’s going on.
Query Monitor
Like Black Bar but more features, Query Monitor is the developer tools panel for WordPress. It enables debugging of database queries, PHP errors, hooks and actions, block editor blocks, enqueued scripts and stylesheets, HTTP API calls, and more. I prefer Black Bar, but you might need Query Monitor if you’re really stuck.
Easy WP SMTP (the actual title) allows you to configure and send all outgoing emails via SMTP. This will prevent your emails from going into the junk/spam folder of the recipients. I use it for local development so I don’t have to have a mail server configured, or rely on the PHP configuration to send mail. It just makes things easier if you’re trying to test something like Contact Form 7 on localhost.

WordPress Plugins for Migration

Export / Import (content, users, settings, etc.)
E.g. Export your “additional CSS” rules. Makes a .dat file which can then be imported using the same plugin at the second (or other) location.
Duplicator is for the heavy lifting. If you’re familiar with cPanel, think of this as the full site backup feature. Duplicator will package everything, including your database (as an SQL file) into a convenient package, complete with an installation script to put everything back in order for you! Difficult to believe this one is available at no cost. Thank you, Snap Creek!
WPS Menu Exporter. Export navigation menus (and Import) as XML format, as would be expected to be part of the core options … but is not for some reason.


Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.