Experimenting with AI can be a great way to learn about its capabilities. And yes, it’s also a lot of fun. A few prompts can take you in any direction you want to go – or to places you never expected.

WordPress is the ideal testing ground for AI tools. You can work with code, generate content, or discover new ways to manage your website. It could do wonders for your workflow.

However, you probably don’t want to experiment in a production environment. There’s always a chance that something will go wrong and affect users. It’s not a risk worth taking!

Thankfully, there’s a new option worth getting excited about. The recently released my.WordPress.net installs a copy of the content management system (CMS) directly in your browser. It’s completely private, but can connect with various AI providers. It’s the perfect place to get a feel for what you can do with AI inside WordPress.

Let’s take a quick tour of my.WordPress.net. We’ll install it (super easy), connect it to AI, and start experimenting.

---

Sample Project: Integrate AI Into a Local WordPress Install

Today’s project is dead simple. First, we’ll install WordPress in our browser. Then, we’ll add our ChatGPT API key to integrate with the AI model. Finally, we’ll run a few test prompts to explore AI-based site management. Oh, and we’re sure to have a few adventures along the way.

Here we go!

Step 1: Install WordPress in Your Browser

We don’t want to spoil any surprises, but you might be amazed at how easy it is to install WordPress in your web browser.

1. Visit my.WordPress.net.
2. Enter a name for your website when prompted.

That’s all there is to it! You could optionally import content from another WordPress site. But we’re starting from scratch.

Once installed, you’ll see a welcome screen.

Step 2: Install the AI Assistant App

Those familiar with WordPress might be confused by the use of the term “apps”. After all, the CMS is famous for its plugin ecosystem. Not to worry. This offshoot decided that “apps” was a more user-friendly word for beginners. Consider plugins and apps as interchangeable.

Regardless, our next task is to install the AI Assistant app. Once again, it will be quick and easy.

1. Click on the Apps menu (an icon with four squares) on the upper right of the screen.
2. Find “AI Assistant” on the list and click on it.

The AI Assistant will automatically be installed on your local site. You’ll be returned to the welcome screen after it’s finished.

Step 3: Connect With an AI Model

We have everything we need to connect WordPress with an AI model. Now, it’s time to choose a provider.

At the time of this writing, AI Assistant works with Anthropic (Claude), OpenAI (ChatGPT), or a local AI model via Ollama. More providers may be added in the future.

1. Click on the command menu at the top of the screen (the long bar with a “/” inside) and select Dashboard.
2. Navigate to Settings > AI Assistant inside the dashboard.
3. Choose an AI provider and enter your API key.
4. Choose a model from your AI provider (we used gpt-4o-2024-08-06).
5. Save the revised settings.

In our case, we grabbed a ChatGPT API key and entered it into the settings. For reference, this method requires purchasing API credits from OpenAI. This is separate from your regular ChatGPT account.

The AI Assistant app also provides some information on what various WordPress user roles can access. You can also choose to add an AI Assistant button on the front-end of your site, which is displayed to logged-in users.

Step 4: Experiment!

The only thing left to do is have some fun with AI inside WordPress. You’ll find the AI Assistant throughout the dashboard and, optionally, the front-end of your website.

1. Click the AI Assistant button at the top right of the dashboard.
2. Enter a prompt in the chat window and start working with AI.

Here are a few sample prompts to get you started:

Create the following new pages on my website: About Us, Services, Contact Us

What time zone is my website using?

Activate the Hello Dolly plugin.

ChatGPT handled each of these requests without hassle. However, it did install a second copy of the Hello Dolly plugin. We’ll chalk it up to an early bug.

Note that you may be asked to approve certain actions, like creating pages or installing plugins. It’s a safety measure and is worth reviewing before allowing AI to make changes.

An Easy Way To Try AI Inside WordPress

Perhaps our experiments weren’t earth-shattering, but that’s not the point. The idea is that AI can tell you a lot about your website and perform routine tasks. And my.WordPress.net provides a safe space to learn and play.

Even better, the process for installing WordPress and integrating an AI model couldn’t be easier. You can be up and running within a few minutes. Just note the potential cost of using Anthropic or OpenAI for this purpose. Be sure to check your spending limits so you don’t lose a small fortune.

All told, it’s a great way to discover how AI can help your workflow inside of WordPress. So, take some time and find what works for you!

The post Using my.WordPress.net to Experiment With AI appeared first on Speckyboy Design Magazine.

Artificial intelligence (AI) is a tool for getting things done. The WordPress community is already using it to write and troubleshoot code. Meanwhile, the WordPress project is in the midst of making AI integrations easier for all.

That’s all great and exciting stuff. However, we may be missing the boat regarding other use cases. AI has the potential to do more than perform menial tasks. We can also pick its virtual brain to learn more about WordPress and related technologies.

Human knowledge still matters, and AI is only as effective as the person interacting with it. So, why not learn as much as we can? This new technology could be a goldmine of information, with the results improving our project outcomes and helping us develop better processes.

So, what can AI teach us about WordPress? Let’s find out!

Explain What a Function or Code Snippet Does

Code snippets aren’t always easy to understand, particularly when you’re unfamiliar with them. For example, you may inherit a website that includes a custom plugin or theme template. Likewise, you might not recall the purpose of something you wrote years ago.

In addition, WordPress includes hundreds of hooks, filters, and functions. Some have better documentation than others (and even that can be difficult to comprehend).

AI can help you identify what a code snippet does in short order. Paste it into your favorite Large Language Model (LLM), and you’ll receive a detailed overview of what’s happening. You can even ask follow-up questions to narrow down a specific line.

---

Here’s a simple example, using a snippet commonly found in theme templates and plugins. We’ll ask ChatGPT to provide some details.

"What does the following code snippet do?"

if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

ChatGPT responded with a breakdown of the code’s functionality and operation.

This snippet is a standard security guard used in WordPress PHP files, especially in plugins and themes.

What it does
It prevents the PHP file from being accessed directly via the browser.

How it works
1. ABSPATH

• ABSPATH is a constant defined by WordPress in wp-config.php during the normal WordPress bootstrap process.
• It contains the absolute filesystem path to the WordPress installation.

2. defined( ‘ABSPATH’ ) check

• The code checks whether WordPress has already been loaded.
• If WordPress is running normally, ABSPATH will exist.

3. Direct access scenario
If someone tries to access the file directly in a browser, e.g.:
https://example.com/wp-content/plugins/my-plugin/my-file.php

WordPress has not been loaded, so:
defined(‘ABSPATH’) === false

4. exit;
Because the constant isn’t defined, the script immediately stops executing.

Why this matters
Without this check:
-Someone could directly run the PHP file.
-Internal functions might run outside the WordPress environment.
-It could expose sensitive data, database queries, or admin functionality.

ChatGPT’s response was even more robust than what’s included above. It also gave specifics on where our snippet is typically found and advice on security best practices.

This is all valuable information. We now know the purpose of our snippet and have a step-by-step guide to explain what it does.

Discover Different Approaches for Building a Feature

Our first attempt to build a feature isn’t always the best one. After all, the goal is to find the best answer, not the quickest.

That’s why code typically undergoes several rounds of revisions. It seems like there is always something we didn’t account for in the initial try. For instance, there could be a missing detail or a feature that includes unnecessary bloat. Both humans and AI models make these mistakes.

As such, it’s worth weighing your options. There may be an approach that’s easier to maintain or extend later. This also comes in handy when a client inevitably changes their mind.

We can use this line of thinking when instructing AI to generate code. Let’s consider building a related posts plugin.

You might start with a prompt like this:

"Build me a related posts plugin for WordPress."

The above may get the job done. However, AI may not offer you multiple approaches by default. Let’s add some nuance to the prompt:

"I want to build a related posts plugin for WordPress. Give me at least two approaches for achieving this, along with the pros and cons for each one."

AI’s answer may even lead you to think of other potential features or issues. It’s another example of how AI should work for you, not the other way around.

Research Improvements and Optimizations

Our code may work, but is it the best it can be? Is it secure and performant? Will it be compatible with the next version of WordPress? All are important considerations.

There’s something to be said for having a second set of eyes (or the virtual equivalent) review your work. That applies to proofing a new project or refactoring legacy code. You won’t have to look far to find room for improvement.

Why not ask AI for a few suggestions? Paste a code snippet or upload a file, then instruct the app to improve performance, efficiency, and security.

You may also want to share relevant documentation, such as the WordPress theme and plugin handbooks. That will ensure AI compares your code against best practices.

---

Let’s put that theory to the test by asking AI to review an old-school WordPress post query.

"Review this code snippet and tell me how to improve it. Could it be more secure or efficient?"

  <?php
  global $post;
  $args = array( 'numberposts' => 1, 'offset'=> 0,  'category' => 4 );
  $myposts = get_posts( $args );
  foreach( $myposts as $post ) :    setup_postdata($post); ?>
  <p><a target="_blank" href="<?php the_permalink();  ?>"><?php the_title(); ?></a></p>
  <?php endforeach; ?>

  <?php wp_reset_query(); ?>

Once again, ChatGPT gave us a detailed overview of what our code does and steps to improve it.

Yes — you can make this cleaner, safer, and a bit more correct (especially around globals and reset functions).

What your snippet currently does

• Fetches 1 post from category ID 4
• Loops it, outputs a link with title
• Calls setup_postdata() so template tags like the_title() / the_permalink() work
• Resets something at the end

Issues / improvements

1. Don’t rely on global $post in the loop variable

Right now you’re doing:
global $post;
foreach ( $myposts as $post ) :

That overwrites the global $post reference inside the loop (and can confuse readers). Use a different variable name (e.g. $featured_post) and then pass it to setup_postdata().

2. Use wp_reset_postdata() (not wp_reset_query())

• get_posts() does not modify the main query ($wp_query)
• wp_reset_query() resets the main query and is meant for query_posts() usage (which you should avoid)
• After setup_postdata(), the right cleanup is wp_reset_postdata()

3. Escape output (security/hardening)

• the_title() and the_permalink() generally output safe data, but in custom code it’s best practice to use the “get_” versions and escape yourself:
• esc_url( get_permalink( … ) )
• esc_html( get_the_title( … ) )

This is the main “more secure” improvement.

4. Prefer newer/clearer query args

numberposts works, but posts_per_page is the more standard arg.

Also consider:

• ‘no_found_rows’ => true (micro-optimization; avoids pagination counts)
• ‘ignore_sticky_posts’ => true (avoid sticky surprises)
• ‘post_status’ => ‘publish’ (explicit)

5. If you only need one post, you don’t need a foreach

You can grab the first result and output it, reducing code and risk.

In addition, AI provided two revised snippets that include the above suggestions. It’s an easy way to modernize an old code snippet.

Using AI as a Learning Opportunity

AI apps are easy to use when working with code – almost too easy. It’s tempting to copy the results and ignore the app’s explanation of what it just did. However, there’s value in slowing down and reading those details.

In some ways, using AI can be akin to having a seasoned developer by your side. You can learn a lot by paying attention.

That’s particularly true for well-documented software like WordPress. The content management system (CMS) is full of niche functions and settings. Not to mention a whole ecosystem of themes and plugins.

You can use AI as a guide for understanding how everything works. It’s a way to dig deeper and experiment with building from scratch and reworking your existing code.

The bottom line is that, if you want to learn more about WordPress, AI offers a simple way to do it. Even better, it (probably) won’t get mad if you keep asking questions!

The post What AI Can Teach Web Developers About WordPress appeared first on Speckyboy Design Magazine.

The WordPress Media Library is a handy tool for managing images, documents, and multimedia content. It arranges uploaded files into date-based folders and creates multiple image sizes. All great features for a basic website.

There are a few drawbacks, however. The content management system’s (CMS) predictable file structure makes it easy to guess where a file is stored. For instance, a UK budget document leaked before its official release. How did this happen? A journalist was able to guess the file name based on last year’s version:

The BBC was able to access the PDF version of the OBR’s key report at 11:45 on Wednesday by replacing the word ‘March’ with ‘November’ in the web address of a previous edition.

Search engines can also index your site’s media files. This can be a benefit to your SEO strategy, but it’s not always desirable. Consider a membership website that requires registration to access specific files. A user may stumble upon a file via search, defeating the purpose of hiding files behind a login.

None of this means that there’s a security flaw. Rather, WordPress wasn’t built with private media storage in mind. Thankfully, there are easy ways to improve media file security.

Let’s review some tools and techniques for protecting your WordPress media files. They’ll keep your files away from prying eyes and might even save you some hosting bandwidth.

Available Methods of File Protection

The first thing to know about protecting your media files is that there are multiple types of protection. The method(s) you use will depend on your specific needs. We’ll break this section down by common scenarios.

Note that none of the following options will guarantee file security in high-stakes situations such as the UK government leak above. Rather, they are basic measures that will make it harder for someone (or something) to access your files.

With that in mind, here are a few ways to improve file security.

Block Direct File Access From Outside Sites (Hotlinking)

Let’s say you have a large PDF file on your website. By default, an external website could link directly to that file (a.k.a. hotlinking). It may seem harmless, but every time a user clicks that link, the file access counts against your hosting bandwidth. Even worse, the user never visits your website.

The solution is to block hotlink access at the server level. Add the following snippet to your website’s .htaccess file:

# Deny direct access to uploads unless navigated from your  site (change example.com to your domain name)
<IfModule mod_rewrite.c>
RewriteEngine On

# Only apply to files inside uploads directory
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/ [NC]

# Allow requests from your own domain
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example\.com/  [NC]

# Block direct access to specified file types
RewriteRule \.(mp3|mp4|pdf|zip)$ - [F,NC,L]

</IfModule>

If your website runs on an NGINX server, add this snippet to the nginx.conf file:

# Deny direct access to uploads unless navigated from your  site (change example.com to your domain name)
# File types protected: mp3, mp4, pdf, zip
  location ~* ^/wp-content/uploads/.*\.(pdf|zip|mp4|mp3)$ {
  
	valid_referers  none blocked server_names *.example.com example.com;
    if  ($invalid_referer) {
  return 403;
  }
}

Be sure to change example.com to match your domain name and edit the included file extensions to match your needs.

Note: We don’t recommend protecting image files this way, as it may lead to undesirable results. For instance, you won’t be able to include images or file links from the server in your email newsletter without adding some exceptions to the code above.

Prevent Search Engines From Indexing Your Media Files

Uploaded WordPress media files can easily end up in search results. This can be undesirable for a few reasons:

• Direct links to large files can eat up bandwidth.
• Users aren’t visiting your website, just downloading files.
• Members-only files could be exposed to the public.

Part of any file protection strategy should include preventing (or discouraging) search engine indexing. As such, there are a few methods to implement.

First, we can add the following to our site’s robots.txt file to discourage crawling of the /wp-content/uploads/ folder:

User-agent: *
Disallow: /wp-content/uploads/

This won’t prevent indexing of your files, just crawling. The main benefit is reducing the load on your server.

To fully prevent indexing, we can use the X-Robots-Tag header.

For Apache servers, add this snippet to your site’s .htaccess file:

# Prevent indexing of media files in /wp-content/uploads/
<IfModule mod_headers.c>
<FilesMatch  "\.(pdf|doc|docx|xls|xlsx|ppt|pptx|zip|rar|7z|mp3|m4a|wav|mp4|mov|avi|webm)$">
Header always set  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive"
</FilesMatch>
</IfModule>

NGINX users can add this to their nginx.conf file:

# Prevent indexing of media files in /wp-content/uploads/
  location ~*  ^/wp-content/uploads/.*\.(pdf|doc|docx|xls|xlsx|ppt|pptx|zip|rar|7z|mp3|m4a|wav|mp4|mov|avi|webm|jpg|jpeg|png|gif|webp|svg)$  {
  add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive" always;
  }

The above methods will reduce bot traffic and reduce the likelihood that your files will appear in search results.

Prevent Access to WordPress Attachment Pages

By default, WordPress creates a post for every media file you upload. It may come in handy for some niche use cases, but it is most often a forgotten feature. Without further action, these posts can be indexed by search engines.

Some SEO plugins, such as Yoast SEO, RankMath, and All in One SEO, offer settings to disable attachment pages. This is the simplest way to prevent search engines or users from accessing them.

Short of that, you can also use a code snippet in your theme’s functions.php file or a custom plugin. We’ll share a couple of them that cover common scenarios.

Return a 404 Error on Attachment Pages:

If you’d like to deny access to attachment pages, the following snippet will do just that. Visitors will see a 404 page, rather than the attachment.

<?php
  /**
  * Force attachment  pages to 404.
  */
  add_action( 'template_redirect', function () {
  if ( !  is_attachment() ) {
  return;
  }
  
  global  $wp_query;
  $wp_query->set_404();
  status_header(  404 );
  nocache_headers();
  
  // Load  your 404 template.
  include  get_query_template( '404' );
  exit;
  } );

Redirect Attachment Pages to Parent Post:

Here’s a slightly different approach that redirects users to the attachment’s parent post. This is handy for blogs and other online publications looking to ensure users see their content, rather than media files.

<?php
  /**
  * Redirect attachment  pages to their parent post when available.
  */
  add_action( 'template_redirect', function () {
  if ( !  is_attachment() ) {
  return;
  }

  $attachment_id  = get_queried_object_id();
  $parent_id     = wp_get_post_parent_id( $attachment_id );
  if (  $parent_id ) {
  wp_safe_redirect(  get_permalink( $parent_id ), 301 );
  exit;
  }

  // No  parent: redirect to file URL if it exists.
  $url =  wp_get_attachment_url( $attachment_id );
  if ( $url  ) {
  wp_safe_redirect(  $url, 301 );
  exit;
  }
  wp_safe_redirect(  home_url( '/' ), 302 );
  exit;
  } );

If you don’t need WordPress attachment pages, there’s no reason to keep them around. Thankfully, you have several options for giving them the heave-ho.

Use a Plugin for Media File Protection

You can also use a plugin to protect your WordPress media files. The right plugin can do some or all of the above functions to keep your files safer.

For example, Download Monitor offers multiple functions, including file protection. Among its features:

• Disable or enable specific folders for file downloads.
• Create randomly-generated URLs for files you want to protect.
• Attempting to access a file directly will result in a 404 error.
• Require users to log in before accessing a file.
• Keep track of how many times a file has been downloaded.

The free version of the plugin covers common use cases. A premium version goes the extra mile by integrating with popular form plugins and adding CAPTCHA protection.

Meanwhile, many membership plugins come with some form of file protection. Check out the plugin’s documentation to see what’s available.

Take Control of Your Files and Gain Peace of Mind

There are several reasons for locking down your WordPress media files, even if you aren’t posting sensitive information. For one, the rise of AI bot traffic means higher bandwidth usage. Restricting access to large files can prevent surprise charges on your hosting bill.

Plus, media files and attachment pages can be taken out of context. A simple redirect can help by pointing users toward your content. That could be the difference between a one-time visitor and a loyal reader. Say hello to lower bounce rates!

The above solutions are easy to implement into your existing website. What’s more, they bring a little peace of mind. You won’t have to worry about the wrong people accessing your files or causing a traffic nightmare on your server.

Consider your file protection needs and how they might impact your SEO strategy. From there, you can create a plan that works for you.

The post How To Protect Media Files Uploaded to WordPress appeared first on Speckyboy Design Magazine.

WordPress is known for its flexibility. The ability to build custom blocks keeps with that tradition. There are so many potential use cases. It feels like the sky is the limit.

However, building a custom block hasn’t always been easy. Even seasoned WordPress developers can struggle to learn the process. Blocks are based on React, rather than PHP. As such, there’s a serious learning curve. That has left many to look at alternative methods or use third-party block suites.

There’s a new tool looking to change the narrative. Telex is Automattic’s AI-powered block builder. Tell the app what you want, and Telex goes to work. It generates code and, once you’re satisfied with the result, creates a custom plugin to install on your website.

Telex is ripe for experimentation. Let’s take it for a spin and see what it can do.

Getting Started With Telex

First things first, you’ll need a free WordPress.com account to use Telex and save your projects. Click the Login button on the upper right of the screen to get started.

Once that’s taken care of, it’s time to tell Telex about your project. The interface should be familiar to anyone who has used ChatGPT, Gemini, or other popular AI models.

Enter your idea into the text field, and the tool takes care of the rest. It generates your custom block’s code and even lets you test it in a real WordPress installation (thanks to WordPress Playground).

Doesn’t that sound otherworldly? Follow along as we create a demo block.

Creating a Custom Timeline Block

From the looks of things, there’s no idea that’s too far-flung for Telex. There is a plethora of creative examples popping up on the web.

For our purposes, we’ll try to keep things practical. We’ll create a Timeline block that allows us to highlight important dates with style.

Here’s the prompt we used:

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:

1. Year
2. Content

The design should feature the Year on the left and the Content on the right. A vertical line should be displayed between the Year and the Content. The Year should be bold text and stand out.

Hint: Telex has an “Enhance Prompt” feature that will that will rewrite your prompt using AI. Give it a try if you’re having trouble describing what you want. We tried the feature, and it added a few elements we hadn’t thought of, including responsive styling.

Click the Build button once you’re satisfied with your prompt.

Generating & Testing Our Custom Block

Telex will start building your block in plain view. The UI shows your prompt at the top of the screen, while the app’s internal dialog scrolls by below.

In our case, the process took about two minutes to complete. Once finished, we were redirected to a WordPress install and placed into the Block Editor.

This is where the fun begins! Telex provides an opportunity to test our new block and see how it works. We can use the chat panel on the right side of the screen to ask questions or make edits.

Judging the Initial Result

At first glance, our Timeline block looks similar to what we envisioned. Telex followed our instructions with the help of its AI enhancement feature. It also added a few details we didn’t think of, such as the ability to style the block’s colors and spacing.

There’s even a handy plus (+) icon for adding additional milestones to our block. As promised, the block is also responsive. The Year and Content blocks are stacked on small screens for easier reading.

It’s a strong start. However, we think there’s room for improvement. Can Telex help?

Improving Our Timeline Block

Perhaps the biggest thing missing from our block is the ability to customize the typography. We’d love to change the font sizing and spacing. Let’s ask Telex for some help:

Can you add font size and spacing settings to the Year and Content fields?

Telex receives our prompt and immediately begins revising the block. Once finished, the Block Editor is refreshed, and it’s time to inspect the changes.

Sure enough, our block now features typography settings for the Year and Content fields. Nice!

We’re one step closer to completion. However, there are a few other small tweaks we’d like to make:

I notice the line between entries isn't connected. Can we change that?

Also, I'd love the ability to horizontally align each entry to the Top, Middle, or Bottom.

Telex got both requests correct, to a point. We can now align our milestones horizontally. However, the connecting line has now moved to the left side, which is not what we wanted. Recall that the line had been in the middle.

Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.

It took a few tries and a recovery from a PHP crash inside WordPress Playground. Telex eventually moved the line to the middle and adjusted the styling so the milestones are connected on the front end (there was still a bit of space in the editor).

Things are looking good, so we’ll click the Download button on the upper right of the screen. Telex provides a ZIP file containing a plugin for our custom block.

Now, we can install the plugin on any WordPress website!

Making Custom Blocks a Prompt Away

Our experience with Telex was a pleasant one. Within 30 minutes, we had a working prototype of our custom Timeline block. Even the most talented of React developers would have difficulty matching that pace.

Sure, there were a few glitches along the way. That’s to be expected from any AI tool. However, Telex produced the result we were hoping for.

What about security? We ran the plugin through Plugin Check, which gave us a thumbs-up. We recommend using the tool for every custom block you generate. Also, review the code manually. Don’t take security for granted.

Telex is still in its “experimental” phase as of this writing. However, it’s safe to say that the future looks very bright.

The post How to Build a Custom WordPress Block With Telex appeared first on Speckyboy Design Magazine.