I'm creating a custom block inside a plugin. It's a drop down selector of categories for posts. I'm simply trying to update the query of a query loop block on the same page. However I'm not sure how to access the query of the query loop block.
I've tried the above however getting the blockId of the block doesn't seem to be possible on the front end. Does anyone know how i can reference the query loop block from a front end js file?
plugin.php
function tapacode_selector_ajax_callback() {
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'wp-tapacode-nonce' ) ) {
die ( 'Busted!' );
}
$category = intval( $_POST['category']);
$query_args = array(
'cat' => $category
);
$query = new WP_Query( $query_args );
wp_send_json( $query->posts );
wp_die();
}
add_action( 'wp_ajax_tapacode_selector', 'tapacode_selector_ajax_callback' );
add_action( 'wp_ajax_nopriv_tapacode_selector', 'tapacode_selector_ajax_callback' );
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
wp_register_script( 'ajax-selector-script', plugins_url( '/selector.js', __FILE__ ), array( 'wp-blocks', 'wp-editor', 'wp-element', 'jquery' ), '1.0', true );
wp_enqueue_script( 'ajax-selector-script' );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-selector-script', 'ajax_object',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'wp-tapacode-nonce' )
) );
}
another plugin.php file
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php wp_dropdown_categories(); ?>
</p>
selector.js
document.addEventListener('DOMContentLoaded', setupCategorySelector, false);
function setupCategorySelector() {
document.getElementById('cat').onchange = function () {
// if value is category id
if (this.value !== '-1') {
if (typeof wp !== 'undefined' && wp.data) {
const blockId = document.querySelector('.wp-block-tapacode-category-selector').getAttribute('data-block-id');
const queryBlock = wp.data.select('core/block-editor').getBlock(blockId);
queryBlock.setAttributes({ categories: this.value });
queryBlock.update();
}
I'm developing an elementor widget as a plugin. The font view js working fine but the backend (Elementor edit page) js are not working. I'm using hooks (admin_enqueue-scripts, wp_enqueue_scripts, elementor/editor/before_enqueue_scripts, elementor/elements/categories_registered, elementor/widgets/widgets_registered, elementor/editor/after_enqueue_scripts, elementor/frontend/init). Which is perfect the js loading for elementor font page. Now, My js effects are not working on Elementor edit page. How can I solve the problem?
The enqueue code:- `public function bwdic_admin_editor_scripts() {
add_filter( 'script_loader_tag', [ $this, 'bwdic_admin_editor_scripts_as_a_module' ], 10, 2 );
}
public function bwdic_admin_editor_scripts_as_a_module( $tag, $handle ) {
if ( 'bwdic_the_compare_editor' === $handle ) {
$tag = str_replace( '<script', '<script type="module"', $tag );
}
return $tag;
}
private function include_widgets_files() {
require_once( __DIR__ . '/widgets/bwdic-compare.php' );
}
public function bwdic_register_widgets() {
// Its is now safe to include Widgets files
$this->include_widgets_files();
// Register Widgets
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\BWDMEcompare() );
}
private function add_page_settings_controls() {
require_once( __DIR__ . '/page-settings/image-compare-manager.php' );
new Page_Settings();
}
// Register Category
function bwdic_add_elementor_widget_categories( $elements_manager ) {
$elements_manager->add_category(
'bwd-image-compare-category',
[
'title' => esc_html__( 'BWD Image Compare', 'bwd-image-compare' ),
'icon' => 'eicon-person',
]
);
}
public function bwdic_all_assets_for_the_public(){
wp_enqueue_script( 'bwdic_compare_the_main_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_main_css' => array('bwdic_path_define'=>BWDIC_ASFSK_ASSETS_PUBLIC_DIR_FILE . '/css/style.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_define'], null, '1.0', 'all');
}
}
public function bwdic_all_assets_for_elementor_editor_admin(){
wp_enqueue_script( 'bwdic_compare_the_main_js_admin', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_admin_icon_css' => array('bwdic_path_admin_define'=>BWDIC_ASFSK_ASSETS_ADMIN_DIR_FILE . '/icon.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_admin_define'], null, '1.0', 'all');
}
}
public function __construct() {
// For public assets
add_action('wp_enqueue_scripts', [$this, 'bwdic_all_assets_for_the_public']);
// For Elementor Editor
add_action('elementor/editor/before_enqueue_scripts', [$this, 'bwdic_all_assets_for_elementor_editor_admin']);
// Register Category
add_action( 'elementor/elements/categories_registered', [ $this, 'bwdic_add_elementor_widget_categories' ] );
// Register widgets
add_action( 'elementor/widgets/widgets_registered', [ $this, 'bwdic_register_widgets' ] );
// Register editor scripts
add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'bwdic_admin_editor_scripts' ] );
$this->add_page_settings_controls();
}`
does anyone know how to defer parsing for javascript files in functions.php??
This is what I have in my functions.php.
Thank you!
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
function my_enqueue_assets() {
wp_enqueue_style( 'extra-style', get_stylesheet_directory_uri() . '/css/extra.css' );
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/scripts.js' );
wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js' );
wp_enqueue_style( 'slicktheme', get_stylesheet_directory_uri() . '/slick-theme.css' );
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/slick.css' );
wp_enqueue_script( 'slick-jquery-min', get_template_directory_uri() . '/js/slick.min.js' );
wp_enqueue_script( 'extra-js', get_template_directory_uri() . '/js/script.js' );
}
Add this code in function.php file
This code add the defer attribute to your JavaScript files
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
I try to loading the .js files to my page by use wp_enqueue_script in functions.php file.
Its loading the .css files but not the .js
function s_scripts() {
wp_enqueue_style( 's-style', get_stylesheet_uri() );
wp_enqueue_style( 's-styles', get_template_directory_uri() . '/dist/styles/main-rtl.min.css');
wp_enqueue_style( 's-tmp_styles', get_template_directory_uri() . '/dist/styles/tmpstyle.css');
wp_enqueue_script( 's-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 's-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
wp_enqueue_script( 's-js', get_template_directory_uri() . '/dist/scripts/main.min.js', array(), time(), true );
wp_localize_script('s-js-ajax', 'ajax', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'current_obj' => get_queried_object()
));
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 's_scripts' );
You enqueue your scripts in the footer, check if wp_footer(); function exists in your theme.
Try to load scripts in header (remove true from last argument). It will attach script to wp_head()
Also check wp_localize_script documentation: https://developer.wordpress.org/reference/functions/wp_localize_script/
It should start something like wp_localize_script('s-js'
Ok so I am working on a website that has its own custom plugin. I wanted to get all the js files for this plugin to load into the footer as it was slowing the website down. I know how to get them to load into the footer but when I do this the js files seem to not be working anymore, even though I can see them in the footer when I inspect the page. Anybody know what could be causing this?
function enqueue_stairbuilder_js()
{
wp_register_script('simplemodal', plugins_url('js/jquery.simplemodal.1.4.4.min.js', __FILE__), array( 'jquery' ), "1.4.4", true);
wp_register_script('paper', plugins_url('js/paper.js', __FILE__), array( 'jquery' ),"1.0.1", true);
wp_register_script('prices', plugins_url('js/prices.js', __FILE__), array( 'jquery' ), "", true);
wp_register_script('popup', plugins_url('js/popup.js', __FILE__), array( 'jquery' ), "1.0.3", true);
wp_register_script('printelement', plugins_url('js/printElement.js', __FILE__), array( 'jquery' ), "1.0.3", true);
wp_register_script('stairbuilder', plugins_url('js/stairbuilder.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_register_script('drawing', plugins_url('js/drawing.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_register_script('deserialise', plugins_url('js/deserialise.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_enqueue_script('simplemodal');
wp_enqueue_script('paper');
wp_enqueue_script('prices');
wp_enqueue_script('popup');
wp_enqueue_script('printelement');
wp_enqueue_script('stairbuilder');
wp_enqueue_script('drawing');
wp_enqueue_script('deserialise');
}
add_action( 'wp_enqueue_scripts', 'enqueue_stairbuilder_js' );
here's the contents of my functions file incase I have done something wrong here which is causing this.
<?php
//custom gallery image size, cropped
add_image_size( 'gallery-thumb', 720, 720, true );
//removing toolbar on front end
function remove_toolbar(){
if ( is_blog_admin() ) {
return true;
}
remove_action( 'wp_head', '_admin_bar_bump_cb' );
return false;
}
add_filter( 'show_admin_bar', 'remove_toolbar' );
//replacing default jQuery with new version
function update_jQuery(){
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', '3.2.1');
}
add_action('wp_enqueue_scripts', 'update_jQuery');
//MY SCRIPTS
function my_script() {
wp_enqueue_script('custom_js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_script');
//BOOTSTRAP
function bootstrap(){
wp_register_script('bootstrap_js', get_template_directory_uri(). '/bootstrap/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
wp_enqueue_script('bootstrap_js');
wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', '3.3.7',true);
}
add_action( 'wp_enqueue_scripts', 'bootstrap');
function my_styles(){
wp_enqueue_style('theme_styles', get_template_directory_uri(). '/css/my_styles.css', true);
}
add_action('wp_enqueue_scripts', 'my_styles');
//magnific img popup
function magnific_popup(){
wp_register_script('magnific_js', get_template_directory_uri(). '/js/magnific_popup.js', array('jquery'), '', true);
wp_enqueue_style('magnific_css', get_template_directory_uri(). '/css/magnific_popup.css');
wp_enqueue_script('magnific_js');
}
add_action('wp_enqueue_scripts', 'magnific_popup');
/*NAV MENUS*/
function register_my_menus() {
register_nav_menus(array(
'head_nav' => __( 'Primary' ),
'foot_nav' => __( 'Secondary' ),
'side_bar_menu' => __( 'side_bar' )
) );
}
add_action( 'init', 'register_my_menus' );
//enqueuing default style sheet
wp_enqueue_style('default_style', get_stylesheet_uri());
require get_template_directory() . '/woo_hooks.php';
?>
Try it like this example:
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'xxx', 'https://cdnjs.cloudflare.com/ajax/libs/xxx/2.2.0/xxx.js', array('jquery'), 3.3, true);
wp_enqueue_script( 'xxy', 'https://cdnjs.cloudflare.com/ajax/libs/xxy/2.2.0/xxy.js', array('jquery'), 3.3, true);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Try to clear your cache. The codex also recommends 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:
So try this.
function enqueue_stairbuilder_js()
{
wp_register_script('simplemodal', plugins_url('js/jquery.simplemodal.1.4.4.min.js', dirname(__FILE__)), array( 'jquery' ), "1.4.4", true);
wp_register_script('paper', plugins_url('js/paper.js', dirname(__FILE__)), array( 'jquery' ),"1.0.1", true);
wp_register_script('prices', plugins_url('js/prices.js', dirname(__FILE__)), array( 'jquery' ), "", true);
wp_register_script('popup', plugins_url('js/popup.js', dirname(__FILE__)), array( 'jquery' ), "1.0.3", true);
wp_register_script('printelement', plugins_url('js/printElement.js', dirname(__FILE__)), array( 'jquery' ), "1.0.3", true);
wp_register_script('stairbuilder', plugins_url('js/stairbuilder.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_register_script('drawing', plugins_url('js/drawing.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_register_script('deserialise', plugins_url('js/deserialise.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_enqueue_script('simplemodal');
wp_enqueue_script('paper');
wp_enqueue_script('prices');
wp_enqueue_script('popup');
wp_enqueue_script('printelement');
wp_enqueue_script('stairbuilder');
wp_enqueue_script('drawing');
wp_enqueue_script('deserialise');
}
add_action( 'wp_enqueue_scripts', 'enqueue_stairbuilder_js' );