Bloody Hell!

harry_bloody

“So why in the name of Voldemort’s saggy left —”

So I took the day off from the “Job that shall not be mentioned” to put together a few more portfolio pieces that will hopefully lead to me getting additional freelance work. I’ve started using a new (to me) tool called Divi. Please note that I’m an affiliate and get a commission if you buy through this link.

At any point, it is a really nice way to put together a lot of elements of a wordpress site really quickly. With the newest upgrade it lets you add custom elements almost everywhere in the form of modified CSS. After coming from straight coding of sites though, I’m still trying to wrap my head around where to stick scripts and such. It ended up taking me far too long to modify one silly button to open the URL in a new tab. For some buttons you can select this as an option, but for others it seems you can’t…odd. Anyway, in case it is useful to anyone else I used the following rather mungy code:

So, let’s step-through.

This bit delays running our script until the entire page has loaded, otherwise the button we want to change won’t be there.

Next we tell it we are going to run a script.

In the main script I just have a small javascript function called changeButton(). In WordPress when you want to use jQuery you have to designate it as such by replacing the leading ‘$’ with jQuery. If I were adding more code in I would further wrap the whole thing in a function that allows me to use a ‘$’ instead of jQuery, but this is short and sweet, so…

First up — I define a variable called “theButton” and hook it to the class of the button I want to change. I didn’t nest anything, so it will grab every instance of that button class within the DOM. I know that I only have a single instance, so there is no sense in making it more specific.

Next, I add a little logic to make sure that the element actually exists on the page. Since I’m adding this to every template page, there are going to be a lot of pages where this button does not exist. Once I confirm that it exists I used jQuery once again to change the target attribute to be “_blank”. Note, I haven’t played with jQuery in WordPress enough to know if I can use ‘$’ for the second instance of jQuery. It isn’t nested within a jQuery called function, so I played it safe and replaced the ‘$’.

Now we have to get the code injected into our pages. In the new version of the Divi Theme (I’m an affiliate remember) you navigate to the options section and click on the Integration tab. Scroll down and put all your pretty text where it says “Add code to the <body>”. You should be good to go.

Let me know if you want any help modifying this code for your pages…or if you think this code is particularly horrid! I’m still learning!

PS – I’ve edited this post several times to get the code inserted in a way that I like it. The editor really wants to change things up and interpret it. I finally installed the Crayon Syntax Highlighter which works pretty well. The number of options are a little mind-numbing, but straight out of the plug-in library it works pretty well. I’m still not real comfortable with getting images to inline with markdown, but I’ll get there.