![]() ![]() Additional and deeper PHP learning is beyond the lesson’s scope so we encourage you to look at other resources such as the official PHP manual. Don’t worry about being fluent in PHP programming the information you need for this lesson is provided. Enqueueing is used for both scripts and styles and means we must access and alter the functions.php file that comes with your WordPress installation. ![]() The method for adding your own scripts and styles to your theme is called enqueueing. WordPress has built-in systems to keep track of all the scripts and styles, keep them from conflicting with each other, and use them in the correct order. Many scripts and styles are included in WordPress core others are added by plugins or themes. At its core, WordPress already manages a long list of scripts and styles to produce a functioning web page. The server-side language PHP does the heavy lifting behind the scenes to provide data to the browser. Client-side languages like HTML, CSS, JavaScript and jQuery produce a rich and seemingly limitless user experience. $('.groovy-button').WordPress relies on several programming languages to provide a solid, yet extensible, framework to build upon. For instance, you can hide all elements with the groovy-toggle class on page load and show them again when a button with a class of groovy-button is clicked: From here you can add all sorts of fun jQuery code to make your child theme stand out.You should still see 'groovy magic' in the console! Now refresh your browser and inspect the page again. See Jason Champagne’s article on jQuery for more details. That’s because WordPress loads jQuery in compatibility mode to avoid code conflicts with other JavaScript libraries. This jQuery block may look a little strange. Now you can add jQuery to your groovy-magic.js file! Let’s add a ready function to load our code after the DOM is fully loaded:.'/js/groovy-magic.js', array('jquery'), null, true ) Wp_enqueue_script( 'groovy-magic', get_stylesheet_directory_uri(). Remember the dependency array above? Just add jquery as a string like so:.Here’s how to add jQuery to your child theme: If you’d like to learn jQuery, I recommend you check out Codecademy’s Learn jQuery course. One thing I love about WordPress is that jQuery can be loaded by WordPress for you. PHP requires semicolons, the first / in your file path is needed, and make sure you are closing your strings properly. If not, make sure to check the syntax in your functions.php file. You should see 'groovy magic' in the console! Now refresh your browser and inspect the page. I don’t like to load scripts in the unless I absolutely have to, since doing so could slow down page load time. true tells WordPress to load the script before the closing body tag ( ).Adding versioning can help with cache busting, but I tend to leave this as null. null tells WordPress that our script doesn’t have a version number.Here you can add dependencies that your script will need like jquery. '/js/groovy-magic.js' is the relative path to our JavaScript file. get_stylesheet_directory_uri() is a WordPress function that returns the location of the active theme’s root directory (in this case, our child theme). '/js/groovy-magic.js' concatenates the full file path to our JavaScript file. This is a required parameter of the wp_enqueue_script() function. 'groovy-magic' is the unique name of our script.This code does the following things (see the WordPress documentation for even more insight): '/js/groovy-magic.js', array(), null, true ) ![]() Add the following code to that function block: In your functions.php file, find the enqueue function we wrote earlier called groovy_enqueue_scripts().Always make sure to remove debugging statements like this when you are ready to commit your code and push it to production. ![]() Inside of groovy-magic.js add a logging statement:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |