This section of the site contains 6 different JQuery examples distributed over two groups of tabs. The first group is from the labs while the other group from my own experience.
4 Resolved Lab-Examples
Expandable Sidebar Menu ExerciseForm Validation ExerciseTop 10 TV from iTunes ExerciseWeather Exercise
This is from Lab2 “JQuery for practical website upgrades” with the glitch fixed.
This is from Lab2 “JQuery for practical website upgrades” with the validation rules, messages and UK phone number fixed.
This is from Lab2 with additional HTML elements and CSS classes.
This exercise is from Lab3, aims to display an OpenWeatherMap powered weather forecast on a website, using AJAX & PHP proxying.
My JQuery Examples
Studied ModulesShuffle ImagesWords Counter
The idea is to extract the data that was stored on the custom post type “Modules” into a WordPress page using ACF and JQuery to show the marks as graphic content (progress bars).
The idea here is to show that the company (I’m assuming designing the website for) is comparing prices between 18 energy companies and sort them for its customers as per customers’ preferences. The images are shuffling every 3 seconds, to mimic that comparing and sorting act!
This is a useful tool to observe and count letters and words of a given text.
How did I add the JQuery scripts to the WordPress pages?
I edited functions.php file to add an action and I called it “add_my_scripts” making use of a WordPress hook called “wp_enqueue_scripts”, this hook is designed to enqueue or add additional JS scripts and CSS styling code to WordPress default scripts and styling.
Then for every JQuery example, I registered a hook using the wp_register_script() or wp_register_style() functions and gave it a name (see below at the top part) then I executed it using wp_enqueue_script() or wp_enqueue_style() with help of if block to choose which page/post to load with (see below at the bottom part).
I placed all the JQuery code files under a subfolder called “/src/js/” within the theme main root which can be called by using get_stylesheet_directory_uri() function.
With this method, we can:
- Load more than one script with one particular page.
- Keep pages size and their loading time as light and fast as possible.
- Prevent clashes or conflicts if we load everything all together on every page/post.
- Full control to enforce specific versions of JQuery to load with some pages as required.
functions.php added Code:
add_action( 'wp_enqueue_scripts', 'add_my_scripts' );
function add_my_scripts() {
// --------- Registering the hooks and give them names ---------- //
wp_register_script('top10tv', get_stylesheet_directory_uri() . '/src/js/top10.js', false, null, true);
wp_register_script('sidebar', get_stylesheet_directory_uri() . '/src/js/sidebar-menu.js', false, null, false);
wp_register_script('form', get_stylesheet_directory_uri() . '/src/js/form-validation.js', false, null, true);
wp_register_script('form1', 'https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js', false, null, true);
wp_register_script('form2', 'https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.js', false, null, true);
wp_register_script('form3', 'https://code.jquery.com/jquery-3.4.1.min.js', false, null, true);
wp_register_script('weatherJQuery', 'https://code.jquery.com/jquery-1.12.4.js', false, null, true);
wp_register_script('weatherScript', get_stylesheet_directory_uri() . '/src/js/weather.js', false, null, true);
wp_register_script('modules-js1', 'https://code.jquery.com/ui/1.12.1/jquery-ui.js', false, null, true);
wp_register_script('modules-js2', 'https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js', false, null, false);
wp_register_style('modules-css', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
wp_register_script('shuffleScript', get_stylesheet_directory_uri() . '/src/js/shuffle.js', false, null, true);
wp_register_script('word-counter', get_stylesheet_directory_uri() . '/src/js/word-counter.js', false, null, false);
// --------- Executing the hooks to load the files depending on the pages ---------- //
if(is_page('top-10-tv')){
wp_enqueue_script('top10tv');
} else if(is_page('sidebar-menu')){
wp_enqueue_script('sidebar');
} else if(is_page('form-validation')){
wp_enqueue_script('form3');
wp_enqueue_script('form1');
wp_enqueue_script('form2');
wp_enqueue_script('form');
} else if(is_page('weather')){
wp_enqueue_script('weatherJQuery');
wp_enqueue_script('weatherScript');
} else if(is_page('modules')){
wp_enqueue_script('modules-js1');
wp_enqueue_script('modules-js2');
wp_enqueue_style( 'modules-css' );
} else if(is_page('shuffle-images')){
wp_enqueue_script( 'form3' );
wp_enqueue_script( 'shuffleScript' );
} else if(is_page('words-counter')){
wp_enqueue_script( 'word-counter' );
}
}