Adding decorative graphics to either side of headings within a WordPress theme with JQuery

The Full Article

 
Adding decorative graphics to either side of headings within a WordPress theme with JQuery

Adding decorative graphics to either side of headings within a WordPress theme with JQuery

Posted on

 

I have recently embarked on the challenge of rebuilding my website, the efforts of which you can see before you. Its been a slog as I decided, rightly or wrongly to build my own WordPress theme from scratch and spent a great deal of time like many web developers searching for answers to knotty problems which will fix seemingly trivial problems.

However as all good graphic designers know or indeed anyone who works in any craft, it is about fine tuning the details. This is what gives the finished piece the necessary gloss that moves the finished product and hopefully our skills to a new level.

Ornate graphics added on the fly using JQuery

Frillies

Such a job could be tackled in a number of ways. I was personally inspired by Chris Coyier’s screencast where he demonstrated how graphics could be appended and prepended to a html element using the versatile tool, JQuery. Chris was redesigning a web site for a friend and the code I borrowed here was just a tiny segment of a sea of information that you can get from his site, CSS Tricks.

This piece of code is a piece of cake to understand even for people who don’t write complex code. The functions, prepend and append are built into JQuery so its doing the hard work for us.

In plain English, the JQuery functions, simply add the html code inside the brackets before and after the headings, The headings clearly need to be a certain type of HTML markup, e.g. a h3 type heading with a CSS class of .beechheadersmall

When I added this code to the static page template everything worked just great just as it did on Chris Coyier’s screencast. The problems happened when I started to theme the design in WordPress. Most things were rendering on the finished webpage as expected but where were the frillies on the header?

The people who use WordPress Answers and the CSS Tricks forum to the rescue

A trip over to the website WordPress Answers and all was revealed.

As WordPress developers know, wp_enqueue_script is the go to function for adding javascript code so the first thing to do is to enqueue the script that contains the JQuery code above. The following code is used to achieve this. Here is some more information about enqueuing scripts here.
I simply put this code into the functions.php file within my WordPress theme. (every theme should have a functions.php file). For clarity in this example, I have called the JQuery file, frilies_graphics_script.js. You are clearly free to adapt this for your own purposes. Its likely you will be combining many scripts like these if you have a lot of functionality going on in your website.

The wp_localize_script function allows us to include arbitrary Javascript data as described by the reference page on the WordPress codex

frillie_graphics_script is the $handle of the registered script, my_data is the $object_name variable and $translation_array is the data itself
Adjustments were made within the javascript file, Whatever.js where the JQuery statements were held. This meant the frillies would now appear on the relevant pieces of HTMl markup. The changes to the JQuery include the variables that were created as part of the wp_localize_script function.

The full stop between the my_data and template_directory_uri is a concatenation operator as used in many scripting languages like php and javascript

For some weird reason there was originally a piece of redundant code lingering in the javascript file and this caused the script to fail. As pointed out by a kind person over on the CSS Tricks forum, the console on the Chrome web browser told of this error and hey presto, the frillies appeared as expected.

Back to Top