Just The One – Step By Step

Now yesterday, I posted some lines of code, which to some, may look quite confusing! (I know they certainly did to me at first). So today I thought I’d walk through each line at perhaps make it a little bit clearer to others.

Starting with the first block of code

function add_keyboard() {
wp_enqueue_script(‘keyboard-hotkeys’, ( THEME_URI ) . ‘-child/js/jquery.hotkeys.js’);
//wp_enqueue_script(‘keyboard-shortcut’, ( THEME_URI ) . ‘-child/js/keyboard_shortcut.js’);
add_action(‘wp_enqueue_scripts’, ‘add_keyboard’);

function add_swipe() {
wp_enqueue_script(‘swipe-tappable’, ( THEME_URI ) . ‘-child/js/jquery.touchwipe.min.js’);
wp_enqueue_script(‘swipe-navigation’, ( THEME_URI ) . ‘-child/js/combine.js’);
add_action(‘wp_enqueue_scripts’, ‘add_swipe’);

Now the first line begins with the word function, which creates a function. Followed by the term add_keyboard. This is the name of the function. This name can be almost anything. The parentheses () are for passing parameters (which are not needed in this function and I don’t know much about)

The second line begins with wp_enqueue_script. This is a WordPress function for adding script files to WordPress pages. Followed by that we then open parentheses (, with the term keyboard-hotkeys in. You’ll notice this term is wrapped around quotes, this is because naming it something, if it wasn’t in quotes then it would act as a variable and could cause some issues. Although, I believe certain variables can be passed here too. We then open the function with some curly brackets {.

The line follows with a comma , to separate the name and location, followed by (THEME_URI) which detects the URL of the theme. Then comes a dot .. In this instance, it is used to “combine” (there official term is concatenate) PHP and plain text together. The next line -child/js/jquery.hotkeys.js just lists the directory to where the file can be found, like on a PC. Again, this is in quotes because it is a string of text and not a variable.

Finally, we then close the parentheses ) and end then enqueue script with a semi-colon ;.

You’ll notice the next line has two forward slashes // with a similar line to what was above. This was because it was calling a script, but was no longer needed. So instead of removing the line (in case removing caused issues), I commented it out to test. A comment is a line which is readable, but isn’t read when the code is running.

After that we then close the function with the curly brackets with opened it with }

Now all that may seem confusing, it really did to me the first time. But seeing things running (and writing things down step-by-step) can help make sense of it all. The long and the short of it (if I’m making sense of it – I’m sure someone will tell me if I haven’t), we’ve created a function. Currently, this function has a name of keyboard-hotkeys and when run, will enqueue a script into our WordPress pages.

Now we need to run the plugin, so that it works, which is what line 5 does.

In WordPress, we need to call the add_action() line. In this, we need to pass the parameter of the the action we want to call and in this case, we want to add a script, we need to call wp_enqueue_script, which is where we get the wp_enqueue_script line from. Now, the script we want to run is stored in the function we named add_keyboard. So combining this all together, gives us the majority of what line 5 does.

Lines 7-11 do the same as above except this function passes two scripts, not just one. But as you can see, they work the same way with the scripts we want to run, being in that function. Of course, you could combine all three scripts into one. Which is what I did here!

//Add Swipe Functions
function add_shortcuts() {
if (is_single()) {
wp_enqueue_script(‘touchwipe’, plugins_url(‘/js/jquery.touchwipe.min.js’, __FILE__) );
wp_enqueue_script (‘hotkeys’, plugins_url(‘/js/jquery.hotkeys.js’, __FILE__) );
wp_enqueue_script(‘combine’, plugins_url(‘/js/controls.js’, __FILE__) );
add_action(‘wp_enqueue_scripts’, ‘add_shortcuts’);

Again, notice the comment on line one. This is not run as part of the code, but is readable so we don’t forget what it does.

What’s different about this line of code is on line 3 we have

if (is_single())

Which, is saying “If this page is called “single” (which is what posts are called in WordPress) then run the following code. Of course, it’s slightly more technical than that – I’m still trying to make sense of it all myself. But you get the point of it.

As I mentioned yesterday, this is an incredibly brilliant line because it tells the scripts to only run on single (posts) where it’s needed.

In a somewhat simpler format

if (is_single()) {
//Do something here

Should run only on single pages (posts) (though I have had a few issues with this, no doubt me just not doing it right!)

Anyway, for those interested, I hope this cleared things up for you. Some of it may be wrong, but I’m still learning stuff myself. Still, it’s all very exciting!