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:

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
Project Web Development

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!

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!

Categories
Website WordPress

Could not create directory. Installation failed.

This happens sometimes after migrating from one host to another. The problem boils down to a permissions issue. If you copied the uploads folder to the new server via an ssh connection sometimes the owner of the files copied will be whoever you connected with to perform the copy.

If you want to confirm that this is in fact the issue you can run:

and you may see something like:

`

Which says that root is the owner because that is the user that copied the file onto the server, even though for WordPress to write to the folder, the owner needs to be www-data. This issue can easily be fixed by issuing the following command:

Now the owner will be www-data and you will be able to upgrade files again! Happy WordPressing!

Categories
Website WordPress

How to Login to WordPress

You just installed WordPress, you are feeling tech-savvy… you basically invented the internet, haha

You were able to create your nice site, or maybe got started, but you quit your browser or logged out or something else logged you out and now you just want to get back onto the WordPress dashboard. When you first set up the site it logged you in automatically, getting back in is only a little harder.

In your URL bar just navigate to <yourwebsite.com>/login: (you may have customized the URL or something so that /login will not work anymore, but this method is the default and will work as long as you did not customize anything) ((if you know what I mean then you know if you customized the URL, if you know, you know))

That simple step was the first of two steps, both of which are easy! After entering the URL described above, you wil be brought to the WordPress login page:

The above picture is what it looks like by default, but you can customize your login page if you want. Type in the username and password combo for the administrator account that you set up when you first created the website, click “Log In” and BAM, you are now on the WordPress Dashboard pictured below:

Your dashboard may look slightly different if you have installed plugins or customized it in other ways, but the dashboard is the dashboard. If you see something that resembles the image above then you have achieved great success and you are logged in!

Categories
Web Development WordPress

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. 

Categories
Travel WordCamp WordPress

WordCamp US 2021

Ok I absolutely missed a lot of WordCamps but at least I could attend this one virtually.

There were some interesting talks about Gutenberg Blocks and I was impressed with how seamlessly the speakers were able to move to using the online platform to give their talks instead of in-person.

I and many people loved going to the talks live which will hopefully be coming back after this pandemic but for now online is the best we can get.

Categories
Web Development WordPress

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:

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

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:

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!

Categories
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!

Categories
Web Development

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.

  1. Put the following in the code of your HTML page:

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

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

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

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

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):

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