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:
- The tabs to change between ‘Visual’ and ‘Text’ editing modes within the WordPress editor no longer worked.
- The pop up to enter parameters for Shortcodes from the toolbar in the editor didn’t work
- 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-plugin/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.
11 Responses
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Many thanks for taking the time and effort to share this Alan.
Worked a treat for me!
Hi, but after making all these changes Woocommerce admin tabs are not working. The general, inventory and others.
Thanks
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.
Hi Alan,
great work! Helped me a lot!
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
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
You sir are an absolute hero!
I have a client site which has been given a new lease of life thanks to your help.
Thank you
Glad to be of assistance. Let’s hope the planned update to WP 5.6 tomorrow doesn’t cause further issues. I think the fact that it adds PHP 8 support and updates the jQuery libraries means that it will cause a number of issues, especially for plugins / frameworks such as Cherry 3 which won’t be updated. No doubt tomorrow will be a long day of testing on development servers for me!!
It seems to be working with WordPress 5.6 for me as well which is good – fingers crossed anyway as I don’t want to jinx anything. Shame the same can’t be said for the Unyson Page Builder that I use on one of my clients sites! (I haven’t managed to fix the issues with that yet!)
Al.
Thanks, it helped to update a very old install. Two minor issues in your post:
Error 1: “Replace with” contains curly quotes.
Error 4: cherry-lugin -> cherry-plugin in path
Glad it helped – I’ll fix the typos. 🙂
Al.