Category: torquemag.io

Largest Contentful Paint (LCP) and How to Improve It in WordPress
This post is the first in a three-part series about Core Web Vitals. In it, we want to go over each of the three metrics that are at the heart of Google’s new yard stick for website quality. Our first stop: Largest Contentful Paint (LCP) and how to improve it in WordPress.

By now, Core Web Vitals are a critical ranking factor in Google. As measurements for user experience, they determine whether or not visitors have a good time on your site and also influence how well you do in search engines. For that reason, it’s important that you get them right.

To help you do so, as mentioned, we want to examine each of the components of Core Web Vitals in depth. Below, we talk about what exactly they are and why they matter for SEO. After that, you get a grade-A education on how to ace Largest Contentful Paint, the first one of them, on your WordPress site. The post explains what LCP is, how to measure it, what number you should shoot for, and how to improve this metric on your WordPress site if necessary.

What Are Core Web Vitals?

First off, in case this topic is entirely new to you, let’s start with the basics: what exactly are Core Web Vitals?

In short, they are a set of user-centered metrics that measure the loading speed, interactivity, and visual stability of web pages that Google introduced in May 2020. They are supposed to help website owners and developers understand how good of a user experience their pages offer and identify areas for improvement.

Core Web Vitals consist of three metrics:
1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)
Each of these is measured separately and influenced by different factors, which is why we are writing this article series.

Why Do Core Web Vitals Matter for SEO?

The reason why we stress this point is pretty simple. Google has made it clear that it wants to prioritize pages that provide a pleasant experience to visitors who frequent them. Core Web Vitals are a way to measure that.

As a consequence, by now they are a key component of Google’s algorithm for evaluating and ranking web pages. To quote their own page on that matter:

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.

Therefore, if you want your pages to perform well, you not only have to look at things like web design, E-A-T, content authority, on-page optimization, site speed, and mobile friendliness but also at these UX metrics. Otherwise, you might find yourself penalized by Google and not ranking well.

In addition, improving Core Web Vitals can lead to better user engagement, longer site visits, and ultimately, increased conversions and revenue. So, optimizing your website for them not only helps with SEO, but also drives business results.

All clear? Then let’s tackle the first metric.

What Is Largest Contentful Paint (LCP)?

LCP is the first Core Web Vitals Metric we want to look at. It measures the time it takes for the largest element in the viewport (that’s what you see in your browser window) to become fully rendered on the screen after a user initiates a page load. It could be an image, video, text block, or any other element that occupies a significant amount of space on the page.

LCP is an important metric because it reflects how quickly users can access the main content of a web page, which is likely what they came for in the first place. A slow LCP score means that users may have to wait longer before they can start reading or interacting with the page. This can lead to frustration and simply make them leave. No bueno.

How Is Largest Contentful Paint Calculated?

A page’s LCP score is determined by tracking how long in seconds the largest element in the viewport takes to become fully rendered. However, the metric only regards certain types of elements for its calculation:
- <img> elements, meaning images
- <image> elements inside <svg> documents
- <video> elements that show a preview image
- Elements that load a background image via the url() function
- Block- and inline-level elements with text content
In short, visuals and main text. At the same time, LCP disregards components that users likely do not consider to be “contentful”, such as:
- Elements with an opacity of 0, that are invisible to the user
- Elements that cover the full screen and likely function as background rather than content
- Placeholder images or images with little information that likely do not reflect the true purpose of the page
How to Test Your Site for LCP

There are many ways to test Largest Contentful Paint on your WordPress website. As the quote above mentioned, it is now a metric in all Google tools, so you can start there.

For example, when you input your website into PageSpeed Insights, you can find your LCP value and whether you have passed the test or not.

In addition, you find information about problems with Largest Contentful Paint and other issues in the Core Web Vitals report in Google Search Console.

Chrome developer tools also shows it (more on that below). Plus, there are browser addons that allow you to measure these metrics like Web Vitals for Chrome and SpeedVitals for Firefox. Finally, if you are a developer, you might want to use more technical solutions such as the web-vitals JavaScript library.

What’s an Ideal LCP Value?

After learning how to measure LCP, your next question is probably what exactly is a good value? What benchmark should you shoot for?

In the case of Largest Contentful Paint, the magic number is 2.5 seconds. If your LCP score is less than 2.5 seconds, it is considered good. The page in question likely provides a good user experience. If your score is between 2.5 and 4 seconds, Google considers it in need of improvement. Anything over 4 seconds is considered poor.

So, pretty cut and dry. No need to wonder, you know exactly what is expected of you by the search giant.

How to Improve Largest Contentful Paint (in WordPress)

If you find that after testing that your site does not meet the above benchmark, fear not. We will spend the rest of this post talking about how to improve your Largest Contentful Paint value if necessary.

The good news is that there is plenty you can do. On the other hand, many factors can influence LCP, therefore, correcting it is often not a quick fix thing. You need to look at the entire page loading process step by step. So let’s do that, shall we?

Find the Largest Contentful Paint Element

The first step in making your LCP value better is to find out what exactly your LCP element is. After all, how can you improve the delivery of something if you don’t know what to focus on?

If you are using PageSpeed Insights to measure your site, it will actually tell you what’s your LCP element further down the page in the Diagnostics section.

If you run a Performance test in Chrome’s browser developer tools, it will also show up in the timeline and even highlight the LCP element on the page. Click on LCP and then hover over the file under Related Node.

Break Down the Loading Process Into Parts

Next up, in order to optimize your Largest Contentful Paint, it helps to divide the process into several phases. As mentioned above, there is no one-size-fits-all approach. You have to look at it from different angles to find out what needs fixing on your site. The phases proposed by Google are:
- TTFB – Means “time to first byte”, as in the time from a user requesting the page until they receive the first byte of HTML.
- Resource load delay – The timespan for receiving the page files (HTML and CSS) and before the LCP resources itself is loaded.
- Resource load time – The phase in which the LCP resource loads.
- Element render delay – Finally, the time between loading the LCP element and fully rendering it.
Breaking down Largest Contentful Paint this way allows you to concentrate on the different phases and improve them individually.

Optimize Site Hosting and Architecture

These are measures to improve TTFB and resource load delay.

How fast visitors receive you site data depends on a number of factors. For one, there is the server. Even if your site has a very small footprint, such as a one page website, it can still be heavily delayed by a sluggish web server. Another factor are the components that your site consists of, such as its operating system, themes, plugins, etc.

As a consequence, improving all of these factors helps optimize Largest Contentful Paint. Here’s how to do it:
- Invest in quality hosting — As mentioned, the web server is a large factor and your hosting provider, therefore, an important consideration. Avoid shared hosting if you can and get a hosting plan according to your traffic. Plus, try to have your site on a server close to your audience.
- Use high-quality themes and plugins — Make sure you get your site components from good sources so that you know they are well programmed, lean, and have good support. Use the minimum number of plugins to reduce HTTP requests on your site.
- Keep your site updated — WordPress core and plugin/theme updates come with improvements, including performance fixes. Stay on top of them in order to get the latest and greatest.
With these in place, you can make sure that visitors receive your site data as quickly as possible. In order to know if your server is the problem, it helps to learn how to speed test your website. Also, avoid multiple redirects and look into the aforementioned server requests.

Use a Content Delivery Network (CDN)

Another way to improve time to first byte is to use a content delivery network (CDN). It helps to reduce the distance between the user and the place where they receive your website data from. This can make the loading time shorter.

Image source: Kanoha, CC BY-SA 3.0, via Wikimedia Commons

There are even specialized CDNs where you only put your images on external servers, such as Jetpack’s Site Accelerator. This makes a lot of sense since images are often the largest contentful elements. CDNs also sometimes implement the image optimization techniques we will talk about now.

Optimize Images and Web Fonts

We are now getting to techniques to reduce the resource load time. If you paid attention earlier, you will know that that is the speed at which the LCP resource is delivered to the browser. An important consideration here are visuals.

Images often end up the largest contentful object because they tend to be larger in size than text due to the surplus in information they carry. For that reason, one of the things you should focus on to reduce your resource load time is optimizing them:
- Use the correct size — Only use images as large as they appear on the page, otherwise you are making visitors load more than they need. This often means resizing your images before upload or setting the WordPress media options exactly to the size you need for your layout. The regenerate thumbnails plugin can help you optimize the sizes of images already on your site.
- Go for modern image formats — Not all image formats are created equal. To make your visuals as small as possible, use modern formats such as webp or avif, which have a smaller footprint than their predecessors.
- Compress images — Compressing means removing unnecessary data. You can do this either before uploading your images (e.g. via TinyPNG/JPG or RIOT) or automatically with WordPress plugins like Smush or Optimole.
- Lazy load images not on screen — Lazy loading means not loading images that aren’t visible in the browser yet. This can save lots of time. Just be sure to exempt images that do need to be visible immediately.
More on this in our article on optimizing images. While you are at it, also reduce the size and number of your web fonts. Load only what really need and consider hosting your web fonts locally.

Set Up Caching and Compression

Caching and compression are both techniques to generally speed up your website by making your site files faster to load. They can help with both resource load delay and load time.

The first one does it by pre-rendering your HTML documents and saving finished versions of them on your server so this process doesn’t have to be performed each time visitors want to see your site.

The second one means shrinking the size of your website files so that they are faster to transmit. You can do the latter either with Gzip compression or the newer Brotli compression. Combine it with minification for your files so that they take up less space and load faster.

A plugin like Autoptimize or many WordPress caching plugins can do all of the above and are an easy way to improve Largest Contentful Paint on your site.

Eliminate Render Blocking Resources

Now we are getting to improving element render delay. Even if you have optimized your page loading speed and the delivery of your LCP element, your score will still be bad if the element itself takes a long time to show up on the page. Here, render-blocking resources are the most common culprit.

You can use the linked article above for detailed instructions on how to deal with them. However, here a some short notes:
- Load scripts asynchronously and inline essential JavaScript.
- Inline style sheets into HTML (this only applies small style sheets, since inlined elements are not cached).
- Reduce style sheet size by eliminating unused CSS and JavaScript. Alternatively, defer non-critical CSS and minify and compress style sheets.
Use the Coverage tab in your browser developer tools to identify the elements that your visitors need to load first. It also helps you identify unused code that you may be able to remove.

Some Really Technical Stuff

If you are of the technical persuasion, here is some more nerdy stuff you can do to further improve your Largest Contentful Paint in WordPress and beyond:
- Preload images in HTML — Especially when used as CSS backgrounds or similar, add <link rel="preload"> to put priority on your most important images. This also works for fonts that could be needed to display the main text.
- Adjust the fetch priority — Tell browsers what they should load first by adding fetchpriority="high". Limit this to one or two images, otherwise it defeats the purpose.
- Use server-side rendering or prerendering — Especially if you have fast server. This reduces the amount of work needed to be done in the browser.
- Optimize web fonts via font-display — Set the font-display rule to swap, fallback, or optional to keep your text rendering from being blocked during web font load.
Largest Contentful Paint and WordPress in a Nutshell

Largest Contentful Paint is just one of three metrics that Google considers as Core Web Vitals and uses to judge a website’s user experience and – ultimately – search rank. If you are struggling with site and search performance, it’s one of the factors to look into.

In this post, you have learned how to figure out if this is a factor for your WordPress site, what LCP value to shoot for, and ways to improve it. Hopefully, by now you feel capable of changing your LCP for the better.

As usual, you don’t have to be perfect. Pick what you feel capable of, implement it, and take it from there.

Do you have any additional tips regarding the Largest Contentful Paint metric and how to improve it in WordPress? Feel free to chyme in in the comments.

The post Largest Contentful Paint (LCP) and How to Improve It in WordPress appeared first on Torque.
06.07.2023
How to Modify WordPress Block Themes (JSON Beginnerâ€™s Guide)
With the advent of the WordPress Site Editor (aka Full-Site Editing) and block themes, the way WordPress users have to think about how to modify their websites and themes has changed dramatically.

These days, instead of style.css and functions.php, there is a new central file for block themes: theme.json. Plus, instead of CSS and PHP, you need to be familiar with a new type of markup to make changes to it. Its name is JSON.

While that might sound scary, the good news is that JSON is actually quite approachable. With a bit of technical understanding and tenacity, it’s not that hard to understand and to start making theme changes by yourself.

To help you get there more quickly, this post is an absolute beginner’s guide to JSON and how to use it in WordPress. In particular, we will cover what JSON exactly is, which function the theme.json file fulfills in WordPress block themes, and how to use it to modify your themes.

Take a deep breath and keep an open mind, it’s going to be fine, I promise.

What is JSON?

Let’s start off with elephant in the room. What exactly are we talking about when we say JSON?

You might have heard about it before, especially in connection with the WordPress JSON REST API. JSON, short for JavaScript Object Notation, is a lightweight data interchange format. That means, it’s a way to represent, store, and exchange data between different systems, applications, or platforms.

There are other such formats out there, such as XML or CSV. However, what’s special about JSON and the reason why it has become so popular in recent years is that it’s not only easy for machines to parse and generate but also for humans to read and write. More on that below.

Although it originated from JavaScript, JSON has become a language-independent format. Most programming languages now have built-in support or libraries for parsing and generating JSON data. That’s also one of the reasons why it is widely used in web applications and APIs for data transmission.

Basic JSON Syntax

As mentioned earlier, JSON is actually quite simple. It basically shows data in key-value pairs, meaning it gives you the name of something and displays what value it has, such as "color": "#ffffff". If you have ever worked with CSS, this type of format should look very familiar.

Aside from that, JSON markup has the following features:
- Keys are strings, meaning words, and the value can be a string, number, boolean (true or false), null, array (meaning, a list of values), or another JSON object.
- JSON objects are delimited by curly braces (“{}”) while arrays use square brackets (“[]”).
- Keys and string values are enclosed in double quotes.
- The data format is strict, and any deviation from the standard syntax will result in a parsing error.
Already feeling lost? Let’s go over an example to make things clearer:
```
{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
						"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
			],
		},
	"styles": {
		"color": {
			"background": "var(--wp--preset--color--base)",
			"text": "var(--wp--preset--color--contrast)"
		},
	}
}
```
The above first defines a version of a file. It is divided into a settings and styles section, both of which define certain colors. In the settings part, the colors are assigned to a subcategory palette and displayed as an array containing several colors as well as values called name and slug.

The styles segment defines two colors, one for background, one for text. Both are only specified as variables. You can see that all the formatting mentioned above applies and how it’s easy to understand which keys and values belong together.

Is that at all understandable? Because it it is, the good news is that the example above is taken directly from WordPress. So, if you feel like that wasn’t impossible to understand, you are ready to start using JSON to modify WordPress block themes.

What is the WordPress theme.json File?

Ever since the introduction of Full-Site Editing/the Site Editor and block themes, there is a technology shift going on in the WordPress platform. Instead of CSS and PHP, it is increasingly relying on JavaScript and JSON to get things done.

The best example for that is theme.json. It’s a configuration file for block themes that helps to manage global styles and settings. It allows theme developers to define default styling, options, and configurations for the entire site and single blocks across the theme.

That way, theme.json can change both how the theme looks and what options are available for users to make their own changes. This gives you a single, central way to build and modify block themes, especially since anything you configure here applies to both the front end of your site and the WordPress editor in the back. What’s more WordPress will read the markup in the file and create the necessary CSS styling for you.

Before, the editor and website front end used different style sheets that you had to maintain separately. In addition, theme developers offered settings in different ways, even when using the WordPress Customizer.

Now, with the new, unified approach, users will have a more congruent experience.

Of course, as the file ending suggests, theme.json is written in JSON. As a consequence, if you want to learn to work with it and block themes, you need to be familiar with the markup that it is written in. That’s what we’ll do in the rest of this post.

How theme.json Is Structured

theme.json file has three main parts: settings, styles and custom templates/template parts. Here’s what you can control in each section:
- Settings — Contains global styles, meaning available color palettes, font families and sizes as well as other text options, theme widths, spacing, and borders. Basically, the fundamental controls to change your theme’s look. It can also do the same for individual blocks and you have the ability to set custom CSS variables.
- Styles — Here, you define the default styling of the theme, meaning the default values it should use for many of the options mentioned above. For example, you can set the theme background color and font families it will use for headings and body text. Again, the same is possible for single blocks. This is basically what style.css used to do.
- Custom Templates and Template Parts — Where you define the page templates and template parts that will be available in your theme and point the theme to the accompanying HTML files.
Using JSON to Customize WordPress Block Themes

To give you a better understanding how this is relevant to modifying WordPress block themes, let’s go over a number of practical examples.

Loading Local Custom Fonts to Change Theme Typography

The first thing we are doing is load some font files placed on the server to introduce a different kind of typography to your theme. We have a detailed article on that topic, in case you want to see more details, so here is a slightly shorter version.

The options for that are located in theme.json under settings > typography and then under fontFamilies.
```
{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": {
					
			}
		}
	}
}
```
In block themes, you add new fonts using these values:
- fontFamily — This is the name of the new font as it will appear in the CSS markup. It can include fallback fonts.
- name — The font name that will appear in the WordPress editor.
- slug — A unique identifier that WordPress uses to create the custom CSS property.
- fontFace — This corresponds to the CSS @font-face rule. It is the part that really enqueues the font.
In order to work, fontFace needs to include several other pieces of information:
- fontFamily — The name of the font once more.
- fontWeight — A list of available font weights separated by spaces.
- fontStyle (optional) — You can set the font-style attribute here, e.g. normal or italic.
- fontStretch (optional) — For example, for font families that have a condensed version.
- src — Path to the local font file.
Here’s an example of what that looks like:
```
{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "Advent Pro",
					"slug": "advent-pro",
					"fontFace": [
						{
							"fontFamily": "Advent Pro",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./fonts/advent-pro-v20-latin-regular.woff"
							]
						},
						{
							"fontFamily": "Advent Pro",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./fonts/advent-pro-v20-latin-italic.woff"
							]
						}
					]
				}
			]
		}
	}
}
```
Note that you can include several font files in fontFace, e.g. to load different styles. As mentioned earlier, you need to separate them with curly braces and a comma to do so.

For a way to add local Google fonts to your theme without manually changing the markup, you can also use the Create Block Theme plugin.

Modifying Hover and Focus Styles

Next, we want to deal with how to modify hover and focus styles for elements like links and buttons in WordPress block themes. Note that this is not yet in WordPress Core at the time of this writing. If you want to take advantage of it, you need to install the Gutenberg plugin so that you can use the latest improvements and features.

To make changes to hover and focus styles, can use the pseudo elements :hover, :focus, :active, and, for the outline property, :visited. The settings for this are located in themes.json under styles > elements > link or, alternatively, button.
```
{
	"version": 2,
	"styles": {
		"elements": {
			"button": {
			},
			"link": {
			}
		}
	}
}
```
Here’s how to define styling for your links:
```
"styles": {
	"elements": {
		"link": {
			":hover": {
				"typography": {
					"textDecoration": "none"
				}
			},
			":focus": {
				"outline": {
					"width": "2px",
					"color": "#111",
					"style": "solid"
				}
			},
			":active": {
				"color": {
					"text": "var(--wp--preset--color--secondary)"
				},
				"typography": {
					"textDecoration": "none"
				}
			}
		}
	}
}
```
The above markup does the following:
- It states that links should not be underlined when someone hovers over time with their mouse cursor.
- In the focus state, it adds an outline that is two pixels wide, solid, and has the color code #111111.
- When active, the link text takes on a color defined by a CSS variable and, again, is to set to have no text-decoration value.
Modifying Block Theme Colors

In this example, we want to introduce a custom color palette and also disable the option for users to make their own color options. You would do this, for example, to make sure that everyone on your website can only use approved brand colors and not introduce something else to your website design. We will also go over how to add colors to specific blocks or elements so that you can predetermine what they look like.

Understanding Standard WordPress Color Settings

To do this, you first need to know what color palettes are available in Gutenberg by default. These are:
- WordPress default color palette — This is always available. It provides colors that will prevail even at a theme switch. That’s why they are used for block patterns.
- Theme color palette — Ships with the theme and is custom to which theme you are using.
- User color palette — Colors added by the user via the available color picker. You can define them in the global styles under Colors > Palette.
One or several of these always appear when accessing the color options for any of the blocks or global styles.

Eliminating Color Options

Let’s first hide the default color palette and gradients. You can do this under settings and color like so:
```
{
	"version": 2,
	"settings": {
		"color": {
			"defaultPalette": false,
			"defaultGradients": false
		}
	}
}
```
Like many other options, it’s also possible to do this for single blocks. For example, here it is for the heading block:
```
{
	"version": 2,
	"settings": {
		"blocks": {
			"core/heading": {
				"color": {
					"defaultPalette": false
				}
			}
		}
	}
}
```
In addition, you can disable the custom color picker, so that website users won’t try to create and use their own colors.
```
{
	"version": 2,
	"settings": {
		"color": {
			"custom": false,
			"customGradient": false,
			"defaultPalette": false,
			"defaultGradients": false
		}
	}
}
```
If you input the above markup, all the usual color options will not be available, except for the theme colors.

Adding a Custom Color Palette

Next, we want to add our own color palette. We do this in the same place in theme.json by adding a palette key and then adding an array with the slug, color, and name for each of the colors you want to include.
```
{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#1B1031",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#FFFFFF",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#FF746D",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#551C5E",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#FB326B",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		}
	}
}
```
With this present in theme.json, you will find your own color options in the back end (and, in this case, also applied to your site).

You can also do the same for gradients and duotones. In almost all cases you can use pretty much any CSS color declaration. Hex, RGB/A, color names, whatever you want, even CSS variables. Only duotones strictly take Hex and RGB color values.

In addition, it’s possible to do the same for single blocks (be sure the names and slugs are different than in your sitewide settings):
```
{
	"version": 2,
	"settings": {
		"color": {
			"blocks": {
				"core/paragraph": {
					"color": {
						"palette": [
							{
								"color": "#1B1031",
								"name": "Block base",
								"slug": "block-base"
							},
							{
								"color": "#FFFFFF",
								"name": "Block contrast",
								"slug": "block-contrast"
							},
							{
								"color": "#FF746D",
								"name": "Block primary",
								"slug": "block-primary"
							}
						]
					}
				}
			}
		}
	}
}
```
Setting Default Colors

Finally, let’s cover how to set default colors for blocks and page elements. Here’s how to change the background and text color of the quote block:
```
{
	"version": 2,
	"styles": {
		"blocks": {
			"core/quote": {
				"color": {
					"background": "#222",
					"text": "#fff"
				}
			}
		}
	}
}
```
As you can see, setting default colors happens under the styles section. Here, we are targeting the core/quote block under blocks and defining a background and text color. Here is what it ends up looking like on the page:

By the way, if you want to find out what other settings you can tinker with in theme.json, refer to the developer handbook.

Introducing Additional Theme Styles

One of the best features of the Site Editor is that it offers style variations. These allow WordPress users to completely modify the look of their themes (colors, fonts, block styles) with the click of a single button.

Twenty Twenty-Three comes with a whole bunch of them.

How can you implement this in a theme? Simple, by including additional theme.json files.

A few notes:
- For WordPress to pick up the additional files, you need to place them inside a directory called styles inside your theme folder.
- The extra files get loaded in addition to the main file and override the included styles. That means, you only have to include markup for what you actually want to change. This is similar to child themes.
- You can name the new files whatever you want, as long as they end in .json. The Site Editor will automatically use the file name (without extension) as the display name in the back end. However, you can also include a custom name by adding "title": "[your preferred name]" at the top of the file.
For example, here is the (shortened) content of one of the style variations that Twenty Twenty-Three ships with:
```
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Canary",
	"settings": {
		"color": {
			"duotone": [
				{
					...
				}
			],
			"palette": [
				...
			]
		},
		"layout": {
			"wideSize": "650px"
		},
		"typography": {
			"fontSizes": [
				...
			]
		}
	},
	"styles": {
		"blocks": {
			...
		},
		"elements": {
			"button": {
				...
			},
			"h1": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"heading": {
				"typography": {
					"fontWeight": "700"
				}
			},
			"link": {
				"typography": {
					"textDecoration": "none"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)",
			"fontSize": "var(--wp--preset--font-size--small)"
		}
	}
}
```
This is the theme.json for the “Canary” theme style. As you can see, it introduces new duotone and color palettes, adjusts the layout width, and adjusts font sizes. It also adjusts the styling for several blocks and elements like buttons, headings, and links. At the end, it also changes the general theme font size.

All of this is enough to adjust the theme appearance quite dramatically:

At the same time, the theme variation file does all of this in about 250 lines of markup, while the original theme.json of Twenty Twenty-Three is over 700 lines long.

By the way, another option to create theme variations is to use the aforementioned Create Block Theme plugin. It has the possibility to export your current modified design as a variation to use on other websites.

Changing the Styling of Individual Blocks

We have already shown above how you can make changes to singular blocks. Just to formally mention it here more generally, you can modify singular blocks in settings and styles, each under blocks.
```
{
	"version": 2,
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"letterSpacing": "-0.019rem"
					"textTransform": "uppercase"
				}
			}
		}
	}
}
```
Here is what the markup above looks like in action:

It’s possible to target blocks via core/blockname, e.g. core/paragraph for the paragraph block. You can find the names of all of the core blocks here.

Adding Template Parts and Templates

The final thing we want to talk about in terms of modifying block themes via theme.json is the ability to add templates and template parts. You find those as options in the Site Editor when clicking on the WordPress logo in the upper left corner.

Naturally, in order to show up in the theme, you need to register them somewhere, which is another thing that happens inside theme.json. The exact location is under templateParts and customTemplates. These are placed at the base level of the file, meaning the same as version.
```
{
	"version": 2,
	"customTemplates": [
		{
			"name": "blog-alternative",
			"postTypes": [
				"page"
			],
			"title": "Blog (Alternative)"
		},
		{
			"name": "404",
			"postTypes": [
				"page"
			],
			"title": "404"
		}
	],
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "comments",
			"title": "Comments"
		}
	]
}
```
Each entry under templateParts takes three keys:
- name — This is the name/slug of the file for this template part, e.g. if you input “small-header”, your file would have to be named small-header.html.
- area — This matters so that the Site Editor knows where to assign each part. templateParts know three areas: header, footer, and uncategorized. If you don’t specify either of the first two, the template part will default to the latter.
- title — This is the name of the template part visible in the editor, make sure it is descriptive.
Objects under customTemplates also take three attributes:
- name — Same as for templateParts. Needs to correspond to the name of the associated HTML file.
- title — Also same as above, appears in the editor.
- postTypes — An array of post types this custom template supports such as post or page.
Custom templates and template part files need to be placed inside the templates and parts folders in the theme directory respectively. You need to build them out of block markup, which you can also do by creating them in the visual editor and exporting them. More information on that here.

WordPress theme.json Generators

If you want to create your own theme.json, below are some helpful tools to make the process quicker. They allow you to simply pick settings and styles from a visual user interface and then download or copy the corresponding theme.json file to your theme.
- ThemeGen Block Theme Generator
- WPTurbo theme.json Generator
Resources

For additional information on JSON and how to use it in WordPress block themes, check out these resources:
Ready to Modify WordPress Block Themes With JSON?

Modifying block themes is very different than working with classic themes. Instead of functions.php and style.css, a lot of the work happens in theme.json and HTML files.

This can be a bit intimidating at first, especially if you are not familiar with JSON. However, as you have probably seen above, the markup is quite simple to understand and get used to. It also offers a powerful way to make sweeping changes to the look and behavior of your theme.

Hopefully, with the examples above, you feel capable of implementing some of them yourself.

Have you modified your WordPress theme via JSON markup before? Please feel free to share your experience in the comments!

The post How to Modify WordPress Block Themes (JSON Beginner’s Guide) appeared first on Torque.
28.06.2023
Press This: Our AI Overlords

Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.

Powered by RedCircle

Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.

Last week was WordCamp Europe 2023, one of the largest WordPress events in the world. This year’s event was hosted in Athens, Greece with thousands of attendees. My guest today, James Dominy, was one of those attendees who also gave a workshop titled “How I Learned to Stop Worrying and Love our AI Rulers”. James is a Technical Architect at WP Engine, and we are gonna talk to him about his speech. And as someone who is still very much concerned about AI and WordPress, we are gonna ask James to help, alleviate my concerns or confirm them. I guess we’ll find out in this episode.

James, thank you so much for joining us today. Let’s start off with just give us a brief description of how you got into WordPress.

James Dominy: So I am not into WordPress, actually, my wife is into WordPress. I share my affiliation with WordPress with you in that I work for WP Engine, but I have been involved entirely exclusively on the hosting infrastructure side. But I have on occasion helped my wife debug problems in the plugins that she writes for her clients.

She works for a small agency in Ireland.

Doc: And your talk about WordCamp Europe was titled, â€œHow I Learned to Stop Worrying and Love Our AI Rulers.â€ Are robots coming for the jobs of WordPress devs and content creators?

James: Okay. Yeah, it’s straight to the heart of the matter.

Doc: Straight for it.

James: Yes and no. Let me just confirm your beliefs there. In brief, the take home of my talk was, AI isn’t there yet, and if you are in the WordPress community, actively doing things, whether it’s as a blogger, whether it’s as a freelancer, whether it’s as a plugin developer, a core Contributor, working in an agency, any of those things, you are probably already being exposed to AI like ChatGPT or Bard, and you are probably safe.

I think we’ve all seen those memes going around of spectacular AI fails. Like, give me a synonym for journey starting with D and it confidently answers trip. So, I think for a lot of things we are safe as long as we ourselves learn to use the AI tools now. Because we’re going to be competing against other people who are using AI tools to accelerate their own jobs.

I think the real danger lies in the incoming generation to the WordPress community. And I mean, a lot of what I’m talking about doesn’t actually apply exclusively to the WordPress community. It applies to so many jobs and lives and things in our lives beyond WordPress.

But WordPress obviously was the focus of WordCamp. So the way I characterize it is we need to be careful not to pull the ladder up behind us. AI as it stands now is good at replacing the easy tasks, the boilerplate tasks. The go-to example for me at WordCamp was something like, Hey, my editor needs me to produce a blog article on â€œ10 Things to do in Athens at Nightâ€ whilst I’m at WordCamp. That’s something ChatGPT is good at, but when you ask it to give you a hundred things, you are probably gonna find repeats.

You might also just occasionally, because there is inherent randomness in the AI output, find that it recommends something really dodgy. Like, Hey, go and visit this Nazi memorabilia plate collection in some random guy’s house, because it happens to be on Google Maps or there was an article about it and that somehow accidentally got sucked into the training set. So, what that means is that the job now, without AI is generate words, and then they go to a sub editor. The job when AI comes in is gonna be generate words with AI, and you become that editor. You become the fact checker. And it’s much the same on using AI to assist in coding.

Doc: Mm-hmm.

James: AI is good at simple tasks. It’s not good at combining completed simple tasks into more complicated systems. Not yet it, it will get there. But what that means is that the job that you might have given, to your intern or your junior programmer, on the team would be, go and do this fairly boilerplate thing, come back to me and then I, as a senior engineer on the team, might go and check it and make sure that it works.

And I know in the first place to ask for that task to be done. Whereas AI doesn’t know yet that that is a task that needs to be done to fulfill a greater task. That’s what I mean by combining simple solutions into more complex solutions is one of the weaknesses in AI at the moment. But that will probably go away.

What that means though is I get to the point where I can issues those tasks and know what tasks need to be done. I get to the point where I can read through an article and go, that doesn’t sound right, or that something’s wrong there, or, oh, I know I should not be recommending Nazi memorabilia in our particular magazine. That knowledge and those skills comes through having made the mistakes, doing the easy tasks. And what I mean by pulling the ladder up behind us is if those easy tasks are all gonna be done by AI in the future, we’re still gonna need people to direct AI. But how do we get new people coming into the community, into the field, who have learned on the basics?

Doc: Hmm.

James: And thus graduated to the point where they are able to use AI effectively for the more complicated problems.

Doc: I think I 100% agree with a lot of what you’re saying. AI is not quite there yet. It’s not gonna be replacing anybody yet. My bigger concern is more that, a writer will lose their job and get replaced by AI only to get rehired back to edit the AI and do just as much work, if not more work than they were doing before.

Or a coder for the same matter, right?

James: Yeah, absolutely.

Doc: Lose their job and then just end up rewriting, ChatGPT’S code or Co-pilot’s code. But that’s capitalism. That’s not necessarily AI. It’s just more of like AI being used as the excuse to kind of accelerate that behavior. But in five years from now, do you think that that won’t even be the case?

That like AI might be good enough to not think up a website, but code a website with very little editing afterwards?

James: Probably, it’s very hard to tell. I think that where we are on the AI curve.

Doc: Mm-hmm.

James: My personal belief is that it comes down to computation and memory, and the more that we throw it at, the larger the models we can create and the larger the models we can create, the more context the AI can use to generate its output.

And the more context it has, the better the results are gonna be. I think there’s some fundamental things that people perhaps don’t generally understand, that is, AI can’t innovate. They are trained and the way that they work, they spit out output that matches something they’ve been trained on within some random variation. That’s a very high level overview of it.

Can an AI write a new novel? Can it be creative? Not now. I mean, you can certainly ask AI to transpose your peom with the style of Shakespeare and that might make it better. Write me a peom in the style of Shakespeare about a jug of water on the table, because that’s what I’m staring at right now.

Can it do it? Yes. Is it being creative? That’s a deeply philosophical question. Will AI get better at solving complex tasks with more memory and more computation? Yes, absolutely. But it’ll only be able to solve tasks that have already been solved by a human or if not, it will need a human to ask them to solve the task in the first place.

Doc: And I think that’s a good spot for us to take a quick break. I realize I’ve been talking about my fears so far this episode when we come back with Press This and James Dominy, I’m gonna ask James to gimme the good news about AI and cheer me up and let me know in a realistic sense, what are some of the ways that, WordPress can benefit from this.

So, stay tuned for more Press This right after the short break.

Doc: Welcome back to Press This, a WordPress Community podcast. I am your host, Doc Pop. Today I’m talking to James Dominy, a Technical Architect at WP Engine, who recently gave a talk at WordCamp Europe 2023. The talk was titled â€œHow I Learned to Stop Worrying and Love Our AI Overlords.â€ And I love that title.

Obviously we’re all fans of Peter Sellers. Right. And you saidcthe Simpsons reference was also in there. What’s the, what’s the Simpsons reference I’m missing

James: The Simpsons reference is the newscaster whose name I now forget, who has this recurring phrase whenever something happens, â€œI, for one, welcome our new AI overlords, or I for one, welcome, our new alien overlords,â€ whatever the flavor of the episode is. Whoever’s taking over Springfield.

Doc: And so on the first 10 minutes of this episode, I talked to you about some concerns I have and just other folks might have about AI and we mostly focused on, I guess, economics and how it affects jobs. This talk sounds like it might be optimistic.

I didn’t get a chance to see your workshop, but do you generally believe that there will be more opportunities created by AI than challenges?

James: Hard to say. I’m not sure that I will actually be dispelling your nervousness. To be fair. I think AI presents a massive opportunity for so many things. I think one of the things that I’m most excited about is the potential to use AI in the WordPress community to make WordPress more sustainable, more energy efficient, and part of that can be AI analysis of the code.

Again, it’s not there yet, but it will be in five years. The other thing is using AI in our hosting infrastructure to manage the way we do things and maybe move somebody’s WordPress installation from one company’s infrastructure to another because they are greener or something.

So like that for me is an incredibly exciting opportunity. I think that also there are a lot of other ways that AI can be used in terms of generating content. Like the idea with AI, one of the great things is I can write 10 articles now in the space that I could write one. And I can A/B test my articles, I can A/B test my campaigns and we’re already doing this manually, but the scope increases hugely.

So I think there’s gonna be a net economic benefit for people who make money out of WordPress as well. Assuming that they get on board, and they leverage the tools that are becoming available. That doesn’t take away from the fact that, if we mishandle the way that we do this, I’m not gonna say that there is disaster, but I think that, there are risks and I think, a lot of people are thinking about the obvious risks.

But I think the real ones that are gonna get us, are gonna be those nuanced risks. Like the nuanced risk for us at the moment for me is the five years time we’re not going to have a skills pipeline of people coming into the WordPress community because we haven’t handled this well. We haven’t engaged with it, we haven’t talked about it.

And here’s the bit where I will dispel your nervousness. I was thoroughly encouraged by the set of talks and the schedule at WordCamp EU. AI was a hot topic, and we were talking about it, everyone was talking about it. And I think the best thing about it is that we weren’t talking about the obvious problems with the obvious solutions.

People were digging into the details, people were asking hard questions of the speakers, myself included. And that means that we are engaging with the problem now, and I think that as a community, WordPress will come out on top.

Doc: So, AI was obviously a hot topic at WordCamp EU just because it’s a hot topic everywhere and I guess I’d love to know, what was the, the general vibe of the presentations you saw, but also the general reactions from the crowd? Do you think we have kind of a consensus forming around AI and WordPress at the moment?

James: I don’t know that we have a consensus, but we certainly have a consensus to talk about it. I think the reaction was positive. A lot of the AI talks that were there were, this is how I’m using AI, this is how we could use AI, and it was how we can use AI and agencies, how we can use AI to develop plugins, how we can use AI to optimize SEO I think was one of the ones, I didn’t attend it. I just saw the title.

So people are talking about the opportunity and I think the response was positive. and a lot of the questions that came up, certainly in my talk, were how do we deal with it? I don’t have the answers.

We’ve gotta navigate that. but we are asking the questions, which means that we’re aware of it, which is the first step in solving any problem.

Doc: You are involved in the WordPress Sustainability Channel, and I know that sustainability and websites is important for you and I think that’s a really awesome kind of way to think about like how AI could be used.

As someone who writes a lot of content, one of the things I heard about recently, a nice little AI fix. I cannot remember the name of it. But it was a plugin that had four main features that were all kind of SEO related. One of them was, it would help write, A/B tests for, headlines or maybe like, SEO descriptions based on your content, here’s a couple suggestions for titles.

If you like, we’ll do these tests and if you like the results of the test, you can permanently switch over. And I thought that was pretty cool. The key feature, the big feature for me in AI, and this is so nerdy, but basically it was, reading your article and then helping you write the Yoast SEO short description, which I don’t know why, for me, I could spend, you know, hours writing a thousand words or whatever in a post, and then it comes to writing that meta description, and I’m just like, no, I’d rather jump out this window than write one more description about this thing. So like the idea of having AI do that seems wonderful. So there are these kind of clever fixes for things. Yeah.

James: I totally agree with you. Summarizing something effectively is hard. It’s never been easy. And I remember like writing the abstract for my, stuff in university was, oh Jesus, like I thought I was done. I’ve written my three pages. Do I really need to write this paragraph?

It was always the hard part, and that’s one thing AI is absolutely fantastic at is summarizing stuff.

Doc: Yeah, absolutely. We’re coming close to the end of this first section. I did have one question I wanted to ask you, and I should have given you more time to answer this. WordPress is an open source, platform and everything kind of connected with WordPress is also supposed to have this kind of open source, GDPL licensing or whatever.

When we’re talking about open source and AI for coding, Co-pilot maybe in particular, what are the issues? Can developers use Co-pilot to help write WordPress code that’s supposed to eventually be open source?

James: Oh, gotta prefix this with I am not a lawyer. I don’t know. I think that that is probably one of the other issues that we have to solve, but I think it is one of the obvious issues. I mean that, that’s already come up. People are discussing how, OpenAI and ChatGPT was trained on data sets that weren’t open source.

And now technically the results are legally ambiguous, especially when it comes to using it to code, et cetera. I think that can be cleaned up fairly easily. I mean, I say easily. If we adopt a framework where we say if something is open source, AI can use it and AI can spit it out and we get commitments from the companies that run the big AIâ€™s.

And everyone who writes their own AI model, because that’s coming too, because it’s gonna get easier. If they are more zealous and careful about the things that they train on, from a legal perspective, from a licensing perspective, and eventually it’s gonna be from a content perspective and a regulation perspective, that’s coming and it’s gonna happen, and there’s gonna be a couple of mines in the minefield that we’re gonna hit. But I think, that’s navigable. I think lawyers are gonna make a lot of money whilst it happens. I think on a day-to-day basis that’s probably not gonna affect most people.

As far as WordPress is concerned, there are probably gonna be cases where, we accidentally put some proprietary code into WordPress, and then that becomes a question of does the proprietary licensing of the code survive the transformation that it undergoes through an AI system? Because remember, AI outputs are random or randomized. And so what they’ve really done is they’ve looked at someone’s code and they have reproduced it. And by they, I mean the AI system itself, they’ve reproduced it with some random variations.

That argument is a lot stronger for content and a lot weaker for code because coding languages have very strict grammars and there’s a lot less random variation that works. And as a result, AI systems are constrained in what they output when they answer specific questions.

But again, the type of problems that we are gonna be using AI to solve for now are firmly classed in the utilitarian thing. AI is gonna be outputting boilerplate code. It’s gonna be doing transformations of markdown tables into HTML for us. It’s not solving complicated problems that have patents on them yet,

Doc: Mm-hmm.

James: I should emphasize the yet.

Doc: I can say that most of my concerns currently with AI could be resolved if we had some sort of system in place to keep content and basically if we just think about it as data, keep data from being scraped without permission and use without permission. I think that’s largely where most of my, my issues come from.

James: I think that’s that’s the easy first step. If we expand the robots start txt file, for example, or AI training systems. Honor that in some way. There are easy technical solutions to that problem.

Doc: Yeah. And I keep thinking about if Co-pilot was a little bit more like using Flicker where you can adjust your slider when you’re doing search, you can adjust a slider on Creative Commons. You can say, I’m looking for a totally free no attribution commercial usage photo or you can say, I want a little bit more variety. Iâ€™m not gonna sell this, so let me move this to non-commercial and I’m willing to give attribution, right? Like a little slider like that. If Co-pilot had something that was like, here’s the licenses that this corpus is using and here’s the license that this corpus is using, and you can kind of choose.

And if you’re going to output to open source, you can choose from the open source model. That would be such a no-brainer for Microsoft to implement.

James: I’d never thought of it before. I love the way you’re thinking though. That is fantastic.

Doc: Yeah. Well we are gonna take our final break and when we come back we’re gonna talk with James a little bit more about WordCamp EU, because I didn’t get to go this year and I’m looking forward to hearing about his experience. So stay tuned for more Press This right after the short break.

Doc: Welcome back to Press This, a WordPress community podcast. I’m your host, Doc Pop. Today I’m talking to James Dominy, who gave a talk at WordCamp EU 2023, titled â€œHow I Learned to Stop Worrying and Love Our AI Overlords.â€ We’ve spent the last 20 minutes talking about that topic and we haven’t really talked much about WordCamp EU.

And I guess just at the end of this episode, James, I’d love to just hear how was your experience this year? This was your first WordCamp, right?

James: My first WordCamp, my first WordPress meetup ever and it was amazing. One word, Athens, two words, Athens Summer. It was fantastic.

But that’s not the only reason it was fantastic. I want to say up upfront, it was an extremely well organized and smoothly run event. I was so impressed and a shout out to the people, especially who helped the speakers.

It was the smoothest presentation I have ever done. Thank you very much to everyone involved. Huge praise.

Again, like I said, AI was the hot topic. They, they were, I think the schedule and the talks were well thought out. Obviously you never get to attend everything. Because I was speaking, I missed like a half morning. But there were tons of things that I wanted to see and I can’t wait for them to drop on WordPress.TV so that I can see them after the fact. They were covering a wide variety of topics and I think the other thing is, in the closing, a couple of years ago, or more than a couple of years ago now, I think Matt Mullenweg’s sort of his mic drop moment was learn JavaScript deeply. And this time it, it’s gonna be learn AI deeply. I think he’s absolutely right. Lean into it.

Doc: Final question about WordCamp, did you hear anything that blew your mind about AI? Did you learn anything from anybody else during your talk? Like one cool fact?

James: Yes. More than one. I don’t know that there was anything mind blowing, but there were tons of little things where I was going, oh, I didn’t know we were using AI for that already. Like you just mentioned, we’re already using AI for A/B testing and for summarizing.

Great. And of course, the news about Jetpack was including AI directly, was big news obviously at WordCamp. It kind of caught me off guard in fairness was like, ah, damn, okay, they’re already on this. And here’s my talk about coding a plugin by yourself. No need for that anymore.

I think the thing that really blew my mind is the pace with which it’s being adopted. Everybody was using it. Everyone had a way to use it. Every conversation that I had, someone came up with a way, a new way to solve a problem they were having. It’s not a problem everyone has necessarily, but that’s the scary thing about the tool or not scary, that’s the amazing thing about the tool. It’s so versatile and you can use it to solve so many different problems.

Doc: Well, James, it’s been great having you on the show. Thank you so much for your time and, thanks for giving a talk at WordCamp EU. If people wanna follow you, and learn more about what you’re working on, is there a good place to send them?

James: I am not a social media person, unfortunately. The best I can kind of give is my LinkedIn if you want to send me an invite request and I will generally accept, And catch my talk on WordPress.TV when it drops.

Doc: And catch you in the uh, WordPress Sustainability channel.

James: Absolutely. Hashtag sustainability on the make WordPress slack.

Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.

The post Press This: Our AI Overlords appeared first on Torque.

22.06.2023
WordCamp Europe 2023 â€“ A Report: WordPress Next Generation
Well, it’s June again and you know that means: time for a report from WordCamp Europe 2023! Like many others, I descended on Athens this summer to attend the annual WCEU convention. It was the second in-person WordCamp Europe since the pandemic after last year in Porto. Besides meeting old friends, making new connections, and general socializing, I came to learn what’s new in WordPress and listen to talks on different topics.

The two main themes that dominated the discussion for me this year were artificial intelligence and the problem of bringing members of the younger generation to the WordPress sphere. Therefore, as I am trying to summarize some of my favorite talks this year, these topics will come up a lot.

So, if you couldn’t make it to the convention yourself, fear not. Here’s a glimpse into what WordCamp Europe 2023 was all about.

Opening Remarks: Why WordCamps Are Special

Naturally, the event, which was located in the Megaron Athens International Conference Centre, started with opening remarks by the leads of this year’s WordCamp Evangelia Pappa, JosÃ© Freitas, and Sjoerd Blom.

They stressed the importance of WordCamps as an opportunity for bringing people together, building the community, and sharing knowledge with each other.

(Case in point, one of the main things I learned this year was that the Gutenberg editor supports markup. That means, you can use ## to create an H2 heading, ### for an H3 heading and so forth. It’s a game changer. Thanks to Birgit Pauli-Haak for pointing that out to me!)

This year, 2,862 people from 100 different countries registered for the event, 1,300+ of them first timers. Besides the usual three tracks, they could also attend workshops, WP Connect for community events, as well as the wellness that we have gotten to know from earlier years.

Of course, what made it all possible were the 150 volunteers, many of which have been volunteering for several years in a row. In addition, the event couldn’t have taken place without the sponsors, which included 103 microsponsors from the community this year.

As usual, the event was live streamed on YouTube, so if you want to rewatch any of the presentations, you can do so here:
After that, it was time to dive right into the presentations.

WordPress Performance: Community Perspectives

The first talk I attended was a panel discussion on WordPress performance. The panelists were Miriam Schwab (co-founder of Stratic, now Elementor), Thierry Muller (Software Engineering Manager at Google/Chrome), Rahul Bansal (CEO rtCamp), and Adam Silverstein (moderator). They discussed performance not just in terms of speed but also in terms of usability and user experience.

AI and Website Performance

One thing that they touched on was how artificial intelligence could help with WordPress performance. Here are some of the use cases they imagined:
- AI could do all the actual optimization work, like image processing and compression
- It could help with the last mile of performance that’s hard for humans to do, like shift around render-blocking JavaScript without breaking the website
- Generally, AI could be better at contextually analyzing performance problems on individual websites and offer tailored advice
Why Has WordPress Not Improved as Much as Other Platforms?

Here, the panelists said that the first thing to keep in mind is that other platforms have control over their entire website stack, making it easier to introduce changes. That is simply not the case in WordPress, which has to account for many different setups. In addition, WordPress has legacy code to maintain for backward compatibility.

As a consequence, WordPress is simply moving more slowly. However, in addition, there has been a lack of focus on performance so far. The problem was mainly outsourced to hosting providers.

This is changing now. For the first time we have a WordPress performance team, which shows a shift in focus to the topic of performance, including environmental factors. So, WordPress will catch up but it takes a little longer.

Finding a Balance Between Features and Performance

What might help balance features and site performance, including for client work, is to treat performance as a feature in itself and tie it to ROI and business goals. Once a site has been published, the goal is for it to succeed on the web and user experience is very important for that. This includes non-front end parts, such as dashboards.

Therefore, if you or you client is thinking of adding a feature, A/B test it against performance. If users fall off, it’s probably not worth adding the feature. You can also use this to demonstrate to clients that adding more functionality might be hurting their goals, e.g. that it reduces sales due to performance. User experience is the ultimate goal.

Going Beyond Performance, What is Your Dream for WordPress in 10 years?

At this point, Miriam was the first to mention the need for making WordPress more attractive to young people. She brought her daughter to WCEU, who had never heard about WordPress. The platform unfortunately has a problem appeal to young people and getting out there.

Probably one of the main problems here is user experience, especially for new users. A possible remedy for that could be better onboarding. For example, finding a way to capture user goals, then automatically create a website for them with the necessary tools as a good starting point.

Other items on the wish list were better media management and optimization as well as video and image editing inside WordPress as part of content creation.

WordPress Performance: Q&A

The session ended with questions from the audience, which raised additional issues:
- Admin performance — There was an important reminder to also look at the wp-admin interface when it comes to performance, which currently loads a lot of JavaScript libraries on every screen. The panelists also reminded the questioner that optimizing this is a matter of resources and that right now content creation and front end performance have priority. However, it’s not a question of if but when the back end gets its turn.
- Modern image formats — Another question was about implementing modern image formats like AVIF or JPEG XL in WordPress. Moderator Adam Silverstein actually gave a talk on that at WordCamp US 2022 for those who want to learn more.
Panel Discussion: AI in WordPress

Another panel discussion that I attended was on the topic of AI in WordPress. The panel was made up of individuals whose companies already have AI tools and products out in the wild. Therefore, the discussion was about real and tangible examples of what AI is already used for in WordPress and not just theory.

Here’s who took part in the discussion and how they are already using artificial intelligence:
- Sujay Pawar (Brainstorm Force) — His company has developed an onboarding process using AI as well as other AI products.
- Gabriella Laster (Elementor) — Elementor offers access to an AI model in their page builder plugin that can generate text, change the tone, translate content, and generate custom code. They are also launching an AI model for image creation and other tools for web creators.
- Constanze Kratel (BigCommerce) — BigCommerce have been using AI to improve the developer process and for ecommerce.
- Daniel Kanchev (Siteground) — Siteground uses AI internally and externally for translation, support, and content classification (i.e. spam). They are also working on getting AI to help with website creation.
- Shane Pearlman (Liquid Web) –Shane’s company offers AI tools such as to build quizzes for the LearnDash plugin. He was also the moderator of the discussion.
AI as an Assistant for Website Setup

One of the biggest challenges in both website and content creation is the blank page. The panelists agreed that in order for AI to be useful for setting up websites, users need more than a prompt, they need choices. Collecting targeted feedback from users allows you to zone in on what they are trying to build.

Another issue that AI raises for the WordPress sphere as a whole is how to get AI tools to suggest WordPress as a website building tool in relevant prompts. Having outstanding documentation that they can index as content is key here.

What Else Are You Using AI for?

Among the panelists, one of the most frequent areas of application for AI was in support, both internally and externally. AI models can help support members, customers, and developers find the right information and provide targeted consumer assistance.

Siteground also uses artificial intelligence in customer communication as a quick help guide. Users can select an AI model to answer their question, which accesses the knowledge base and generates a reply. If that isn’t enough, they can escalate to a human operator.

All of the panelists stressed the necessity of proper feedback for training the AI. It’s important to both collect the right feedback and regularly test and review the answers the AI gives, not fully rely on user reporting. Another ways is to use AI as a copilot for support agents who can see its replies and provide feedback on them.

Translating Websites Using Artificial Intelligence

Another application for AI is in the area of translation. Here, too, it’s super important to train the models well. You need to provide them with the right terms and be prepared to improve the models over time. Plus, definitely have human translators at hand for checking and feedback.

This also works for customer support in different languages. Here, keep in mind that the target isn’t necessarily native language proficiency. The AI only needs to be better than two non-native speakers trying to communicate in a common foreign language. Customers want their stuff fixed, they don’t need perfect speech.

In the end AI can take you 80-90 percent there but you still need internal, human input to make it really good. The human touch is probably something that will always be required.

AI for Media Creation

AI can also really help streamline image production. For example, it can provide different color options for the same product photos, eliminating the need to have to photograph each item variation.

You might also be able to get different background images and settings or quickly localize banners. Overall, AI image generation is getting better quickly so we will see more variety and content soon.

Accessibility and AI

Another area that artificial intelligence will likely have a big impact on is accessibility. For example, it is already possible to feed Midjourney an image and have it describe its content for you. You can use that as an ALT tag or even have an AI automatically fill it in.

In addition, AI might be able give you a checklist of what needs to be done to make your site more accessible and also propose ways to do it. This is something that would be great to have in WordPress Core.

Search, Reporting, and Analytics

There are already different models for improving search and reporting. In the future, AI could give you the ability to log in to your site or tools and simply ask for your desired information, such as top-selling products, etc.

It might, at some point, even be able to implement the findings and act on results and feedback, such as adjusting product pricing. AI might even run tests and experiments and make recommendations from there.

What Are You Hoping to See in the Future for AI in WordPress?

The answers to this question varied:
- Gabriella — The majority of the population have not adopted AI yet. It would be great to make it more accessible and help people get on board. In addition, currently we are looking for AI to make our lives easier. However, the next step is to think about how AI can help us do things that we have never done before.
- Daniel — AI will soon help end users build their own websites. The next step is to have it work as an agent to help you run the rest of your business. AI could provide analysis and tips or you could give it a goal and it iterates on it.
- Shane — Get AI into business intelligence tools and analytics. Get it to a point where you can just have a conversation. It could look at how things are going on your website and give recommendations for improvements. The next step is for it to organize your life, book appointments, and work as an assistant. Right now, we are in pure discovery phase. We don’t know what’s possible yet until we see it.
- Constanze — Using AI for store optimization, automatic translation, and localization. Get sentiments and data from your community and aggregate it to propose improvements for your business.
- Sujay — You use so many tools in business, it would be great to have one central tool that integrates with all of them and can simply answer questions.
In short, we have exciting times ahead of us.

Tomorrowâ€™s Generationâ€™s Perspective on WordPress

This talk was given by Tycho de Valk who, at 16 years old, was the youngest speaker to ever be on stage at a WordCamp. He is also the son of Joost de Valk and Marieke van der Rakt (formerly Yoast), a support engineer at Yoast, and has his own web development agency.

After doing a survey among people his own age, Tycho discovered that their awareness for and opinion of WordPress was not that great. His talk was about why that is and how to address this problem.

3 Reasons Why WordPress Fails to Appeal to Young People

Tycho identified three reasons why WordPress is not popular among the younger generation:
1. Its marketing does not focus on young people
2. WordPress is hard to get started with
3. The platform is not as appealing as its competitors
To the first point, the social media platforms that WordPress is popular on are not the same as young people use. Gen Z is mainly on YouTube, TikTok, and Snapchat and listens a lot to influencers. WordPress does not take advantage of that.

For example, Shopify does do marketing for young people. They had a cooperation with Mr Beast (currently the most popular YouTuber) who named a mountain in Antarctica after the platform.

In addition, WordPress’ onboarding isn’t great, competitors are much better at this. Case in point, Shopify and Wix will both help you set up your site, in WordPress users are mostly left to fend for themselves.

Finally, WordPress is not that flashy, it doesn’t look as modern as its competitors. In Tycho’s survey, 75% of respondents liked the Wix or Shopify interface better.

How to Address These Issues

Fortunately, there are ways to address these problems. For one, better onboarding experiences already exist in the WordPress sphere such as Woo Express or Extendify. That shows that it’s possible to improve in this area. In addition, shifting the focus to social media for young people and collaborating with influencers are also within the possibility of the WordPress sphere.

Finally, to make WordPress more appealing to young people, the ecosystem has to work together. Unlike its competitors, WordPress is not one brand or one company. Therefore, the companies and people who make up the WordPress ecosystem have to come together and develop a unified marketing approach.

WCEU Globals: The Future of WCEU

The question of how to attract fresh blood into the WordPress sphere was also a central theme at another panel on Day 2. It consisted of WCEU global leads of the past years, specifically Jonas Andrijauskas, JosÃ© RamÃ³n PadrÃ³n GarcÃa, Lesley Molecke, Taeke Reijenga, RocÃo Valdivia, Bernhard Kau, and Tess Coughlan-Allen.

They got together to talk about the future of WordCamp Europe and existing challenges. Here is a summary of what they discussed plus answers to questions from the crowd.

Bringing Younger People to WordPress

WCEU can be a great portal for attracting younger users. To use it as such, we need to continue to be mindful about being open and inclusive for everyone.

Another idea is to expand the offers for children and extend them to young people. We could train more people as caretakers and make kids feel welcome. That way, they get to know what an event is and get familiar with the community early on.

In addition, the focus needs to shift from technical aspects to the possibilities WordPress offers, the ease of use, etc. We can also learn from a lot of brands that are present in higher education like Microsoft, Google, Cisco, etc. Maybe WordPress marketing could focus on schools and universities as well.

Innovation for WordCamps

Another topic that came up was the need to keep innovating. The format of WCEU has essentially stayed the same, we just added more things over time.

One idea was for a new generation of WordCamps that are more specialized and niche. This could open up new topical areas and audiences.

For that, it would also be possible to bring in people from outside WordPress to give presentations. Right now, WCEU is offering a mix of talks and workshops that cater to the largest possible audience. With more experimentation and focus on different niches and topics, the content could become more interesting.

On the other hand, it also helps that WordCamps offer a wide variety and scope in terms of topics. Therefore, it might be a feasible idea to experiment only on one track or on a smaller scale.

To find out more about this, the panelists invited everyone to answer the WordCamp survey. It provides important feedback and the organizers need community opinions and points of views to make decisions about WCEU.

Variations on a Theme: 20 Years of WordPress

Finally, one of highlights of WordCamp Europe is always the Q&A session with Matt Mullenweg. This year, he brought along both MatÃas Ventura and Josepha Haden Chomphosy.

Important WordPress Updates

The session started off with some updates from the WordPress sphere.

For one, WordCamps are making a comeback. In 2022 there were only eight WordCamps in the first half of the year, now there have already been 25, more than in all of last year together. There is also a community summit happening in Washington DC, August 22-23, 2023 just before WordCamp US.

Secondly, there was an update on Five for the Future, which was a big topic last year. There have been 727 more contributors, 95 more pledges, and 40 more company contributors.

What’s more, OpenVerse is now on openverse.org and contains nearly 800 million images and audio files, which are also available in Gutenberg.

Another big new addition is playground.wordpress.net, which allows you to run a WordPress instance online in the browser. You can use it as an instant development environment and even import it as an iframe.

It even runs on your phone. You can find out more here.

After that, Matias showed a video presentation about the progress of Gutenberg. You can find it below.

Then it was time for the usual Q&A session, which brought up some interesting inquiries.

How Do You Think We Can Work as a Community to Create More Diversity, Inclusivity, Variety, and Equality?

There is still a long way to go. At the same time, there are also already initiatives out there that you can get involved in such as #WPDiversity.

In addition, it’s important to listen to feedback from the community on how to provide more representation. It’s also something every single person can contribute to by welcoming everyone at WordCamps and building an open community.

Gutenberg Has Great Tools Now But Is There Some Assistance to Use It Better, to Help Create Good Designs?

The developers are experimenting with transformations where, if you select several elements, the editor could suggest patterns to you. AI could also be an option for this in the future.

How Do You See Gutenberg and AI Coming Together?

Matt said he has never seen things move as quickly as they are right now. Even Jetpack has an AI now but they are still figuring out the pricing, use cases, etc.

He further said the two mega trends of the next 20 years will be AI and open source, which are highly combinable. AI will start building things and use open source to do so. Both are also very democratizing technologies, we all have access to them.

It’s also important to keep in mind that the best things we are seeing now are the worst things we will see. In addition, the open source stuff is catching up really quickly.

Back in 2016 the motto was to learn JavaScript deeply, now it is Learn AI deeply. In the future, it will likely be as important as literacy. So, play with it, explore the possibilities.

Is There an Approximate Date for Gutenberg Phase 4 (Multilingualism)?

Phase 3 will start properly after WordPress 6.3 comes out. It’s hard be certain about Phase 4, also because we don’t know where AI will be in terms of translation in five years. The fourth phase might be able to start in 2024.

The reason for that is that multilingual is very very complex. For it to work, every single item in WordPress has to go from one-to-one to many-to-many relationships. This adds multifactorial complexity.

It will be most difficult thing we will ever do in WordPress, therefore we need to do it right. It’s important to get the base layer in place, after that things will more easily fall into place. We probably need 18 to 24 months of Phase 3 before the developers can start looking into Phase 4.

Do We Have Any Ideas or Plans for Official Mentorship Programs in the WordPress Community?

One of the most helpful things for people to join the community is when they have someone to turn to. There is a trial program for that in Five for the Future that launches on July 12 where people in the program are asked to become mentors for others, especially from underrepresented groups. If you want to be a part of that as well, you can join here.

Could We Have a Public View of Where in the Different Teams We Need More Support?

We could consider adding dashboards on WordPress.org that display metrics for the different teams. This would show where more help is needed.

Can We Add Volunteer Badges to Profiles on WordPress.org?

Yes, there are some ideas already in the works.

Closing Remarks: See You in Turin, Italy!

And then it was already over again. To be honest, no WordCamp has ever passed as quickly to me as this one. It seemed to happen in the blink of an eye.

Here are some stats for the event. WordCamp Europe 2023 had 2,545 attendees from 94 countries and 658 contributors on Contributor Day. There were 102 speakers from 29 countries and posts from and about WCEU reached 23.2 million people. Of course, none of it would have been possible without the organizers, so a big thanks to them again at this point.

If you want to help make WordCamp Europe even better, please fill out the feedback survey. Aside from that, WCEU 2024 will be in Turin, Italy. See you there, hopefully!

Were you at WordCamp Europe 2023? What did you like/dislike the most? Let us know in the comments below!

The post WordCamp Europe 2023 – A Report: WordPress Next Generation appeared first on Torque.
21.06.2023
Torque Social Hour: Felix Arntz talks Q&As

The Torque Social Hour is a weekly livestream of WordPress news and events. On this episode, we talk with Felix Arntz, a Developer Relations Engineer at Google and a WordPress core committer. Felix recently shared a tweet-thread about his experience with Q&As during WordCamp Europe, so we talked about how he’d like to see this format changed. We also talk about new projects that the Performance Team have been working on lately, including a proposal for enhancing LCP image performance with the fetchpriority attribute in WordPress core and enhancing the Scripts API with a loading strategy in WordPress 6.3.

Join us next each Wednesday from 3-4pm PST for WordPress news and interviews.

The post Torque Social Hour: Felix Arntz talks Q&As appeared first on Torque.

15.06.2023
How to Add Widget Areas to WordPress (Block & Classic Themes)
Widgets are a popular way to add extra functionality, features, and information to different locations of WordPress websites. They allow you to put anything from contact forms over calendars to lists of your latest blog posts on your web pages.

However, in order to do so, you first need widget areas — at least in classic WordPress themes. These are special designated parts of WordPress themes where, if you add widgets to them in the back end, they will show up in the front end as well.

Block themes using the WordPress Site Editor, on the other hand, no longer have widget areas. Here, adding widgets works very different than before, which is reason enough to cover this entire topic.

In the following, we take a look at different ways to add widgets to your WordPress theme. We talk about how to use widgetized areas and create new ones in classic themes, as well as how to make widgets show up in your block themes.

What Are Widgets and How Do You Use Them?

Before getting to the more technical stuff, let’s first settle real quick on what we are talking about when using the term “widget” in relation to WordPress. If you are using a non-block theme like Twenty Twenty-One, you find their settings under Appearance > Widgets.

This shows all the widget areas available in your current theme (here, it’s only the footer) and the widgets they contain. Everything visible here also corresponds to the front end of your website.

Typically, widgetized areas will be in the footer, sidebar, or header. However, you can also place them pretty much anywhere you want (as you will soon see).

How to Display Widgets on Your Site

The widget menu used to have a different user interface, but by now it has been converted to work with the block editor like the rest of WordPress. Therefore, you can use it like any other instance of the WordPress Gutenberg editor.

Add blocks via the block inserter (the blue plus button in the upper left corner) or its smaller version in the widget areas. You can also remove blocks in the usual ways and change their look and behavior in the right sidebar.

The blocks you can use span the usual options. Paragraphs, headings, tables, images — anything is possible.

Typically, widget areas are used for more dynamic sections where the information updates itself. You can still find those under the Widgets category in the block inserter.

As you can see they include things like displaying archives and categories, a list of your pages or the latest posts and comments, RSS feeds, or a search bar. Don’t forget to click Update in the upper right corner so that any changes you make here become permanent.

Alternatively, you find all of these settings also in the WordPress Customizer (Appearance > Customize) and then in the Widgets tab.

The advantage here is that you can preview how everything will look like on the page directly in the editor.

Creating New Widget Areas in Classic WordPress Themes

Ok, so far so good. We have settled on what widgets are and in which part of classic themes you can manage them.

However, what if you are not satisfied with your choice of available widgetized areas? What if you would like to be able to add widgets in other locations of your theme?

In that case, you have to create them yourself, which is what we will go through now.

1. Register Your Widget Area

Creating widget areas in a WordPress theme is a two-step process. The first step is to register them.

You do that using the register_sidebar() function inside functions.php. It looks something like this:
```
function ns_register_top_banner_widget() {
	register_sidebar( array(
		'name'          => 'Top Bar',
		'id'            => 'top-bar-widgets',
		'description'   => 'Widgets in this area will appear in a bar at the top of the site.',
		'before_widget' => '<div id="%1$s" class="widget top-bar-widget">',
		'after_widget'  => '</div>',
		'before_sidebar'=> '<div id="top-bar">',
		'after_sidebar'=> '</div>',
	) );
}
add_action( 'widgets_init', 'ns_register_top_banner_widget' );
```
Note: Like many theme changes, you’d be advised to implement this in the form of a child theme.

Some explanation of the different parts of the code snippet and what they mean:
- name — This is the name of the widget area that will appear in the WordPress back end.
- id — You need to give the widget area an id so you can display it later.
- description — This used to show up inside the Widgets menu. You can use it to, for example, explain the location of the sidebar to other users. However, it will only appear for WordPress versions not using the block editor for widgets, so you can also omit it.
- before_sidebar and after_sidebar — These two parameters allow you to add HTML markup before and after the widget area. That way, for example, you can wrap it in a <div> container.
- before_widget and after_widget — Same as above but for any widget that appears in this area.
There are other parameters you can use with register_sidebar(). You can learn more about them in the documentation. However, for our purpose, the above is enough.

Once present in functions.php and with the file saved, the widget area will already show up in the WordPress back end.

2. Outputting Widget Areas in Your WordPress Theme

While you can already see the widget area in the dashboard, currently putting any blocks or widgets in there will have no effect. That’s because there is not yet any markup that tells the theme to output whatever you add to it.

This happens via the dynamic_sidebar() function. For example, to output the widget area that you created above anywhere in your theme, you can use this function:
```
<?php dynamic_sidebar( 'top-bar-widgets' ); ?>
```
Note how the code contains the same id as the widget area created earlier in order to display it.

While the above works, it often makes sense to use a slightly more complex snippet:
```
<?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?>
		<?php dynamic_sidebar( 'top-bar-widgets' ); ?>
<?php endif; ?>
```
The code above first checks if the widget area in question has any widgets in it and adds it to the page only if that is the case. It also contains some more markup like HTML classes and ids to make it easier to customize the output via CSS.

That only leaves the questions, where do you put this markup?

The answer: Anywhere in your theme files where you want the widget area to appear. Typically that is inside page template files like page.php or single.php. However, you can also add it to something like header.php or footer.php. To make a decision, it helps if you know the template hierarchy and understand how themes work.

In this case, for the Twenty Twenty-One theme, we place it inside header.php right after the opening of the page.

With the code in place, when we now put a widget inside the newly created area, it will show up on the website in the intended place.

Alternative: Use WordPress Hooks to Display Widget Areas

Instead of adding the code snippet directly to your page templates and theme files, you can also achieve the same output using WordPress Hooks.

These are little pieces of code placed in strategic locations inside the aforementioned files that you can use to tell WordPress to execute functions in that very place without physically placing the code there. Instead, you can place the functions in question inside functions.php. Doing so has the benefit that it’s possible to manage all your widgetized areas from a single place.

What would that look like for our case?

Here’s how to place a widget area using a WordPress hook:
```
function ns_output_top_banner_widget() {
	
	if ( is_active_sidebar( 'top-bar-widgets' ) ) :
		dynamic_sidebar( 'top-bar-widgets' );
	endif;
}

add_action( 'wp_body_open', 'ns_output_top_banner_widget' );
```
The Twenty Twenty-One theme has a hook named wp_body_open() insider its header file. By hooking into it, we can display the widget area in the same place without modifying the file itself.

As mentioned, the code snippet goes inside your (child) theme’s functions.php. This method is especially suitable for themes that contain a lot of hooks, like the Genesis Framework.

How to Add Widgets in Block Themes

So far, we have only talked about how to create widget areas in classic themes. However, what about block themes, which – after all – will likely become the de-facto standard for WordPress themes.

Here, because the Site Editor works very differently, you don’t really have widget areas. You will also notice that the Appearance > Widgets menu does not exist.

However, you can still add widgets, content, and other elements to your theme using similar principles as above.

Enter Page Templates and Template Parts

The first thing to notice here is that you are a lot less constrained in your placement of widgets with the block editor. Since you are not limited to pre-configured widget areas, you can place any page element pretty much where you desire.

However, you can still use blocks like widgets in classic themes by using page templates and template parts. Access them in your block via menu in the Site Editor on the left (click on the WordPress logo in the upper left corner to open it).

This gives you a list of available page templates on your site. They usually range from page over archive templates to the 404 page.

It’s similar to what you would find if you had a look at the theme files in a classic theme.

Under Template Parts, on the other hand, you find templates for parts of your website like the header, footer, or comment section.

Click on any of them to open in the editor. Alternatively, you can also make changes to your templates and template parts via the Template Editor. That is a slightly reduced version of the Site Editor that you can open via the normal page editor. Just open your desired page, click on the template name under Template, and then Edit template.

You can also pick another template from the drop-down editor.

Adding New Elements/Widgets

If you know how page templates work, you probably understand that any changes you make here will affect not just a single page but every single piece of content on your website that uses the page template or template part. Therefore, any page elements that you add to them will appear everywhere on your site where those are active.

For example, you can add a latest post widget to the footer template part.

If you do, and save, it also appears on the front end of the website for every page where this template part is present.

If you think about it, that’s not very different from how classic widget areas work. They are also simply a way to add page elements and content so that they are reproduced in the same place across your entire website.

The only difference here is that there is no need to edit files. Instead, you can do all of it in the visual editor, WordPress creates and modifies the files for you.

Creating New “Widget Areas” in WordPress Block Themes

So, how do you create new widget areas in block themes?

The answer is: You don’t really. However, the closest equivalent to it is creating new page templates and template parts. Doing so allows you to add content that will show up only in limited parts of your website.

Let’s go over an example to make things clearer. Say you want to do the same thing we did manually on top. In the past, you would have to register a widget area and then add the code to output it. With the Site Editor, you can achieve the same thing. Only in this case, it’s much easier.

One possibility is to create a new template part. For that, under the Template Parts menu in the editor, click the plus icon at the top.

In the menu that appears, give it a name (for example, “Header with top bar”) and choose the type (in this case, Header, of course), then start editing. Populate it with any page elements, widgets, and content you need or desire.

When you are done, you still need to assign it to the page template that you want it to appear in.

For that, go to that template (in this case, Home) and find the existing header. Click on it, then on the three dots to open its menu, and choose Replace header.

This will open a menu with available template parts and patterns on your site.

Pick the one you just created to input it, then save the page template. If you now go back to your website’s front end, you see your newly created header live on the page (and only there).

How to add New Widgets/Blocks

The final question that remains when talking about how to create widgets and widget areas in block themes is how to add more widget choices. After all, by default, you are only limited to a handful of options. Luckily, there are different ways to add more.

For one, you can install Gutenberg block plugins, many of which contain different widget blocks such as forms, maps, or carousels.

In addition, you also have the possibility to install singular blocks with widget functionality. For that, first click on the block inserter inside the WordPress Site Editor.

Once open, enter a search term for the kind of block you are looking for in the field at the top. Besides any options already present on your site, the editor will also search the WordPress block directory and show fitting options.

If something sounds like what you are looking for, simply click on the block in question to install it on your site and insert it into the page in the current position. Place it in the page template or template part where you want it to appear and save. Then, admire it on the front end of your site.

By the way, you can always remove singular blocks that you installed in the Plugins menu in case you don’t need them anymore.

Widgetizing WordPress Themes is Not That Hard

Adding widgets and widget areas in WordPress is an important skill to display a wide array of features and information on your site. They help to make your site more interactive, informative, and usable.

In classic themes, the approach to creating widget areas is a little more technical. You need a rudimentary understanding of WordPress file architecture and feel comfortable with a code editor and making adjustments to PHP code. In block themes, on the other hand, you can do the same with just your mouse cursor.

What’s important to keep in mind is that the principles are the same, only the implementation differs. Now that you know how it’s done, use this knowledge to improve your site!

What is a must-have widget that you like to place on your websites? Are you using a classic or block theme to implement it? Let us know in the comments!

The post How to Add Widget Areas to WordPress (Block & Classic Themes) appeared first on Torque.
15.06.2023
Press This: The Frost Theme is Here

Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.

Powered by RedCircle

Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.

The WordPress Repository has always been a great place to find powerful and free tools to extend your WordPress site. You can find plugins, blocks and themes, and you can even sort by features such as block compatible. And as of this morning, there are 302 block compatible themes or block themes listed on the WordPress themes section of the repository.

One of the newest of which is Frost and my guest today is Brian Gardner, a Principal Developer Advocate at WP Engine and the creator of Frost Theme. Brian, congrats on getting your theme into the repository.

And I know you’ve been on the show before, but let’s just give our listeners a reminder. How did you get into WordPress?

Brian Gardner: Well, Doc, thanks for having me back. Certainly glad to be here. I love talking about WordPress. I enjoy sharing my story. I don’t get to do it as often as I used to, so I’ll give the abbreviated version. Back in 2006, I was a project manager at an architectural firm, and I was by far one of the younger people working there.

And so by default, I became the computer guy. And so I taught myself a lot of things, back in the day. It was really right around Microsoft Office and all of that stuff. But, my curiosity about the internet and blogging, which was new back at that point, peaked. And so I started dabbling around with WordPress and wanted to just have my own blog.

And so through that experience, I figured out how to install a WordPress site and from there downloaded a free theme from a different repository, though it was, I think, deemed the official WordPress repository, but it was a different location. Grabbed a theme, started playing around, put it up, tweaked it. Created my own theme, gave it away on my site for links and downloads and email and exposure. And from that I started to land freelance work, people who wanted to have the theme customized.

So I called the vacation money, right? Cause I still had my full-time job and just kind of nights and weekends. They would pay a couple hundred bucks to do a thing or two and then from there I had a guy, a real estate agent from Boston who wanted me to do a whole custom design for him, which I did. And it was overkill for him cuz he just wanted a blog. And this was more of a sort of a CMS based, brochure site looking thing.

And so, I asked my audience what I should do with it, and then I followed up and said, would anybody buy this? And, the resounding audience echo was yes. And so I followed that up with the next smartest question, which was, how much would you pay for a premium WordPress theme? And at that point, things became real because there was a lot of people saying that they would spend money on it.

And so I bundled it, packaged it, called it Revolution, and started selling lots of Revolution. And, that was my window into WordPress. And then consequently the eCommerce side of WordPress by selling a theme. That’s the real quick version. Obviously some ups and downs and lefts and rights along the way.

Doc Pop: You know, that has me wondering, I know that you have plenty of examples on your site of themes that you’ve made. And you’ve sold themes as well. We mentioned at the top of the show Frost WP theme, which we’re gonna get into in a second. But I’m just curious, is that the first time that you’ve uploaded a theme to the WordPress repository for like the free theme section?

Brian Gardner: So Frost is not the first theme. It’s the first WP Engine theme that we submitted. But ahead of that, within the last 12 months, I’ve submitted four different Full Site Editing themes. Almost hard to believe, right? Almost 15 to 18 years that is the case, but it is.

So I personally have four themes up on the WordPress theme directory right now. All of them are Full Site Editing themes, and then Frost, of course, is the latest and the one with the most downloads already.

Doc Pop: Wow, congrats. And let’s just get into it. What is so special about Frost theme versus the other themes you’ve worked on?

Brian Gardner: Frost is actually the first theme I started creating that was a block based theme. I started about two years, almost two years ago, over the summer. And this was even ahead of my hire WP Engine when I realized the direction of where WordPress was going with at the time it was called Gutenberg Editor. But now we know Gutenberg as the exploratory plugin that brings the features into WordPress core. When I realized sort of what blocks were, how patterns worked and the trajectory of where this was all going, I got really excited. So two years ago I started creating this theme called Frost.

And at the time it was a Genesis based child theme. And so that was a little bit ahead of going and switching it over to a block-based theme. But shortly into my development of that, I realized, okay, I now get this and I now know where this can go. And so originally Frost was set up to be a very vanilla theme, but a powerful one because it had a lot of patterns and the idea behind it was sort of setting these patterns up as wire frames so that if you were an agency or a freelancer, it’d be very easy to build top to bottom pages of a website because each pattern sort of represents a certain section of either a homepage or an about page or a pricing page.

And so I was like, well, if I came up with a system, a powerful theme that had all of these sort of insertable with one click things, then people could then design with that opinionate them, add photos, images, change, text colors, and so on. And so Frost has, from that point, been arguably one of the most up to date and bleeding edge WordPress themes out there because I’ve obsessed over the development of Gutenberg, the plugin, WordPress core, and really sort of fine satisfaction in living on the front line in the bleeding edge.

And so Frost always supports and implements all of the things that were new as they came in through Gutenberg, which is okay, and we made that available once I came over to WP Engine. We brought Frost in, and it has been open sourced ever since, and available through GitHub and through the website.

But until WordPress 6.2 dropped, it was always deemed sort of experimental and not production ready and kind of use at your own risk, even though it was very, very stable. And so when I knew WordPress 6.2 was going to be arriving, I talked to our product teams and the vice president of product here at WP Engine.

I was like, look, I think Frost is like prime time and ready to go, and it’s my recommendation that we make it ready, put it on the repo, get more distribution out of it. Encourage people to use it, to learn from it, to fork it, to, to do whatever they want with it. And so we all collectively agreed and shortly after 6.2 dropped, we submitted Frost to the directory.

Doc Pop: I know you’ve always mentioned Frost as being kind of an experimental project, an experimental theme, boundary pushing, and I just always kind of thought of that as the things you were implementing in Frost were experimental. You can tell me if I’m wrong here, but I think what I’ve kind of come to realize is it was experimental in that it was just waiting for WordPress to get solidified.

It wasn’t that the features themselves were wildly experimental. It was more that you were waiting for WordPress 6.2 or something like it to come and say, look, this is a structure that you can build on now, and everything’s Stable and ready, ready for a theme like yours.

Is that a good way to put it?

Brian Gardner: Yeah, that, that’s mostly accurate. I mean, really what it came down to was, up until 6.2, the development of WordPress itself by way of the Gutenberg Plugin, Gutenberg is a plugin that’s now an experimental plugin that ships a new version every other week. And this is where they test and bring in new features that ultimately will land in WordPress core.

And so every two weeks you get a new version of Gutenberg, but WordPress core itself only updates on a three to maybe four times major release basis per year. And so what happens is within each of those three or four months, you’ve got all of these new things that are added to the Gutenberg Plugin.

So technically they’re at the disposal of people who wanna test them and play with them and use them. However, because it’s experimental, we always said Frost needs to be also cuz it requires the Gutenberg Plugin, which could at any given moment break. And it’s bad to encourage people to use something on a production based site that you know could potentially break.

And so the difference sort of between the development of WordPress Core and the Gutenberg Plugin kind of has slowed down because a lot of the features have arrived and are available. I realized, okay, now we’re at a point where WordPress itself is out there and the development of things that are new that could potentially break is slowing down.

Now is the time to do it.

Doc Pop: I think that’s a great spot for us to take a short break. When we come back, we’ll continue talking with Brian Gardner, a Principal Developer Advocate at WP Engine about the Frost theme and what makes it so unique in the WordPress Plugin repository. So stay tuned for more WordPress News.

Doc Pop: Welcome back to Press This, a WordPress Community podcast on WMR. I’m your host, Doc Pop, and I am talking to Brian Gardner from WP Engine. He’s a theme creator who just recently submitted the Frost theme, which is a project that he made with the WP Engine team to the WordPress plugin repository.

In the beginning of the show, we talked about that process of uploading it, and I think one of the things that stuck out to me, Brian, it’s felt very much like when 6.2 came out and you had this theme that you were very proud of, the Frost theme, you felt it was a really good way to kind of push the boundaries and show people what could be done with these themes. It really feels to me that WP Engine took this theme and decided to make it a flagship theme to really show people what could be done.

I’m wondering if that’s kind of how you think about this theme or what you think this theme serves. Both for the community, but also for like WP Engine, where you work as a developer advocate.

Brian Gardner: Yeah, so I talked earlier about the idea of it sort of being a wireframe theme. As it was originally built as we knew 6.2 was coming and as the release of what we call version 1.0, which is where we brought it to production ready. I did some design opinionation to it. So I’m like, okay, well now that this is actually gonna be in a place where a lot of people may download it, we really wanna encourage people to use it.

So it needs to actually be a little more interesting than it had been. So one of those things I did was I updated several of the black patterns that were in the theme to make them a little more usable and a little less just black and white-ish. I reset the color palette. I implemented an electric blue as part of the base color for it.

But part of WordPress now the capability is within a block theme. You can have what’s called style variations and that sort of gives it, we’ll call ’em skins, I guess is a good way to explain it. The ability for users to sort of change color systems for the theme. And so somebody could go in and choose the red version of Frost or the teal version of Frost or purple or orange.

And so there’s eight total, which I felt was a good place. And of course you can customize that to like the exact hex code you want also, right? That’s the beauty of the site editors being able to go in and change the color palette yourself. I opinionated the design. I made things a little more interesting and created a few more, what’s called layouts or full page patterns.

So if you wanted a pre-built homepage or an about page or a pricing page, or even a link page similar to Link Tree. Users could click and insert these sections all at once and then customize them from there. So I really tried to take it from sort of an experimental, educational theme to, Hey, let’s use this for something that people can actually, our customers at WP Engine or agencies, and freelancers and people could build actual websites with it.

Doc Pop: There’s two ways I see that you could have gone with a theme like this as sort of a big rollout of what you think a Full Site Editing theme should be. One is to have a very minimal page and just encourage people to build on top of it.

And the other is to really pack it with features and it feels like that’s kind of what y’all landed on is, is something for everyone. There’s Dark and light variations or as we kind of call ’em, like Developer mode variations for the views. There’s tons of patterns.

You’ve even got things that would be useful for things like testimonials, calls to action, things like that. Was there a moment, where y’all were kind of thinking about how do we know what’s too much to put in here? Or is the goal to just put in something for everybody so that if I’m opening up a bar that also has live music, I could download this and get it, but also if I was in a kitchen, I could do that.

Is that sort of the goal to cover everything or I don’t know. I’m rambling, but I’m just kind of curious how y’all went about thinking about that.

Brian Gardner: Yeah, that was always the problem, right? Like the idea of a monolithic theme. At least a downloadable single theme really is too much, right? WordPress powers 43 percent of the internet or whatever the number is. And there’s just so many different ways it can be used, which means like you could create a theme that just has 500 patterns and so much of that is not used on an individual basis.

And so for a theme that came with patterns and with colors and all this other stuff, It really was about maintaining a balance between, this is usable on several levels. Not all, but several, with common sections or patterns or things like that, that are pretty much you see on any kind of site, right?

Like a testimonial section can be used for a course creator or a food shop or a lawyer. So like trying to identify what are some of the types of sections that can kind of be used across varying niches. And so most of what’s in Frost is just that, which is a good place to start. It doesn’t have everything. It can’t do everything. But it’s enough to get most of the way there or at least show people how things can be done. And we’ll go from there.

The cool thing about WordPress and the way the theme update system works is that you can add patterns to a theme update and then deploy that update across all of the sites. And it doesn’t break anything cuz all it’s doing is just increasing the library in which you could draw from. And so like that’s part of what version 1.0 was. Get a handful of footers in there, some call to actions, because everybody needs a call to action on a website. Let’s see where it lands and what people have requested and where it goes. And we can always add more if we need to. And so that was sort of the decision process behind it all.

Doc Pop: Over on WP Tavern, Sarah Gooding wrote that “Frost could easily be used for building agency websites, portfolios, business sites and more. It’s easy to see developers using it as a starter for multiple projects, given its minimal design.” She also mentions that there is a forked version of Frost, your Powder theme, and I actually didn’t know about that.

But, can you tell us a little bit about Powder?

Brian Gardner: Yeah, so Powder was just something that I ended up doing for my own sake. Every once in a while I’ll do something for a friend o rprevious client, like just a sort of side project, custom design or something like that. And of course I would at the time always use Frost. But in most cases I was like personally it would just be easier to just have a stripped down version of a WordPress theme, something that was so vanilla, so basic that it would be like literally the ground floor.

And so what I did was I actually forked Frost and obviously renamed it and made it Powder, but then I stripped all the patterns and all the specialness out of it, and it’s just literally like a black and white canvas theme. No special templates, no patterns other than the header and footer that need to be there.

And so I just personally wanted my own thing to have as a starting foundation, because I’m a creator and I love design and I have hundreds of ideas that run through my head on a daily basis, just on cool ways to do design. And so it’s like, well, at least if I had my own version of something, I could, one, put that on the theme directory, but also it allows me to just play around with like the child theme system and say, oh, here’s a fun design let me just see if I could just knock something out without having to like recreate the wheel every time.

Doc Pop: And so with Frost, you started this as one of your kind of personal projects. You’ve now handed it over to the WP Engine team to kind of create something new and bigger. What’s going to get added to this theme? It already comes pretty packed.

Is the next step gonna be adding more patterns, or is the next step gonna be listening to the, you’ve already got a thousand downloads already, or a thousand users. Is it gonna be listening to them and kind of like making tweaks and fixes for now?

Brian Gardner: The answer to that question is yes, pretty much to everything you said. In fact, this morning I was adding a couple patterns. I did a workshop last week around conversion focused patterns and how to build them. And so what I did was I built four new patterns to demonstrate in the workshop. And so I was like, wow, this makes sense now that I’ve built these and people have seen them. And they’re very lightweight. And of course they’re all things that I think were relevant to a website. So I’m adding them to Frost as an update that might go out tomorrow. Along with a little bit more just sort of work within the file structure.

The style sheet and theme JSON to get a little technical are two files that handle styles. And as I find more ways to consolidate code and to optimize kind of how things are done from a coding and style standpoint. I’m doing a little bit of reorg just on things that are sort of recent with WordPress 6.2, and so just kind of optimizing it and doing little tidying up, but also adding some more value by bringing in some patterns and then at that point we’ll see how people are using it and what they think and what they want.

Doc Pop: This is another great spot for us to take a quick break, and when we come back, we’re gonna wrap up our conversation with Brian Gardner about the Frost theme and Full Site Editing themes. So stay tuned for more Press This.

Doc Pop: Welcome back to Press This, a WordPress Community podcast. I’m your host, Doc Pop, and I am with Brian Gardner today talking about the Frost theme that just went up on the WordPress.org theme repository. And Brian we’ve spent the show talking about the features of Frost and you can definitely pick up on how excited you are about Full Site Editing and about just theme design and web design in general.

I think one of the last things I wanted to ask you about is, this was a project that you started on your own, and then you joined WP Engine as a Principal Developer Advocate. How does releasing a theme like this fit into that role of a Principal Developer Advocate at WP Engine?

Brian Gardner: Well, obviously developer advocacy within a tech company is really all about educating the users, whether it be the software that the company itself produces or that the software is, is all based upon. So I was brought in part to sort of evangelize the use of WordPress. Continue to talk about how folks can, can use WordPress, can build with WordPress.

And of course, at the time Full Site Editing and block-based building, obviously something that’s very relevant. And of course we have our own products, right? So we’ve got, Local, the local development tool. We’ve got ACF, we’ve got obviously Frost, we have some of the Genesis products and stuff like that.

So it’s really just a mixture of these are our WordPress products and it’s our job to, to facilitate community around them, around the software. Some semblance of giving back, right? We have a core value of Committed to Giving Back. So there’s contributions back to WordPress in a way Frost and some of our other projects are examples of that.

And so it’s just our job to help educate and train and to foster the community. So, it’s the position I signed up for when Heather and I were talking about this, the WordPress side of developer relations did not exist at WP Engine. I was brought in as the first, and so it was really just an opportunity for us to kind of pave our own way and say, this is what we think this looks like.

And I think we’ve done a great job. We’ve got a couple members now, Sam Munoz, who’s a community manager with us, and Damon Cook also on the WordPress side of Developer Advocacy. And we just do our best to be as helpful as we can to support our internal products and to just continue to innovate WordPress.

Doc Pop: And this seems like a good spot to plug Build Mode, your weekly developer workshop. Why don’t you tell us about that?

Brian Gardner: So build mode is every Friday at 10:00 AM central time. It is something that Sam and I came up with last year and we said, let’s do something official. Let’s make this not a workshop or not a teaching thing, but more an interactive, immersive conversation. And so we usually have 20 to 25 folks every Friday morning.

It’s an opportunity for us to talk about things that are coming from customers or non-customers, just people who are building WordPress websites and have a WordPress based business. It allows us a little more insight and direct intel into pain points of this.

And it’s been a treasure chest of just insight, good market research, just all of these things. And we’re really developing a great community there. We have a lot of people who come back every single week. They make it a point to work their schedule around Build Mode because they don’t want to miss it.

And so we’re super pumped about that. Again, we talk about WordPress, sometimes what’s new with WordPress features that are coming, but also just sort of what services do you offer in your WordPress based business? So we get outside of the immediacy of building websites and just talk a little bit more about life and work balance and stuff like that.

So it’s great.

Doc Pop: And let’s wrap this up. Can you just tell folks where they can find more about you and Frost and build mode? What’s a good place for people to check out?

Brian Gardner: So personally my Twitter account is probably where I’m most active and easiest to get in touch with, which is @bgardner. FrostWP.Com is where you can see the Frost demo, where you can download it. You can see all the patterns, the styles, variations. And then Build Mode. If you go to WPEngine.com/builders, we have an events linked up in our menu, which then sends you into the build mode thing.

We usually have three or four weeks worth of signup, registration links ready for people. So feel free to go ahead and reserve your spot, and we hope to see you there.

Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.

The post Press This: The Frost Theme is Here appeared first on Torque.

14.06.2023
The WordPress Polyglots Team: Who They Are and What They Do
As an open-source project, you are probably aware that the WordPress platform is built by a large, global network of volunteers. While the developers and designers often get the most attention, there’s a lot of effort going on in the background that’s just as essential — even if it doesnâ€™t involve a code editor. In this post, we want to look at some of those unsung heroes: the WordPress Polyglots team.

In today’s interconnected world, language plays a vital role in bringing people together and bridging communication gaps. That extends to WordPress. As one of the most popular content management systems, it empowers millions of users worldwide to create and share content. However, its full potential can only be harnessed when it’s accessible to users from diverse linguistic and cultural backgrounds.

This is where the Polyglots team comes in. By translating WordPress into multiple languages and making it suitable for different localities, they ensure that it’s usable for a global audience. Below, we’ll delve into who the Polyglots team is, what they do, and why their work is indispensable to the growth and success of the WordPress project and community.

What is the Polyglots Team and What Do They Do?

As mentioned, the WordPress Polyglots team is a group of dedicated volunteers (15,000 of them!) responsible for translating WordPress. They play a crucial role in the WordPress project by ensuring that the platform, its themes, and plugins are available in different languages. To better understand what they do, letâ€™s start of with some definitions.

Important Concepts and Terms

There are two processes at work with offering WordPress in different languages: Internationalization (i18n) and localization (l10n).

The first means making software like WordPress and its themes and plugins ready to be translated. This happens by encoding text (so called strings) in a way that you can provide alternatives for them in other languages.
```
__( 'Previous page', 'twentyfifteen' )
```
Translating these strings then is called localization. When both are in place, it makes it possible for users to use WordPress, themes, and plugins in their chosen language.

In WordPress, available language versions are called Locales. They describe not only the languages themselves but also local dialects. For example, English (U.S.) is a locale as is English (U.K.). Same for things like Brazilian Portuguese, Argentinian Spanish, or Austrian German.

There are more terms that are important to know, however, these will do for the moment. If you want to dive more deeply into the world of Polyglots, check the official glossary.

How is the Polyglots Team Organized?

The concept of locales is also important because it is one of the basic ways the Polyglots team organizes itself. There are different teams for different locales with their own team leads and organization to help with the day-to-day translation work.

Each team also has their own so-called Rosetta site, which is where they take care of their locales. These are simply the localized versions of the WordPress project website, such as es.wordpress.org for the Spanish version.

Here, users can find information about WordPress in their own language and also download the localized version of it . It’s also where locale teams organize their own translation efforts.

Furthermore, there are various roles within those teams, such as:
- Locale Manager â€“ An admin role for a particular locale and Rosetta site. They manage and appoint translation editors.
- General Translation Editor (GTE) â€“ Can validate strings for all projects of a certain locale.
- Translation Editor (TE) â€“ Appoint new translation editors, and approve the work of first-time translators. Can also be focused on a single project.
- Translation Contributor â€“ Those are the volunteers who contribute translations. Their work is verified by Translation Editors.
These different roles work together to ensure high-quality translations and maintain consistency across the platform. They are like user roles on a WordPress site and their capabilities apply to the translation platform. You can find more more details here.

What Exactly Does the Polyglots Team Do?

So, itâ€™s clear that the WordPress Polyglots team works on making WordPress available in different languages. However, how exactly do they do that? What does their work encompass in particular?
- Translate WordPress components â€“ That includes WordPress core, default themes (the Twenty X series), BuddyPress, bbPress, the Rosetta sites, and certain plugins. In addition, Polyglot members can opt to translate any theme or plugin they want.
- Create locale packages â€“ The team works publishes locale packages for each language, which consist of translated strings. These packages allow users to install and use WordPress in their preferred language.
- Set and maintain translation guidelines â€“ The Polyglots team ensures best practices to maintain consistency and quality in translations. Their guidelines cover areas such as tone, terminology, and style, which help create a cohesive experience for users across different languages.
- Community involvement â€“ The team actively participates in various WordPress events, like WordCamps and Contributor Days. Here, they collaborate with other WordPress enthusiasts, share knowledge, and encourage more people to join their efforts.
- Ongoing maintenance â€“ They are publishing continuous updates and improve translations to ensure they stay current with the latest WordPress features and developments. This also includes addressing user feedback and fixing any issues that arise e.g. RTL (right-to-left) languages and design problems for certain language versions.
So, if you are one of the many people who donâ€™t use WordPress in English, you have the Polyglot team to thank for that.

How Many Languages Have They Translated Already?

As you can see from the Teams page, to this date there are 208 locales.

However, these translations are in different states of completeness. At the time of this writing:
- 63 locales have their translation up to date (90%+ of the latest WordPress version translated). The rest is at least one major version behind.
- 79 Locales have never released a language pack or donâ€™t even have their own Rosetta site.
Overall, it’s probably fair to say that there are around 70 locales where the majority of the WordPress interface can appear in the chosen target language. Note that we are only talking about translations of the latest version of Core here. It does not take into account themes, plugins, patterns, and other components.

If you want more information about that, click on any Locale you are interested in on the main translation page.

Why is Translation Work Like This Important?

That leaves the question, why go through all the trouble? Why not simply leave WordPress in one language?

Well, as of June 2020, over half of all WordPress installs are running in a language different than English. So, obviously there is a big need and market for translations. That’s why the work of the WordPress Polyglots team is critical for the WordPress project and community. In addition, there are several other reasons.

Global Reach

WordPress is used by millions of people worldwide. Providing translations in multiple languages makes the platform more accessible and user-friendly for a diverse, global audience. This helps WordPress maintain its position as a leading content management system.

Inclusiveness

By offering WordPress in various languages, the Polyglots team ensures that non-English speakers can also benefit from it. Doing so fosters an inclusive and diverse community. This encourages participation from people with different backgrounds and perspectives, which ultimately enriches the WordPress ecosystem.

Localization

The Polyglots team not only translates the platform but also focuses on localization. That means, the content is culturally appropriate and relevant to the target audience. This enhances the user experience and makes WordPress more appealing to users from different regions and cultures.

International Collaboration

The team’s work helps bring together contributors from around the world who share a common goal: making WordPress available to as many people as possible. This international collaboration strengthens the global WordPress community and promotes knowledge exchange and learning.

Plugin and Theme Developers

Translating plugins and themes allows developers to reach a broader audience and increase their potential user base. This encourages more developers to create and share their work within the WordPress community. That, in turn, contributes to the platform’s growth and innovation.

Increased Adoption

By providing translations, the Polyglots team helps lower the entry barrier for new users. That makes it easier for them to adopt WordPress. As a result, the platform’s user base continues to grow, contributing to its overall success and sustainability.

In summary, the WordPress Polyglots team plays a vital role in the growth and success of the WordPress project and community. It promotes accessibility, inclusiveness, and diversity through their translation and localization efforts.

What are Their Plans for the Future?

Like every other part of WordPress project, the Polyglots team is constantly working on how to contribute more to WordPress. You can find out more about that by following the blog or signing up to the monthly newsletter. The latter contains top news, discussions, and proposals from the Polyglots team and is also available on the website.

At the moment, these are the main objectives:
- Staying on top of new WordPress versions (two more releases are planned for this year!).
- Improving and updating their translation tools and interface. They recently integrated DeepL and Chat GPT to make things faster and also want to make GlotPress available for normal WordPress users. They could send back translations from their site own as proposals.
- Keep updating theme, plugin, and patterns strings for more complete translations.
- Attend Contributor Days at upcoming WordCamps.
- Do outreach to find more translators and locale teams, organize local translation events, keep improving their onboarding.
As you can see, there is plenty to do and they can use all the help they can get. So, if youâ€™d like to lend a hand, make sure to read the next section as well.

How Can You Get Involved?

Would-be WordPress translators have different ways of getting involved. The first step is to read the official handbook. It goes over important parts such as:
- How translating WordPress works
- How the Polyglots team collaborates, e.g. the main communication channels
- What the duties of certain roles are
- Guides for plugin and theme authors who want their work translated (or translate it themselves)
- Frequently asked questions and more
In addition, get familiar with the glossaries and style guides of your Rosetta site. You can also find them via the teams pages. From here, you may also get in touch with local translation teams.

In addition, join the Make WordPress Slack and participate in the #polyglots channel. You can find their meeting schedule in the sidebar of the main Polyglots page.

These channels are also available to ask questions at any time. Plus, there are Slack channels for certain languages and locales.

After that, most things happen on the main Polyglots page. There is a chat blog where people can make requests to have their translations reviewed and become part of Polyglots. You will be using GlotPress for the actual translation, which you can learn about here.

Alternatively, use your language and WordPress skills by taking part in your local support forum. Go to the locale site of a chosen language (e.g. de.wordpress.org) and then head to the forum and help other users.

More details about how to get involved with translating WordPress here.

The WordPress Polyglots Team: Making WordPress Work for Everyone

The Polyglots team is one of those parts of the WordPress project that is not always visible but nevertheless indispensable. They make sure that users can take advantage of the platform in their native language which more than half of them do.

They also ensure translation quality and keep an overview of the different language versions. Besides continually improving their processes, tools, and bringing more translators on board that is.

It’s a tremendous effort and takes a lot of energy to do all of that. If you are looking for a way to contribute to your favorite CMS without coding knowledge, translating is a great alternative. You are welcome to join and help out.

Let us know in the comments if you decided to contribute your own language knowledge to the Polyglots team. Weâ€™d like to thank you personally!

The post The WordPress Polyglots Team: Who They Are and What They Do appeared first on Torque.
06.06.2023
Torque Social Hour: WordCamp Europe 2023

The Torque Social Hour is a weekly livestream of WordPress news and events. On this episode we talk with Evangelia Pappa about this year’s WordCamp Europe, happening June 8th-10th in Athens, Greece. Evangelia is a Global Lead for WCEU overseeing budget, sponsors, community, and content.

Join us next each Wednesday from 3-4pm PST for WordPress news and interviews.

The post Torque Social Hour: WordCamp Europe 2023 appeared first on Torque.

02.06.2023
Get Ready for WordCamp Europe 2023

Next week, thousands of WordPressers will descend on Athens, Greece for WordCamp Europe 2023. The conference kicks off with Contributor Day on June 8 and is followed by two jam-packed days of talks and workshops on the 9 and 10.

Tickets are still available.

It’s going to be an amazing weekend full of sun, food, and learning. Let’s dive into what you can expect.

Learn

Organizers did not skimp on the content for this year’s event, and there is absolutely something for everyone. Because so many people applied to speak, they have added an entirely new speaker track. Talks cover topics like AI, the WP-CLI, security, and more.

Here are some we don’t want to miss:

Women and Non-Binary Folx of WordPress: A prestigious panel of people will lead a discussion on underrepresented people in WordPress. This conversation will undoubtably be eye-opening and educational, so come with questions.

The Art of Code Review: Code review is incredibly necessary but can be daunting. Developer Tim Nash, will teach you how to make the most out of the process and have fun while doing it.

Building Interactive Blocks: Interactive blocks can entirely change the functionality of your site. This workshop led by developer Luis Herranz, will take you through the process of creating one step-by-step.

How I Learned to Stop Worrying and Love our AI Rulers: AI has been a huge topic among WordPressers over the last year, and some people are reticent. Technical Architect at WP Engine, James Dominy, wants to assuage some of those fears and take a look at how to leverage these tools responsibly.

Variations on a Theme: 20 Years of WordPress: WordPress Co-Founder, Matt Mullenweg, and WordPress Executive Director, Josepha Hayden Chomphosy, will wrap-up the conference with a look at the last 20 years of WordPress and what’s in store for the next.

This list doesn’t even skim the surface of the amazing content available. Make sure you go back and watch all the talks on WordPress.TV after the event so you don’t miss a minute.

Check out our conversation with Global Lead for WCEU Evangelia Pappa:

Connect

After you have soaked up all the knowledge you can, it’s time to relax and connect with the other attendees. WordCamp is a great time to meet new people and catch up with old friends, and there are a plenty of chances to do that.

WP Engine is hosting an after party on Friday at 7 pm at Le Grand Balcon, located on the 6th floor of the St. George Lycabettus Hotel. The even is free to anyone who registers. There will be drinks, appetizers, and of course, networking.

Come for the drinks, stay for the great company.

As always, organizers have put together a rockin’ after party for anyone with a badge. At 8:30 on June 10, head to the Lohan Athens Nightclub and compliment your favorite speaker.

There are also a variety of side events to attend including a pre-event picnic and a Pride event. Check out the entire list here.

Explore

The conference will be held at the Megaron Athens International Conference Centre. It is near historical sites and a metro ride away from city center.

While you’re there, make sure to do some exploring of Athens. Whether you want to practice your Greek, lay on a beach, or eat your weight in tzatziki, there is something for you!

WCEU organizers have written up great guides on transportation and local customs so you’ll fit right in.

Whether you’re there for the sun, talks, or networking, WCEU is going to be an incredible experience.

Buy your tickets here.

The post Get Ready for WordCamp Europe 2023 appeared first on Torque.

02.06.2023