jQuery: Revolutionizing WordPress

In this article I am going to explain in detail how can you revolutionize and improve your blog with one of the JavaScript libraries particularly jQuery.

Required skills:

1. plugin development
2. WordPress theme knowledge

About Bundled JavaScript libraries

The prim purpose of JavaScript libraries is to make it much easier to use JavaScript on your blog. Any Javascript library collects a lot of popular tasks that require heavy JavaScript coding to be achieved, and envelops them into methods so that you can run with a brief code. JavaScript libraries are ready, lightweight, and “write less, do more” codes. Numerous JavaScript libraries are built in WordPress. And jQuery is one of most extendable and the most popular JavaScript libraries. You can bring any JavaScript library for use in a specific page by using the wp_enqueue_script function.

Examples of bundled JavaScript libraries:

• Jquery: It is the prime library of JQuery. Go to the wp_enqueue_script function and apply “jquery”.
• jQuery UI Accordion: Go to  the wp_enqueue_script function and apply “jquery-ui-accordion” for  running an accordion style menus on your site.
• SWFObject:  Go to the wp_enqueue_script function and apply “swfobject” for embedding flash objects.
• Jcrop:  Go to the wp_enqueue_script function and apply “Image cropper” for cropping images.
• Tiny MCE: Go to the qp_enqueue_script function and apply “tiny_mce” for adding a WYSIWYG editor.

How To Run And Deploy The Created Wp_Enqueue_Script Functions?

Before the call of the wp_head() function, the required function (javascript library) should be called first.  And to deploy any function you have applied to the Wp_Enqueue_Script Function so that you can run the addressed library, you have to call the function; and there is a general outline of calling a function and it is as follows.

wp_enqueue_script(
$handle
,$src
,$deps
,$ver
,$in_footer
);

Here I will clarify each parameter that may be used, go on.

• $handle : this demonstrate  the name of the script, use  lower case string
• $scr : If you are building  a plugin or get_template_directory_uri() and you want to inform WordPress where to find something, you should not insert the URL directly, so you need to use the plugins_url()  along with this parameter ($scr )
• $deps:  if there is a script that cannot be found by WordPress , this parameter is an optional array of handles for locating other scripts that the library script based on.
• $ver – : To optionally show the version,use this parameter (string).
• In_footer :  By default, the script will be inserted in the  header, if you would prefer to include it in the bottom, simply use this parameter; it  originally has a false Boolean value.

Reference a jQuery function by using shortcut $

The jQuery $ shortcut can be safely used to refer to a jQuery function as a substitute to “jquery”

jQuery(function ($) {
/* Safely use $ here instead of jquery */
});

In the previous example, we have enveloped the jQuery code in a nifty function so that we can write the $ as an alternative to “jquery”.

Creating A WordPress Page With Jquery Or JavaScript

To add a Jquery or JavaScript library to a certain page, there is a very basic approach to simply achieve your target. Let`s explain how to create a customized WordPress by applying that approach so that avoid any conflict or an inconvenience with the original way the default pages or posts work.

Download the header.php file and the single.php file from the current theme directory.

Working on the Single.php file

1. Back up the single.php you have downloaded by opening it in a text editor and “save as” it with a different name, to go on, you can save it javascript.php so that you can follow the next steps without any confusion.
2. Now open the file and remove the get_header() function ( at the top of your new file)
3. At the very top of the file, write the following code:
   

   <?php
   /*
   Template Name: javascript
   */
   ?>
   <?php get_header(‘js’); ?>

   • Template name:  has to be the same to the filename you chose in the step 1
   • To the get_header function I have added ‘js’.  “js” is part of the file name in step 6, so pay attention to what is done there.
4. In the javascript.php file, add the following code before the loop that begins with “if (have_posts()…”,
   

   <span style=”color:red;cursor:pointer”>Fade in square</span>
   <div id=”one” style=”margin:3px;width:80px; display:none;height:80px;float:left;background:#f00;”></div>
   <script>
   $(document.body).click(function () {
   $(“#one”).fadeIn(6000);
   });
   </script>

5. Then save the file.
   

   Working on the header.php file

   As usual, we need to back up the header.php file.

6. Open the file and “Save as” it with the name “header-js.php”.
7. Add header-js.php right before the call to the wp_head function:
   

   <script src=”https://code.jquery.com/jquery-latest.js”></script>

8. Save the file
   

   Uploading The New Template Files

9. Use your FTP software to upload the header-js.php file( the new header file) to your current theme directory.
10. Now it is time up to create a new page and give it a title with the traditional way from your dashboard. To start running the jquery, in the right column and from the template dropdown menu select the template name you created.
11. Update the page so that you save the changes; do not insert anything in the WYSIWYG editor.
12. View the page by pressing the red link that says: “fade in square”.
13. Now you should be seeing a red square that slowly fades in. If yes, then you are done and you created a custom page by using a JavaScript library. Here it is mine.

Hint: If you countered any issue, try disabling the activated plugins one by one, because it may a type of conflict and so, you need to discover where the conflict comes from.