What code exactly do I need to incorporate into my plugin to make it function both when logged in, and logged out?
function getdetailedsearchresults_scripts() {
global $post;
$temp = $_SERVER['HTTP_HOST'];
if (in_array($post->post_name, array('detailed-search-results', 'detailed-gym-gw', 'detailed-gyms-page')) || in_array($temp, array('192.0.0.50')) ){
wp_enqueue_script(
'getdetailedsearchresults-script',
plugin_dir_url(__FILE__) . "assets/getdetailedsearchresults.js",
array('jquery'),
'1.0',
true
);
}
wp_localize_script(
'getdetailedsearchresults-script', // this needs to match the name of our enqueued script
'resultsSearchDetailed', // the name of the object
array('ajaxurl' => admin_url('admin-ajax.php')) // the property/value
);
}
add_action( 'wp_enqueue_scripts', 'getdetailedsearchresults_scripts' );
add_action( 'wp_ajax_detailedsearchresults', 'detailedsearchresults_callback' );
add_action( 'wp_ajax_no_priv_detailedsearchresults', 'detailedsearchresults_callback' );
function detailedsearchresults_callback() { }
Related
I am using the Understrap Child theme to build my site. All my CSS files are working properly but my JS files are not working.
I have the following code in my Html
<script src="/js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/animsition.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>
My enqueue.php file has the following code
<?php
/**
* Understrap enqueue scripts
*
* #package Understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
if ( ! function_exists( 'understrap_scripts' ) ) {
/**
* Load theme's JavaScript and CSS sources.
*/
function understrap_scripts() {
// Get the theme data.
$the_theme = wp_get_theme();
$theme_version = $the_theme->get( 'Version' );
$bootstrap_version = get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/theme{$suffix}.css";
$theme_scripts = "/js/theme{$suffix}.js";
if ( 'bootstrap4' === $bootstrap_version ) {
$theme_styles = "/css/theme-bootstrap4{$suffix}.css";
$theme_scripts = "/js/theme-bootstrap4{$suffix}.js";
}
$css_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_styles );
wp_enqueue_style( 'understrap-styles', get_template_directory_uri() . $theme_styles, array(), $css_version );
wp_enqueue_script( 'jquery' );
$js_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_scripts );
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . $theme_scripts, array(), $js_version, true );
wp_enqueue_script( 'carousel-scripts', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), $theme_version, true );
wp_enqueue_script( 'popup-scripts', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array(), $theme_version, true );
wp_enqueue_script( 'wow-scripts', get_template_directory_uri() . '/js/wow.min.js', array(), $theme_version, true );
wp_enqueue_script( 'pagepiling-scripts', get_template_directory_uri() . '/js/jquery.pagepiling.min.js', array(), $theme_version, true );
wp_enqueue_script( 'smoothscroll-scripts', get_template_directory_uri() . '/js/smoothscroll.js', array(), $theme_version, true );
wp_enqueue_script( 'validate-scripts', get_template_directory_uri() . '/js/jquery.validate.min.js', array(), $theme_version, true );
wp_enqueue_script( 'jquery-scripts', get_template_directory_uri() . '/js/jquery.min.js', array(), $theme_version, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
} // End of if function_exists( 'understrap_scripts' ).
add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
I have copied the inc folder from parent theme to the child theme and modified my functions.php file as follows
<?php
/**
* Understrap Child Theme functions and definitions
*
* #package UnderstrapChild
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
// UnderStrap's includes directory.
$understrap_inc_dir = get_stylesheet_directory() . '/inc';
// Array of files to include.
$understrap_includes = array(
'/theme-settings.php', // Initialize theme default settings.
'/setup.php', // Theme setup and custom theme supports.
'/widgets.php', // Register widget area.
'/enqueue.php', // Enqueue scripts and styles.
'/template-tags.php', // Custom template tags for this theme.
'/pagination.php', // Custom pagination for this theme.
'/hooks.php', // Custom hooks.
'/extras.php', // Custom functions that act independently of the theme templates.
'/customizer.php', // Customizer additions.
'/custom-comments.php', // Custom Comments file.
'/class-wp-bootstrap-navwalker.php', // Load custom WordPress nav walker. Trying to get deeper navigation? Check out: https://github.com/understrap/understrap/issues/567.
'/editor.php', // Load Editor functions.
'/deprecated.php', // Load deprecated functions.
);
// Load WooCommerce functions if WooCommerce is activated.
if ( class_exists( 'WooCommerce' ) ) {
$understrap_includes[] = '/woocommerce.php';
}
// Load Jetpack compatibility file if Jetpack is activiated.
if ( class_exists( 'Jetpack' ) ) {
$understrap_includes[] = '/jetpack.php';
}
// Include files.
foreach ( $understrap_includes as $file ) {
require_once $understrap_inc_dir . $file;
}
/**
* Removes the parent themes stylesheet and scripts from inc/enqueue.php
*/
function understrap_remove_scripts() {
wp_dequeue_style( 'understrap-styles' );
wp_deregister_style( 'understrap-styles' );
wp_dequeue_script( 'understrap-scripts' );
wp_deregister_script( 'understrap-scripts' );
}
add_action( 'wp_enqueue_scripts', 'understrap_remove_scripts', 20 );
/**
* Enqueue our stylesheet and javascript file
*/
function theme_enqueue_styles() {
// Get the theme data.
$the_theme = wp_get_theme();
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/child-theme{$suffix}.css";
$theme_scripts = "/js/child-theme{$suffix}.js";
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . $theme_styles, array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . $theme_scripts, array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
/**
* Load the child theme's text domain
*/
function add_child_theme_textdomain() {
load_child_theme_textdomain( 'understrap-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'add_child_theme_textdomain' );
/**
* Overrides the theme_mod to default to Bootstrap 5
*
* This function uses the `theme_mod_{$name}` hook and
* can be duplicated to override other theme settings.
*
* #param string $current_mod The current value of the theme_mod.
* #return string
*/
function understrap_default_bootstrap_version( $current_mod ) {
return 'bootstrap5';
}
add_filter( 'theme_mod_understrap_bootstrap_version', 'understrap_default_bootstrap_version', 20 );
/**
* Loads javascript for showing customizer warning dialog.
*/
function understrap_child_customize_controls_js() {
wp_enqueue_script(
'understrap_child_customizer',
get_stylesheet_directory_uri() . '/js/customizer-controls.js',
array( 'customize-preview' ),
'20130508',
true
);
}
add_action( 'customize_controls_enqueue_scripts', 'understrap_child_customize_controls_js' );
What I have in my Chrome developer tools is this
I have my js files in the js folder of Understrap child theme and not the one under src folder.
you have to use get_stylesheet_directory_uri() instead of get_template_directory_uri()
get_template_directory_uri return always main Theme Uri.
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'm trying to enqueue javascript and css in WordPress. I have written the following code but it is not working and no style or css is being added to my theme.
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
I think it will be added but it showing you cache version CSS and js which is blank maybe
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri(). '/css/persian-datepicker.css', array(), null, 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), null, true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
use this code to run updated js and CSS file ( non-cache )
OR
it is already added to your site but the path is wrong so it will throw an error in console.
you can see in the console using the F12 key
please check and let me know what is your status.
OR
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
if your $handle has already existed with other style or script so it will not be added to your theme or plugin so be careful about this and add the unique name of $handle
Note :- Add Unique name of $handle or add your own prefix before name of
$handle like custom_jquery this is our custom jquery $handle name
Refrence site :- WP Codex wp_enqueue_script
I want to be able to only enqueue certain JavaScript when there is a form embedded (emedded with shortcode and php).
Is there an action hook for Gravity Forms that triggers when a form is embedded? Then I could do something like this.
add_action('some_gforms_hook', function() {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script( 'postcode', get_bloginfo('stylesheet_directory') . '/modules/Postcode/assets/js/postcode.js', array('jquery') );
wp_localize_script( 'postcode', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
});
});
If there is no such hook, is there another (non hacky) way of archiving what I want?
You're looking for gform_enqueue_scripts. It passes the $form object so you determine if your scripts should be loaded for the given form.
I found this example in the documentation.
add_action( 'gform_register_init_scripts', 'gform_format_money' );
function gform_format_money( $form ) {
$script = '(function($){' .
'$('.gf_money input').each(function(){' .
'$(this).val(gformFormatMoney($(this).val()));' .
'}).change(function(){' .
'$(this).val(gformFormatMoney($(this).val()));' .
'});' .
'})(jQuery);';
GFFormDisplay::add_init_script( $form['id'], 'format_money', GFFormDisplay::ON_PAGE_RENDER, $script );
}
The problem with this example is that I don't like the JS written in my PHP files and the add_init_script() function needs a string with JS as argument.
I could use file_get_contents() to get the JS from the file but then I will not be able to localize the script for injecting the AJAX url.
I now use the hook as in the question and it works perfect.
add_action( 'gform_register_init_scripts', function() {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script( 'postcode', get_bloginfo('stylesheet_directory') . '/modules/Postcode/assets/js/postcode.js', array('jquery') );
wp_localize_script( 'postcode', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
});
});
I have a series of plugins that only load their respective javascript files, based on a page name, as follows:
function getnames_scripts() {
global $post;
if ( in_array( $post->post_name, array( 'somepage', 'anotherpage') ) ){
wp_enqueue_script(
'getnames-script',
plugin_dir_url(__FILE__) . "assets/getnames.js",
array('jquery'),
'1.0',
true
);
}
}
How can I check to load the javascript when only the hostname is present, i.e. 192.0.0.50, instead of 192.0.0.50/somepage/?
if($_SERVER['HTTP_HOST']=='192.0.0.50'){
// wow man
}else{
// Oh man
}