Category: WordPress

WordPress Coding Standards in VS-Code

Install Composer and php codesniffer

scoop install composer

composer global require "squizlabs/php_codesniffer=*"

Clone WPCS in a global utils directory e.g. C:\utils\
Set phpcs config to wpcs

git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs

C:\Users\sunny\scoop\persist\composer\home\vendor\bin\phpcs --config-set installed_paths C:\utils\wpcs

Check to ensure WPCS is added

C:\Users\sunny\scoop\persist\composer\home\vendor\bin\phpcs -i

Install VS Code extensions: phpcs and phpcbf.
phpcs extension enables linting for all “PHP files in our editor.
phpcbf will try to beautify and fix our code according to the chosen coding standard.

Update settings

"phpcs.enable": true,
"phpcs.executablePath": "C:\\Users\\sunny\\scoop\\persist\\composer\\home\\vendor\\bin\\phpcs.bat",
"phpcs.standard": "WordPress",
"phpcbf.enable": true,
"phpcbf.documentFormattingProvider": true,
"phpcbf.onsave": true,
"phpcbf.executablePath": "C:\\Users\\sunny\\scoop\\persist\\composer\\home\\vendor\\bin\\phpcbf.bat",
"phpcbf.standard": "WordPress",

WordPress wp-cli

Migrate a WordPress Website with UpdraftPlus for Free (without Migrator or UpdraftClone)

How to Move a WordPress Site to a New Host

We often need to move a WordPress website to a new server or set up locally. I will usually use Wordmove and SSH to do this. But sometimes the client does not have SSH access to the server. In this case I will usually use Duplicator. Recently the client website had UpdraftPlus installed on the existing website.

Install the free UpdraftPlus plugin on the old and new website.
Backup your old website (db, plugins, theme, uploads, etc…) using the plugin.
Transfer the backup files from the old site to the new site’s updraft directory http://newsite.com/wp-content/updraft/
And add the following lines in the new site’s wp-config.php file: define(‘WP_SITEURL’, ‘http://newsite.com’); define(‘WP_HOME’, WP_SITEURL);
Login to the new site and restore the backup files via the UpdraftPlus plugin.
Once restored, you will need to update the new website’s database with the new url. You can either use wp-cli or install a database Search and Replace plugin.

Ubuntu Wordmove WordPress

WordPress directory and file ownership and permissions

Is WordPress failing to upload, install, or update your plugins, themes, or media files? It’s possible that your directory and file permissions are not set correctly.

chown

The chown command allows you to change user and group ownership for files and directories.

Recursively change user and group ownership of all directories and files to www-data:www-data, from the current directory.

sudo chown -R www-data:www-data .

chmod

The chmod command changes the access permissions for files and directories.

Recursively change all directory and file permissions from the current directory.

sudo . -type d -exec chmod 755 {} \;  
sudo . -type f -exec chmod 644 {} \;

wordmove

If you are updating WordPress via wordmove, you may wish to update all directory and file permissions automatically by setting rsync_options in your movefile.yml

 ssh:
    host: YOUR_HOST
    rsync_options: "-og --chown=www-data:www-data --no-perms --chmod=ugo=rwX"

WordPress wp-cli

Regenerate image sizes in WordPress

Regenerate your site’s images.

wp media regenerate --yes

Tags add_image_size

Ubuntu WordPress wp-cli

Delete image sizes from WordPress

Easily delete images sizes from the command line.
This is permanent!

 find wp-content/uploads/*  -iname '*-2000x750.*' -exec rm {} \;

WordPress

Compile custom WordPress style.min.css from scss source files

It may be beneficial to dequeue the default WordPress Gutenberg block styles.min.css and compile your own from the source scss files.

The WordPress blocks css files is located here,
wp-includes/css/dist/block-library/style.min.css

The WordPress blocks source files are located here,
https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library

npm install the source files,
npm install @wordpress/base-styles --save-dev
npm install @wordpress/block-library --save-dev

Remove Gutenberg Block Library CSS from loading on the frontend. Add to function.php

//Remove Gutenberg Block Library CSS from loading on the frontend
function sd_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );

} 
add_action( 'wp_enqueue_scripts', 'sd_remove_wp_block_library_css', 100 );

@import scss files

// mixins, vars, etc..
@import "~@wordpress/base-styles/_mixins.scss";

@import "~@wordpress/base-styles/breakpoints";

@import "~@wordpress/base-styles/variables";

// style src
@import "~@wordpress/block-library/src/style";

You may need to replace ~ with path to scss files. e.g. ../../node_modules/@wordpress/base-styles/
Comment out the imports within @wordpress/block-library/src/_style.scss that are not required.

@wordpress/block-library

WordPress wp-cli

Optimize WordPress images

Easily optimize images using wp-cli, https://github.com/TypistTech/image-optimize-command

wp package install typisttech/image-optimize-command:@stable

# optimize specific attachments
$ wp image-optimize attachment 123 223 323

# optimize certain number of attachments
$ wp image-optimize batch --limit=20

# restore the full sized images of specific attachments
$ wp image-optimize restore 123 223 323
$ wp media regenerate 123 223 323

# restore all full sized images and drop all meta flags
$ wp image-optimize reset
$ wp media regenerate

# Find and optimize images under a given directory **without backup**
$ wp image-optimize find /path/to/my/directory --extensions=gif,jpeg,jpg,png,svg,webp

# shortcusts for `wp image-optimize find` **without backup**
$ wp image-optimize mu-plugins
$ wp image-optimize plugins
$ wp image-optimize themes
$ wp image-optimize wp-admin
$ wp image-optimize wp-includes

# learn more
$ wp help image-optimize
$ wp help image-optimize <subcommand>