// 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__));
}
Related
I have this code which i am using for custom theme , but it is not linking css file, can someone let me know, what is wrong in it?
function delna_enqueue_style() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'delna_enqueue_style' );
Use below code.
function load_parent_stylesheet() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'load_parent_stylesheet' );
Hope it will help for you.
I am trying to enqueue my custom javascript code in WordPress' functions.php file,
I am doing the following,
function background_animation_script() {
wp_register_script('background_animation', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
}
function hero_animation_script() {
wp_register_script('hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery','background_animation_script'), '1.0', true);
}
function custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('background_animation_script');
wp_enqueue_script('hero_animation_script');
}
add_action('wp_enqueue_scripts', 'custom_scripts');
But, for some reason, the custom scripts are not getting loaded onto the page, but the jquery is. Any help with this is highly appreciated. Thanks!
use the below function for add jquery in plugin
function custom_scripts() {
wp_enqueue_script( 'background_animation_script', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
wp_enqueue_script( 'hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
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');
https://github.com/320press/wordpress-bootstrap
How do I add custom.js to this theme? I'm not very good at gruntjs. Let's say it's path is library/js/custom.js
Here's the gruntfile: https://github.com/320press/wordpress-bootstrap/blob/master/Gruntfile.js
Thank you!
Why do not you use enqueue to embed script into your theme. Create a function in function.php file as
/**
*Enqueue styles.
*/
function add_scripts() {
wp_register_script( 'customScript', get_template_directory_uri() . 'library/js/custom.js', array(), '1.0.0', true );
// here it is just example of path. you can use yours.
wp_enqueue_script( 'customScript' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
created a js file in my child theme directory and put it in no-conflict mode:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion();
});
Enqueued the script into my functions.php file: function myChild_scripts() {
wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() );
wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );
Added the add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );
However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
You can enqueue a stylesheet in the functions.php file. It may be something like this (assuming your file is in your theme directory, inside a css folder).
function my_styles()
{
wp_register_style( 'jquery-ui-style', get_template_directory_uri() . '/css/jquery-ui.css', 'all' );
wp_enqueue_style( 'jquery-ui-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
Here's some reference.