How to Refactor Your Outdated WordPress Code With AI

Websites don’t age gracefully. Left unattended, they inevitably fall behind the latest best practices and technologies. We especially see the impact on sites built with WordPress.

It’s not that the content management system (CMS) is unstable – quite the opposite. It’s just that the software has been in existence for over 20 years. Thus, you’ll find old WordPress sites all over the interwebs.

Custom code is a common culprit. That snippet you wrote a few years ago may not work so well these days. It could be incompatible with the latest version of PHP, hinder performance, or contain security flaws. You might also be reliant on outdated JavaScript libraries or CSS techniques.

Part of bringing your site up to modern standards means refactoring outdated code. That can be a tough task, but you don’t have to do it alone. You can use AI tools to help identify and fix issues.

We’ll show you how AI can bring new life to old code. The result is a website that stays current and is better equipped for the future.

What AI Can and Can’t Do for Your Code

First, let’s set some reasonable expectations for refactoring code with AI. These tools can be helpful, but don’t expect miracles.

Consider the types of issues and the amount of code you share. For example, uploading an entire theme and asking AI to fix every error it detects won’t go very well. The large language models (LLMs) we’ve used lack context and can’t “think” in terms of a whole application. Remember, it doesn’t have the rational logic of a human programmer.

Instead, focus on a code snippet or a single file within a theme or plugin. A one-at-a-time approach usually yields the best results.

Also, be sure to provide as much information as possible in your prompts. Spell out your goals and any errors you’re experiencing in plain language. The more details you share, the more likely AI will be able to help.

It’s also worth noting that AI may not be up to date on the latest versions of WordPress, PHP, or other items. That great new technology that came out today won’t yet be included in the model. Keep that in mind when asking for help.

The right tool makes refactoring code easier. However, you’ll have more success treating it as a trusty sidekick rather than a superhero.

Improve Your Code’s PHP Compatibility

PHP versions are only supported for a limited time. Web hosts have also been known to abandon support for outdated code. Thus, a site built in the days of PHP 7.4 may not be compatible with 8.x or your web server. That could mean a broken feature or a site that refuses to load.

You can debug your site via a local WordPress install or a staging environment. Be sure to turn on WordPress debugging and track PHP errors. The error messages should provide clues to where the offending code resides.

Then, take these errors to your favorite AI tool and, one by one, try to resolve them.

We produced the above error when running an old theme in PHP 8.2. To solve it, we asked ChatGPT for help:

Our ChatGPT Prompt:

The following PHP snippet produces an error in PHP 8.2: "Fatal error: Uncaught Error: Call to undefined function create_function()"

Please make it compatible with PHP 8.2.

Our PHP Code:

add_filter( 'wp_title_rss', create_function( '$a', 'return  "";' ) );

ChatGPTs Response:

The create_function() function was deprecated in PHP 7.2 and removed in PHP 8.0, which is why you're seeing this fatal error in PHP 8.2.

To make the code compatible with PHP 8.2, you should replace create_function() with an anonymous function using the modern closure syntax. Here's the updated version:

ChatGPT’s Code Output:

add_filter( 'wp_title_rss', function( $a ) {
  return '';
  } );

We edited our snippet to use the suggested code, and the error was fixed.

Modernize Your JavaScript

Does your legacy site suffer from old and bloated JavaScript? AI may have the perfect antidote.

Scripts written five or more years ago are likely dependent on an old-school library. You might, for example, remember all the glory that was script.aculo.us. A recent query shows it hasn’t been updated since 2010. Yikes!

WordPress bundles jQuery, which is still maintained. That doesn’t mean your custom scripts are using the latest code, though.

Even if an old script works, there are likely more efficient and secure options available. It might hinder performance or make it easier for a hacker to exploit your site.

AI can help you refactor your scripts to use newer libraries. You might also consider switching to vanilla JavaScript, which is more powerful than ever.

In this example, we asked ChatGPT to convert a jQuery script to vanilla JS. The script adds or removes a CSS class depending on a user action.

Our ChatGPT Prompt:

Please convert this jQuery script to use vanilla JavaScript instead:

Our jQuery Code:

jQuery(document).ready(function() {

 jQuery("#sticky-sidebar").addClass(localStorage.getItem('savestickysidebar')) ;

  jQuery('#sticky-sidebar-toggle').on('click', function() {
    jQuery('#sticky-sidebar').toggleClass('hidden');
    
    if(jQuery('#sticky-sidebar').hasClass('hidden')){
            localStorage.setItem('savestickysidebar', 'hidden');
        }
        else{
            localStorage.removeItem('savestickysidebar');
        }
  });
        
  });

ChatGPT heeded our call for an independent script.

ChatGPTs Response:

Here is the vanilla JavaScript equivalent of your corrected jQuery code:

ChatGPT’s JavaScript Output:

document.addEventListener('DOMContentLoaded', function() {
  var sidebar =  document.getElementById('sticky-sidebar');
  var savedClass =  localStorage.getItem('savestickysidebar');
  if (savedClass) {
  sidebar.classList.add(savedClass);
  }
  var toggleButton =  document.getElementById('sticky-sidebar-toggle');
  toggleButton.addEventListener('click', function() {
  sidebar.classList.toggle('hidden');
    if  (sidebar.classList.contains('hidden')) {
  localStorage.setItem('savestickysidebar', 'hidden');
  } else {
  localStorage.removeItem('savestickysidebar');
  }
  });
  });

Converting this script gives us one less jQuery dependency to worry about. AI made the process that much easier.

Give Old Code a New Lease on Life

Refactoring your WordPress site’s code is part of a good maintenance routine. It keeps your site safe, performant, and functional.

In days past, these tasks could be painfully difficult. You had to research, test, and write a fix. PHP and console errors were helpful, but manual labor was still required. You might spend days or weeks obsessing over a piece of unruly code.

AI tools have the potential to shorten the entire process. They can often tell you what’s wrong and how to fix it. Even if their first answer doesn’t get you 100% of the way there, they usually point you in the right direction.

So, don’t be afraid to dig into that old code. A few prompts might be all you need to give it a fresh coat of paint.

The post How to Refactor Your Outdated WordPress Code With AI appeared first on Speckyboy Design Magazine.

Source: Read More