rsync -v -a -e 'ssh -p 2200' firstname.lastname@example.org:www/wp-content/uploads/ uploads/
// Keep in mind that rsync works left to right (from => target).
// -v verbose lets you know things are happening
// -a archive maintains preserves directory structure
// -e executes a piece of code ( I use it to target a specific port for ssh ).
This snippet will allow you to quickly sync a local directory with a remote one. I’ve used this snippet repeatably to sync large media folders to my location installation of a wordpress site.
You’ll need SSH access to the remote server for this method to work.
Also note that 2200 is likely NOT your port and you should configure it your specific server.
Depending on what you use for your local wordpress environment (I use VVV) – you might want to sync all your remote images with your local installation.
But this might not be easy if you’ve got a large website (like a store) with thousands of images and limited storage on the server. You can’t zip them up because even compressed they are too big!
Rsync to the rescue!
rsync is a wonderful little command line tool which will literally sync a remote directory like wp-content/uploads.
Assuming you’ve got SSH access to a remote site – you can simply specify a port and username to get access to the directory.
rsync -v -a -e 'ssh -p 2200' email@example.com:path/to/wp-content/uploads/ relative/path/to/local/wp-content/uploads/
Good job you did it
Please not that this may take awhile to complete depending on how big your directory is. I wrote this quick post while waiting for my mine to complete. You can of course continue to developer even with out the images but damn does that get annoying and slow really quick.
Webpack is awesome – and using it with wordpress is easy! Beyond performance increases – Webpack can greatly improve your development experience.
In this post I will demonstrate how I setup my WordPress theme to use Babel and BrowserSync.
This tutorial assumes you have a development environment setup. This blank storefront child theme is perfect for quick modifications and working through tutorials.
If you want to follow the tutorial, you’ll want a local wordpress installation and npm. If you want to use blank theme to follow the tutorial, cd into your themes folder and clone the repository above.
$ git clone https://github.com/gerrgg/storefront-child-theme-starter.git
$ cd storefront-child-theme-starter.git
Activate the theme and visit the site – you should see “hello” in the top left corner if the theme installed properly.
If you’ve never used Webpack – its a build tool which compiles your code into static optimized assets. Not only does Webpack greatly improve load times – it enables the use of tools like Babel to compile ES6 to ES5 or BrowserSync for automatic browser reloads on save.
$ npm install webpack
First install Webpack – (use npm init --yes if you dont have package.json file).
$ npm i --save-dev webpack webpack-cli
Next set the webpack scripts in your package.json file – this is what we will run to actually use webpack later.
The output is where the bundled assets will be put and how to name them – these are the files we will be enqueuing into our wordpress theme or plugin.
The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.
Next configure where out bundled assets will be put – we have two so we use the [name] syntax which Webpack knows means “use the key from the entry points”.
We also set the path for these compiled files to end up in the ‘assets’ folder.
As mentioned above – using Webpack has a massive net positive affect on your applications performance and your personal development experience. Webpack and wordpress work beautifully together and allow for massive gains in versatility in your wordpress development.
“Hello” from the front
console.log('hello from the front')
console.log('hello from the back')
Enqueue compiled assets
Now we are ready to use wp_enqueue_script to hook up our compiled assests with out wordpress theme or plugin.
Note that frontend and admin scripts are enqueued on different hooks – you’ll need two functions in your functions.php file.
Now time to see all your hard work pay off – if we’ve done everything correctly all we gotta do is run our watch script and see the compiled results.
Go to your command line and type npm run watch
Visit your site and see your console.log().
What did that do?
That was alot of work – and all we did was console.log a silly message – why did I even bother writing this?
Setting up Webpack with our theme has provided us limitless potential.
Cuts down on HTTP Requests
Promotes better code
Second – if by chance you are a maniac such as myself at one point (this year) you went for performance over sanity and stuffed thousands of code into a single file which fueled your entire project.
By using webpack – you dont have to do this. You can have a beautifully organized project with lots of different files & functionality automatically compiled into easy-to-digest static files for the browser to munch on.
Your quality of your code greatly improves by modularizing your code into little bits – improving bug resistance, readability and your sanity.
Loaders and plugins
Loaders and plugins multiply the vast number of opportunities provided by webpack * 11.I wont get into the nitty-gritty right now – click those links if your interested.
I’m most interested in installing Babel and BrowserSync
Next create a babelrc.json file at the root of your project – this is where babel will automatically look for any configurations we’ve added.
Add this after output in webpack-config.js.
// Look for any .js files.
// Exclude the node_modules folder.
// Use babel loader to transpile the JS files.
To test babel all we need to do is run npm run watch and cat assets/js/frontend.js to see the compiled results – but if all we have is a console.log('hello') babel’s not going to have much to do – lets do something ES6(-y).
At the bottom of the config file (just before the end of the config object) add BrowserSync as a Webpack plugin.
proxy: "http://your.devserver.here", // your dev server here
// Export the config object.
module.exports = config;
Above we are adding BrowserSync to Webpack.
We set files: "**/*.php" – telling webpack to watch for changes in our .php files and reload the browser when they do.
We set proxy: "http://your.devserver.here"so browser sync knows which server to proxy all the files from.
Essentially this is where your local wordpress environment is setup – mine was at "http://one.wordpress.test" and I am using VVV.
“Hello automatic browser refresh”
Run Webpack npm run watch and a tab should open at http://localhost:3000/ with your wordpress installation running.
Go ahead – write something in the functions.php file to test it out like: “Hello automatic browser refresh”
Webpack is awesome
As you can see Webpack is awesome – this just the surface of awesomeness presented by the tool. As I learn more about webpack I will try to add what I learn and share how to create the ultimate Webpack setup.
SSH Keys are wonderful and easy to set up. You can SSH keys to quickly log into a remote server (like your website) from the command line WITHOUT a password prompt.
How does it work?
Essentially SSH works by generating two keys (strings) on your machine: a public and a private one. You place the public key on a external server and when you log in the server makes the connection and access is granted.
How do I do it?
Setting up SSH can be done in as little as two steps:
Generate SSH key Pair
Copy public key to remote server (where you want to login)
Generate SSH Key Pair
First generate the SSH key pair with ssh-keygen.
ssh-keygen -t rsa
You will be asked where you want to store the file and whether or not you want a password, I just click ENTER twice.
Copy the public SSH key
Use ssh-copy-id to quickly move the public SSH key to the remote server.
You must know the username of server you are trying to access.