<?php
/*
* Plugin Name: Add Fontawesome Animation
* Plugin URI: ...
* Description: This plugin is used to animate Fontawesome icons
* Version: 1.0.0
* Author: ...
* Author URI: ...
* License: GPLv2
* * */
// Enqueue font-awesome-animation.css
add_action( 'wp_enqueue_style', 'add_fontawesome_animation' );
function add_fontawesome_animation() {
wp_enqueue_style('font_awesome_animation', get_stylesheet_directory_uri() . '/css/font-awesome-animation.css' );
}
Objective: load font-awesome-animation.css so FontAwesome icons can animate.
Using: PhpStorm and just getting started with Genesis. I am using the genesis-sample child theme and for the most part all is going reasonably well publishing posts and learning to use code to mod the templates.
The FontAwesome icons will animate when I #import url("css/font-awesome-animation.css") into the style.css file else I have not been able to enqueue font-awesome-animation.css from functions.php or the plugin as shown above. I get no observable errors in the editor or in the page nor do I get the typical all white page when there are errors in the PHP. Something is FUBAR and I don't know how to do this type of debugging in WordPress yet so I need to know what may be wrong with the code and suggestions about how to debug this type of SNAFU. Is there some type of Response.Write I can use to show me pathing and such?
Try changing the hook you are using to wp_enqueue_scripts. From the codex:
wp_enqueue_scripts is the proper hook to use when enqueuing items that
are meant to appear on the front end. Despite the name, it is used for
enqueuing both scripts and styles.
Also get_stylesheet_directory_uri() will not work for you if you are making a plugin. That is only for use in themes/child themes. If you are calling this from your main plugin file you can use plugin_dir_url( __FILE__ ) instead. Again, from the codex:
Gets the URL (with trailing slash) for the plugin FILE passed in
In this case we are passing the PHP magic constant __FILE__ to get the uri for the main plugin file with a trailing slash.
So your code would look like the following:
<?php
// Enqueue font-awesome-animation.css
add_action( 'wp_enqueue_scripts', 'add_fontawesome_animation' );
function add_fontawesome_animation() {
wp_enqueue_style('font_awesome_animation', plugin_dir_url( __FILE__ ) . 'css/font-awesome-animation.css' );
}
Related
We're using OceanWP but have problems with Simple-Line-Icons and other fonts loaded.
The fonts are loaded in OceanWPs Functions PHP. Example:
// Register simple line icons style
wp_enqueue_style( 'simple-line-icons', $dir .'third/simple-line-icons.min.css', false, '2.4.0' );
How can we de-enqueue/de-register them in our child theme so we keep it save from theme updates? Otherwise we'd have to bracket out the line on each update.
Thanks for any help in advance.
I've fixed it myself by adding custom function to deregister all unnessecary scripts in a snippet
/**
* Disable the Simple Line Icon scripts
*/
function my_enqueue_scripts() {
// Unregister JS files
wp_deregister_script( 'simple-line-icons' );
// Unregister CSS file
wp_deregister_style( 'simple-line-icons' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 99 );
This works for now, not sure though if this is the best route to take :-)
I am trying to enqueue an external plain JavaScript file from within my plugin php, to add within my footer of the WP theme. Is this possible?
I've tried the below, but test is failing as no alert is firing...
<?php
/**
Plugin Name: Add Footer JS
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
<script>alert( 'Hi Roy' ); </script> // just a test
<?php
}
So basically; the JS would be at:
http://dev.website.com/wp-content/plugins/mykewlplugin/js/script-support.js
And this PHP, at:
http://dev.website.com/wp-content/plugins/mykewlplugin/support.php
And core plugin PHP/functionality at:
http://dev.website.com/wp-content/plugins/mykewlplugin/mykewlplugin.php
Make sure that your currently active theme is making use of the wp_footer() and wp_head() functions, as those are required to utilize the appropriate action hooks. With that said, you should really properly enqueue your assets. Anybody else working on the project (including your future self) will be appreciative of that!
This involves utilizing the wp_enqueue_scripts hook and the wp_enqueue_script() function (which relies on both the wp_head() and wp_footer functions).
The proper way to do this would be like the following:
add_action( 'wp_enqueue_scripts', 'no_spex_footer_js' );
function no_spex_footer_js(){
wp_enqueue_script( 'no-spex-footer-js', '/path/to/your/file.js', array(), null, true );
}
Note all the passed arguments, in order:
a unique handle
the path to your actual file
an array of dependencies by handle (if you rely on jQuery, change this to array('jquery'), etc.
version of the file. I use filemtime( plugin_dir_path( __FILE__ ) . 'assets/file-name.js' typically.
in_footer - This is the important one, and determines if the file should be loaded into the header or footer.
If you're sure your theme is making use of wp_head() and wp_footer(), and the file isn't working - it means your plugin isn't configured/activated properly, at which point I'd recommend another cursory glance at the Writing A Plugin documentation and the File Header Requirements.
For your specific case, something like this should get you started:
mykewlplugin.php:
<?php
/**
* Plugin Name: My Kewl Plugin
* Description: Does Kewl Things
* Version: 0.1
*/
add_action( 'wp_enqueue_scripts', 'my_kewl_plugin_footer_js' );
function my_kewl_plugin_footer_js(){
wp_enqueue_script( 'my-kewl-plugin-footer', plugins_url( '/js/script-support.js', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'js/script-support.js', true );
}
?>
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 can't work on any specific theme file like header.php, footer.php OR function.php within theme directory.
Reason is project always need new theme and theme is get changes in each week.
So I want something like that will work on each theme, no matter which theme admin applied.
I tried wp_enqueue_script() but again I need work on theme's function.php file.
The only way to do this is to run wp_enqueue_script() from outside of the theme (i.e. NOT in functions.php). The only way you can do that is to use a plugin.
See: http://codex.wordpress.org/Must_Use_Plugins
Or: http://codex.wordpress.org/Writing_a_Plugin
Create a plugin by adding a .php file in the /wp-content/plugins/ directory, or possibly even better for this situation create a 'must use' plugin by creating a .php file in the /wp-content/mu-plugins/ directory.
The structure of this .php file should be something like the following:
<?php
/*
Plugin Name: Example Plugin
Description: Any functions that should persist even if the theme changes.
Author: Your Name
Version: 1.0
Author URI: http://yoururl.com
*/
function my_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action('wp_enqueue_scripts', 'my_scripts' );
?>
You need to write a plugin that rewrites theme's sections. A good start for creating a plugin is here. If your themes shares the same Javascript you could try to add your things to those Js.
I have this javascript code that I am including in my plugin using wp_enqueue_script() finction. Some forks told me that i need to add wp_head() for it to work... So where can I add it? Or is there any other solution that I can make this javascript file work in the plugin?
thanks.
code is here.
<?php
/*
Plugin Name: WP Test Plugin.
Plugin URI: http://wplugins.com
Description: A plugin that test javascript.
Author: Ronny Kibet.
Author URI: http://wplugins.com
Version: 1.0
*/
//globals
$floating_options = get_option('floating_settings');
//enable settings.
function popupthis() {
$src = plugins_url('/includes/links.js', __FILE__);
wp_register_script( 'links', $src );
wp_enqueue_script( 'links' );
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts','popupthis');
?>
wp_head() goes in the header.php file of your theme.
In general, it is theme's responsability to call wp_head function and you, as a plugin developer, shouldn't worry about this.
In case it's missing (so your plugin works with TwentyTen and doesn't with any), call wp_head() just before closing tag, usually it is in theme's header.php file.