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!

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 Using my.WordPress.net to Experiment With AI appeared first on The NOKIA Blog.

But what happens if some of your critical data lives elsewhere? There may be a plugin that integrates with the third-party service you’re using. Or, you might build a custom solution from scratch.

The Remote Data Blocks plugin aims to make fetching data from outside sources easy. It integrates with services like Airtable, Google Sheets, and Shopify out of the box. There’s also a framework for connecting to other services via HTTP. Once connected, you can display your data via a WordPress block and customize it with a pattern.

How does it work? Let’s put the plugin to the test with a sample project. We’ll guide you through each step and see what we can accomplish together. Here we go!

Sample Project: Display a Google Sheet in WordPress

To test Remote Data Blocks’ capabilities, we’ll use the plugin to fetch data from a Google Sheet. The file contains contact information for an employee directory.

The process includes installing the plugin, connecting to Google Cloud Platform (the most time-consuming part), and displaying the data on our website using the included block. We’ll also need to create a block pattern to style our data.

Step 1: Install the Remote Data Blocks Plugin

The first step is to install the latest version of Remote Data Blocks on your WordPress website:

1. Log in to your WordPress website and navigate to Plugins > Add Plugin.
2. Search for “Remote Data Blocks” and find the plugin in the provided list.
3. Install and activate the plugin.

We’ll come back to the plugin settings later in our tutorial.

Step 2: Configure Google Cloud Platform

We have some work to do before we can connect a Google Sheet to WordPress. We’ll show you the steps below. The Remote Data Blocks team has also put together a helpful guide for this process.

2.1 Create a Project in Google Cloud Platform

To start, visit Google Cloud Platform to create a new project.

Hint: If you need help, Google has a project creation guide you can use as a reference. Google will ask for a project name and a parent resource. We’ll call our project Remote Data Blocks Test and leave the parent resource blank.

2.2 Connect to the Google Sheets and Google Drive APIs

Once the project is created, we’ll need to enable both the Google Sheets and Google Drive APIs. Here’s how:

1. Using the left-hand menu, navigate to the Enabled APIs & Services page.
2. Click on the Enable APIs and Services button.
3. One at a time, search for and add the Google Sheets and Google Drive APIs.

2.3 Enable the IAM API

Our project will also need access to the IAM API, as this handles authentication. Click the Enable the API button.

2.4 Create a Google Cloud Platform Service Account

After that, we’ll create a service account for the project. Head to the Google Cloud console website.

1. Using the left-hand menu, navigate to the Service Accounts page.
2. Click on the Create Service Account button.
3. Give your service account a name and click Continue.
4. On the Permissions screen, choose Owner and click the Continue button.
5. The Principals screen can be left blank. Click Done.
6. When finished, you’ll be redirected to the Service Accounts page, where your new account will be listed.

2.5 Generate JSON Credentials

1. Within your service account, click the options button (⋮) and select Manage Keys.
2. On the Keys page, click the Add Key button and select JSON as the format. Click the Create button.
3. Google Cloud platform will generate a JSON that you can download to your device.

Important: Note the generated email address associated with your service account – you’ll need it!

Step 3: Share Your Spreadsheet With Your Google Service Account Email

Remember the email address associated with your Google Service Account that we generated above? We’ll need it here.

We’ll head over to the Google Sheet we want to connect to our website and share it with the email address.

Step 4: Copy the Google Sheet ID

Next, we’ll locate the ID of our Google Sheet. We’ll need this detail to connect it to our website. The ID is located in the Sheet’s URL, like so:

https://docs.google.com/spreadsheets/d/test_spreadsheet_id/edit?gid=0#gid=0

We’re looking at the bolded area above (test_spreadsheet_id). We’ll copy our ID and keep it handy for the next step.

Step 5: Create a Data Source in Remote Data Blocks

We’re done with Google and on to our website. Navigate to Settings > Remote Data Blocks to connect our Google Sheet.

1. On the settings page, click the Connect New button.
2. Select Google Sheets from the menu.
3. Give your data source a name (we chose Employee Directory).
4. Paste the contents of the JSON file generated in Step 2.
5. Click the Continue button.

On the Scope screen, we’re asked to choose a spreadsheet from the menu. Ours is on the list. We’ll select it and the sheet we want to use (Sheet1), then click the Continue button.

On the Blocks screen, we’ll choose the Auto-register blocks option and click the Save button.

Step 6: Insert the Remote Data Block Into a Page

Now, it’s time to add the remote data block to our page.

1. Remote Data Blocks uses the data source name we provided in the last step. So, we’ll search for “employee directory” and add the block to the page. There are a couple of options, but we’ll choose Employee Directory/Sheet1 Loop. This option will automatically update the data when we edit our Google Sheet.
2. The next step is to place our remote data into a block pattern. So, we’ll select Choose a Pattern and click the only available option.

Note that the included pattern does not format the data into a table or anything resembling a spreadsheet. That’s OK, because we created a set of columns to house our data.

Dragging the various data points (First Name, Last Name, Title, Extension) into the Columns Block gave us a better layout. We can also use the Block Editor to make further improvements.

All Data Points Lead to WordPress

Fetching data from third-party sources is challenging. It’s also necessary, as we store our stuff all over the place. Remote Data Blocks helps by providing a framework we can build from.

There’s a lot of potential here, and we can imagine the plugin expanding in the future. Perhaps it works with more services out of the box. It might also include a few more block patterns to style common data types with ease.

The plugin could also empower non-technical site owners. For example, imagine updating a restaurant’s menu page by editing a Google Doc or another cloud-based file. They wouldn’t have to touch WordPress at all. It would eliminate their learning curve and ease our support requirements.

However, this is just the beginning. There are already plenty of niche uses for Remote Data Blocks and more to come. So, download the plugin and experiment!

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 Use Remote Data Blocks to Display Google Sheets Data in WordPress appeared first on The NOKIA Blog.

Some of us are using AI to build custom plugins, but it doesn’t have to end there. We can also extend existing ones. This skill comes in handy when a free or commercial plugin doesn’t quite do everything you need. Everything from minor tweaks to complex features is possible.

For instance, we’ve used AI to generate a custom WooCommerce email when a specific product is ordered. Perhaps that doesn’t sound like an earth-shattering use case. But building such functionality without hours of research is a win in our book. About 30 minutes is all we needed to go from concept to finished product.

Let’s face it: Every WordPress project is nuanced. There are always things our clients would like to change – regardless of size or difficulty. AI can help us go from “Oh, no!” to “That was easy!”

With that in mind, here are some tips for using your favorite large language model (LLM) to extend an existing WordPress plugin.

Is This the Right Plugin for the Job?

Wouldn’t it be nice if the plugin you installed also did x, y, and z? It’s a common refrain when building a website. After all, the little details often separate the good from the great.

Perhaps a client requested a feature that differs from the plugin’s default behavior. Or maybe you had an idea for leveling up the user interface. It’s a great way to spark creativity and go the extra mile.

However, not every plugin is the right one for the job. Some extensions may be too complex and difficult to maintain, while others could take the plugin in a completely different direction. The result is an inefficient path to achieve your goals. In short, it’s an easy way to go down the old rabbit hole.

The WordPress plugin ecosystem is vast, and there are often multiple options for every need. As such, you may find that a different product is a better fit for your project. Look for a plugin that already does most of what you need. From there, extending will be easier.

It’s great that we can extend plugins using AI. Yet, that doesn’t mean we should extend every plugin. So, consider the pros and cons of a product before you dive in headfirst.

A Well-Documented Plugin Often Yields the Best Results

WordPress plugins come from all corners of the ecosystem. Thus, you’ll notice that some authors provide more thorough documentation than others.

Well-documented plugins tend to be better candidates for an AI-generated extension. AI models will have ready access to that information, and it will likely improve your odds of a successful outcome.

Another side effect is that other developers have probably built extensions as well. AI can research forums and blog posts to understand how things work. Plugins often have custom functions, hooks, and filters that developers can tap into. The more information that’s available, the better.

Hint: Feel free to include any relevant documentation or demo links in your AI prompts. This ensures that the AI model is looking in the right place. It could save you from some trial-and-error when building an extension.

What if a plugin has little or no documentation? You may still have a chance to build on top of it. Upload the plugin or share a relevant snippet with AI. The model should be able to determine how things work and move forward from there.

Think About Structure and Future Maintenance

Let’s say that you’ve found the perfect plugin to extend with AI. Now what? You’ll want to think about the best way to structure your extension and how you’ll maintain it.

It’s always tempting to paste a few code snippets into your theme’s functions.php file. That may work in the short term. But what happens when it’s time to change to a new theme? You’ll have to do another copy-and-paste, or risk losing your custom functionality.

Placing your code into a custom plugin is usually the best option. This ensures that your functionality stays intact throughout your website’s lifespan. Better still, most AI apps can help you build a plugin structure that’s easy to maintain. A simple plugin might require a single file, while a more robust one could benefit from a tree structure.

Speaking of maintenance, that places another responsibility on your shoulders. It’s possible to build a custom extension that you won’t need to edit for years. However, it’s important to keep track of changes to the plugin you’re extending. For instance, a major change to Elementor or Gravity Forms could mean refactoring your code.

Building plugins that depend on other plugins is great – just be sure to understand what you’re getting into.

Make Your Existing WordPress Plugins Do More

AI is a great asset when extending an existing WordPress plugin. Explain what you want to achieve, share code and/or documentation, and let the app do the dirty work for you. It’s possible to have a working prototype within minutes.

That’s not to say the entire process is seamless. AI can make mistakes or misinterpret your instructions. As such, your generated code may require a few rounds of revisions. Not to worry! That’s still faster than writing something from scratch.

A word of advice: Ensure that your generated code uses security best practices. We have a handy guide to help you test. Taking a few extra minutes here will give you peace of mind.

Do you have an idea that makes an existing plugin even better? Now is a great time to experiment with a little help from AI.

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 Use AI To Extend the Functionality of WordPress Plugins appeared first on The NOKIA Blog.

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.

WordPress.com Black Friday Deal

Read moreRose gold design

For Black Friday, if you sign up for a WordPress.com Business Plan, you will not only get a 10% discount, but also a free professionally designed website worth $499, which includes setup on the platform with a custom theme and five core pages.

Get the WordPress.com Hosting Deal

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.

<!–

–>

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 Build a Custom WordPress Block With Telex appeared first on The NOKIA Blog.

Yes, there are different approaches. However, all themes share at least one common file: functions.php

Developers can use functions.php to add custom code snippets. You can enable or disable specific WordPress features, or change how they work. The same goes for plugins like WooCommerce. Some themes include custom functions, which you can also edit via a child theme’s version of the file.

That’s only scratching the surface of what’s possible. A variety of custom functionality can be added here. That’s both a positive and a negative.

It’s great that the functions.php file is so versatile. The downside is that we often use it as the “junk drawer” of WordPress. It’s easy to fill the file with code that would be a better fit as a custom plugin. That could mean trouble as your site evolves.

So, how do you decide what to include and what to leave out of your theme’s functions.php file? Check out our best practices below.

A Repository for All Your Custom Code?

It seems like every WordPress development tutorial recommends placing code snippets in the functions.php file. Why is that? Well, it’s easier to explain than walking someone through building a plugin.

This technique works well enough. Most code snippets will run as expected. Plus, all your custom code resides in a singular file. It sounds like a winning solution.

But what happens if you change themes down the road? Those code snippets won’t migrate automatically. You’ll have to copy them to the new theme’s functions.php file. It’s an easy step to forget when redesigning a website.

Much depends on the specifics of your website, but you might miss some critical functionality. That could result in a myriad of issues. Everything from a buggy feature to a broken website is possible.

Project organization is also a concern. A file containing a random collection of snippets can be confusing. You might find yourself searching for code related to a specific feature or forgetting what’s there. It’s a recipe for future chaos, especially for large sites.

Thus, the negatives often outweigh the positives of using functions.php as a catch-all. It’s something to consider before opening the file and adding code.

<img fetchpriority="high" decoding="async" src="https://thenokiablog.com/wp-content/uploads/2025/10/best-practices-for-your-wordpress-themes-functions-php-file.webp" alt="It's tempting to add all of your custom code into the functions.php file.” width=”900″ height=”600″>

Does Your Code Belong in functions.php?

How do you know if a code snippet belongs in your functions.php file? The WordPress Theme Handbook offers a simple rule of thumb:

“If you are creating features that should be available regardless of the site’s design, it is best practice to put the code in a plugin. The rule of thumb is that themes should only deal with the site’s design.”

That’s much stricter than the typical use case. However, it also makes perfect sense. Custom plugins are a constant and will continue to work, regardless of the active theme. Thus, it’s risky to add anything unrelated to design to functions.php.

What counts as design-related code? Here are a few common examples:

• Custom CSS and JavaScript files;
• Custom PHP functions to be used in theme templates;
• Fonts that will only be used in the active theme;
• Internationalization features;

Adopting this philosophy will keep your site better organized and reduce the risk of future problems.

Keep Your WordPress Theme Light and Focused

Sure, it’s possible to add loads of code to your theme’s functions.php file. Many of us have done so and learned a difficult lesson or two. That’s OK.

To paraphrase the old saying: When you know better, you do better. Those experiences can lead us to better solutions.

The bulk of what developers add to functions.php likely belongs in a custom plugin. It’s a better way to ensure website stability.

The other side effect is a theme with less bloat. It will be better optimized and provide you with greater flexibility. You’ll also have one less thing to worry about when you switch to something new.

Perhaps the idea of building plugins sounds scary. However, tools like artificial intelligence can improve the process. Ask AI to build a plugin using the code snippets you want to migrate. You can be up and running within minutes.

So, the next time you want to add custom code to your WordPress website, ask yourself: Does it belong in functions.php?

Read more articles by Eric Karkovack

The post Best Practices for Your WordPress Theme’s functions.php File appeared first on The NOKIA Blog.

Style variations give you a head start on design. They allow us to create multiple color and typography combinations. They also house custom block styles defined in the Site Editor. Anything in a theme.json file can also be included in a style variation.

This is handy for web professionals and users alike. Choose the variation that suits your needs and start building your site.

Creating a custom block theme style variation is easier than you think. The entire process takes place in the WordPress Site Editor. A simple variation can be built in minutes.

So, follow along as we build a style variation! We’ll show you how to point and click your way to a custom design.

Style Variation Project Requirements

The requirements for building a custom style variation are minimal. You’ll need:

We don’t recommend using a production website for this process. A staging or local WordPress installation is the safer way to go.

Let’s Build a Style Variation

Now, it’s time to start building! Log in to your WordPress website and follow the steps below.

Step 1: Open the WordPress Site Editor

First, navigate to Appearance > Editor in the WordPress admin to open the Site Editor. Then, click the Styles link in the left sidebar.

The Styles panel includes links for Typography, Colors, Background, Shadows, and Layout. You’ll also find a Browse Styles link that displays available style variations for the theme.

Finally, the Blocks link allows you to customize individual block styles across the site.

Step 2: Change Your Theme’s Styles

This step is all about personal preference. Work your way through the Styles panel and start making changes.

Color and typography are the most obvious changes, but you can take things further. For example, you can change the layout width and spacing. Plus, every block included with WordPress can be customized. Add margins, padding, borders, or custom CSS.

We covered the basics in our variation, including:

• Created a custom color palette;
• Installed new fonts from Google Fonts;
• Added custom spacing for the Group and Paragraph blocks;
• Changed the look of the Button block;

The result is an earthy look that aims for simplicity. But you can do as much or as little as you like. Just remember to save your changes when done.

Step 3: Save Your Style Variation

Our next task involves saving our custom style variation. This functionality is part of the Create Block Theme plugin.

The feature is located within the Site Editor. Here’s how to find it:

1. While in the Site Editor, click on the right panel, highlighted in green below:

2. Click the wrench icon on the upper right of the screen and select Create Theme Variation:

3. Name the variation and ensure the Save Fonts box is checked. We’ll call ours “Beautiful Earth.”

4. Click the Create Theme Variation button to save the settings.

Once saved, the new variation is added to the list in the Browse Styles area of the theme editor. Hovering over the variation reveals its name.

How to Use Your Style Variation on Another Site

Style variations are portable and can be used on multiple websites. The process involves copying the generated JSON file and adding it to the desired site.

1. Locate the style variation’s JSON file in /wp-content/your-theme/styles/
   Replace your-theme with the name of the theme you’re using (ours is twentytwentyfive).

   For reference, our JSON file is called beautiful-earth.json

2. Copy your style variation’s JSON file.
3. On your new website, paste the file into /wp-content/your-theme/styles/ – you may need to upload the file via SFTP or your web host’s file manager.
4. You’ll now be able to choose the style variation within the Site Editor.

About Custom Fonts

Earlier, we mentioned the ability to add custom fonts to a style variation. It requires a few extra steps to work when moving your variation to a new site.

1. Locate the custom fonts you added at /wp-content/themes/your-theme/assets/fonts/
2. Copy each font’s respective folder.
3. Paste the font folders into the same directory on your new site. Once again, you may need to upload them.

Give Your Block Theme a Custom Look

Style variations are a convenient way to add personality to your block theme. You can build them to suit your project requirements.

They also act as a starting point for designers. You can continue to add custom styles after applying a variation. The changes you make will be saved in the site’s database.

There’s also an option to reset the styles to the variation’s defaults. That makes it easy to experiment without losing the key elements of your design.

The best part is that style variations don’t require coding expertise. That puts custom design within everyone’s reach.

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 Learn How to Build a WordPress Block Theme Style Variation appeared first on The NOKIA Blog.

Traditionally, using custom fields meant navigating obstacles. They require coding knowledge or a plugin to render field data. Implementing them can be time-consuming and out of reach for some users.

The WordPress Block Bindings API removes some of these limitations. It allows us to “bind” custom field values to a WordPress block. You don’t need a plugin to use them, as the function is built into the Block Editor. Registering fields still requires code, though.

Regardless, using the API is a time saver for developers. Here’s a look at how it works, along with a real-world example.

We should also note some of the API’s limitations. As of this writing, it works with the Paragraph, Heading, Button, and Image blocks. Data types are also limited to content, text, URL, etc. Check the documentation for more details.

With that out of the way, let’s see an example of the Block Bindings API in action.

Example: Let’s Bind a Custom Field to a WordPress Block

Our example is an homage to WordPress’ blogging roots. We’ll create a custom field called “Now Playing,” which we’ll fill out on each blog post. The field will contain a favorite song, movie, or TV show of the moment.

We’ll register the custom field in our theme, add it to the post template, and bind the field to a paragraph block.

We’re using the Twenty Twenty-Five default block theme. That means we can edit templates with the Site Editor.

Step 1: Register the Custom Field

First, we’ll register our custom field by adding code to our theme’s functions.php file. This lets WordPress know that our field is associated with posts.

Note the field’s slug, as we’ll need it later: now_playing

Step 2: Display Custom Fields in the Block Editor

By default, custom fields aren’t displayed in the Block Editor. So, we’ll have to enable the feature:

1. Open a post or page in the WordPress admin.
2. Inside the Block Editor, click on the Options menu (⋮).
3. Click on the Preferences link.
4. Go to the Advanced heading and turn on Custom fields.

WordPress will refresh the screen and display a custom fields UI at the bottom.

Step 3: Add a Custom Field to a Blog Post

Next, we’ll add our custom field to a blog post:

1. Navigate to Posts > Add New in the WordPress admin.
2. Give your post a title and add content.
3. Scroll down to the Custom Fields area of the editor.
4. Under the Name column, click the Add New button.
5. Enter the custom field slug in the Name field: now_playing
6. In the Value field (right column), enter the name of a song, movie, or TV show.
7. Publish your blog post.

Step 4: Bind the Custom Field to a Block

Now, it’s time to bind our custom field to a block. Since we’re using a block theme, we’ll navigate to Appearance > Editor.

We want to add custom field data to single blog posts. Inside the Site Editor, click on Templates, then click on Single Posts.

Next, we’ll choose a spot for our custom field in the Single Posts template. Just above the post content seems like a good choice.

1. Add a Paragraph block to the chosen spot in the template. Don’t add any content to the block.
2. Select the Paragraph block (click into the block or select it from the List View panel).
3. Click the “+” icon in the Attributes tab on the right column of the editor.
4. Select “content” from the Attributes list.

5. Click on “content” in the Attributes tab. A list of registered custom fields will appear. Select now_playing from the list. You might also add custom formatting to this area to make the field stand out. We chose the “Subtitle” style from the block settings.

6. Save the changes you made to the template.

Notice that clicking on the Paragraph block reveals a purple outline. This denotes that the block is bound to a custom data source.

Step 5: View the Result on the Front End

Let’s see how our custom field binding turned out. We’ll visit our blog post to see how it looks.

It’s working! Our song (“Wonderwall” by Oasis) is displayed above the post content.

The technical side of our example is done. However, we might want to tweak the styles or add another paragraph that says “Now Playing:” above the field. That would improve the feature’s look and accessibility.

An Easier Path for Using Custom Fields

Using WordPress custom fields is easier than ever. The Block Bindings API helps with simple use cases like the one above. It all works within the Block and Site editors.

That means less hassle for site builders. You don’t have to install a plugin or get tangled up in layers of PHP.

Plus, the feature is expected to evolve. For example, we may see more data types supported and a code-free way to register custom fields. It will be exciting to see what comes next.

Features like the Block Bindings API bring WordPress ever closer to a code-free experience. That puts a custom website within everyone’s reach.

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 Learn How to Display WordPress Custom Field Data With Blocks appeared first on The NOKIA Blog.