That has led some seasoned (and not-so-seasoned) developers to go for the ultimate prize: replicating their favorite SaaS product. I admit to falling under the spell of such temptation.

It’s easy to see the potential benefits. SaaS subscriptions can be expensive, and the products may be more than what we need. Plus, there are always niche features that seem to be missing. Oh, and many are proprietary, raising data ownership concerns. Why not use AI to vibe code your own spinoff?

Can it really be that simple? Type a few prompts, and get a high-level tool to replace an enterprise app? As usual, it’s complicated.

Let’s take a hard look at the good, the bad, and the ugly of using AI to build a SaaS replica.

Taking Software Into Your Own Hands

My journey building a SaaS replica with AI began as I stood at a crossroads of sorts. I’m a longtime user of QuickBooks Desktop, which has served my accounting needs well over the years. However, the product I use was discontinued and moved online. Moving meant going from buying a license every few years to a monthly fee. I’m not keen on yet another subscription.

The desktop app is also starting to show its age. Some features are broken, and the interface is behind the times. Not to mention it’s a memory hog on my PC. This all coincides with some upcoming changes to my business that require a different approach.

So, I decided to take the plunge and build my own billing/customer relationship management (CRM) app as a WordPress plugin. I wanted something portable that would allow me (or others) to add features as needed. WordPress was the perfect fit.

The decision seemed like a no-brainer. I could use my existing skills to guide AI in the right direction. And I could leave out the things that weren’t necessary. I hoped to build a lean, functional plugin that streamlined my billing process.

This would also free me from the proprietary trap so many SaaS providers lock us into. I wouldn’t have to worry about higher rates, product limitations, or waiting for support tickets to be answered. Yes, this was exactly what I needed!

The only question was: Can I really build a suitable replacement?

The Challenge Is in the Details

The project started with a bang, as I used Claude to build a working prototype within an hour. Sure, there were some rough edges to be smoothed over. But the basic concept was coming together. Then, a bit of reality set in.

One of my goals was to create a tool that was close enough to what I’m accustomed to. The idea wasn’t to rebuild QuickBooks line by line, feature by feature. But I wanted something that provided a seamless transition.

My prototype allowed me to add customers, services, and invoices. I even built some import tools to bring my real-world data into the system. But I didn’t realize how many little details were missing until I used the plugin.

For example, I needed a way to share invoices with my clients. I also needed to distinguish between hourly-based and project-based services. Other needs seemed to pop up every few minutes:

• Custom reports for my business and individual customers.
• A way to email invoices to multiple contacts at the same company.
• A log to remind me whom I sent invoices to and when.
• Navigation to and from different areas of the plugin.
• User permissions for scenarios where you want to provide CRM access to a non-administrator.
• A front-end version of each relevant screen.

This was a different experience for someone who hadn’t taken a product from start to finish before. It felt more like being a product designer than a developer. That requires a different type of thinking.

AI proved capable of writing the code. However, I found myself having to provide extra context along the way. There was a lot of trial and error, and each new feature opened another set of decisions and potential.

There’s also danger in adding too many features. I didn’t want a bloated plugin that was difficult to use. As such, I had to practice restraint when considering my options.

It was a positive learning experience, for sure. But it also made me realize how much is involved in building a plugin that does more than merely function. Good things do indeed take time.

Questions To Ask Before You Build

The temptation to dive right in and generate code for the next HubSpot or Asana is understandable. AI makes relatively short work of complex coding tasks. These models can also advise you on how to replicate specific features.

It’s worth taking a step back and asking yourself a few key questions first, though. The answers will help you navigate the project or save you from making a massive mistake.

Are You Serious or Curious?

First, determine why you want to build this amazing new thing that’s based on an existing thing. Experimental side projects can be fun and a great way to learn. However, it’s different than a serious bid to create software that your entire company will use.

The former encourages you to be patient and test your ideas. The latter is often a mandate to increase efficiency while saving money. There’s an entirely different level of pressure in that scenario. You’ll also need to dedicate more resources toward the project.

It’s not necessarily a deal breaker either way, but a consideration nonetheless.

Do You Need Third-Party Integrations?

Integrating with other tools and services is a SaaS superpower. For example, adding Stripe to your CRM enables online payments, while Mailchimp adds email capabilities. AI tools can help you connect the various APIs out there.

The downside is the responsibility that comes with these integrations. APIs frequently change, and you need to stay ahead of them. Failing to keep up could lead to software that doesn’t work. Plus, there are security and privacy risks.

Remember: Once you build it, you’re responsible for it.

Do You Need Your App To Scale?

SaaS applications often require a robust infrastructure. That’s why AI companies are building data centers everywhere. This could be a concern if you’re expecting a stampede of users and use cases.

Smaller, more focused apps like my CRM plugin aren’t as big of a problem. A few users on a WordPress site won’t require a ton of memory or CPU cycles. But the calculus changes as your needs grow.

This is where a fun little project can turn into something more complex. That app you just vibe coded could turn you into a systems engineer. There’s also a cost to server space and other necessities. Are you prepared to go that far?

You Can Replicate a SaaS With AI, but Should You?

Using AI to generate code opens up a world of possibilities – and it’s only getting more powerful. New models continue to evolve to help us get things done faster. That leads to bigger and bolder ideas on our part.

Even so, it’s a good idea to think about the long-term consequences of what you build. It may be fun to try and replicate Gmail, but do you really want the responsibilities that go with it?

That may be an extreme example, but the theory also applies to smaller projects. The reality is that the best SaaS products are popular for a reason. They scale, have dedicated security teams, and professional product designers working to improve every aspect. Even the best AI models can’t match that quite yet.

So, have fun and experiment! Just know what you’re getting into before you begin.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Can You Really Replicate Your Favorite SaaS With AI? appeared first on The NOKIA Blog.

This applies to our workflow just as much as it does to other parts of our business. The way we build websites must align with modern best practices. The good news is that you don’t have to scrap your tried-and-true processes. Rather, it’s about adjusting to your project’s needs.

Your workflow should reflect the tasks you perform and the technologies you work with. It should also improve your productivity. For example, writing code by hand was once a common practice. However, it’s no longer realistic when tackling large website builds with custom functionality. There are tools and frameworks to help you increase your efficiency.

Everyone’s workflow is different, so there’s no one-size-fits-all approach. There are some universal methods for identifying bottlenecks and making improvements, however.

With that in mind, here are our tips for streamlining your web development workflow.

Use Tools With the Integrations You Need

Modern web development often means using multiple third-party tools and services. We connect to social media APIs, track projects in productivity apps, and manage remote data sources.

For instance, we don’t just write code in an editor these days. We may first generate it via an AI model like Claude. Such code might be pushed to a remote Git repository.

Wrangling these different tools and sources manually isn’t easy. It could mean logging into multiple websites or downloading a collection of apps. There must be an easier way, right?

That’s why tools with built-in integrations are so valuable. VS Code is a prime example, as it can interface with your repositories and use AI for inline code editing. Everything you need is within a singular interface.

If you’re stuck working in multiple places, look for tools that bring them together. There will be a learning curve, and you’ll need to invest time setting things up. However, you’ll save time in the long run.

Be Consistent in How You Build Projects

There are so many tools and services available to developers. It may be tempting to dabble in several of them and experiment. For example, perhaps you want to try a different content management system (CMS) for a project. Or you may look for a WooCommerce alternative on your next e-commerce site.

Curiosity is a positive thing, but it can also wreak havoc on your workflow. These issues often creep up during the maintenance phase. What happens when something breaks, or you need to build a new feature? What if your chosen tool no longer exists? You may be left scrambling to find a solution.

Consistency is one way to prevent this type of scenario. Repeated use of plugins, themes, and hosting platforms creates familiarity. You’ll have a better understanding of how things work. That knowledge will serve you well when troubleshooting or making changes.

This approach also benefits your business. The expertise you gain can turn into a niche. From there, you’ll have the skills to replicate these processes for your clients. Plus, becoming an authority in a specific area has great value.

None of this means you shouldn’t try new things. But it’s better to conduct those experiments in low-stakes situations, like a local website. Learn as much as you can before using a tool or technology in a production environment.

Think About How You Work

The above ideas aren’t groundbreaking: Use better tools and create repeatable processes. They’re simple ways to level up.

However, pain points in your workflow aren’t always easy to identify. Sometimes, you might not realize how certain tasks or tools impact you. That’s when a decidedly low-tech approach can help.

Take a moment and think about how you work. List the tools you use and the steps you take to get things done, like launching a new site or updating software. Write it down on a piece of paper if you want go fully retro!

Merely seeing these items in front of you can help you identify what’s working and what’s not. For instance, you might notice an unnecessary step or a tool that has fallen behind the times. You might be surprised at what you find.

A better option may immediately come to mind. If not, at least you’ll know where to make changes. That’s the first step toward improvement.

Use Your Workflow To Work Smarter

It’s easy for developers to become overwhelmed with tasks. It’s especially relevant in a time when websites are more complex than ever.

As such, we need every advantage we can find. Our workflow provides a great starting point. We can improve it by removing inefficiencies and adopting tools that save us time. Things like automation, AI, and third-party integrations can help. Rethinking your strategies and processes also makes a positive impact.

Our work is often difficult, but a better workflow can simplify it and make life easier. Even better, these solutions are within our reach.

So, what are you waiting for? Invest a little time now to streamline your workflow and save a lot of time later.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Tips for Streamlining Your Web Development Workflow appeared first on The NOKIA Blog.

Plugins aren’t just here to serve those groups, however. There are also products designed specifically for web developers. These expert-only items enable us to troubleshoot issues, measure performance, monitor site functionality, and more.

Some utilities are even meant to be installed temporarily. Use them and then lose them. All the better to keep a curious client from wreaking havoc!

With that in mind, let’s look at a handful of WordPress plugins that cater to developers. You might find a few that fit your workflow.

This official WordPress plugin belongs in every developer’s toolbox. It’s a debugging tool that makes troubleshooting potential plugin and theme conflicts easier to diagnose. You can “virtually” deactivate items within your user session to identify which one is causing an issue.

Importantly, visitors to your website won’t be impacted by your tests. You’ll also find a plethora of debug data and confirmation that WordPress core files haven’t been tampered with. When things go wrong, reach for Health Check.

Does your website have performance issues? Is it riddled with PHP or JavaScript errors? Query Monitor will help you pinpoint the source of a myriad of problems. The plugin logs errors and keeps track of everything that happens during a page load on the front and back ends of your website.

You’ll also find handy details such as the current theme template, user capability info, and server environment settings. There is also a selection of add-ons for extending Query Monitor’s functionality.

Raise your hand if you’ve ever accidentally triggered a user email when working on a website. It’s a common issue when troubleshooting or building new features. Activate Disable Emails, and you won’t have to worry about that WooCommerce invoice or password reset being sent.

It’s also a perfect companion when working on a local or staging environment.

Your site’s theme, plugins, and custom code snippets all impact performance. But how much? Code Profiler provides a visual overview of load times, disk usage, and more. The colorful (and exportable) charts make it easy to identify what’s slowing down your site.

The plugin also works with WP-CLI and accommodates custom cookies/HTTP headers.

WordPress relies on cron tasks for functionality like sending emails and detecting software updates. In some cases, a failed task can lead to problems – particularly for e-commerce and membership sites.

Advanced Cron Manager allows you to view registered tasks, modify their schedules, and add new tasks to the list. The plugin helps you take control of an otherwise invisible process.

Let’s face it: email is unreliable. That said, we still count on it for receiving form submissions and e-commerce orders. Email Log provides peace of mind by tracking every email WordPress sends. It also serves as the first step in troubleshooting email delivery issues.

Plugins To Help You Build and Troubleshoot Faster

Developers have no shortage of responsibilities. We not only build websites with WordPress, but we also maintain and troubleshoot them. The right tools are essential for our efficiency and sanity.

The plugins on this list help us do just that. They provide useful data, allow fine-grained control over site processes, and alert us to potential problems. Even better is that we can install them with just a few clicks.

So, don’t go it alone when working with WordPress. Use the tools above to give you an edge – you’ll be glad to have them in your toolbox.

–>

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post The 6 Best Developer Friendly WordPress Plugins for Performance & Diagnostics appeared first on The NOKIA Blog.

For years, some developers opted to build custom themes from (or near) scratch. Whether starting from a blank screen or a starter framework like Underscores (rest in peace), the goal is to craft a theme that suits your project.

This approach predates the Block Editor, which was introduced way back in WordPress 5.0. It was a time when developers used plugins like Advanced Custom Fields to create a custom page-building experience. There was also a need to hard-code complex layouts within the theme’s template system.

In short, it was often the best way to create a custom website that was also client-proof. However, WordPress and its theme ecosystem have evolved. Custom layouts can be built with a default installation, and block themes allow for greater design flexibility.

That leads to the question: Do from-scratch WordPress themes still make sense in modern times? Let’s explore their role (or not) in the theme development landscape.

Mixing WordPress Blocks & Templates

Traditionally, a from-scratch theme is also a “classic” theme. They use PHP templates and the old-school WordPress Customizer interface.

This path offers developers more control behind the scenes. We can build features that serve a narrow use case and better protect against breakage. It has often been used to customize the content area of pages with layouts that weren’t easily replicated inside WordPress – without using a page builder, at least.

The Classic Editor’s limitations sometimes made this approach a necessity. Adding modern block-based layouts to the mix changes things, however.

Classic themes can use blocks within pages and posts. Plus, modern conveniences like the Query Loop block enable functionality that was previously difficult to achieve without writing code. And we can’t forget about the many custom block plugins on the market. They offer advanced design and dynamic data options.

Blocks can also be locked within the editor, which prevents a mischievous client from doing too much damage. So, there goes the client-proofing argument.

This limits what can be accomplished with PHP theme templates. It’s still possible to embed a layout via hard-coding or using a block template part. However, that doesn’t seem as practical.

Blocks can usually do the job without the need for additional PHP, HTML, or CSS. It feels like one less reason to use a from-scratch theme.

Building From Scratch Goes Deeper Than Design

OK, perhaps any design advantages of from-scratch themes have evaporated. There are still some potential gains to be had.

The third-party theme market continues to struggle with bloatware. Classic themes aiming to be everything to everyone aren’t always the best option. Some offer poor performance and accessibility. You are also ceding control of dependencies and security.

This is where a custom theme shines. You can create a purpose-driven product that addresses a specific need. There are numerous benefits to this approach.

The use of JavaScript is a prime example. Going custom means not having to load scripts you don’t need. Scripts can be optimized to avoid performance hits. Plus, you won’t have to wait for a theme author to update those dependencies.

There is also something to be said about version control. Third-party themes can release updates at any time. That can clash with the needs of large enterprise projects. A new feature could cause unexpected issues. A custom theme allows developers to avoid this risk and add features as needed.

Theme settings and customization are another area where building from scratch has an advantage. You can develop settings to suit any need and limit what users can do. Third-party themes may offer too much access. Maybe client-proofing is still a thing, after all?

When To Go Custom

Despite the rise of block-based websites, there are still reasons to start from scratch. So, when should you consider going this route?

Maybe the use cases are narrower these days. But custom themes are helpful when you have a strict set of parameters to work within, such as:

• You need version control of the theme’s styles and features;
• Some items need to be hard-coded into a template;
• You want custom settings not included with a third-party theme;
• You need tight theme integration with plugins like WooCommerce;
• There are strict accessibility requirements;

These are all reasons to forego the theme ecosystem and build it yourself. You’ll have a result that, for better or worse, a commercial product can’t match. Why? Because it’s tailored to your project’s needs. You don’t have to settle.

This does put the onus on you to test and maintain the theme, however. It includes updating dependencies and ensuring compatibility with the latest version of PHP. There are also security considerations. So, think carefully about what’s best for you and your project.

The bottom line is that, even with changes in WordPress theme development, going custom is still a viable option. That is, as long as you’re doing it for the right reasons.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Do Built-From-Scratch WordPress Themes Still Make Sense? appeared first on The NOKIA Blog.

WordPress aficionados have jumped on the bandwagon. We use AI to generate new custom plugins and refactor existing ones. It’s hard to beat the efficiency these tools have added to our workflow.

Once you have a plugin, it’s just a matter of adding this shiny new thing to your website. Activate it and see what happens…

Not so fast!

We don’t want to rain on your AI sparkle parade. However, your vibe plugin shouldn’t be considered a finished product. Rather, it’s a start.

The code may work, but that doesn’t mean it’s ready for a production environment. It’s worth taking the time to audit your plugin to ensure its safety and stability.

With that in mind, here are some tips for testing your AI-generated WordPress plugin.

Use a WordPress Testing Environment

There are always risks associated with installing a new plugin, regardless of how it was built. A buggy piece of code could cause errors or crash your website. Meanwhile, security flaws can be exploited by hackers. And you never know if a plugin will work as expected.

That’s all the more reason to use a testing or staging environment. It’s a separate space where you can test your plugin without fear of breaking anything. Your web host may offer this feature, but you can also build a local WordPress installation.

Either way, the environment should match your production site as closely as possible. For example, it should run the same operating system and PHP version. Any special security settings should also be applied. Finally, enable WordPress debugging to help you find any errors.

This configuration also allows you to troubleshoot issues in a lower stress setting. You won’t have to worry about the impact on visitors, not to mention the site’s data.

Test All the Things With Plugin Check

There’s an easy way to test your AI-generated plugin against WordPress best practices. Plugin Check is an official tool that analyzes plugin security, performance, and internationalization.

The WordPress Plugins team uses it to test plugins submitted to the official repository. It will scan your code and provide a laundry list of issues it finds. Each issue’s line and column numbers are displayed, along with a brief description.

Sometimes, the issues are minor technicalities, such as missing a text domain in a PHP function. However, it also identifies potentially serious security flaws. For example, Plugin Check will flag unsanitized code output. That would allow a hacker to input and execute malicious code.

We’ve found that some AI models sporadically escape output in a generated plugin. Their lack of consistency is concerning. Thus, we can’t assume that everything is secure from the get-go.

Install Plugin Check on your testing environment to ensure your plugin meets WordPress guidelines. We have a tutorial to get you started.

Try to Break Something

Your plugin may appear to work well enough. However, that doesn’t mean it will hold up against every potential scenario.

A plugin’s behavior can change based on different factors. For instance, it may work as expected when you’re logged in, but not when you’ve logged out. That’s only scraping the surface of what can happen.

A few minutes of testing will help you identify any issues before you install it on a production website. So, put the plugin through a few basic tests, including:

• Deactivate and reactivate the plugin in the WordPress admin;
• Change plugin settings (if applicable) and save them;
• Access your test environment when logged in and logged out;
• Verify the plugin’s front and back-end functions and output are correct;

Also, be sure to keep your web browser’s console tool open when testing. That will fill you in on any behind-the-scenes errors that are generated.

Make Your WordPress Plugin the Best It Can Be

AI is a powerful tool for building custom WordPress plugins. It increases our efficiency and capabilities. But AI doesn’t test the plugin’s functionality and security for us. That’s our job.

The good news is that testing is a relatively simple process. The steps above will help you identify issues and make improvements. In other words, treat an AI-generated plugin the same as one a human built.

The result is a better plugin, one that you’ll be confident to use on your website.

Read more articles by Eric Karkovack

The post How to Test Your AI-Generated WordPress Plugin appeared first on The NOKIA Blog.

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.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post How to Refactor Your Outdated WordPress Code With AI appeared first on The NOKIA Blog.

The output of your code must be secure. Otherwise, a malicious actor could take advantage. For example, they could execute a rogue JavaScript or PHP snippet to spread malware. It puts users at risk and is a mess to clean up.

Thankfully, WordPress provides a way to prevent these sorts of attacks. Escaping data output strips unwanted and unsafe code. In other words, the feature ensures that only safe content will be output. It’s extra peace of mind when building custom themes and plugins.

If you have coding knowledge, escaping PHP data output is relatively simple. However, it’s also an easy step to miss. That’s why improper code sanitization is one of the leading security issues in the WordPress ecosystem.

Let’s change that narrative, one snippet at a time. Here’s a quick guide to escaping PHP data in WordPress. It could save you from a security nightmare or two.

• Name
• Email Address
• Postal Address
• Message

Each field has a specific purpose. We assume a user will add their first and last name to the “Name” field, and so on.

But what if they don’t? We can’t guarantee that everyone will behave as expected. Assuming they will is a mistake.

A malicious user or bot could try to add JavaScript to one or more of our fields. That code might be executed on our website. Any number of bad things could happen from there. The code could redirect you to a dangerous site or grab personal information such as passwords or payment details.

Escaping the data collected by our form can prevent such shenanigans. The feature limits what input the fields will accept. It also prevents any disallowed input from being rendered.

Like a coffee filter, data escaping cleans up our output while letting the good stuff flow through.

WordPress Data Escaping Functions

WordPress provides several functions for escaping data. Each is designed to handle different types of content.

For instance, the esc_html() function will remove any HTML from the input. One example would be a user who includes HTML in a page title. This function ensures the code isn’t rendered in the output.

Let’s say an adventurous user places the following in a page title field:

<strong>About Us</strong>

We haven’t escaped the PHP code in our theme:

<h1><?php echo ( $title ); ?></h1>

WordPress won’t remove the extra HTML in this scenario. That could be dangerous!

<h1><strong>About Us</strong></h1>

Now, let’s use esc_html() to strengthen our security:

<h1><?php echo esc_html( $title ); ?></h1>

The function will strip the HTML tags added by the user, leaving only the text:

<h1>About Us</h1>

Perhaps the code in our example is harmless. However, it opens the door to someone with more sinister intentions. Escaping data is a simple step that protects your website and everyone who visits it.

Common Escaping Functions

Let’s take a quick look at a few other escaping functions:

esc_js() – This function is used to sanitize inline JavaScript code. It escapes special characters and prevents XSS attacks.

<a target="_blank" href="#" onclick="alert('<?php echo esc_js( $message ); ?>')">Click me</a>

esc_url() – Sanitizes URLs before output by escaping unsafe characters and validates HTTP/HTTPS protocols. You can also use esc_url_raw() to store URLs in the site’s database.

<a target="_blank" href="<?php echo esc_url( $url ); ?>">Visit our site</a>

wp_kses() – Escapes all non-trusted code while preserving HTML. Alternately, wp_kses_post() preserves code permitted in a post or page.

<?php echo wp_kses($custom_field_content); ?>

The above functions are among the most commonly used by developers. Check out the WordPress documentation for a complete list with code examples.

Where Should You Use Escaping Functions?

Escaping functions should be used anywhere you’re handling user input via code. That might be a theme template or a custom plugin. If you’re using custom fields, their output should also be escaped.

Custom code is the primary focus here. If you’re unsure where to start, the Theme Check and Plugin Check plugins will help you find unescaped output in your code. From there, you can add an escaping function and test the changes.

Note that most native WordPress functions like the_content() or the_title() are escaped by default – you don’t need to do anything further.

What if you find some unescaped output in a third-party theme or plugin? Notify the developer! It could be an oversight on their part. Fixing it will help improve the product’s security.

Escape to a Safer Place

It’s easy to forget to escape output when writing code. Developers who aren’t well-versed in security may not even know about it. Code editor apps won’t alert you to the issue. And WordPress will execute your code regardless.

So, keep this security feature in mind. Add it to a checklist or set a reminder in your project notes. It only takes a few extra seconds to implement. And it might be the difference in whether your site is as secure as possible.

Top

The post A Quick Guide to Escaping PHP Data in WordPress appeared first on The NOKIA Blog.

I have wrestled with what AI means for our industry during this time. There’s potential to make our jobs easier. However, there are also questions about where these large language models (LLM) get their data and how accurate they are. Not to mention the eerie feeling of replacing humans.

Is the glass half empty or half full? Perhaps we won’t know for a few more years. New tools and technical evolutions are sure to come.

One thing I can say is that AI has changed my workflow. And it’s about more than saving time. Tools like ChatGPT and GitHub’s Copilot have also changed how I approach development projects.

Here’s a look at how AI has impacted me so far. I hope you see a thing or two that resonates.

A Solution to Coding Challenges

I’ll admit it: I’m not the world’s best coder. My experience with PHP and JavaScript is riddled with fits and starts. I tend to make some progress – only to run into a debugging nightmare. It’s those little things that get in the way, you know?

AI tools have, for better or worse, saved me from scouring Google for solutions. I can paste the offending code snippet into ChatGPT, and it will explain where I went wrong. It will even provide a corrected version.

Issues such as syntax errors aren’t easy to spot with the naked eye. Code editors can point them out but don’t often provide easy-to-understand suggestions. AI acts like an extremely patient friend who holds your hand during these tough times.

I feel guilty for contributing to the decline of traffic to Stack Overflow and similar communities. On the other hand, finding quick answers has lowered my stress levels.

This feature is invaluable for freelancers who work solo. It’s like having a colleague on hand, 24/7. And even when the answers aren’t 100% accurate, they usually lead you in the right direction.

A More Holistic Approach to Development

Time is always of the essence when doing custom development work. Budgets are limited, and deadlines are short. Sometimes, this leads to a result that isn’t as good as it could be.

There’s also a tie-in with limited coding skills. It’s hard to build a top-notch feature when you spend most of your time debugging. I find myself rushing to get things done rather than polishing them.

AI has made a huge impact in this area. Its ability to quickly write code and solve problems allows me to approach projects differently. I can take a holistic view that encompasses how things should look and work.

The experience has been freeing. My focus has changed to implementing and then improving my code. There’s room to add details that make for a better user experience. I also have more time for quality control.

If anything, AI has brought some clarity to my usually-scattered mind. Working step-by-step through a project is easier than ever.

A Newfound Confidence in What’s Possible

Custom development has always scared me. I often doubted something was possible until I made it work. Funny as it sounds, having AI’s help at my disposal has improved my confidence. I no longer cringe as much when a client asks for something I haven’t done before.

That doesn’t mean the build process will be worry-free. There will still be bumps in the road and unexpected challenges. However, combining AI with my existing knowledge empowers me to determine the best way forward.

I think this is another side effect of working solo. Each task feels like climbing a mountain when doing it alone. Having access to the right resources helps to ease the burden.

To be clear, I don’t equate AI with a human developer. People are much better at things like planning and critical thinking.

Machines can’t yet compete in that realm. They provide an extra depth of knowledge and boost productivity, though. That makes a big difference when you’re used to doing it all yourself.

It makes me feel like I can take on projects I might have turned down before.

AI Provides a Helping Hand When I Need It

Believe it or not, I don’t use AI every day. Most of my web design and development work originates from my imperfect brain. As does 100% of my writing. I’m happy to keep it that way.

However, I have experienced numerous occasions where an extra bit of help is appreciated. That led to a lot of frustration in the past. Having neither the time nor money to hire an expert for small tasks caused a lot of headaches.

That’s where AI has been most useful. Writing a WordPress function or manipulating the DOM with JavaScript can be accomplished with minimal effort. They’re no longer sticking points that hold me back.

In the end, that’s what tools are supposed to do. We use them to do more in less time. The tools may change, but the concept remains the same. Maybe AI is just the latest in a long line of them.

Top

The post How AI Changed My Web Development Workflow appeared first on The NOKIA Blog.