Hacking Wordpress As A Site Owner

This article describes how to execute arbitrary JavaScript inside your own wordpress site, without breaking anything or even changing anything in the configuration of the site.

I am not a wordpress guru, and I am very far from being addicted to PHP in any way. So there might be easier solutions than the one that I will describe. I do not know about such solutions, and to be honest, I do not care so much about them.

You should also be aware, that for most of the standard requirements, there are wordpress plugins for you. If you are in a standard situation, this is the way to go! Do not program! Use existing features!

Even if you do not have a standard problem, it might be best to create a new wordpress plugin that fits your needs. Maybe it is best to do so if you are working for others, for example providing software for another company and its site. In such a situation it can be good to write a new wordpress plugin, because that may fit best into the existing infrastructure of your customer.

But this is not the case I want to talk about!

Even with the almost endless possibilities in wordpress, you will be left alone as soon as your are trying to do something completely new or very specific. Also, you might be new to wordpress, as I am, and you might be unwilling to do any PHP programming — just as I am.

To describe the solution, we set up the following scenario: You have a Bitnami wordpress site hosted on AWS. So your wordpress instance will run inside a Ubuntu virtual machine. Your situation might be different, but it will still be possible for you to adapt the steps described here, so that they can be usefull for you.

You need to log in to your host machine. Let us assume that you have received a private key (just as I did), and the key will be placed locally on your computer in your directory /home/me/mykey.pem. You can then login on the command line

ssh -i /home/me/mykey.pem` bitnami@<MY IP>

(You have to know the IP address of your host, to do this.)

You will find all the html of your side inside the directory /home/bitnami/apps/wordpress/htdocs. Create a subdirectory here, for example /home/bitnami/apps/wordpress/htdocs/js.

What your are going to do now is: Embed a single JavaScript file, that you have edited locally. You will need an easy way to transfer the file to you host.

Suppose you have the file myscript.js on your local machine. Here is the command to do the transfer:

scp -i /home/me/mykey.pem` myscript.js bitnami@<MY IP>:/home/bitnami/apps/wordpress/htdocs/js

Do not try to push your script to another host. If you do not use the wordpress host for this purpose, you can run into tricky problems because of the security restrictions that web browsers pose on loading javascript.

That is all to do on the server side! If you want to create a new blog post that uses some of your (supposedly) sophisticated JavaScript, you can write inside the post as plain HTML:

<script type="text/javascript" src="js/myscript.js"></script>

You will soon feel the need to use jquery inside your own scripts, as it is needed almost everywhere. jquery is already loaded by your wordpress environment, so you should be able to use it easily.

In my expirements, it was not completely trivial. It was not as as simple as just using th $-sign, as you normally do when working with jquery.

You could of course load jquery the same way you loaded your own script, but then you end up with two jquery versions in your page, and that will give you problems sooner or later. I tried it, and I ran into such a problem immediately.

The problem can be solved inside your own myscript.js, if you write something like this:

function init(){
    var $ = jQuery.noConflict();
    function loadFirst(){
      //....
    }
    loadFirst();
}
document.addEventListener("DOMContentLoaded", init);

Thus you will be using the jquery-version that has been loaded by wordpress already.

You are now ready to do anything you want inside your own wordpress site, as long as you how to write good JavaScript.

It should be possible to use any other javascript library the same way. So the whole world of client side scripting is now open to you, and still you can profit from the many conveniences provided by wordpress.

And — as promised — you did not change the configuration of your wordpress site, besides adding some files to a specific directory.

Have fun with it!