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.
Related
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' );
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');
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 am working on my first plugin and it is coming along alright. However, I am not able to load my scripts (CSS and JS) from my plugin. This is my code:
function my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-plugin/my-style.css') );
wp_enqueue_script( 'my-js', plugins_url( 'my-plugin/my-js.js' ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'my_scripts' );
I must be missing something... such a simple code to not be working :(
Your code looks pretty much correct, but check out Plugins URL Page and see this particular part:
If you are using the plugins_url() function in a file that is nested inside a subdirectory of your plugin directory, you should use PHP's dirname() function
Basically, you need to load like this:
plugins_url( 'my-plugin/my-js.js' , __FILE__ ),
Well, I got it. My mistake was that I was using the wrong hook! Duh! In the admin side, you use the hook admin_enqueue_scripts and in the front side you use wp_enqueue_scripts to hook your function to enqueue your scripts to WordPress.
Here is a simple example to import from your plugin. If you want to enqueue scripts from your theme, you should use get_template_directory_uri() function to get the proper path.
From your custom plugin to the admin side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'admin_enqueue_scripts', 'guide_express_scripts' );
From your custom plugin to the front side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'guide_express_scripts' );