We've been tasked with fading the screen when a menu item has been clicked and JQuery is the way forward!
In the below instance the class 'fading-menu' was added to the WordPress menu items that needed the fade effect (via 'Appearance' > ' Menus' (after showing classes via the screen options on the top right)).
We didn't just link any and all menu items as one URL is to a download file, no use in fading the screen for that!
This method does have its flaws, clicking the back button on your browser may result in returning to a faded out screen.
Enhancements to follow?
In the past I've been creating themes while mistakenly adding scripts and stylesheets to the WordPress header.php file. I would now like to add these properly using wonderful built in WordPress functions.
Here's the WordPress default syntax for enqueueing styles and scripts:
https://gist.github.com/FreshLondon/3fc042ae077d35dd838a82a39e1bac3f
Let's break these down..
(string) (Required) Name of the script. Should be unique.
This is most useful if you'll be registering and then enqueueing the script later, or what we'll be using it for: another scripts $deps (dependency).
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
Default value: ' '
Specify the location of your script, remember we can use scripts located within the themes folders using built in functions. We'll touch in on this one later below!
(array) (Optional) An array of registered script handles this script depends on.
Default value: array()
The dependancies, what does this depend on? In short and simple: what should be loaded before this?
(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
The given 'version' is mostly used for caching. A users browser will check if it needs to load new resources for a webpage and if a new version of a script or style has been added it'll fetch this.
Setting to the default value 'false' sets a cached script only to be renewed when the cache expiry time has been reached.
If you'd like to force the browser to ALWAYS load the script each time, use the PHP time() function.
(bool) (Optional) Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.
Default value: false
This one here is self explanatory..
Let's break these down..
(string) (Required) Name of the stylesheet. Should be unique.
Again this is most useful if you'll be registering and then enqueueing the style later, or what we'll be using it for: another styles $deps (dependency).
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
Default value: ' '
Specify the location of your stylesheet, remember we can use stylesheets located within the themes folders using built in functions. We'll touch in on this one later below!
(array) (Optional) An array of registered stylesheet handles this stylesheet depends on.
Default value: array()
The dependancies, what does this depend on? In short and simple: what should be loaded before this?
Remember: a stylesheet loaded after another will take precedence.
(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
The given 'version' is mostly used for caching. A users browser will check if it needs to load new resources for a webpage and if a new version of a script or style has been added it'll fetch this.
Setting to the default value 'false' sets a cached script only to be renewed when the cache expiry time has been reached.
If you'd like to force the browser to ALWAYS load the stylesheet each time, use the PHP time() function.
(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.
Default value: 'all'
Is this stylesheet to be loaded on all @media types? Do you want to load it for printing, probably not!
A value such as 'screen' will load the stylesheet only for digital screens whereas a value of 'print' will load the stylesheet for printers only.
So thats the parameters explained, here's how that looks in play:
https://gist.github.com/FreshLondon/fcc79836d704377e4e67b8b40f8a14cb
Let's break down what we just used and see how it appears in the section of the page when rendered in a browser:
See how it turned time() into an actual timestamp?
Notice how
get_template_directory_uri() . '/assets/stylesheets/tomorrow-night.css
was turned into
http://www.freshlondon.digital/wp-content/themes/freshlondon/assets/stylesheets/tomorrow-night.css
Any comments or suggestions? Leave your thoughts!
If you're using JQuery in WordPress you'll hit a wall with their compatibility prevention.
The tricky thing here is that the particular copy of jQuery (shipped natively with WordPress) is in compatibility mode by default. That means that the typical $ shortcut for jQuery doesn't work, so it doesn't conflict with any other JavaScript libraries that also use the dollar sign!
If the script is being loaded in the footer (which you should be doing in the vast majority of cases) you can wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $:
https://gist.github.com/FreshLondon/b8eb9017ce04302d385bde3eb39826f1
If you need to load the scripts in the header, you'll probably need to use a document ready function. You can just pass in $ there:
https://gist.github.com/FreshLondon/8142d074dc86b57b057fe0da16766d31