Category: Web Development

WordPress: How to Use Nonces to secure AJAX calls

Post author By Ben
Post date November 4, 2022
No Comments on WordPress: How to Use Nonces to secure AJAX calls

This article assumes you have knowledge of PHP, JQuery, developing for WordPress and enqueueing scripts and using AJAX calls that work but do not use nonce security.

I am not here to try to sell you on using nonces. Nonces do add security to AJAX calls but they are not REQUIRED, just greatly recommended. WordPress describes nonces as “a one-time token generated by a website… This could prevent unwanted, repeated, expired, or malicious requests from being processed.”

In other words, a nonce is a unique key that your website creates that allows you to verify actions. For the purposes of this article, we’re going to focus on using nonces to ensure that requests are originating from our own website.

First, let’s start by generating the nonce. The proper way of doing this is by localizing your javascript files in the PHP where you register and enqueue the script files.

wp_register_script( 'cp_script', plugin_dir_url( __FILE__ ) . '/library/js/cp_script.js', [ 'jquery' ], 'all', true );

		wp_localize_script( 'cp_script', 'vars', [
			'ajaxurl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce('any_text'),
		] );

		wp_enqueue_script( 'cp_script' );

wp_register_script( 'cp_script', plugin_dir_url( __FILE__ ) . '/library/js/cp_script.js', [ 'jquery' ], 'all', true );

wp_localize_script( 'cp_script', 'vars', [

'ajaxurl' => admin_url( 'admin-ajax.php' ),

'nonce' => wp_create_nonce('any_text'),

] );

wp_enqueue_script( 'cp_script' );

In the code above we register a script, point to it’s file, tell WordPress jquery is a dependency, and then localize into the script 1) the ajax url and 2) the nonce that we generate

Then inside the script file, create a JQuery on click function and inside it put this AJAX call:

jQuery.ajax({
	type: 'POST',   // Adding Post method
	url: cp_script.ajaxurl, // Including ajax file
	data: {
	 "action": "my_function",
	 "data"   : data,
	 "nonce": cp_script.nonce
	},
	success: function( response ) { // Show returned data using the function.
		alert( response );
	}

jQuery.ajax({

type: 'POST', // Adding Post method

url: cp_script.ajaxurl, // Including ajax file

data: {

"action": "my_function",

"data" : data,

"nonce": cp_script.nonce

success: function( response ) { // Show returned data using the function.

alert( response );

}

The final step is the shortest. Inside of my_function, the function being called by the AJAX call, just add the actual check as it’s first line:

function my_function() {
     check_ajax_referer( 'any_text', 'nonce' );
...

function my_function() {

check_ajax_referer( 'any_text', 'nonce' );

...

The check is just that one line. Notice ‘any_text’ can be subbed for any string you choose as long as it matches the string used in the function to generate the nonce, and ‘nonce’ can also be any variable name, as long as it matches the parameter passed in the data of the AJAX call.

Happy WordPressing!

Sources:

How to Add a WordPress AJAX Nonce

How to Install plugins onto my WordPress site using Composer

Post author By Ben
Post date August 13, 2022
No Comments on How to Install plugins onto my WordPress site using Composer

Installing plugins is easy enough as long as you have a basic understanding of composer and know how to use it, and this guide will explain the process.

The first thing you need to do is make a composer file in a file named composer.json. That may sound obvious, but then first steps often are:

{
	"name": "brothman01/awesome-project",
	"authors": [
	{
		"name": "Ben Rothman",
		"homepage": "https://www.benrothman.org",
		"role": "Developer"
	}
	],
	"repositories": [
	{
		"type":"composer",
		"url":"https://wpackagist.org"
	}
	],
	"config": {
	"platform": {
		"php": "7.3"
	},
	"allow-plugins": {
		"composer/installers": true
	}
	},
	"require": {
	"wpackagist-plugin/woocommerce": "dev-trunk",
	"wpackagist-plugin/chatpress": "2.0.1",
	"wpackagist-plugin/advanced-custom-fields": "5.12.3"
	}
}

{

"name": "brothman01/awesome-project",

"authors": [

{

"name": "Ben Rothman",

"homepage": "https://www.benrothman.org",

"role": "Developer"

}

"repositories": [

{

"type":"composer",

"url":"https://wpackagist.org"

}

"config": {

"platform": {

"php": "7.3"

"allow-plugins": {

"composer/installers": true

}

"require": {

"wpackagist-plugin/woocommerce": "dev-trunk",

"wpackagist-plugin/chatpress": "2.0.1",

"wpackagist-plugin/advanced-custom-fields": "5.12.3"

}

The above JSON is the final composer file, so if you are seeing things in there that don’t make sense yet, don’t worry I am going to explain them.

[We want to use composer in this project to install plugins into the plugin directory, not the usual vendor directory, so we use the oomphinc/composer-installers-extender plugin to do that by requiring it as a dependency and then setting custom installer paths in the “extra” section, and as you can see that custom install path is set for all packages of type “wordpress-plugin”.]

We want to install WordPress plugins hosted in the official repository AND we want to install them to the correct plugins directory in the WordPress install. Wpackagist.org is a great solution for installing WordPress plugins from the official repository via composer to the correct place, so we have to add a url for that to the “repositories” section.

The rest is just requiring each plugin as a dependency package in the JSON file. To install a specific plugin from the public WordPress repository, just require wpackagist-plugin/{the-plugin-slug} and either the version or dev- then the svn directory to get the files from.

I hope you try this and come to agree that this process is easy thanks in large part to the work done by the developers of wpackagist, who designed their software to enable composer to do exactly this with ease. Enjoy!

Project Web Development

How to select VS Code as the default editor for filetypes in FileZilla on Ubuntu

Post author By Ben
Post date July 4, 2022
No Comments on How to select VS Code as the default editor for filetypes in FileZilla on Ubuntu

FileZille, the common FTP or SFTP app gives users the flexibility to edit files on remote servers in the editor of their choice before they upload the changed file. Many users (myself included) like to use VS Code to edit files that are .php, .css, .js or .html files. But Ben, how do I configure FileZilla to use VS Code? Check out the easy solution below!

Step 1:
Go to Settings of FileZilla.

Step 2:
In Settings, go to the File Editing option

Step 3:
And in that choose option Filetype associations

Step 4:
In the large text field, add “php /snap/bin/code” for PHP.

And similarly for the different file types:
For js add “js /snap/bin/code”
For css add “css /snap/bin/code”
For html add “html /snap/bin/code”

Enjoy!

Web Development WordPress

Publishing failed. The response is not a valid JSON response.

Post author By Ben
Post date February 25, 2022
No Comments on Publishing failed. The response is not a valid JSON response.

After a site migration I got this error. Don’t panic, this was an easy fix, go to Settings > Permalinks and choose ‘Post name’ then press the save button. Easy right? Happy WordPressing!

Web Development WordPress

WordPress 5.9 “Joséphine”

Post author By Ben
Post date January 29, 2022
No Comments on WordPress 5.9 “Joséphine”

Introducing 5.9, “Joséphine”. Named in honor of acclaimed international jazz singer Joséphine Baker, this latest, most versatile WordPress release is here: download it or update it directly from your dashboard.

As a lifelong civil rights campaigner, Joséphine Baker believed that all people could live in harmony together, just as different instruments in a jazz band blend together to make a whole piece. Turn on a playlist from your favorite music service and enjoy her famous renditions of “You are the greatest love”, “Sans Amour”, and “Love is a Dreamer” as you discover all the features of this brand-new WordPress release.

Web Development WordPress

Adding User-Specific Content to a WordPress page

Post author By Ben
Post date May 5, 2021
No Comments on Adding User-Specific Content to a WordPress page

There are many ways to go about this but in this post I will be focusing on using php in your WordPress page template to add content that can only be seen by users who are logged into administrator accounts.

Let’s say we have a secret message for administrators “The prize is behind door number 2”. We don’t want to share this invaluable, secret message with just anyone, we only want our friends who have administrator accounts on our website to be able to see the message.

We can create this functionality easily with WordPress using some of it’s many defined PHP functions. All we have to do are the three lines of code below:

if ( is_admin() ) {
     echo 'The prize is behind door number 2';
}

if ( is_admin() ) {

echo 'The prize is behind door number 2';

}

We can also use this same method with a different function to require the user to be logged in to see the message:

if ( is_user_logged_in() ) {
     echo 'The prize is behind door number 2';
}

if ( is_user_logged_in() ) {

echo 'The prize is behind door number 2';

}

We can even use this technique to show the message to a specific user and no one else, for a personalized message or something using the code below:

if ( '3' == get_current_user_id() ) {
     echo 'The prize is behind door number 2.';
}

if ( '3' == get_current_user_id() ) {

echo 'The prize is behind door number 2.';

}

I hope these three short examples demonstrate to you how powerful WordPress custom code using the pre-defined functions can be. Using a relatively small amount of code, I can extend this functionality to add some really useful new features to my website and so can you. Happy WordPressing!

Web Development WordPress

Fixed ChatPress

I installed ChatPress on a website with a new theme today and it looked squished and strange. It was still legible and everything but the whole appearance just looked a little sloppy to me. I’m sure some people would have told me the plugin looked fine and that whether it works or not (which it always did) was more important.

Functionality alone is not enough for me, so I went to work diagnosing the problem and creating a fix. I found that the problems were CSS-related so I went to my scss files, made the changes and recompiled my scss into css so that I could use them for the plugin and voila, it was fixed!

Web Development

How to Control a Youtube Video with javascript

Post author By Ben
Post date November 21, 2020
No Comments on How to Control a Youtube Video with javascript

Last Tested: 11/21/2020

Sometimes a web developer needs to perform this very important control/monitoring functionality. Whether you need to play a video, see if a video has been watched in its entirety or just integrate the embedded youtube video’s functionality into your code for another reason, it can all be done using the youtube API.

The first important (albeit basic) part of using the Youtube API for these functions is that although the video on your page will look like an embed, you are actually putting an empty div on your page with HTML and the Javascript calls the API and replaces that div with the video you specify.

Put the following in the code of your HTML page:

<div id="video-placeholder"></div>

1	<div id="video-placeholder"></div>

2. Include a javascript file with the following content (but change videoId to the ID of your video):

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        }
    });
}

function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('video-placeholder', {

width: 600,

height: 400,

videoId: 'Xa0Q0J5tOP0',

playerVars: {

color: 'white',

playlist: 'taJ60kskkns,FG0fTKAqZ5g'

events: {

onReady: initialize

}

});

}

function initialize(){

// Update the controls on load

updateTimerDisplay();

updateProgressBar();

// Clear any old interval.

clearInterval(time_update_interval);

// Start interval to update elapsed time display and

// the elapsed part of the progress bar every second.

time_update_interval = setInterval(function () {

updateTimerDisplay();

updateProgressBar();

}, 1000)

}

3. Include this code in your html page to get the current duration of the video automatically updated:

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds &lt; 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}

// This function is called by initialize()

function updateTimerDisplay(){

// Update current time text display.

$('#current-time').text(formatTime( player.getCurrentTime() ));

$('#duration').text(formatTime( player.getDuration() ));

}

function formatTime(time){

time = Math.round(time);

var minutes = Math.floor(time / 60),

seconds = time - minutes * 60;

seconds = seconds < 10 ? '0' + seconds : seconds;

return minutes + ":" + seconds;

}

4. Include this code in your HTML page to add a play button for the video:

$('#play').on('click', function () {

    player.playVideo();

});

$('#play').on('click', function () {

player.playVideo();

});

5. Include this code in your HTML page to add a pause button for the video:

$('#pause').on('click', function () {

    player.pauseVideo();

});

$('#pause').on('click', function () {

player.pauseVideo();

});

Disclaimer: I do not work for youtube and so had no involvement whatsoever in the creation of Youtube or it’s excellent API. For more information about using the youtube embed API visit the site listed in my sources for a more in-depth explanation.

Source(s):

https://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript

Web Development

[HowTo] Install Atom, Brew and Node (npm and npx) on Mac

Post author By Ben
Post date October 10, 2020
No Comments on [HowTo] Install Atom, Brew and Node (npm and npx) on Mac

Ok, lets start by saying that I know the title is a lot. It is not just one or two tools that this guide helps you install, it’s all of those tools listed above, plus a few more that are required to run those tools.

But Ben, why not break this guide into several easier-to-manage guides that install one or two tools at a time? Well, I am writing this guide to help with all of those installations, BUT you can start this guide from anywhere and just pick and choose the tools you want.

First, Atom. The atom editor is the easiest of the bunch to install, just go to https://www.atom.io and download it. The website will automatically detect your OS (unless you are on a crazy one or have some kind of unusual configuration). Easy, one step

Next we will go on to installing Brew. At the time of writing this guide, the terminal command to execute is:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

but if that is not working for some reason or you want to troubleshoot, you can go to https://www.brew.sh . Wow, another one-stepper, I guess this guide is shorter than you thought.

Next we will install Node which as noted in the title will allow you to use both the npm and npx commands. For this installation I recommend using a package manager such as Brew and fortunately I just showed you how to install one above. All we have to do for this one is run the command:

brew install node

1	brew install node

and you will now be able to use npm, npx and node packages in general. If you want to confirm that node is in fact installed on you computer you can run node -v.

We are just flying through this guide! Next, we will install composer. To be honest, you may not have to use this tool much after today, but let’s just install it anyway because it is a great tool and a requirement for the next step which is installing valet.

Project Web Development Website

Park Picker

This project is written with PHP, HTML/CSS and JQuery with some light javascript in there too.

I was given a list of parks, tags that relate to them (like dogpark, pond and bike path), the park’s website and a picture of that park; I made all of that information into a JSON file. All of the tags of every park are all listed all together each one time and the user chooses the tags for their ideal park, something that has all of or as many of the tags as possible.

The JQuery then immediately rebuilds the page (without a page refresh) and lists the parks in order of how many tags it has that match the tag criteria as well as gives a grade to each park that shows how many tags.

It’s not a terribly complex project, but it gets an important job done and solves a problem in away that is relatively easy to maintain.

This project can be found on my GitHub at: https://github.com/brothman01/park-picker