wordpress

Image field doesn’t work in WPBakery Page Builder Param Group

There is an known issue with WPBakery Page Builder plugin which make the Image field doesn’t work in Param Group. This issue is reported by my client when he can’t delete the image in duplicated Param Group item.

Finding the reason

I recorded the steps how to re-produce the issue here

Vc Param Group Image Before
Issue with Image field in WPBakery Page Builder Param Group after duplicating items

Spending some times to finding the reason, I found that with the items loaded on the same time with element, there are some events assigned to this image field. These events don’t work with the duplicate items, so these items will miss the click / remove behavior.

Solution

Luckily, WPBakery Page Builder plugin allow us to insert the admin JS file and provide the event detected after an param group item is added. By that way, I can add extra JS file to the param group element and re-trigger the missing events for duplicated items in param group.

This is the code how we can enqueue admin JS file with specific function for WPBakery Page Builder custom element:

vc_map(array(
	"name"        => __("Sample Element", "[textdomain]"),
	"base"        => "dc_sample_element",
	"description" => "",
	'admin_enqueue_js' => array(THEME_URL . '/assets/js/plugin-js_composer.js'),
	"params"      => array(
		array(
			'type'       => 'param_group',
			'value'      => '',
			"heading"    => __("Group", "[textdomain]"),
			'param_name' => 'group',
			'params'     => array(
				array(
					'type'        => 'attach_image',
					'heading'     => __('Image', '[textdomain]'),
					'param_name'  => 'image',
					'admin_label' => true,
				),
			),
			'callbacks'  => array(
				'after_add' => 'VCAddImageGroup'
			)
		)
	)
));

And then, in our custom plugin-js_composer.js file, we can add the code to trigger the missing events for Image field in Param Group:

function VCAddImageGroup(){
    jQuery(".gallery_widget_attached_images_list", this.$view).off("click.removeImage").on("click.removeImage", "a.vc_icon-remove", function($block){
        $block.preventDefault();
        $block = jQuery(this).closest(".edit_form_line");
        jQuery(this).parent().remove();
        var img_ids = [];
        $block.find(".added img").each(function(){
            img_ids.push(jQuery(this).attr("rel"))
        });
        $block.find(".gallery_widget_attached_images_ids").val(img_ids.join(",")).trigger("change");
    });
    jQuery(".gallery_widget_attached_images_list").each(function(index){
        var $img_ul = jQuery(this);
        $img_ul.sortable({
            forcePlaceholderSize: !0,
            placeholder: "widgets-placeholder-gallery",
            cursor: "move",
            items: "li",
            update: function(){
                var img_ids = [];
                jQuery(this).find(".added img").each(function(){
                    img_ids.push(jQuery(this).attr("rel"))
                });
                $img_ul.closest(".edit_form_line").find(".gallery_widget_attached_images_ids").val(img_ids.join(",")).trigger("change");
            }
        })
    });
}

This is the JS code I copied and customized from the core WPBakery Page Builder when comparing the 2 items in param group.

The final result is

Vc Param Group Image Fixed
Fixed Issue with Image field in WPBakery Page Builder Param Group after duplicating items

Woocommerce shop page empty with the result count 1 product randomly

Last week, my customers report a weird bug that the Shop page of Woocommerce is blank / empty. It appeared randomly, and it’s fixed when I re-save the permalink.

When researching some related issue, I found that on WPML forum (because the site I’m working with has WPML also), there are some users reported about this bug. According to this guy, the bug is fixed when he disabled the Yoast SEO plugin. I tried and it works, but the main point is I can’t deactivate Yoast SEO since it’s related to my theme breadcrumbs and other SEO settings, so the journey began here.

I’ve worked with many Woocommerce sites and this is the first site has the weird bug like this. I tried to compare all the different things between this site and the others.

I didn’t remember why I’ve setup the permalink for this site is different from the others, but it’s the key settings that cause this bug.

I used the same slug for both Shop page and product detail page, because in Vietnamese, “products” and “product” has the same slug “san-pham” (there is no differences between the singular and plural noun). That’s why shop page only displayed 1 product in the result count, it’s for the product detail query.

After updating the shop page slug, this issue is fixed (I’ve kept checking this issue for some days to make sure that it’s fixed). The most important lesson I’ve learnt is “Don’t use the same slug for shop page and product detail“.

Override wp_localize_script from Gravity Forms function

Looking at the code of Gravity Forms, I found that for some scripts, it uses wp_localize_script function to add their own definitions inline page source. The question I asked myself is is it possible for me to override their code, and how can I override their code without editing plugin source? Let’s see 👀 ~~

I get used to override the scripts from Gravity Forms by gform_enqueue_scripts, it’s their own hook to add the assets to our site. For example, in my case, I need to override the variable spinnerUrl in gf_global, I can begin by adding some extra code in this hook.

When researching, there is no options from WordPress to do something like de-localize the scripts (just like we have wp_dequeue_script), so I’m thinking to adding the same variable after the scripts localize. There will be 2 variables displayed so the scripts will get the latest variable.

That’s my example code to override the Spinner URL from Gravity Forms by wp_localize_script, there is another way simpler by using PHP but it’s my first try to use wp_localize_script ⚗️.

Customize WordPress Database Error Page

When doing some research for the new version of my Fiber Admin WordPress plugin, I found that in the core code of WordPress, they allow us to override the default Database Error Page. It will tell the whole world that you’re using WordPress and your website is having some problems with the database connection 👎.

Default WordPress Database Error Message

Luckily, WordPress has feature to allow us customize this default page. Let’s give it a try!

Follow the instruction I found with CSS Tricks here. I found that we can customize the DB Error page by a file called db-error.php in wp-content. But why this file?

In wp-includes/functions.php, WordPress has a function called dead_db which you can see they will allow us to load custom template for the Database Error Page, the custom template will be named with wp-content/db-error.php.

WordPress function dead_db

With db-error.php, we can add inline CSS and customize the content of this page so it will look different from the default DB Error Page which is applied to all the other WordPress pages.

Some tips I found:

  • You may want to put your logo image on this page so the users will know exactly which error message is belong to.
  • Make sure to include the error code like 503 on this page. It’s for DB error message, so the error code should be 503. It will help you know exactly what happened with your site.
  • Some security plugins can prevent displaying the db-error.php file. For example, Sucuri Hardening option can prevent this custom file display because they harden all the PHP files inside wp-content folder. You may need to add extra rules to exclude the db-error.php file.

Add plugin requirements to WordPress theme without breaking the site

After deciding to separate framework into a plugin for inhouse dev, I need to implement the feature to force my theme require framework plugin installed and activated. Since I use many helper functions in Framework, so the theme need Framework plugin to run without any issues.

It’s the solution how I can make my theme requires Framework plugin. I don’t think it’s the best solution but it works in my case (may be I will update the better solution in the future).

What I need will be:

  • Show notice in admin if the Framework plugin is not activated.
  • Make plugin requirement without any issues if the plugin haven’t been installed yet.

This is the final code I added to the very first line of my theme functions:

It will stop functions.php at the line checking for plugin active, so the theme doesn’t run the other code (with unknown Framework helper functions) and doesn’t break the site also.