Cherry Framework and WordPress 5.5

This is going to be a bit of a geeky post for the usual readers of this site so feel free to skip if you want. I’m posting it here though as it maybe of use to people who are having issues with their WordPress based websites using the Cherry Framework.

The Cherry Framework, Cherry Plugin and Cherry Theme isn’t currently compatible with the latest version of WordPress which is Version 5.5. Therefore updating to v.5.5 of WordPress causes various issues.

The problems I was experiencing were:

  1. The tabs to change between ‘Visual’ and ‘Text’ editing modes within the WordPress editor no longer worked.
  2. The pop up to enter parameters for Shortcodes from the toolbar in the editor didn’t work
  3. Other jQuery errors.

These issues were the same on all websites using the Cherry Framework once WordPress was updated to version 5.5

Clearly the Cherry Framework, Cherry Themes and Cherry Plugin all need updating to make them compatible with WordPress 5.5. This hasn’t happened so far so I have been working on some fixes myself.

jQuery Deprecation Errors

The errors I was experiencing seemed to be caused by jQuery errors. The problem was that WordPress 5.5 was using a newer jQuery library in which various functions had been deprecated. The Cherry framework was however still using some of these deprecated functions and was therefore ‘breaking’ things.

Enable jQuery Migrate Helper Plugin

The first step was to install the Enable jQuery Migrate Helper plugin which serves as a temporary solution, enabling the migration script for your site while the Cherry plugin and theme authors update, and test, their code. (assuming they do).

Not only does this plugin allow your site to work with the deprecated functions in the plugins but it also show error messages in the admin console that allowed me to track down where exactly the issues were.

I was therefore able to go through the various javascript files in the Cherry Framework, Cherry Theme and Cherry Plugin and fix these errors by changing the deprecated functions to non-deprecated alternatives.

I’m sure I haven’t fixed all of them but here is what I’ve done so far which has fixed the issues I’ve come across so far. Hopefully it will help others in the same position fix their Cherry Framework based WordPress sites following the update to WordPress 5.5.

CHANGES I HAVE MADE TO MAKE CHERRY FRAMEWORK, CHERRY THEME AND CHERRY PLUGIN COMPATIBLE WITH WORDPRESS 5.5

Error 1

Error: jQuery.fn.live() is deprecated

Fix: Change .live() function to .on()

In file: wp-content/themes/CherryFramework/js/jquery.custom.admin.js

Find (line 5):

j.is(":checked")&&a.css("display","block");r.is(":checked")&&e.css("display","block");s.is(":checked")&&f.css("display","block");t.is(":checked")&&d.css("display","block");q.is(":checked")&&g.css("display","block");var b=jQuery("#page_template").val();"page-Portfolio2Cols-filterable.php"==b||"page-Portfolio3Cols-filterable.php"==b||"page-Portfolio4Cols-filterable.php"==b?jQuery("#tz-meta-box-category").show():jQuery("#tz-meta-box-category").hide();jQuery("#page_template").live("change",function(){b=

Replace with:

j.is(":checked")&&a.css("display","block");r.is(":checked")&&e.css("display","block");s.is(":checked")&&f.css("display","block");t.is(":checked")&&d.css("display","block");q.is(":checked")&&g.css("display","block");var b=jQuery("#page_template").val();"page-Portfolio2Cols-filterable.php"==b||"page-Portfolio3Cols-filterable.php"==b||"page-Portfolio4Cols-filterable.php"==b?jQuery("#tz-meta-box-category").show():jQuery("#tz-meta-box-category").hide();jQuery("#page_template”).on(“change",function(){b=

Find (line 6):

jQuery(this).val();"page-Portfolio2Cols-filterable.php"==b||"page-Portfolio3Cols-filterable.php"==b||"page-Portfolio4Cols-filterable.php"==b?jQuery("#tz-meta-box-category").show():jQuery("#tz-meta-box-category").hide()});jQuery("#framework-icon_type").live("change",function(){hide_options(jQuery(this).val(),jQuery(this))});hide_options=function(c,b){var d=c.toLocaleLowerCase().replace(" ","_"),a=b.parents("#options-table");"images"==d?(jQuery(".tupe_font_icon",a).parents("tr").css({display:"none"}),

Replace with

jQuery(this).val();"page-Portfolio2Cols-filterable.php"==b||"page-Portfolio3Cols-filterable.php"==b||"page-Portfolio4Cols-filterable.php"==b?jQuery("#tz-meta-box-category").show():jQuery("#tz-meta-box-category").hide()});jQuery("#framework-icon_type”).on(“change",function(){hide_options(jQuery(this).val(),jQuery(this))});hide_options=function(c,b){var d=c.toLocaleLowerCase().replace(" ","_"),a=b.parents("#options-table");"images"==d?(jQuery(".tupe_font_icon",a).parents("tr").css({display:"none"}),

Error 2

Error: jQuery.fn.attr(‘checked’) might use property instead of attribute

Fix: Change .attr() to .prop()

In file: wp-content/themes/CherryFramework/admin/js/options-custom.js

Find (line 3):

"checked" == a("#slider_type_camera_slider").attr("checked") ? (a(".slider_type_1").css({display: "block"}), a(".slider_type_2").css({display: "none"})) : "checked" == a("#slider_type_accordion_slider").attr("checked") ? (a(".slider_type_1").css({display: "none"}), a(".slider_type_2").css({display: "block"})) : "checked" == a("#slider_type_none_slider").attr("checked") && (a(".slider_type_1").css({display: "none"}), a(".slider_type_2").css({display: "none"}))

Replace with:

"checked" == a("#slider_type_camera_slider").prop("checked") ? (a(".slider_type_1").css({display: "block"}), a(".slider_type_2").css({display: "none"})) : "checked" == a("#slider_type_accordion_slider").prop("checked") ? (a(".slider_type_1").css({display: "none"}), a(".slider_type_2").css({display: "block"})) : "checked" == a("#slider_type_none_slider").prop("checked") && (a(".slider_type_1").css({display: "none"}), a(".slider_type_2").css({display: "none"}))

Error 3

Error:  jQuery.fn.load() is deprecated

Fix: change .load() to .on(load)

In file: wp-content/themes/CherryFramework/includes/tm-chat/assets/js/public.js

Find (line 3):

$(window).load(function(){

Replace with:

$(window).on('load', function(){

Error 4

Error: jQuery.fn.live() is deprecated

Fix: Change .live() to .on

In file: wp-content/plugins/cherry-lugin/admin/js/upload-media-files.js

Find (line 2):

jQuery('.upload_image_button').live('click', function () {

Replace with:

jQuery('.upload_image_button').on('click', function () {

Error 5

Error: jQuery.fn.live() is deprecated

Fix: Change .live() to .on

In file: wp-content/themes/CherryFramework/includes/theme-teammeta.php

Find (line 208):

jQuery('.delete_network').live('click', function(){

Replace with:

jQuery('.delete_network').on('click', function(){

Error 6

Error: jQuery.fn.live() is deprecated

Fix: Change .live() to .on

In file: wp-content/themes/CherryFramework/js/camera.min.js

Find (4 instances of):

.live(

Replace with:

.on(

Hopefully the developers will release an update to the Cherry Plugin, the Cherry Framework and the various themes that use them to fix these issues but in the meantime this should resolve the errors. If you find any others then let me know in the comments and I’ll add them to the article.

6 Responses

  1. Rob says:

    Many thanks for taking the time and effort to share this Alan.

    Worked a treat for me!

  2. Developer says:

    Hi, but after making all these changes Woocommerce admin tabs are not working. The general, inventory and others.
    Thanks

    • Alan Cole says:

      I don’t have the WooCommerce plugin installed so I’m not sure what is going on there. I would imagine that WooCommerce itself has been updated to work with the latest version of WordPress and the latest jQuery library though. Maybe there are some WooCommerce related files within the Cherry Plugin / Theme that need updating?

      Al.

  3. Tisch says:

    Hi Alan,

    great work! Helped me a lot!

  4. Alex says:

    Thanks Alan for you making this effort to help us.

    I tried to find file: wp-content/themes/CherryFramework/js/jquery.custom.admin.js, but the file structure did not follow this path.

    Any ideas?

    Thanks again 🙂 Alex

    • Alan Cole says:

      Hi Alex,
      That’s odd, I’ve just double checked the filepath and it’s correct in my installation. Maybe you just don’t have that file? If you aren’t getting warnings about deprecated jQuery in such a file then I wouldn’t worry about it too much.

      Alan

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Alan Cole

Alan is a Freelance Website Designer, Sports & Exercise Science Lab Technician and full time Dad & husband with far too many hobbies: Triathlete, Swimming, Cycling, Running, MTBing, Surfing, Windsurfing, SUPing, Gardening, Photography.... The list goes on.