I am new to wordpress. I need to create a new plugin for my website. How to I add scripts and styles for plugins. Advance thanks.
You can register your scripts and styles by using the wp_register_script() function. See the examples below:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Use bellow function for add styles in WordPress.
function your_function_name() {
wp_enqueue_style( 'style', plugins_url( 'put your css file path', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'your_function_name' );
If you want to add custom java script code, use below code (But is bad)
function admin_load_js() { ?>
<script type="text/javascript">
//add your code here
</script>
<?php }
add_action('admin_head', 'admin_load_js');
Related
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
wp_register_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_style( 'bootstrap' );
}
my folder's name is turnover-calculator it only have the bootrap folder and turnovercalculator.php
i tried to call the btn class to try if it's working but it's still not working.
You have to use the right hooks, wp_register_style and wp_enqueue_style can only be called inside wp_enqueue_scripts hook.
please use this code:
add_action('init', 'call_scripts');
function call_scripts() {
add_action('wp_enqueue_scripts', 'enqueue_style');
}
function enqueue_style(){
wp_register_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
wp_enqueue_style( 'bootstrap' );
}
You can just enqueue the style directly inside the wp_enqueue_scripts callback like this:
add_action( 'wp_enqueue_scripts', 'turnover_calculator_scripts' );
function turnover_calculator_scripts() {
wp_enqueue_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
}
I'm working on a WordPress plugin which works perfectly if I insert the shortcode in a page or an article, but if I insert the shortcode in a widget area the .js and .css files aren't loaded.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_functions' );
function my_functions() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
}
//CUSTOM CSS
add_action( 'wp_enqueue_scripts', 'my_css' );
function my_css() {
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//INCLUDE JS IF SHORTCODE EXIST
add_action( 'wp_print_styles', 'form_my_include' );
function form_my_include() {
global $post;
if (strstr($post->post_content, 'my_form_shortcode')) {
wp_enqueue_script('my-script-1');
wp_enqueue_style('my-css');
}
}
//SHORTCODE
function my_shortcode_add(){
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
You need to enqueue your script and stylesheet directly inside the shortcode. You can also load both the script and stylesheet inside the same wp_enqueue_scripts() hook.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_scripts_and_stylesheets' );
function my_scripts_and_stylesheets() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//SHORTCODE
function my_shortcode_add(){
wp_enqueue_script('my-script-1'); //loaded here
wp_enqueue_style('my-css'); //loaded here
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
Your current code grabs to content inside post, and checks for the shortcode in there. Depending on where your shortcode is called, it might not actually be present in the post content, despite being present on the page.
By adding the wp_enqueue_script() & wp_enqueue_style() to your shortcode function, it will enqueue your whenever your shortcode is present on a page, regardless of where on the page it is.
Add this code to your plugin.
// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');
This code simply adds a new filter allowing shortcodes to run inside widget.
I'm a beginer on wordpress, and my job will be to integrate templates and themes.
But a have a question with the wp_head and wp_footerfunctions.
Both of them generate stylesheet and scripts, but on my theme and my template page and would like only one stylesheet and one script (ex : css/style.css and js/app.js) .
I mean, style.css will have template rules but already styles from plugin etc .
And app.js will have jQuery minified, severals plugins (like lightbox etc) and my own script .
How can i do that ? I normally use grunt or gulp . But can i say ton wp functions "don't add scripts from plugins in the head, but add it in my main JS file " ?
Best regards
Scripts that are loaded through wp_head or wp_footer are enqueued in Wordpress.
If you want to remove those and instead load only your one single stylesheet and one single JS file, then you will need to dequeue all of those other scripts.
First, however, you need to identify which scripts are enqueued, which you can do by loading the global $wp_styles and $wp_scripts variables and iterating through them like so:
function se_inspect_styles() {
global $wp_styles;
echo "<h2>Enqueued CSS Stylesheets</h2><ul>";
foreach( $wp_styles->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_styles', 'se_inspect_styles' );
function se_inspect_scripts() {
global $wp_scripts;
echo "<h2>Enqueued JS Scripts</h2><ul>";
foreach( $wp_scripts->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_scripts', 'se_inspect_scripts' );
Then you can manually dequeue and deregister all those scripts by hooking into the wp_print_styles action (for CSS files) and the wp_print_scripts action (for JS files) like below:
// Dequeue CSS
function se_dequeue_unnecessary_styles() {
wp_dequeue_style( 'bootstrap-map' );
wp_deregister_style( 'bootstrap-map' );
}
add_action( 'wp_print_styles', 'se_dequeue_unnecessary_styles' );
// Dequeue JS
function se_dequeue_unnecessary_scripts() {
wp_dequeue_script( 'modernizr-js' );
wp_deregister_script( 'modernizr-js' );
wp_dequeue_script( 'project-js' );
wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'se_dequeue_unnecessary_scripts' );
If you still need any of the dequeued scripts, then just be sure to add their source to your grunt / gulp file.
Lastly, you'll want to enqueue your one single CSS and JS scripts produced by grunt / gulp (although you can always just link to these manually from your templates if you feel like it).
Here is some example code for doing so:
function se_theme_js(){
// Theme JS
wp_register_script( 'my-scripts',
get_template_directory_uri() . '/js/main.min.js',
array('jquery'),
null,
true );
wp_enqueue_script('my-scripts');
}
add_action( 'wp_enqueue_scripts', 'se_theme_js' );
function se_theme_styles() {
// Theme CSS
wp_register_style( 'my-style',
get_stylesheet_directory_uri() . '/css/main.min.css',
array(),
null,
'all' );
wp_enqueue_style( 'my-style' );
}
add_action( 'wp_enqueue_scripts', 'se_theme_styles' );
Can anyone tell me that how I pass or post my javascript variables to functions.php file method without using enqueue js files.
Any help will be appreciated.
Thanks
Please use below code for enqueue script in wordpress
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'mycustom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Or
function wpdocs_custom_enqueue() {
echo '<script>$(document).ready(function () {
$("#checkbox").click(function() {
if(this.checked) {
//Do stuff
alert("It is checked");
} else {
alert("it is not checked");
}
});
});</script>\n';
}
add_action( 'wp_head', 'wpdocs_custom_enqueue' );
Both codes are working.
I'm trying to use wow.js on my WordPress site and I've been through a handful of forums about similar issues but I can't seem to get it working. The site of icons on top I believe are loading on the page load not scroll and further down on the page (under the green band) I have an h2 that never loads at all when scrolling down to it. (The animated class is added, but element is hidden and no animation occurs).
My html:
<h1 class="wow animated fadeInRight left">A website must perform many
functions.</h1>
In functions.php
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
add_action('wp_head', 'wow_init');
Thanks in advance!
You have an error:
Uncaught ReferenceError: WOW is not defined
...because you're enqueueing wow.js in the footer, and are trying to use WOW in the head.
Been searching for a while.. trying different suggestions. Finally got it working following this tutorial.
http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/
Here is the code I replaced in my functions file.
//* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Initial Wow before body </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
I'm not sure what changed other than I moved my scripts.js file to be enqueued as well, when previously I was manually loading it in footer.php
*****UPDATE I also noticed that removing
html,body{height:100%;}
may have made a difference in WOW determining when the animation was in view.**