I'm learning to building my own WordPress plugin and it nearly works.
Here's part of the code which I feel is the most relevant:
(The plugin is supposed to create an splash screen on start where an Vimeo-clip is supposed to start playing automatically).
define( 'COLORBOX_VERSION', '1.4.24' );
define( 'BVSSP_VIMEO_VERSION', '1.0' );
define( 'BVSSP_CSS_VERSION', '1.0' );
add_action( 'wp_enqueue_scripts', 'bvssp_colorbox_js' );
add_action('wp_footer', 'bvssp_data_display');
function bvssp_colorbox_js() {
wp_register_style( 'bvssp-style', plugins_url('/css/colorbox.css',__FILE__), array(), BVSSP_CSS_VERSION );
wp_enqueue_style( 'bvssp-style' );
wp_enqueue_script( 'jquery' );
wp_register_script( 'bvssp-colorbox', plugins_url('/js/jquery.colorbox-min.js',__FILE__), array('jquery','jquery-ui-sortable'), COLORBOX_VERSION );
wp_enqueue_script( 'bvssp-colorbox' );
wp_register_script( 'bvssp-vimeo', plugins_url('/js/bvssp-vimeo.js',__FILE__), array('jquery','jquery-ui-sortable','bvssp-colorbox'), BVSSP_VIMEO_VERSION );
wp_enqueue_script( 'bvssp-vimeo' );
}
function bvssp_data_display() {
echo '<a style="display:none;" class="vimeo" href="http://player.vimeo.com/video/67189599?title=0&byline=0&portrait=0&badge=0&autoplay=1">vimeo</a>';
}
The problem I have is that the content found in the bvssp-vimeo.js is not executed. This is what's inside that file:
<script>
jQuery(document).ready(function($) {
$(".vimeo").colorbox({iframe:true, innerWidth:800, innerHeight:709, open: true});
});
</script>
If I paste the code in this file directly in the theme, everything works great. But I want to execute the JS-code from the file instead. How can I do this?
Kind regards
Johan (now very tired) :)
don't use HTML tags in javascript files :
jQuery(function($) {
$(".vimeo").colorbox({iframe:true, innerWidth:800, innerHeight:709, open: true});
});
Related
I have a js file named "main.js" and I enqueued it using wp_enqueue_script in function.php file. This file is getting loaded in my page-{slug}.php, but the functions in it are not executing at all.
The function.php file:
function df_enqueue_scripts() {
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array(), '1.0', true );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/src/library/js/bootstrap.min.js', array( 'jquery' ), '5.6', true );
}
// Register the df_enqueue_scripts with wp_enqueue_scripts hook.
add_action( 'wp_enqueue_scripts', 'df_enqueue_scripts' );
page-{slug}.php file:
<?php
get_header();
?>
<button type="button" id="ad-button">Ad</button>
<button type="button" id="mm-button">MM</button>
<button type="button" id="photo-button">Photography</button>
<div id="display-photo"></div>
<div id="display-mm"></div>
<div id="display-ad"></div>
<?php
get_footer();
main.js file:
$( '#photo-button' ).on( 'click',
function () {
$( '#display-photo' ).html("Hello <b>world!</b>");
}
);
In short, I write anything in main.js file, the changes which I expect doesn't happen or doesn't reflect in my page-{slug}.php file.
I think, the problem with jQuery wrong usage.
Probably, wrapping the function with jQuery allows using $ variable
and could solve the problem
jQuery(function($){
$( '#photo-button' ).on( 'click',
function () {
$( '#display-photo' ).html("Hello <b>world!</b>");
}
);
})
The second required thing is to set jQuery as a dependency for
your script and to update the script version to 1.1.
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array( 'jquery' ), '1.1', true );
I'm trying to enqueue scripts & styles from CDN in Wordpress so I can use this JSfiddle within the footer of my code:
https://jsfiddle.net/wcepbL45/
I can see the 6 scripts are loading in my Page Source, but the JSfiddle I'm trying to embed in the footer isn't working.
I am guessing some of the new scripts are clashing with the original ones, or do I need to be enqueuing these in my footer.php file?
So atm, my functions.php has this code:
<?php
function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css',
array(), false, 'all');
wp_enqueue_style('bootstrap');
wp_register_style('style', get_template_directory_uri() . '/style.css',
array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function include_jquery()
{
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.1.3.min.js', '', 1, true);
add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'include_jquery');
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts', 'loadjs');
// Next 6 styles are new (I can see them when i view page source, but I think they are clashing with something, as the JSfiddle I'm trying to input isnt working.
wp_register_style( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('Bootstrap');
wp_register_style( 'Bootstrap_Theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
wp_enqueue_style('Bootstrap_Theme');
wp_register_style( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css' );
wp_enqueue_style('Bootstrap_Slider');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('Bootstrap');
wp_register_script( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', null, null, true );
wp_enqueue_script('Bootstrap_Slider');
//
Where am I going wrong?
Multiple mistakes here, You should restrict the use of your scripts to everything but the admin panel. You're not checking if the CDN is actually working, and you have no fallback. get_template_directory_uri() should not be used for the loading the style.css file, instead use get_stylesheet_uri(). You're using multiple functions for no reason and loading. your call for wp_register_style and wp_register_style are outside any functions.
I will just paste what i'm using to load and enqueue scripts and style, feel free to copy pasta! Hope this will help you, don't forget to thumbs up the answer if it does.
<?php add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue bootstrap bundle js (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_bundle_js = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js', 'r' );
if ( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js' );
} else {
wp_register_script( 'bootstrap_bundle_js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
/**
* Register then enqueue bootstrap css (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_css = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css', 'r' );
if ( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' );
} else {
wp_register_style( 'bootstrap_css', get_stylesheet_uri() . '/assets/css/bootstrap.min.css' );
};
wp_enqueue_style( 'bootstrap_css' );
/**
* Register then enqueue style css
*/
wp_register_style( 'style_css', get_stylesheet_uri(), array( 'bootstrap_css' ) );
wp_enqueue_style( 'style_css' );
};
}; ?>
EDIT 1: Read more about the wp_enqueue_script # https://developer.wordpress.org/reference/functions/wp_enqueue_script/
EDIT 2: Bootstrap 5 as a range plug and play component # https://v5.getbootstrap.com/docs/5.0/forms/range/ (same for Bootstrap 4)
EDIT 3: When you enqueue your scripts you can set up dependencies restricting the load and enqueue of your script
<?php
/**
* Register then enqueue script js
*/
wp_register_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'bootstrap_bundle_js', 'jquery_js' ) );
wp_enqueue_script( 'script_js' ); ?>
Inside the wp_register_script we specify an array of script to load our new script after array( 'bootstrap_bundle_js', 'jquery_js' ). It uses the handles defined upon registering the style/script wp_register_script( 'script_js', ... here 'script_js' is the handle.
In response to your last comment, we can do something like this:
For your JS scripts:
(1) jquery.min.js,
eg: wp_enqueue_script( 'jquery_js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );
(2) bootstrap.min.js with dependency towards (1),
eg: wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery_js' ) );
(3) bootstrap-slider.min.js with dependency towards (1) & (2),
eg: wp_enqueue_script( 'bootstrap_slider_js', '//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', array( 'jquery_js', 'bootstrap_js' ) );
(4) script.js with dependency towards (1) & (2) & (3),
eg: wp_enqueue_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery_js', 'bootstrap_js', 'bootstrap_slider_js' ) );
For your CSS scripts:
(1) bootstrap.min.css, eg: (same here but with wp_enqueue_style)
(2) bootstrap-slider.css with dependency towards (1),
(3) style.css with dependency towards (1) & (2),
I am trying to substitute 1 javascript file from the parent theme.
I am using the child theme of this theme and i modified 1 *.js file
When i load the file in the parent theme directory all is fine
When i load the file from the child theme all it does is finding the file in the parent theme
I tried different codes found here and on the internet but all failed
I tried
/*
* Use any number above 10 for priority as the default is 10
* any number after 10 will load after
*/
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'Theme-custom' );
#wp_deregister_script( 'Theme-custom' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
and i tried
// dequeue your required script file
function your_child_theme_js_file_dequeue() {
wp_dequeue_script( 'Theme-custom' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 1 );
// enqueue your required script file
function your_child_theme_js_file_override(){
wp_enqueue_script( 'Theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery' ) );
}
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method()
{
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ));
}
and i tried
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
wp_dequeue_script('Theme-custom');
wp_enqueue_script('Theme-custom', get_template_directory_uri().'/js/custom.js', array('jquery'),20151110,true);
}
I tried even more but will not post
I just want the child theme to load this JS file instead of the original one that comes with the theme
the Handle should stay the same as other files in the theme will also look for this js file
The parent theme registers the JS file like this
wp_register_script('theme-custom', trailing(get_template_directory_uri()) . 'js/custom.js', array('jquery', 'theme-dd', 'type'), false, true);
Just fixed it myself
Just forgot to register the script correct
See code below
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'custom.js' );
wp_deregister_script( 'custom.js' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery', 'theme-dd', 'type'), false, true );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
Recently I found the following javascript from another thread on this forum;
var $content=$('div.leg_ol');
var $links=$('.leg_test').hover(function(){
var index= $links.index(this);
$content.stop(true,true).hide().eq(index).fadeIn();
},function(){
$content.stop(true,true).hide().eq(index);
});
(I would link to the OP, but unfortunately have lost the page).
JSFIDDLE: https://jsfiddle.net/mfyctwvs/1/
The code does exactly what I want to do - in theory, now I am pretty much completely new to js, so this is a very tricky area for me - please bear with me on this.
When I post the code in functions.php it causes my whole site to stop working, I assume because it cannot read it or there is some conflict?
So my first thought, looking at jsfiddle was the js version and that it is specified as no wrap in . If I change either of these the code does not work.. ..so 1. Am I making a newb mistake trying to include incompatible js in my functions.php (probably yes?) & 2. is there a straightforward change I can make to get this working in my functions.php?
I have been searching on this for hours & am sure that I could get this working with some adjustments?
FYI; Functions.php
<?php// Set path to WooFramework and theme specific functions
$functions_path = get_template_directory() . '/functions/';
$includes_path = get_template_directory() . '/includes/';
// Don't load alt stylesheet from WooFramework
if ( ! function_exists( 'woo_output_alt_stylesheet' ) ) {
function woo_output_alt_stylesheet () {}
}
// WooFramework
require_once ( $functions_path . 'admin-init.php' ); // Framework Init
if ( get_option( 'woo_woo_tumblog_switch' ) == 'true' ) {
//Enable Tumblog Functionality and theme is upgraded
update_option( 'woo_needs_tumblog_upgrade', 'false' );
update_option( 'tumblog_woo_tumblog_upgraded', 'true' );
update_option( 'tumblog_woo_tumblog_upgraded_posts_done', 'true' );
require_once ( $functions_path . 'admin-tumblog-quickpress.php' ); // Tumblog Dashboard Functionality
}
/*-----------------------------------------------------------------------------------*/
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/theme-plugin-integrations.php', // Plugin integrations
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-advanced.php', // Advanced Theme Functions
'includes/theme-shortcodes.php', // Custom theme shortcodes
'includes/woo-layout/woo-layout.php', // Layout Manager
'includes/woo-meta/woo-meta.php', // Meta Manager
'includes/woo-hooks/woo-hooks.php' // Hook Manager
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
// Load WooCommerce functions, if applicable.
if ( is_woocommerce_activated() ) {
locate_template( 'includes/theme-woocommerce.php', true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
add_action( 'init', 'woo_custom_move_navigation', 10 );
function woo_custom_move_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
// Add main nav to the woo_header_inside hook
add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()
/* Testing stuff for mobile */
function woo_load_responsive_meta_tags () {
$html = '';
$html .= "\n" . '<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->' . "\n";
$html .= '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />' . "\n";
echo $html;
} // End woo_load_responsive_meta_tags()
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'user-scripts',
get_template_directory_uri() . '/functions/user-scripts.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
?>
In wordpress you in ject your javascript files into your theme using the wordpress api/hooks. the method you want is wp_enqueue_script. Here are the docs
It's used like this:
add_action('wp_enqueue_scripts', 'addScript');
function addScript() {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
}
Depending on the version of php you have, you can inline the function:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
From the script provided by #atmd the following code worked.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
A precondition required was that the script was located in the /functions/ folder of the theme used. The original code posted works perfectly on the site.
Im trying to remove all script from a certain page temp so i added this above the doctype
<?php
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
?>
but its not working. any suggestions
This script will remove ALL scripts from your page, not just jquery
public function dequeue_all_scripts(){
// Replace the conditional check below with your own...
if (is_singular('myposttype')){
global $wp_scripts;
$scripts = $wp_scripts->registered;
foreach ( $scripts as $script ){
wp_dequeue_script($script->handle);
}
}
}
add_action('wp_print_scripts', 'dequeue_all_scripts');
You will need to add this code to your functions.php
function dequeue_script() {
if ( is_page_template('page-pop.php') ) {
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
}
}
add_action( 'wp_print_scripts', 'dequeue_script', 100 );
The if ( is_page_template('page-pop.php') ) {} statement is used here to define the page template to which a function will be coupled. You just need to change the template name (page-pop.php) to the template you want to use it on