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.
Related
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?
So I'm busy in Wordpress. I have a theme for the site and all. It's all working fine. Then I want to activate the new theme. BENG BENG, white screen of death. I debugged and this is the error:
Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in C:\xampp\htdocs\wp-includes\functions.php on line 2944
Line 2944 is just the line that throws an error. I already checked that.
Anyone ever experienced and solved this?
EDIT:
Referencing lines:
function _doing_it_wrong( $function, $message, $version ) {
do_action( 'doing_it_wrong_run', $function, $message, $version );
// Allow plugin to filter the output error trigger
if ( WP_DEBUG && apply_filters( 'doing_it_wrong_trigger_error', true ) ) {
$version = is_null( $version ) ? '' : sprintf( __( '(This message was added in version %s.)' ), $version );
$message .= ' ' . __( 'Please see Debugging in WordPress for more information.' );
trigger_error( sprintf( __( '%1$s was called <strong>incorrectly</strong>. %2$s %3$s' ), $function, $message, $version ) );
}
}
The error have nothing related to the code you've added added. It is not a Wordpress core related issue, but an issue with your theme or a plugin
What the error means is that some script is enqueued way too early, ie, wp_enqueue_script() is hooked to a wrong hook that runs before wp_enqueue_scripts, admin_enqueue_scripts, or init.
Unfortunately this error in Wordpress is a bit fague as it doesn't tell you exactly where the problem is, just that wp_enqueue_script is wrongly called.
You'll need to look for all instances in your theme and plugins for wp_enqueue_script and check that it is properly hooked
EDIT
From your comments, you have found three instances of wp_enqueue_script. You now need to see how it is hooked. It should look something like this
function some_function_name(){
wp_enqueue_script(ALL THE SCRIPT DETAILS IN HERE);
}
add_action( 'THIS IS THE HOOK THAT IS IMPORTANT', 'some_function_name');
THIS IS THE WRONG HOOK USED is what you must check, as this is the wrong hook. This must be wp_enqueue_scripts or admin_enqueue_scripts, depending on if the script is meant for front end or back end
In some of your plugins or your theme, a script may be included like this :
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
try to change it using this code:
<?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' );
?>
I have the following use case. I have created a custom "search" functionality, all it is an input box that is using some API fetch and jquery magic.
Essentially, I want to add this search function into its own custom sidebar navigation widget via a plugin installation.
I wish to create a plugin that registers a custom "menu" sidebar widget. The sidebar widget will drop this search functionality to were ever the widget is "dragged and dropped". The display is for only the front of the site. You know, how the default search widget works.
Some Facts:
I have created a boiler plated plugin in wp-contents, it had a blank
activate, deactivate and uninstall function within the mail plugin class and I have hooked the activate and deactivate button.
The source code for the "custom search functionality" is within the
same folder as the plugin.
Folder scheme looks like:
MBE PLUGIN
index.php
mbe-plugin.php
api-search.html
assets
css
scripts
ETC
In my plugin.php file, what must I include in the "activation" function to achieve this?
This is my boilerplate plugin code... pretty empty
.
<?php
/**
* #package MBEPlugin
*/
/*
Plugin Name: MBE Plugin
Plugin URI: http://localhost/mbeTest/plugin
Description: This plugin is for the search modal for MBE website. Project 'accordion'
Version: 1.0.0
Author: Erick Guerra
Author URI: http://bashs3c.com
License: GPLv2 or later
Text Domain: mbe-plugin
*/
// Secuirty measure, checks variable in env to ensure we are in WP
if ( ! defined( 'ABSPATH' ) ) {
echo 'These are not the drones you are looking for!';
exit;
}
class MbePlugin {
function activate() {
$searchHTML = file_get_contents(plugins_url('api-search.html', __FILE__));
echo $searchHTML;
// generate a CPT
// Flush the rewrite rules
}
function deactivate() {
// Flush rewrite rules
}
function uninstall() {
// delete CPT
// Delete all the plugin data from DB
}
function displaySearch() {
$searchHTML = file_get_contents(plugins_url('api-search.html', __FILE__));
echo $searchHTML;
}
}
if (class_exists('MbePlugin')) {
$mbePlugin = new MbePlugin();
}
//activation
register_activation_hook( __FILE__, array( $mbePlugin, 'activate' ) );
//deactivation
register_deactivation_hook( __FILE__, array( $mbePlugin, 'deactivate' ) );
//uninstall
//
//add_actions('wp_enqueue_scripts', 'search_init');
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 am building out my first WordPress site for a client. I really want to use LESS for CSS and found a WP plugin named WP-LESS.
Now, I am total WordPress newb, but it appears that this plugin requires me to use a function called wp_enqueue_style() to tell WordPress to process the .less file.
I can't figure out where I use this function. I looked in my header.php file in my theme directory and I see this.
<link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Am I supposed to replace this code with something like this?
<?php wp_enqueue_style('mytheme',
get_bloginfo('template_directory').'/style.less',
array('blueprint'), '', 'screen, projection'); ?>
wp_enqueue_style usage inside of the theme or the plugin:
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a parent theme
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a child theme
wp_enqueue_style( 'my-style', plugins_url( '/css/my-style.css', __FILE__ ), false, '1.0', 'all' ); // Inside a plugin
Not quite, but almost. What you want to do is place a function in functions.php that queues your script.
So:
function addMyScript() {
wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');
Then make sure you have do_action('wp_head'); in your header.php file and it should work just fine.
Add below function in your theme function.php and you get style and script.
<?php
if ( ! function_exists( 'add_script_style' ) ) {
function add_script_style() {
/* Register & Enqueue Styles. */
wp_register_style( 'my-style', get_template_directory_uri().'/css/my-style.css' );
wp_enqueue_style( 'my-style' );
/* Register & Enqueue scripts. */
wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js' );
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'add_script_style', 10 );
?>
Ran into this issue myself, and EAMann's tip almost worked. It might be the version of WordPress (3.4), although I'm not a php developer so I'm not sure, but I needed this below the function instead of what was provided:
add_action('wp', 'useLess');
To make sure the enqueue is done at the proper time use add_action().
So it would be something like the following in functions.php:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style('main-style', get_template_directory_uri() . '/style.less');
});
Make sure to have a <?php wp_head(); ?> somewhere in your header.php.
btw no need to name the function, it can only a potential name clash or typo Preferably use a anonymous function
Final remark: Why not compile the .less files in the development environment and deploy the resulting .css file (minified or otherwise)?
If you enter this code correctly you must be see this function is exist or not in your index.php file wp_head(); & wp_footer();
if is not exist, you need to be add this function in your index file. you need to add this wp_head(); before haed tag, and another one add before body tag.
function load_style() {
wp_register_style( 'my_style', get_template_directory_uri(). '/css/my_style.css' );
wp_enqueue_style( 'my_style' );
}
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'load_style' );
For more details