Ben Rothman - WordPress Developer WordPress Archives - ©2023 Ben Rothman, Web Developer

Blog

My blog is dedicated to sharing my expertise, recommendations, and tutorials on WordPress. If you're interested in developing with WordPress, my blog is a valuable resource that you won't want to miss.

Categories
Web Development WordPress

Do we want or need theme.json?

I have been a supporter of WordPress for years, and will continue to support it’s mission to democratize publishing. So many of the ideas WordPress has included over the years have been amazing, but with the theme.json file having such an important role it was a swing and a miss. For the next official theme, we should go back to a mostly using functions.php and maybe have the theme.json file be there to give metadata about the theme but serve a much smaller role than it does now. I think Sam Hermes gets this just right in his article at https://samhermes.com/posts/slowly-backing-away-from-theme-json .

The theme.json file is a cool idea, but the execution is not very cool. Having the file allows you to edit a lot of features of WordPress that most people do not need and takes away features that people do need while potentially alienating long-time users who are used to the way things worked plus not bringing in new ones. Making the user base smaller and not growing it is contrary to the mission “democratize publishing”, since that implies allowing more people to publish using WordPress. I suggest we only use the theme.json for limited metadata about the theme, and we go back to using functions.php for the bulk of the theme configuration. I don’t know if anyone will take that suggestion seriously but I do want to emphasize that I am not saying to get rid of anything, I am just suggesting we make it less important and say that we should use the functions.php file for everything code.

At work, I work on several WordPress classic sites and one WordPress site that uses a theme.json. The theme.json site is not bad, and from the front-end user view it is no different from any of the other sites. On the admin side of the site is a different story, it does have a few differences which I find ok but it also has things missing or more difficult which I do not find ok. Thankfully, we can and did use a supplementary functions.php with the theme.json file.

It sounds efficient to have your different kinds of code and theme functionality simplified by being set with one language and all sent from one place by json which is what the theme.json file does. The way it sounds and the practical application of an idea are two different things. In reality, if someone is editing a json file and writing code then they are a developer. A random non-developer is never going to write a code file in the filesystem of their web server, and that should not happen. The WordPress platform out of the box with plugins allows users to make semi-complex sites without any assistance already, but that is kind of the limit of what a normal person can make without hiring some help.

Can a regular person wire their house with electricity? Maybe in a few cases but the answer is generally no so they hire a specialist to do it. Who is WordPress core making this theme editing process better for? Some random, unassisted person is not going to write code, so why are we making it easier for them? The users the theme.json is made to help will never use it. Let’s pivot away from using theme.json to do theme code adjustments in favor of using it to store metadata (like theme headers and possibly a simplified way of adding fonts to the theme) and use the functions.php file to add/modify the code.

Categories
WordPress

WordPress NYC Meetup

Hey everyone, I was the organizer or the WordPress meetup SotW Watch Party last week at the beautiful Automattic/Tumblr offices. It was fun, we had a sponsorship from Automattic so we had free food, the space was amazing and the speech was obviously very interesting. There were people there in-person, plus it was a hybrid event so half of the attendees were on zoom.

I was part of the in-person side and I have to say it was a lot of fun. Then after the speech we had a nice discussion about what was said and how it related to our WordPress lives! Anyway, it was a lot of fun and I don’t know when there the next one will be but I hope to see you there!

Categories
Plugin Web Development WordPress

HowTo Upload a plugin to the WordPress repository via svn

Checkout the svn repository using the command svn co https://plugins.svn.wordpress.org/{slug here}

Make your changes and create a new branch folder with the new version of the code in it, copy the same files to the trunk folder, then execute svn add * to add the new code to the repository and allow existing versions of your plugin to be updated from the repository.

The final step after adding the new code to the commit is to add the commit message and actually commit the code. Both of those things can be accomplished with one command, svn ci -m 'commit message'

Categories
Web Development WordPress

WordPress: How to send an AJAX call with JQuery and PHP

Several of the webpages and plugins that I have made with WordPress needed to update the database in some way or reference PHP on a button click. Since PHP and access to the database are run before page load, that seems impossible. This need to run PHP on as a response to user input when a button is pressed is exactly the case that an asynchronous AJAX call like the one I am about to show you comes in handy. Making this asynchronous call work is a multi-step process, but when it works it will do exactly what you want it to do.

First, in functions.php file, enqueue the script as normally but localize the script with a nonce which we will use for security purposes later:

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

wp_localize_script( 'script', 'cp_script', [
	'ajaxurl' => admin_url( 'admin-ajax.php' ),
] );

wp_enqueue_script( 'script' );

Then in the JQuery file, use create a handler for a user clicking a button and in the response include a $.ajax call, which is the asynchronous part. Also in the JQuery we are sending the AJAX to the ajax_url that we localized into the script and we also pass the nonce for use in the PHP for security purposes:

$( 'body' ).on( 'click', '.button_input', function() {	
	var data = {
		index: index,
		author: author,
		message: message,
		style: style,
	};
	
	
	$.ajax({
		type: 'POST',   // Adding Post method
		url: cp_script.ajaxurl, // Including ajax file
		data: {
		"action": "the_function",
		"data"   : data,
		"nonce": cp_script.nonce
	},
	success: function( response ) { // Show returned data using the function.
		console.log( response.data.message );
	
	}
	
        });
	
	
});

And finally in the PHP file, add both actions listed below with the prefixes wp_ajax_ and wp_ajax_nopriv for users of different types, define the function using the same name used in the JQuery and get any data sent from the JQuery from post variables. One of those bits of data is the nonce, it is used to verify that your code sent the command and not some malicious actor. From here you can update the WordPress database and then optionally send results of the update back to the JQuery:

add_action( 'wp_ajax_the_function', 'the_function' );
add_action( 'wp_ajax_noprivs_the_function', 'the_function' );

function ajax_function() {
// check the nonce to make sure the request came from a user of your code
check_ajax_referer( 'the_function', 'nonce')


// do whatever you want to update the database with PHP
$message = wp_unslash( sanitize_text_field( $_POST['data']) );
update_option( 'latest_message', data );

// optionally send data back to the JQuery that you got from the PHP
wp_send_json_success{ [
   'message'  => 'succeeded'
] );
}
Categories
Web Development WordPress

WordPress: How to send data and variables from js to PHP in an AJAX call

jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {
            action: "my_user_vote",
            nonce: nonce
         },
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

I’m sure many of you recognize the javascript code block above, added to your code to call an AJAX function and run a PHP function from javascript. The above code will call the PHP function my_user_vote() when an action picked up by JQuery takes place if the function exists, the AJAX hooks were added correctly and the script was in fact localized with the ajaxurl.

If we want to pass data from the original JQuery function that calls the PHP function TO that PHP function, we can simply add more ‘data’ to the call and that data/those variables will be accessible in the PHP as $_POST variables in the function that is called with the names the data was given in the data part of the call.

data : {
            action: "my_user_vote",
            nonce: nonce,
            myVariable: "foobar"
         },

Now, in my PHP function I can get the value “foobar” simply by

public function my_user_vote() {
     $my_variable = wp_unslash( wp_kses_post( $_POST'myVariable'] ) );
...
}
Categories
Web Development WordPress

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' );

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 );
	}

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' );
...

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

Categories
Web Development WordPress

WordPress: Query Loop Syntax

This post is long overdue on this blog. I have personally used this method of querying and iterating through the results many many times. Below is the standard structure for a query and a loop. This query and loop will find all ‘post’s on this WordPress website that have the ‘people’ taxonomy with ‘bob’ checked off.

<?php
// define the search arguments
$args = array(
	'post_type' => 'post',
	'tax_query' => array(
		array(
			'taxonomy' => 'people',
			'field'    => 'slug',
			'terms'    => 'bob',
		),
	),
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
	echo '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<li>' . get_the_title() . '</li>';
	}
	echo '</ul>';
} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
Categories
Project Web Development WordPress

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://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!

Categories
Plugin Web Development Website WordPress

WordPress: Cloudflare Plugin

Obviously not all WordPress sites use cloudflare, in fact many of them don’t. BUT, if you have a WordPress site and you happen to be one of the people who uses Cloudflare with the site like I do from time to time then you need the Cloudflare plugin.

Why do we need the plugin? We can control everything by logging into Cloudflare and changing the configuration there. That is true, but things like purging the server cache or turning on “development mode” (a great feature) are possible without leaving the comfort of the site if you have the Cloudflare plugin installed and configured.

Just because I know any readers are wondering, “Development Mode” suspend Cloudflare’s edge caching, minification, Polish and Railgun features for three hours so that changes to images, CSS files or Javascript files can immediately be seen by users of the site. Although the site will not load as fast, development mode is good for development since the developer is constantly changing those files and using cached versions would be silly and cause the developer to think there are problems with the new code when there are none.

Categories
Web Development WordPress

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!