WordPress Beginners Guides - Essential Tips for Beginners https://www.wpbeginner.com Beginner's Guide for WordPress Fri, 21 Jun 2024 10:00:32 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 How to Repair WordPress Database (6 Easy Methods) https://www.wpbeginner.com/beginners-guide/how-to-repair-wordpress-database/ https://www.wpbeginner.com/beginners-guide/how-to-repair-wordpress-database/#comments Fri, 21 Jun 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=281560 Over the years, many users have reached out to us and our partner companies to ask about fixing broken WordPress databases. Keeping your WordPress website running smoothly requires a healthy database. If your database gets corrupted, then it can lead to many problems, including error… Read More »

The post How to Repair WordPress Database (6 Easy Methods) first appeared on WPBeginner.

]]>
Over the years, many users have reached out to us and our partner companies to ask about fixing broken WordPress databases.

Keeping your WordPress website running smoothly requires a healthy database. If your database gets corrupted, then it can lead to many problems, including error messages, white screens, and even a complete loss of functionality.

We have experience with quickly repairing a WordPress database, and we will teach you how to get your site up and running in no time. For instance, you can check the login credentials or use different tools and plugins to fix WordPress databases.

In this article, we will show you how to repair a WordPress database in a few simple steps.

How to repair WordPress database in simple steps

Here’s a quick overview of everything we will cover in this guide. You can click the links below to jump ahead to any section:

How to Tell If Your WordPress Database Needs Repairs

A WordPress database is a collection of all the information needed to run your website properly. This includes all your blog posts, pages, registered users, media files, and settings.

If your database is corrupted and needs repairs, then here are some common signs to watch out for:

  • White Screen of Death (WSoDs): This is a general term for a situation where your website displays a blank white page instead of its usual content. A corrupted database can be one reason why you’re seeing a WSoD.
  • Error Messages: You might see error messages related to the database. For example, errors like ‘Error establishing a database connection‘ or ‘Unable to select database’ show that something is not right with the database.
Database connection error in WordPress
  • Missing Content or Formatting Issues: If your website’s content appears to be missing or the formatting is out of place, then it could be a sign of database corruption.
  • Plugin or Theme Malfunctions: Similarly, if plugins or themes suddenly stop working properly, then it’s possible that the underlying database is to blame.

That said, let’s see what could cause your WordPress database to corrupt.

What Causes Damage to WordPress Databases?

By understanding common causes that can damage your WordPress database, you can take steps to prevent them and keep your database healthy.

For instance, problems with your web server, such as a sudden power outage or hardware malfunction, can corrupt your database. Or a malicious attack on your website could target your database, potentially leading to corruption.

On the other hand, if the database credentials (username, password, etc.) stored in your wp-config.php file are incorrect, then it can lead to database connection problems.

Similarly, if your website is trying to use more memory than your web server allows (PHP memory limit), then it can also lead to database errors and potential corruption.

Now, let’s look at different ways you can easily repair a WordPress database.

Important Note: Before using any repair method, it’s essential that you back up your WordPress website and database. This way, if something goes wrong during the repair process, you can restore your website from the backup.

To learn more, please follow our guide on how to make a WordPress database backup.

1. Check and Edit WordPress Database Credentials

One of the most common and easy ways to repair your WordPress database is by checking the credentials. Usually, incorrect usernames and passwords lead to database connection errors, especially if you recently moved your site to a new host.

The WordPress database credentials are stored in the wp-config.php file. To edit the file, you’ll need to use an FTP client or File Manager tool. If you haven’t edited the file before, then please see our guide on how to edit the wp-config.php file.

Once you open the file, look for the following lines:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'database_name_here' );
/** MySQL database username */
define( 'DB_USER', 'username_here' );
/** MySQL database password */
define( 'DB_PASSWORD', 'password_here' );
/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

Next, you must ensure that the information for the database name, username, password, and database host is correct.

You can confirm this information from your WordPress hosting provider. For example, in Bluehost, you can head to your site’s settings.

Bluehost site settings

From here, switch to the ‘Advanced’ tab and scroll down the Database section.

Then click the ‘Manage’ button to continue.

Click the Manage button next to the Database section

This will open the MySQL Database page in the cPanel.

From here, you can find the username and password in the ‘Current Database’ section. If the credentials don’t match, copy and paste them into a Notepad (.txt) file so you can add them to the wp-config.php file.

Find your database name and username in the Current Databases section

2. Access phpMyAdmin to Repair WordPress Databases

If you’re comfortable with databases, then you can use phpMyAdmin to repair your WordPress database. phpMyAdmin is a web-based interface for managing MySQL databases.

First, you’ll need to log in to your WordPress hosting dashboard and head to the cPanel. In Bluehost, you can open website settings, go to the ‘Advanced’ tab, and then click the ‘Manage’ button in the cPanel section.

Bluehost advanced cPanel

Next, you will see the cPanel of your hosting provider.

Simply navigate to phpMyAdmin and click the link.

Selecting phpMyAdmin on cPanel

On the next screen, you should see the phpMyAdmin panel.

Now, you can select a database you want to repair from the left column or go to the ‘Databases’ section at the top.

Select database tables

Next, you’ll see different tables in the database. Simply scroll down and click the ‘Check All’ option.

You will also need to click the With selected dropdown menu and choose the ‘Repair table’ option.

Select tables to repair in database

phpMyAdmin will now attempt to repair the selected tables. If any errors are found, they will be fixed.

You should see a success message when the repair is done.

See repair table success message

You may also want to see our beginner’s guide to WordPress database management with phpMyAdmin.

3. Repair a WordPress Database Using a Plugin

Another way to repair WordPress databases is to use a plugin. This method is best if you’re not comfortable editing files or using phpMyAdmin.

There are many WordPress database plugins you can use. For this tutorial, we’ll use the WP-DBManager plugin. It is a free plugin and allows you to perform different actions on the database, like optimization, repair, backup, and more.

First, you’ll need to install and activate the WP-DBManager plugin on your site. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to the Database » Repair DB page from the WordPress dashboard.

Select DB tables to repair

Next, you can select the tables you want to repair in the database. If you’re not sure which tables to repair, then simply select all of them and click the ‘Repair’ button at the bottom.

The plugin will then attempt to fix your WordPress database and resolve any problems.

4. Use the Built-in WordPress Database Repair Tool

WordPress also offers a built-in repair tool that you can use to fix minor database corruption issues. However, you’ll need to manually edit the wp-config.php file to access the repair tool.

First, you’ll need to open your website’s files using an FTP client or file manager. From here, locate the wp-config.php file, which is typically located in the root directory of your WordPress installation.

Go ahead and open the file using a text editor or notepad file. Next, you’ll need to add the following code snippet just before the /* That's all, stop editing! Happy publishing. */ line:

define ('WP_ALLOW_REPAIR', true);

Once that’s done, you can enter the following URL in the web browser to open the repair tool:

http://www.example.com/wp-admin/maint/repair.php

Just remember to replace ‘example.com’ with your own domain name.

Once the tool opens, simply click the ‘Repair Database’ button.

Repair WordPress database

After you’ve repaired the WordPress database, you can remove the code snippet from the wp-config.php file to prevent unauthorized access.

The repair tool doesn’t require users to log in to use it, so leaving the code can lead to security vulnerabilities.

5. Fix WordPress Database from Hosting Service cPanel

You can also access a pre-built repair tool from your web hosting provider’s cPanel to fix corrupted WordPress databases.

First, you’ll need to open the cPanel from the hosting service’s dashboard. For example, in Bluehost, you can open the website settings.

Bluehost site settings

After that, you will need to switch to the ‘Advanced’ tab.

From here, scroll down to the cPanel section and click the ‘Manage’ button.

Bluehost advanced cPanel

Once the cPanel opens, scroll down to the Database section.

Next, you can click the ‘MySQL Databases’ option.

MySQL database in cPanel

After that, you can click the dropdown menu under Repair Database and choose the database to fix.

Go ahead and click the ‘Repair Database’ button to continue.

Choose a database to repair

The hosting service will automatically repair your database.

Once the process is complete, you should see a success message.

Database repair success message

6. Using WP-CLI to Repair WordPress Database

For developers and advanced users, there’s a command-line option for repairing the WordPress database using WP-CLI (WordPress Command Line Interface).

WP-CLI is a powerful tool, but it’s also more technical than the other methods mentioned here. If you’re not comfortable with the command line, it’s best to stick with one of the other repair methods.

To start, you will need to access your website’s server using SSH. For this, you will need to know your SSH credentials to perform this step.

If you are using Mac or Linux, then SSH software comes preinstalled. However, Windows users will need third-party software like PuTTY to use SSH. To learn more, please see our guide on how to use PuTTY SSH in WordPress.

PuTTY Settings

Once the installation is complete and you’re connected to your site files, make sure you’re in the directory where your WordPress installation resides.

From here, simply run the following command in your terminal window:

wp db repair

This command will attempt to repair any corrupted tables in your WordPress database.

Bonus: Hire a WordPress Expert for Help

If you’re still having trouble fixing your WordPress databases or performing general maintenance, then it might be time to hire an expert.

With the WPBeginner WordPress Maintenance & Support plan, you will get our expert’s undivided attention. They’ll handle everything from updates to error fixes in the background and ensure your site continues to function without any issues.

WPBeginner Pro Maintenance Services

Plus, you get 24/7 support and around-the-clock uptime monitoring. Our experts can not only handle database repairs but also optimize your site for speed. This way, you get to deliver exceptional user experience while boosting SEO performance.

Besides maintenance, there are other services you can also use. For instance, we offer website design, repair hacked sites, optimize your site for SEO, and more. Check out all our Pro services for your website.

We hope this article helped you learn how to repair WordPress database in simple steps. You may also want to see our guide on how to preview your WordPress site before going live and the best website maintenance services for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Repair WordPress Database (6 Easy Methods) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/beginners-guide/how-to-repair-wordpress-database/feed/ 1
What Is theme.json File in WordPress and How to Use It https://www.wpbeginner.com/beginners-guide/what-is-theme-json-file-in-wordpress-and-how-to-use-it/ https://www.wpbeginner.com/beginners-guide/what-is-theme-json-file-in-wordpress-and-how-to-use-it/#comments Mon, 10 Jun 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=276445 Are you using a block theme and seeing the theme.json file in WordPress? Maybe you are wondering what the purpose of this file is and whether you should edit it. The theme.json file is a crucial part of the full site editing experience in WordPress.… Read More »

The post What Is theme.json File in WordPress and How to Use It first appeared on WPBeginner.

]]>
Are you using a block theme and seeing the theme.json file in WordPress? Maybe you are wondering what the purpose of this file is and whether you should edit it.

The theme.json file is a crucial part of the full site editing experience in WordPress. As block themes become more widespread, it’s important to understand what theme.json does and how to edit it properly.

That’s why we at WPBeginner have put together this comprehensive guide. In this article, we will explain what a theme.json file is and how you can use it to customize your WordPress site.

What is theme.json File in WordPress and How to Use It

What Is the WordPress theme.json File?

The theme.json file is a special theme file introduced in WordPress 5.8. It plays a key role in the full site editing (FSE) experience, which allows you to visually customize every aspect of your WordPress block theme.

Essentially, the theme.json file acts as a blueprint that controls the styling and functionality of your block theme. It contains code that tells WordPress how different elements like colors, typography, layouts, and templates should look and behave.

Why Do WordPress Block Themes Need a theme.json File?

Editing a block theme in WordPress is different from editing a classic theme.

Classic themes use the functions.php file to enable features like custom menus or featured images with the add_theme_support() function. Then, you can style those features with CSS rules in the CSS stylesheet (style.css) file.

The add theme support function in functions.php

In block themes, theme.json acts as a central hub for everything that defines the look and feel of your block theme. It lets you define things like fonts, colors, and layout options in one place, replacing the need for add_theme_support() in functions.php.

That’s why the functions.php file in block themes is often smaller than the equivalent in classic themes.

Having a dedicated theme.json file offers some great benefits over the previous classic theme system.

First, theme.json works hand-in-hand with the WordPress full site editor. This allows you to easily customize your theme’s styles and settings directly within the editor without needing to touch any code.

Choosing a theme style in the Full Site Editor

Furthermore, theme.json aims to create a consistent experience for both developers and users. Some users find it really frustrating when they need to change themes because they have to learn completely new layouts and styling options.

With theme.json, switching themes becomes a smoother process because everything is organized in a similar way.

Finally, by using theme.json, theme developers and users can future-proof their work as WordPress continues to expand its full site editing capabilities.

Now that we’ve covered what a theme.json file is, let’s delve deeper into the topic. You can use the quick links below to navigate through this guide:

Where Do You Find the WordPress theme.json File?

The theme.json file is found inside your theme directory on your web server. The typical file path would be public_html » wp-content » themes » your-theme-name » theme.json.

To access it, you first need to connect to your site via FTP or your hosting account’s file manager.

If you use Bluehost, then you can log in and switch to the ‘Websites’ tab. Then, click on the ‘Settings’ button below your website.

Bluehost site settings

Now, make sure to stay on the ‘Overview’ tab.

Then, scroll down to click on the ‘File Manager’ button.

Bluehost File Manager button

When you open the file manager this way, you will automatically be inside your website’s root folder.

Here, look for the ‘wp-content’ directory and open it. There, you’ll find the ‘themes’ folder which contains all your installed WordPress themes.

Open the folder for the specific block theme you’re using. The theme.json file will be located directly inside this theme directory alongside other theme files.

theme.json location as seen in Bluehost file manager

Once you have found it, you can view the theme.json file using a code editor.

What Does the theme.json File Look Like?

The theme.json file has a specific structure that organizes all the global settings for your WordPress block theme.

Depending on how complex or simple your theme looks, the file can be very short or long. However, you can easily break this file down into 7 top-level sections:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}

Here’s a simplified breakdown:

Schema

This part is actually optional to have in block themes, so you may or may not see it in yours.

The schema property links the URL to the WordPress JSON schema, which defines the global settings, styles, and other configurations for your theme.

Version

This section specifies which API version of the theme.json format is being used by the file and ensures it follows the correct structure.

As of the writing of this article, the API is at version 2.

Settings

This property defines the options and controls available for users to customize their theme. These include presets for the theme’s color palette, typography, spacing, gradients, shadows, borders, and so on.

Here’s a very simple example of what the settings property looks like:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },
        {
          "slug": "contrast",
          "color": "#222222",
          "name": "Dark"
        },
        {
          "slug": "accent",
          "color": "#f08080",
          "name": "Pink"
        },
        {
          "slug": "accent-2",
          "color": "#90ee90",
          "name": "Light Green"
        },
        {
          "slug": "accent-3",
          "color": "#e0ffff",
          "name": "Light Blue"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Open Sans, sans-serif",
          "slug": "open-sans",
          "name": "Open Sans"
        },
        {
          "fontFamily": "Arial, sans-serif",
          "slug": "arial",
          "name": "Arial"
        },
        {
          "fontFamily": "Times New Roman, serif",
          "slug": "times-new-roman",
          "name": "Times New Roman"
        }
      ],
      "fontSizes": [
        {
          "name": "Extra Small",
          "slug": "xx-small",
          "size": "0.75rem"
        },
        {
          "name": "Small",
          "slug": "small",
          "size": "0.875rem"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "1rem"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "1.125rem"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "1.25rem"
        },
        {
          "name": "XX-Large",
          "slug": "xx-large",
          "size": "1.5rem"
        }
      ],
      "spacing": {
        "units": ["rem"],
        "values": {
          "small": "1rem",
          "medium": "1.5rem",
          "large": "2rem"
        }
      }
    }
  }
}

If you look at the code, the language used is pretty easy to understand. You can tell that the settings are defining the colors, font families, font sizes, and spacing used in the theme.

If there are any references here or in your theme that you don’t understand, you can check out the official WordPress Settings Reference.

Some elements, like colors and font families, have slugs, like this:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },

These will come in handy for the styles section later on to make presets, which we will explain in the next part.

Styles

While the settings section defines the theme’s default customization options, the styles section applies them to the theme.

Here, you can apply the customization settings to the entire website or at a block level using presets.

Let’s check out the example below:

{
  "settings": {
    // Existing settings from the previous example
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--accent-2)"
        }
      },
      "h1": {
        "fontSize": "var(--wp--preset--font-size--xx-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h2": {
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h3": {
        "fontSize": "var(--wp--preset--font-size--large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      }
    }
  }
}

As you can tell, there is this line of code appearing throughout this snippet: var(--wp--preset--xxx) . These are presets, which are shortcuts in the styles section that refer back to the values defined in the settings section.

For example, consider {"slug": "base", "color": "#ffffff", "name": "White"} in the settings section. Here, "base" is the slug, and the corresponding preset for this color is var(--wp--preset--color--base) .

Therefore, the code "color": {"background": "var(--wp--preset--color--base)" in styles says that the background color of this theme is white.

Custom Templates

Block theme developers can create predefined layouts for custom pages, posts, or post types for users to use.

For example, the Twenty Twenty-Four theme has several custom templates defined in the theme.json file: Page No Title, Page With Sidebar, Page with wide Image, and Single with Sidebar.

You can use any of these to create your content.

],
"customTemplates": [
  {
    "name": "page-no-title",
    "postTypes": ["page"],
    "title": "Page No Title"
  },
  {
    "name": "page-with-sidebar",
    "postTypes": ["page"],
    "title": "Page With Sidebar"
  },
  {
    "name": "page-wide",
    "postTypes": ["page"],
    "title": "Page with wide Image"
  },
  {
    "name": "single-with-sidebar",
    "postTypes": ["post"],
    "title": "Single with Sidebar"
  }
]

One thing to note is that the theme.json file only references the templates by name and provides metadata about them, such as their title and the post types they are intended for.

However, the actual appearance and functionality of the custom templates are defined in separate template files inside the theme folder.

To see them, you can go to public_html » wp-content » themes » your-theme-name » templates.

The block theme's templates folder seen in Bluehost file manager

Template Parts

Template parts are reusable areas you can apply across your custom templates. These are elements like headers, footers, sidebars, and so on.

Here’s what those template parts look like registered in theme.json:

"templateParts": [
  {
    "area": "header",
    "name": "header",
    "title": "Header"
  },
  {
    "area": "footer",
    "name": "footer",
    "title": "Footer"
  },
  {
    "area": "sidebar",  // Removed "uncategorized"
    "name": "sidebar",
    "title": "Sidebar"
  },
  {
    "area": "post-meta",  // Removed "uncategorized"
    "name": "post-meta",
    "title": "Post Meta"
  }
]

Like custom templates, the theme.json file only references the templates.

Their actual appearance is defined in their own template part files in the parts folder.

The block theme's parts folder seen in Bluehost file manager

Patterns

Patterns are pre-made collections of blocks that let you create custom content layouts on your pages, posts, or anywhere else in your theme.

When you open the full site editor, you may notice the Patterns menu. This is where you can find all the available patterns for your Gutenberg block theme.

The Patterns page in WordPress Full Site Editor

With theme.json, theme developers can reference patterns from the public Pattern directory. It’s a great way to offer more customization options without designing these reusable blocks yourself.

For example, the Twenty Twenty-Four theme references two patterns from the official directory: three columns of services and clients section:

"patterns": [
  "three-columns-of-services",
  "clients-section"
]

We know this because these patterns are in the Patterns menu in the full site editor.

However, they’re not in the patterns folder inside the theme directory.

The block theme's patterns folder as seen in Bluehost file manager

Note: You may notice that the templates, parts, and patterns folders in your theme directory contain files not specified in theme.json, but they’re still visible in the full site editor.

If you’re curious, this is because WordPress is designed to automatically recognize and use these folders based on their naming conventions and location within the theme’s directory.

What You Should Do Before Editing the theme.json File

Since theme.json is a core theme file, editing it directly on your live WordPress website comes with some risk. Accidental mistakes could potentially break your theme or website.

A safer approach is to use a child theme.

A child theme inherits all the styles and functionalities of your parent theme (the block theme you are using) but allows you to customize things without modifying the parent theme itself. This way, if the parent theme receives updates, your customizations won’t be overwritten.

You can read our guide on how to create a child theme in WordPress for more information. This article shows an easy method with the Create Block Theme plugin, which will automatically generate a new theme.json file for your child theme only.

Creating a child theme with Create Block Theme

To ensure a smooth editing experience and avoid any website downtime, we also recommend creating a new backup of your WordPress website. This way, if something goes wrong, you can easily restore your site to its previous state.

We recommend using a plugin like Duplicator for a quick and reliable backup solution.

It’s also recommended to work in a local WordPress development environment or a staging site. This creates a replica of your live website where you can test changes safely without affecting your visitors.

Here are some more tips to keep in mind:

  • Begin with minor edits in your theme.json file and test them thoroughly before making more complex changes.
  • If you’re unsure about any specific property or setting within the theme.json file, consult the official WordPress documentation.
  • Don’t hesitate to seek help from the theme developer’s support team or the WordPress.org support forums if you run into any issues. Check out our guide on how to ask for WordPress support for more information.

How to Edit WordPress theme.json File

Based on our research and testing, we’ve discovered two ways to edit a WordPress theme.json file: using the full-site editor or using code. The first option is much easier and safer and lets you see your modifications from the front end of your website.

Meanwhile, the second choice is recommended if you are comfortable with advanced WordPress development.

Edit theme.json Without Code (Beginners)

To edit your theme.json file without touching the code directly, you can use the Create Block Theme plugin. This plugin was published by the official WordPress.org team to let users create, edit, and save the style variations of their block theme.

First, go ahead and install the WordPress plugin in your admin area. Then, open the full-site editor by going to Appearance » Editor.

Selecting the Full-Site Editor from the WordPress admin panel

You will now see several menus to edit your theme.

Here, select ‘Styles.’

Choosing Styles in the Full Site Editor

Next, click the pencil ‘Edit styles’ icon.

This will take you to the block editor to edit your website’s global styles.

Clicking Edit Styles in Full Site Editor

Now, you can change the style of your theme like normal. You can read the section on how to edit your theme’s global styles in our WordPress full-site editing guide for more information.

Let’s try creating a custom color palette as an example.

The color scheme or palette is a set of default colors for elements like text, backgrounds, and buttons. It ensures a cohesive look throughout your website.

Elements using the same color preset will always match so that your website design looks polished and professional.

To edit the palette, select ‘Colors’ on the Styles settings sidebar.

Editing a block theme's global colors in FSE

On the next screen, you will see some settings to customize your theme’s colors.

Here, click the colors in the ‘Palette’ section.

Opening a block theme's color palette in FSE

In this example, the Twenty Twenty-Four theme has already defined 5 colors in the palette, but you can change any of them to create a custom one from scratch.

To do so, click one of the colors under ‘Theme.’ Then, select any color in the color picker tool.

Changing a block theme's global color in FSE

Now, if you preview your website, you will see that the specific blocks or elements that used the previous color have been replaced with the color you just selected in your palette.

You can repeat the same steps for each color. Then, click ‘Save.’

Saving changes in a block theme in FSE

After saving your changes, click the Create Block Theme button (the wrench icon).

Then, select ‘Save Changes to Theme.’

Saving theme changes to the theme.json file with Create Block Theme

On the next screen, you need to scroll down.

After that, click ‘Save Changes.’ This will prompt WordPress to store all the changes you’ve made to your theme in the theme.json file.

Confirming to save theme changes in Create Block Theme

Once you do that, the block editor will then refresh itself.

Now, click the Create Block Theme button again and select ‘View theme.json.’

Viewing theme.json with Create Block Theme

To see the code for your custom color palette, look for palette that is nested inside color and settings, like so:

"settings": {
  // Some code...
  "color": {
    // Some code...
    "palette":  
  }
}

Under it, you should see the new hex codes of your custom color palette.

Viewing the newly edited theme.json in Create Block Theme

Edit theme.json With Code (Advanced Users)

This method is recommended if you are an aspiring WordPress theme developer or have some experience with code.

First, open your block theme’s theme.json file in your WordPress directory. You can either use the code editor in your web host’s file manager or download the file, edit it on your computer, and upload it back to your server.

We will use the Twenty Twenty-Four theme and Bluehost’s file manager for demonstration purposes. If you are a Bluehost user and are using the file manager, then you can just simply right-click on your theme.json file and click ‘Edit.’

Editing a theme.json file manually with Bluehost file manager

If you use FTP, then you can read our guide on how to use FTP to upload files to WordPress.

Let’s try a simple example of editing your theme.json file: creating custom font sizes.

Again, remember that the settings property specifies your theme’s default styles, whereas the styles property implements them. For this reason, we will edit the settings property in the theme.json file.

If you use a child theme, then you can simply copy and paste the following code into your theme.json file and change the font sizes in pixels as you see fit:

{
  "settings": {
    "typography": {
      "fluid": false,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "16px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "24px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "40px"
        },
        {
          "name": "Extra Large",
          "slug": "x-lagrge",  // Typo fixed (large -> large)
          "size": "48px"
        }
      ]
    }
  }
}

Note: If you are editing your parent theme’s file directly, then you need to find the code that says fontSizes .

It should be nested inside typography and settings , like so:

{
  "settings": {
    // Some code...
    "typography": {
      // Some code...
      "fontSizes": [
        // Font size definitions here
      ]
    }
  }
}

After that, replace those lines of code with the code snippet from above. Just make sure that there are no syntax errors in it.

Once done, save the file and preview your website to see your changes. For Bluehost users, you can simply click ‘Save Changes’ in the file manager’s code editor.

Saving changes in the theme.json file in the Bluehost file manager

If you want to edit your theme.json further, we highly encourage getting more familiar with the file’s structure as explained in the previous section.

We also suggest reading the official WordPress Settings Reference, which includes a full list of the available settings properties and instructions for using them.

Bonus Tip: Use WPCode to Add Custom Code to Your Theme

In this guide, you have learned about theme.json and its potential for theme customization. But maybe it still feels a bit overwhelming to edit directly.

Luckily, there’s another user-friendly option for adding custom code and making advanced customizations: WPCode.

With WPCode, you can insert custom code snippets without ever needing to touch your theme files themselves. This significantly reduces the risk of breaking your website during customization.

If you want to learn more about this code snippet plugin, check out our full WPCode review.

Also, here are some helpful tutorials to get you started with using WPCode:

We hope this article helped you learn about the theme.json file in WordPress. You may also want to check out our beginner’s guide on how to edit a WordPress website and our expert pick of the best drag-and-drop page builders for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post What Is theme.json File in WordPress and How to Use It first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/beginners-guide/what-is-theme-json-file-in-wordpress-and-how-to-use-it/feed/ 4
Google Releases AI Overviews (SGE): 7 Tips for WordPress Users https://www.wpbeginner.com/beginners-guide/google-ai-overviews-sge/ https://www.wpbeginner.com/beginners-guide/google-ai-overviews-sge/#comments Tue, 21 May 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=278632 Have you heard about the impact that Google AI overviews will have on search engine results and website rankings? This Google search feature, formerly known as SGE (Search Generative Experience), uses artificial intelligence to generate a summary to answer a user’s query. The summary is… Read More »

The post Google Releases AI Overviews (SGE): 7 Tips for WordPress Users first appeared on WPBeginner.

]]>
Have you heard about the impact that Google AI overviews will have on search engine results and website rankings?

This Google search feature, formerly known as SGE (Search Generative Experience), uses artificial intelligence to generate a summary to answer a user’s query. The summary is displayed at the top of the results page so users can learn about the topic without needing to click on links to other websites.

“Google SGE is the most controversial and anxiety-provoking change in search. With so much changing week by week, businesses relying on organic search must carefully monitor SGE’s evolution.”

Tomasz RudzkiTomek Rudzki – SEO specialist, Head of R&D at Onely

In this article, we will take a look at Google AI overviews, how they will impact WordPress users, and how you can prepare your website.

Google Releases AI Overviews (SGE): Tips for WordPress Users

What Are Google AI Overviews (Formerly Google SGE)? How Are They Different From Regular Google Search?

When you enter a search query into Google or other search engines, you will typically be shown a list of relevant web pages that provide answers. Google continues to refine its search algorithm to make sure that the most helpful content is displayed at the top of the results.

For years now, Google has supplemented the list of web pages with additional information to help the user.

This includes Google answer boxes, featured snippets, Google knowledge panels, local business maps and profiles, and more. These display a summary of information on the business, product, or topic that users can read directly from the search results without needing to click a link.

Google Knowledge Panel

The most recent additions to Google search results are AI overviews.

Google AI overviews use the Gemini generative AI model to create a helpful summary of the information the user is searching for. This is displayed at the top of the results page, and users can learn more by clicking on the links to individual web pages underneath.

In the screenshot below, you can see an AI overview of how long it takes to climb Mount Everest. The overview directly answers the query without the need for follow-up questions, and the key facts are highlighted along with links to the main sources.

Google AI Overviews Example

The AI creates these summaries by combining information from web pages, user-generated content on Reddit and other social sites, and Google’s own knowledge base.

A carousel of the web pages used to AI-generate the summary is displayed. These are relevant, credible web pages that match user intent.

Plus, clicking the ‘Show more’ button displays additional information within the overview.

Google AI Overviews Show More Example

After this, you will find the regular Google search results, which are a list of relevant web pages where the user can learn more.

In the future, AI overviews will be extended to provide multi-step reasoning, step-by-step planning assistance such as recipes and trips, and visual search using videos and images. Users will also be able to adjust the language and level of detail.

When Can I Expect to See Google AI Overviews on Search Engine Results Pages?

Google AI overviews have been experimentally available for some time in Google Labs as Google SGE (Search Generative Experience). In May 2024, this feature started to be rolled out as the default search experience for users in the United States.

Google will gather feedback to improve the feature, and then roll it out to more countries. They aim to reach over a billion users by the end of 2024.

Tip: If you can’t currently see Google AI overviews on search results pages, then you may be able to enable it by visiting the Google Labs page when signed into your Google account. However, this feature is not available in all countries.

Will Google AI Overviews Hurt Your Rankings?

Google AI overviews will absolutely affect search. For most niches, an AI-generated overview will appear at the top of more than 80% of search results pages. However, some topics, such as finance, will display overviews less often.

This prominence of AI in search is likely to impact WordPress websites and blogs that rely on search for traffic. Search queries might also change as users use complex prompts to get more precise results from AI.

One concern from many website owners is that the traditional search results will be shifted down the search results page below the AI interface. Another is that users may find the information they need without needing to click on a link to your website.

Some people fear that this may result in less traffic going to websites. However, at this point, it is difficult to know what the full impact will be.

But it’s not all bad news. Google AI overviews will give small businesses a fresh opportunity to compete. Web pages featured in the overview are likely to see a boost in traffic. This makes it important to look for ways to leverage the AI overview as part of your overall SEO strategy.

We recommend that publishers and business owners continue focusing on writing high-quality, SEO-optimized content and using our tips below.

How to Prepare Your WordPress Website for Google AI Overviews

With Google AI overviews predicted to reach a billion users by the end of 2024, you may be wondering how to prepare your website and take advantage of the new opportunity.

Let’s take a look at our top tips on how to prepare your WordPress website for Google AI overviews. You can use the links below to navigate through the rest of the article:

1. Focus on Building Topical Authority

One of the best ways to improve and preserve your search rankings is to establish your website as an authority on a certain topic. Topical authority means your credibility and expertise on a specific niche or topic, such as SEO or web design.

Search engines like Google favor websites with topical authority, increasing your chances of ranking higher for relevant keywords. Building topical authority will also make it more likely for your web content to be used as a source for AI overviews.

Writing pillar articles on different topics can help you build your authority. These include comprehensive guides, in-depth articles, and posts that cover larger topics within your niche.

As you write more content, we recommend creating content clusters of more specific articles related to a topic. These should contain helpful information on relevant subtopics in greater depth.

You can then use internal linking to show the relationship between the posts. This will provide a guided journey for the user to learn everything they need to know about a specific topic and can show search engines like Google that you are a true authority on the subject.

For example, if your business is a web design agency, then you might have a pillar article generally covering the topic of web design that includes links to more detailed articles on specific design techniques and principles.

Free tools like the WPBeginner Keyword Generator can help you discover subtopics that you can add to your content clusters.

2. Demonstrate Thought Leadership and Personal Experiences

Many websites publish generic-sounding content, including purely AI-created articles. You can make your content stand out from the crowd by using your own voice and talking about your unique experiences.

When you express your own opinions and perspectives, you are more likely to engage with users who appreciate a personal touch and connect with your experiences. This can build trust and establish you as an authority figure in your niche.

Plus, this approach could help you attract readers who want to look beyond AI overviews and get advice directly from trusted sources.

That being said, that doesn’t mean you should avoid using any AI-generated content on your website. Just make sure to edit it to make sure it is readable and accurate. You should also add some of your own experiences for that valued human touch.

3. Optimize Your Content for E-E-A-T

Google prioritizes websites that can demonstrate expertise and experience in their posts. This is part of their ongoing effort to avoid promoting misinformation, especially on topics where the reader’s health, safety, happiness, or financial security are at risk.

Their E-E-A-T guidelines help website owners understand how to write posts that can be identified as helpful and authoritative. E-E-A-T stands for:

  • Expertise, where a writer demonstrates a deep understanding of a topic, including any training or qualifications they have in the field.
  • Experience, where content is based on first-hand encounters along with accurate and helpful personal insights.
  • Authoritativeness, where a writer has a strong reputation for reliability among recognized experts in the field.
  • Trustworthiness, based on unbiased and objective content that is transparent about its sources and funding.
Google's E-E-A-T Guidelines

Optimizing your content for these factors will help it rank and may help your website become featured in a Google AI overview.

To learn how to do this, just see our detailed guide on Google E-E-A-T for WordPress websites.

4. Make it Easy for Crawlers to Crawl Your Content

Since AI models still need to crawl your content in order for it to be indexed, it’s important to ensure that search engines can easily find and understand it. This is known as technical SEO.

Many SEO tools let you conduct SEO audits to learn whether your site is technically optimized. For example, AIOSEO Lite includes a free SEO Analysis tool that you can use to run a technical SEO audit right from your WordPress dashboard.

You might like to see our WordPress technical SEO framework, where we share a helpful checklist you can use for your business.

5. Write Your Content as Questions and Answers

Since Google AI overviews will typically answer questions, it makes sense to write your content as questions and answers. Mirroring how people search for information will increase the chances that your content aligns with the specific query an AI overview is trying to answer.

You can do this both by framing your article titles as questions and including questions and answers within the content itself.

The free WPBeginner Keyword Generator tool includes a helpful Questions section that lets you see the questions people are asking on Google about a certain keyword.

WPBeginner Keyword Generator Questions Section

You can then compile a list of the most important questions and then create content that provides comprehensive answers.

You can also add FAQ (Frequently Asked Questions) sections to your articles.

The structured data markup used in FAQ schema helps Google understand your content more easily and may help your website become featured in the AI overview or ‘People also ask’ sections of the search results page.

6. Target Long-Tail Keywords and Queries

Keyword research is an important part of SEO. Keywords are the phrases that users type into Google when performing a search.

Long-tail keywords are more specific phrases that users search for once they have a better idea of what they need. Some examples are ‘the best noise canceling headphones for air travel’ and ‘the most valuable vintage Christmas ornaments’

Examples of Long-Tail Keywords

When people type in very specific search queries, Google’s AI will look for web content from many different sources to answer these questions.

That means that if your content is targeting long-tail keywords, it is more likely to be picked up for these longer and less common queries. That being said, you will need to address the user’s question in detail within your content.

7. Focus on Your Brand’s Reputation

To ensure accuracy, Google’s AI will only use information from reputable sites when generating overviews. Focusing on your brand’s reputation can increase your chances of being featured in the Google AI overview link carousel.

One of the best ways to do this is link building. That’s because Google uses backlinks as a ranking signal. Whenever someone links to your website, it is seen as a recommendation that your content is helpful.

It’s also a good idea to focus on building positive customer reviews across platforms like Trustpilot, Google, and social media.

You can even add a customer reviews page to your WordPress website. This lets you showcase positive testimonials from satisfied customers and clients, strengthening your reputation.

Customer reviews, displayed on a WordPress website

You should also engage with your users on social media. You can thank users who speak well of your business and reach out to people who have complaints to turn them into satisfied customers.

Google AI also seems to favor user-generated content from social platforms like Reddit. Users who regularly post helpful content on Reddit may find that information used in a Google AI overview.

We hope this tutorial helped you learn how to prepare your website for Google AI overviews. You may also want to see our guide on how to monitor Google algorithm updates in WordPress or our expert pick of the best WordPress SEO plugins and tools.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Google Releases AI Overviews (SGE): 7 Tips for WordPress Users first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/beginners-guide/google-ai-overviews-sge/feed/ 4