Ok want to make sure I'm doing this right! I think I've got this working but want to make sure. FYI: this is a wordpress site.
I'm enqueuing Font Awesome the new way they are doing it now - they email you a CDN script code to embed. I realize the correct way to add the script into WordPress is to Enqueue it in the functions.php file - so here's what I did... is this correct? (it does work but that doesn't mean I have it completely right...)
//* For importing fontawesome
add_action( 'wp_enqueue_scripts', 'wp_fa' );
function wp_fa() {
wp_enqueue_script( 'font_awesome', 'https://use.fontawesome.com/4b9e255a4a.js' );
}
** I noticed in other tutorials on this there is something else at the end after the .js file like null, all, true or something which I don't have, but it is still working. Can someone confirm if I have this code correctly?
Yes, what you have done is correct.
The other values you speak of are
dependencies (This could be something that requires jquery)
version (Really handy for adding a version number on the end of the script you are enqueuing)
Whether you would like the script loading in the footer or not
So you could have something like this -
wp_enqueue_script( 'font-awesome-custom', 'https://use.fontawesome.com/4b9e255a4a.js', array('jquery'), '1.0.0', true );
I know font-awesome does not have a dependency of jQuery, it is just there as an example of it.
Related
I migrated my wordpress site from a shared host to Digitalocean and everything went well except for the Font Awesome icons.
They are showing as blank squares on the live site.
I found the issue to be the required "fa" class for the icons is not showing up. I am using the Avada theme and am brand new to this.
1) I do not know where the CDN link is when I am searching through SFTP files. Can someone tell me where to find it so I can try to re-add the link.
2) Is there another way to automatically have the "fa" class to the icons so they will show up?
3) Any other insight into fixing the issue would be much appreciated.
Add this to your functions.php file:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts()
{
// add this line
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
// Example styles and scripts
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
alternatively you can add this code to your header.php file:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Let me know if this works or not.
For anyone still having this issue in Wordpress & Avada:
Have had this multiple times, this is how I solved it last time.
Verify that the link is right, checking for typo's in the error link.
Verify that the files of the error link are in place, also check if FTP rights are set right. (755 for folders, 644 for files)
If the fonts still do not show, de-activate themes and plugins and re-activate them.
Goto Avada -> Options -> Performance
Flush Avada cache
I have the similar issue before, every time after migrating the website, the built in font awesome not showing at all, and display the square instead.
Then I go the "theme options" - click the "save" button directly, then hard refresh the page, everything will back to normal.
Or in some case, you need to double check the font awesome version from "theme features", turn on "Font Awesome v4 Compatibility" and turn off "Font Awesome Pro".
Hope that helps.
I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
I've created a child theme and am running my site on that so that I can customise a form that I'm including on certain pages using the plugin 'contact-form-7". In my child folder I've placed a style.css, functions.php and js/custom_script.js. the style sheet is being imported fine but I can't seem to get my validation jquery file working on that form. This is the code I've been using:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js' ,array( 'jquery'));
wp_enqueue_script( 'custom_script' );
}
console isn't logging any errors but I can't seem to find it in the web tools side bar UNLESS I remove "js/" when the custom_script is called, in which case a GET error pops up.
I'm guessing I'm incorrectly importing the file and honestly I can't quite get my head around these hooks and importing files just yet- only been using wordpress a short time.
Any help much appreciated.
I believe that you haven't included the JQuery file? You have to download it first https://jquery.com/download/, and then register it as you did with "custom_script", you just have to put it before the "custom_script" in functions.php, inside "custom_script.js" you could also do:
$(document).ready(function(){
});
Go to your console and if you see:
Uncaught ReferenceError: $ is not defined
It's because you haven't included the JQuery file as needed.
Hope this helps!
Leo.
Massive hat tip to the community, here, you folks are my go-to most days!
I think my topic says it all, really, with relation to jQuery in WordPress - I've been thinking a lot lately that placing jQuery commands in functions.php would make the effects happen sooner rather than in placing them in footer.php which would be a good thing, I think. Can anyone see any flaws with this approach?
-Jc
This question is primarily opinion based. However, the proper way to include JavaScript files in WordPress is to properly "enqueue" them using the wp_enqueue_script() function, from the 'wp_enqueue_scripts' action hook.
To speed up page load, many people prefer to enqueue scripts in the footer, using the 4th and final parameter of wp_enqueue_script().
Doing the following will ensure that your script is properly enqueued, that it's dependencies have been satisfied, and that it's in the footer (added via wp_footer()):
/**
* Proper way to enqueue a script with a jQuery dependency, in the footer
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
For more reasons about why you should use this function instead of hard-coding them into the footer of your theme, check out this post on WPSE.
wp_enqueue_script() as I read about so far and went through the source code instantiates new wp_scripts object 'representing' the script.
My question is how does wordpress know when to load the the script source when needed ?
For example, on index I need bootstrap and jquery, I enqueue bootstrap with jquery dependency in functions.php. How does wordpress know to automatically load the bootstrap on the first page ? What I want to understand is the logic behind it.
I have to create a new plugin and I need some scripts for a slideshow, what I want is to create a quality plugin, optimized using wp_enqueue_scripts, but I don't really understand the concept in-depth so I can use it properly (to load the scripts only when the plugin is activated)
You can treat wp_enqueue_scripts as a kind of action_hook. I.e. when it is time to create pages, it will include the file. You can also make it dependant on another file being loaded, so if jQuery is needed, you can stipulate this in the function and it will load after jQuery. This maintains seperation of your code.
If you want to optimize the code, you can make the function dependant on the page you are loading.
Forexample:
function prepare_scripts() {
if(is_front_page() )
wp_enqueue_scripts('myscript', 'path to script', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'prepare_scripts' );
As #knoblik suggests, you can set the priority for the add_action() if needed. This will probably enqueue the script in the order of the priority.