Deploying a WordPress plugin repo on github to WordPress on WIndows

I never learned how to use Subversion which is why publishing my work on WordPress becomes such a chore. Thankfully, I found a script that can deploy a local Git repository to WordPress.org. This script assumes you have the following setup and working in your Windows environment already:

  • SVN, in this case I use TortoiseSVN
  • GIT, I use the GIT-SCM and Github Windows client
  • Already have a WordPress.org account and existing repository for your project

The script is originally from GaryJones from github which I modified to suit my needs. Simply put the script in the repository folder and change out the CHANGE_ME values before running the script.

You have the option to set the path of the local repository within the script or in the prompt, what I prefer to do is to just drop the script in the working directory and run the script there.

 

 

S2W Payments plugin for WordPress

After developing on WordPress, I decided to contribute back to the community by creating a free plugin for WooCommerce and Square users. You can download the plug on WordPress.org or fork the source on Github. It’s basically allows you to filter fulfilled payments made to your Square account within WordPress and import them into WooCommerce as orders. This is usefull if you want to sync your sales on Square made via their Point of Sales App (POS) and your online store on WooCommerce. The only caveat  is that the SKU’s on both your WooCommerce and Square products must match so we can get the price. I didn’t bother with a create product feature since there’s a product sync feature already in the Square payment gateway plugin for WooCommerce already.

I hope to make more plugins in the future if any good and worth while ideas come to mind. In the mean time, I do hope this plugin helps a few small business owners out there.

How I secured my WordPress site

I recently came across malware in my WordPress installation even though I am running the latest version of WordPress and not running any other plugin apart from JetPack. I tried removing the malware and updating all the WordPress files only to get infected again a few days after. So Far these steps have mitigated the malware from infecting  and/or penetrating my site.

.htaccess conditions

I added these rules to my .htaccess file. This will append or replace the existing rules of WordPress as well as the WordFence Plugin if you use it,

Installed WordFence and Really Simple SSL Plug-in

I installed WordFence to scan and replace WordPress core files. I only use the free version, though there is a premium version available with more automation features. I also installed a SSL certificate on my server and installed Really Simple SSL to force HTTPS on my main site.

Updated passwords and changed DB table prefix

If you haven’t already, I updated all database and user passwords in my current WordPress installation as well as changing the default database table prefix (wp_) to something obscure.

Set file and directory permissions

Set directories to 755 and files to 644. I simply run these commands via SSH

Limit or disable access to XML-RPC

I use .htaccess to limit access to the xmlrpc.php file since I use the WordPress app. You can opt to simply deny access to the file all together if you don’t plan on using it.

 

Gulp Pipeline update

I encountered some errors compiling old projects using my old node workflow which turned out to be the result of a lot of the packages being deprecated.

Luckily it was an easy fix, I simple had to install the Windows build tools, then I was back on track.

SSD cloud hosting for cheap

image

I decided to try Linode
Cloud hosting

for 10USD (500PHP) a month. You get a high performance VPS which can run several sites for cheap, the only catch is you have to set it up and maintain it yourself. Here’s what I did to get mine up and running in a couple of minutes:

I started by creating an Ubuntu 16.04 LTS node,
then secured my server with their Securing Your Server guide. I also created another user group to make uploading files later easier, then add the non-root user to that group:

I installed Apache next with their guide: Hosting a Website.  I then change some settings in my Apache config but adding some mods I use like mod_rewrite:

I then install mySQL and lock it down using the following commands, which are also found in the Linode Guide:

The I optimize my my.cnf for my puny 2GB server (/etc/mysql/my.cnf):

Ubuntu 16.04 LTS does not have support for PHP5 anymore so I used PHP7, so I installed that with the following commands:

then I install some extensions I need like mySQL, curl etc. THe first commands list the available PHP extensions, then second installs the ones I use.

We’ll need to install postfix also so PHP’s mail() function will work.

Be sure to set “Internet Site: in the configuration dialog. The sendmail_path should be pre-configured correctly already, if not simply set it to:
/usr/sbin/sendmail -t -i

I now Install my FTP server, I use FileZilla since I use the client on my machine natively, then simply connect via SSH/SFTP

Once that is done, I simply point my domains to my server IP. Linode offers a DNS Manager but I prefer to use GoDaddy’s for simplicity. Hen the IP resolves, I test all my settings then I am off!

UPDATE:

When adding new sites or downloading scripts via wget you’ll need to set permissions again to be able to modify them via FTP:  So I add my FTP user to the www-data group so I do not have permission errors.

Gulp! My assets pipeline 2.0 on WIndows

image

This is an update to my previous setup I wrote about on: How I build my assets pipeline on Windows using NodeJS. This time around I use Gulp to simplify things and add more automation.

First up, you’ll need to install gulp globally (npm i -g gulp) if you haven’t yet, then install it in your project directory (npm i gulp -D). The goal is accomplish the following automatically:

  • compile and minify my javascript files when changes are made
  • compile and compress my sass into css when changes are made
  • automatically reload my browser when the css/js is compiled

Here’s a list of the plugins I use and what they in relation to my workflow. This assumes you are familiar with NodeJS already, if not you may read this post first.

Some none-gulp plugins we’ll also need are:

Once you have all these installed, create a gulpfile.js in your project directory (where your package.json is) then you can start creating task. In my setup, I simply run the gulp command to watch my JavaScript and sass files, compile them, and reload the browser. I have a different gulp task to compress the images since this is not done often. Note that the paths may vary depending on how you structure your working environment.

UPDATE April 5, 2018fix for deprecated packages and missing Python executable. UPDATE: October 6, 2018 – I updated the image compress gulp task for better compression and added SVG, and GIF support. Also added the default task to trigger image compression when the source image folder contents are updated. Website Planet has an  image compression tool which inspired this update.

UPDATE October 11, 2019 – updated the gulp plugin dependency changes and added a non-minified version of the bundled CSS and JS files

Delete deep nested node_modules folders

Some node modules have too much dependencies that break the WIndows NTFS file system e.g.(node-sass, gulp). There were articles mentioning that Windows 10 has removed the the limit to the maximum path length but I for one still encounter the problem… and for some reason the rm -rf command doesn’t work anymore.

So I use rimraf, which basically does what rm -rf does. Simply install it (globally) and run the command:

Open cmd.exe here for NodeJS

Since NodeJS works off the Windows’ shell (command prompt) I find myself needing to open the terminal (cmd.exe) more often now. Here are several ways I open the Command Prompt in a specific location within Windows Explorer on Windows 10.

method 1: simply navigate to the desired folder within Windows Explorer and type cmd in the location bar then press enter.

method 2: Navigate to the desired location within Windows Explorer then press (ALT F, M) on your keyboard. This will give you an option to open either an Elevated Command window (ALT F, M, A) or a normal Command window (ALT F, M P).

method 3: hold shift on your keyboard then right click within the desired folder location within Windows Explorer. AN “Open Command window here” context menu will appear.

How I build my assets pipeline on Windows using NodeJS

image

I develop on Windows 10 (currently) with NodeJS, I am assuming you are running both already. Below is a bare-bones list of modules i use:

  • browserify – this allows my to write my JavaScript in the NodeJS convention as well as concatenate multiple JavaScript dependencies like jQuery and GSAP.
  • uglify-js – this will allow me to minify all my javascript code and dependencies.
  • watchify – will give give us the ability to monitor my javascript files for any changes.
  • node-sass – SASS compiler without having to know or setup Ruby. THis also compresses the output CSS code.
  • nodemon – monitor our scss files for any changes.
  • concurrently – will allow us to run multiply npm command concurrently on Windows using one terminal window.

Some optional modules I use are:
jquery and, bootstrap-sass.

Now we initialize our project with the following commands

  • mkdir public – this will be my webroot folder. This will be the destination folders (public/assets/css,
    public
    /assets/js

    ) for the output files nodeJS will generate for us.

  • mkdir client – this will where my source files will be
  • npm init – create a package.json file for our project
  • npm i <module_name> -D – this is how I install the node modules i need. the -D option will put the module in our package.json as a dependency.

once all the the modules I need are installed, I openup my package.json file and write the scripts I will be using to monitor and compile my CSS and JS files. The gist is to output 2 files bundle.js and bundle.css where all dependencies and custom code are concatenated into one file respectively and compressed.

  • build-js – will read my index.js file which is my main node javascript file and concatenate and minify all the custom code and dependencies into my production bundle.js file.
  • watch-js – will monitor any changes on my index.js file then automatically compile it.
  • build-css– will compile all my scss files and compress it into one bundle.css file. I also included a folder where I put my other scss snippet files.
  • watch-css – this will monitor all .scss files specified in the watch-css command then run build-css once changes are saved on any of the files.
  • build-assets– will build my js and css files
  • watch-assets – will monitor my scss and js files and compile them once changes have been made.

Once I have this setup, i simply do npm run-watch-assets while I am developing to automatically compile all my assets on the files while I code. It’s a great time saver and cleans up my code a whole lot, especially since I only have to include 1 .js file and .css file in my html files for all the dependencies and plugins i use..

My webdev environment on Windows

Here the web development environment I have setup on my laptop. It’s simply a run-through and short tutorial of the things I use for those of you who are interested in getting into the web development scene.

To start of, here’s a list of apps I use:

  • WAMP – This basically has everything you need to get started; it also included some extensions you may find useful like XDebug.
  • Node.js – I primarily use this as a command line interface for the tools I use like Bower and Grunt.
  • Sublime Text – this is the best text editor I’ve used. It’s free to try but you can buy it if you like it.

Setting things up is pretty straight forward for WAMP and Node.js, configuration will be subjective so I’ll leave that to your personal preferences. Node.js already comes with npm.  so you can jump right into installing Grunt and Bower via the Node.js CLI (Command Line Interface). You can also use npm in other development environments like Phonegap apps.

If you’re on Windows like me, you will need to install GIT for Windows to get Bower working properly.  You can also use this tool to manage your repositories if you have any.

image

After installing git you will need to add the installation path to your PATH Environment Variable, which is typically located in C:Program Files (x86)Gitcmd. You may have to restart your system for the changes to take effect.

Once you’re done with that you can turn your attention to Sublime Text. I like the simplicity versatility and light foot print it has over other text editors. Like npm it also has a a package manager called Package Control you can use to add more functionality to it. You will need to enable this by opening the Sublime Text console (Control + `) and paste the code below. For detailed instructions you can visit the installation guide.

Sublime Text 3

Sublime Text 2

After that you will see the Package Control menu by going to Preferences > Package Control.