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' );
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 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 working on an underscores WordPress theme and I cannot seem to get any custom script to show results when I load the page. I have attempted to include a simple script 'test.js' in functions.php to test it out. All the other scripts work just fine. Any help would be appreciated:
function blake_eric_scripts() {
/**
* Enqeue bootstrap javascript
*/
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
/**
* Enqeue bootstrap styles
*/
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(),
'3.3.6', 'all' );
wp_enqueue_script( 'blake-eric-test', get_template_directory_uri() . '/js/test.js', array('jquery'));
/**
* Enqeue styles.css
*/
wp_enqueue_style( 'blake-eric-style', get_stylesheet_uri() );
wp_enqueue_script( 'blake-eric-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blake_eric_scripts' );
Here is the simple jQuery script "test.js":
$(function(){
$('#main').addClass('test-class');
});
Thanks!
replace your test.js with following set of codes :-
jQuery(function(){
jQuery('#demo').addClass('test-class');
});
This types of error generally occurs because of conflict with others js files.
By default Wordpress runs jQuery in no-conflict mode, so you can't use the $ sign and define a function like this
$(function(){
$('#main').addClass('test-class');
});
Instead what you can do is
jQuery(function($){
$('#main').addClass('test-class');
});
if you include the $ sign inside the parenthesis you can use it on the rest of the function.
for more details check here
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.
I am trying to add some CSS files and JS files associated to a plugin using the hook.
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
the function was not firing untill I added:
wp_head();
However, now whenever I try to add or edit a post I get the error:
Cannot modify header information - headers already sent by (output started at /Users/warrenday/Sites/Channel4/Admin/wp-includes/general-template.php:2363)
Am I putting wp_head in the wrong place? Here is the whole thing in context.
function vu_add_scripts(){
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script('jquery');
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
wp_head(); /* Fires the command to add files to head */
wp_head() is for the front-end only, as is wp_enqueue_scripts.
Use admin_enqueue_scripts like so:
function vu_add_scripts( $hook ) {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'admin_enqueue_scripts', 'vu_add_scripts' );
The wp_head() function is usually used in the header.php file of the theme you are using. You find it in between the HEAD-tag of the file.
Is wp_head() found in your theme's header.php file? Remove the wp_head() from this file and put it into header.php.
The rest of your code seems solid.