I'm NOT a WordPress theme author! I want to load .json translations that comes from related admin .js string files inside a WordPress theme. I succeed to load translations by the following function:.
add_action( 'admin_enqueue_scripts', 'kadence_child_js_translations' );
function kadence_child_js_translations() {
if ( get_locale() == 'fa_IR' ) {
$handle = 'my-kadence-customizer-js';
$js_uri = get_template_directory_uri() . '/inc/dashboard/react/src/customizer.js';
$domain = 'kadence';
$json_path = get_stylesheet_directory() . '/languages';
wp_register_script( $handle, $js_uri );
wp_enqueue_script( $handle );
wp_set_script_translations( $handle, $domain, $json_path );
}
}
When I refresh the admin panel, Translations are loaded But I get this error in console:
Uncaught SyntaxError: import declarations may only appear at top level of a module ( customizer.js:6 )
I tried to use the load_script_textdomain() function instead of wp_set_script_translations() but not only none of translations are loaded but also I have this error again!
How can I load .json scripts of a WordPress Theme from a child theme correctly?
Related
In WordPress, I have a template file called vertical-page.php.
When a page has this template applied, I want to load in a specific stylesheet and script.
I have tried to use is_page_template(), but it doesn't work. When I view the source of the page, the script and styles are not being loaded?
<?php
add_action('wp_enqueue_scripts', 'theme_scripts');
function theme_scripts() {
wp_enqueue_style('bootstrap-grid-style', get_template_directory_uri() . '/assets/css/bootstrap-grid.css', array(), STYLE_VERSION);
if ( is_page_template( 'vertical-page' ) ) {
wp_enqueue_style('tmp-override', get_template_directory_uri() . '/assets/css/override.css', array(), STYLE_VERSION);
wp_enqueue_script('overrides-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'),STYLE_VERSION, true);
}
?>
Try putting the add_action after the function
If your page template file is something.php and it's location is the main folder of the active theme, you need to pass an argument to the is_page_template() function like this: is_page_template('something.php')
I've put some custom code in my active child theme's functions.php. I'm trying to enqueue some style on a admin page. However, a style enqueued in admin_enqueue_scripts hook gets automatically removed and after debugging I found that its not present in the very next hook i.e. admin_print_styles.
Here's some code in active child theme's functions.php which I used for debugging purposes:
function debug_enqueue_admin_scripts() {
wp_enqueue_style( 'gforms_datepicker_css', GFCommon::get_base_url() . "/css/datepicker{$min}.css", null, GFCommon::$version );
if( wp_style_is( 'gforms_datepicker_css' ) {
// NOTE: This runs and I am able to view the following log
error_log( __FUNCTION__ . ': datepicker_css is enqueued.' );
}
}
add_action( 'admin_enqueue_scripts', 'debug_enqueue_admin_scripts', 11 );
function check_if_still_enqueued() {
if( wp_style_is( 'gforms_datepicker_css', 'registered' ) ) {
error_log( __FUNCTION__ . ' datepicker_css registered.');
} else {
// NOTE: It gets in this else block and following output is logged
error_log( __FUNCTION__ . ' datepicker_css **NOT** registered.');
}
}
add_action( 'admin_print_styles', 'check_if_still_enqueued' );
I'm not deregistering the gforms_datepicker_css anywhere, but its getting removed maybe due to some plugin.
While debugging, I've gone further and inspected if it was deregistered by putting extra line in WordPress core class method WP_Dependencies::remove() located here as following.
public function remove( $handles ) {
// NOTE: Check if deregistered
error_log( __METHOD__ . ' ' . var_export( $handles, true ) );
foreach ( (array) $handles as $handle )
unset($this->registered[$handle]);
}
But I'm unable to see log output with gforms_datepicker_css in it from this method.
I'm unsure why the style is getting removed from enqueue list. Can anybody please help me debugging this behaviour and find the solution?
The scripts and styles were not loading on admin pages because the No-Conflict Mode setting of Gravity Forms plugin was turned ON. As the setting is designed to do so:
As described in Gravity Forms documentation:
To temporarily resolve the issue, go to Forms > Settings and enable No
Conflict mode. This should stop third party scripts from writing to
Gravity Forms administration pages and allow you to do the things you
need.
The issue resolved after turning OFF the No-Conflict Mode.
I've been unable to get my custom scripts from a child theme I made show up.
I've added my child theme and appropriate style.css and functions.php files, among others. Followed the usual set up instructions.
Then, I've added custom javascript inside
child_theme_directory/js/custom.js
which in my specific case worked out to be
TWR/js/twr-js.js
I attempted to follow various tutorials and added code to my functions.php in attempt to enqueue those js scripts, such as:
function load_twr_script() {
wp_register_script ( 'twr-js', get_stylesheet_directory_uri() . '/js/twr-js.js');
wp_enqueue_script( 'twr-js', get_stylesheet_directory_uri() . '/js/twr-js.js', array( 'jquery' ), '1.0', true );
}
add_action('wp_enqueue_scripts', 'load_twr_script');
and
function load_twr_script(){
wp_register_script ( 'twr-js', get_template_directory_uri() . '/js/twr-js.js', array('divi-custom-script'), '1.1', true );
$twr_data = array(
'home_url' => esc_url( home_url( '/' ) )
);
wp_localize_script ('twr-js', "twr_data", $twr_data );
wp_enqueue_script ('twr-js');
}
add_action('wp_enqueue_scripts', 'load_twr_script');
and a few other attempts. But my js script isn't even showing up under sources in inspector. Thank you for your help.
Woocommerce took out the option for enabling a lightbox feature for your image gallery earlier this year. They have in their documentation to add code if you want to enable the gallery features but don’t actually say where.
https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/
This is a significant frontend change that can be broken down in to three separate new features;
• Image zoom / magnification
• Lightbox
• Slider
To enable each of these features in your theme you must declare support using add_theme_support() like so:
add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
This allows you the flexibility to pick and choose exactly which features you want to include/exclude in your theme or at your store.
I am not a developer, I don’t have a developer (and shame on WC for not making this an option that end users can opt for or not without having to add code!)
I need to know where to put this code. I am using a child theme called mystile1. I have files called “Theme Functions (function.php)” and one called “custom.css” that’s says it is specifically for adding code to modify my child theme styles.
I don’t know which file I should put the above coding in and where. Nowhere does each of these files have a line called “after_setup_theme” So would I be safe in just adding the code as follows in one of those files (which one?) replacing “yourtheme” with the name of my theme:
add_action( 'after_setup_theme', 'mystile1_setup' );
function mystile1_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
Or any other suggestions are greatly appreciated.
Thank you.
IN RESPONSE:
Below is what is in my functions.php file. would I put the code at the top in between new brackets or down in the section that says:
/-----------------------------------------------------------------------------------/
/* You can add custom functions below /
/-----------------------------------------------------------------------------------*/
function mystile1_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
?>
"MY FUNCTIONS.PHP FILE" INCLUDES
<?php
// File Security Check
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
die ( 'You do not have sufficient permissions to access this page!' );
}
?>
<?php
/-----------------------------------------------------------------------------------/
/* Start WooThemes Functions - Please refrain from editing this section /
/-----------------------------------------------------------------------------------*/
// Define the theme-specific key to be sent to PressTrends.
define( 'WOO_PRESSTRENDS_THEMEKEY', 'zdmv5lp26tfbp7jcwiw51ix9sj389e712' );
// WooFramework init
require_once ( get_template_directory() . '/functions/admin-init.php' );
/-----------------------------------------------------------------------------------/
/* Load the theme-specific files, with support for overriding via a child theme.
/-----------------------------------------------------------------------------------/
$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/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-install.php', // Theme installation
'includes/theme-woocommerce.php' // WooCommerce options
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
/-----------------------------------------------------------------------------------/
/* You can add custom functions below /
/-----------------------------------------------------------------------------------*/
// CUSTOM FUNCTION ADDED TO ADDRESS LACK OF ADD-TO-CART BUTTONS ON VARIABLE ITEMS
// AS DOCUMENTED AT: http://wordpress.org/support/topic/plugin-woocommerce-excelling-ecommerce-checkout-button-not-showing-on-woo-commerce-product/page/2?replies=36#post-3263097
function mv_my_theme_scripts()
{
wp_enqueue_script('add-to-cart-variation', get_template_directory_uri() . '/js/add-to-cart-variation.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_scripts','mv_my_theme_scripts');
/-----------------------------------------------------------------------------------/
/* Don't add any code below here or the sky will fall down /
/-----------------------------------------------------------------------------------*/
?>`
You have to put the code in your function.php between <?php and ?> tags.
As additional note: you can put all of these gallery' effects or only few of them on your site. For example if performance of your site is degrading you can delete or put // to
add_theme_support( 'wc-product-gallery-zoom' );
or to other effects.
I have created a wordpress plugin that creates various widgets. To keep page load time down, I only want to enqueue the associated scripts when the widget is being used.
To do this I created a function like this:
function enqueue_lightbox(){
wp_enqueue_style(
SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-fancybox-css',
'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css',
array(),
SKIZZAR_SHORTCODES__VERSION
);
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox' );
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox-media' );
}
And in my widget class I call it like this:
enqueue_lightbox();
The issue I have is that I have 2 widgets sharing the same piece of code, so I'd like to create a statement that says, if it hasn't been enqueued elsewhere already, enqueue it.
How would I write this function?
You can use wp_script_is function to check the file and load it like this
$handle = 'fluidVids.js';
$list = 'enqueued';
if (wp_script_is( $handle, $list )) {
return;
} else {
wp_register_script( 'fluidVids.js', plugin_dir_url(__FILE__).'js/fluidvids.min.js');
wp_enqueue_script( 'fluidVids.js' );
}