One place for hosting & domains

      WordPress

      The Ultimate Guide to WordPress User Roles


      WordPress is a powerful, flexible Content Management System (CMS) that can be an excellent solution for collaboration. However, to make the most of the CMS, it’s important to understand how to navigate and leverage its user roles and permissions features.

      WordPress user roles let you assign certain levels of access to people who are registered to your website. This can help you manage and control what tasks are possible and can ultimately help strengthen your site’s security and performance.

      In this post, we’ll explain what WordPress user roles and permissions are. Then, we’ll provide you with advice for assigning them and cover some helpful troubleshooting tips and useful plugins to help you manage your users. Let’s get started!

      An Introduction to WordPress User Roles and Permissions (And Why They’re Important)

      WordPress user roles and permissions are two different but interdependent concepts. User roles determine what a user can and can’t do on your WordPress site, based on their user type. These limitations are generalized for anyone who carries a certain user role status.

      Permissions, on the other hand, are more individualized. You can create custom permissions for specific users, and control exactly what they are allowed to do on your site. Moreover, you can give different users distinct permissions depending on their role.

      With this double-layered system, you can ensure that each user only sees and accesses the features that are appropriate for them. Furthermore, you can create custom roles with unique capabilities, which is a great way to provide additional functionality for advanced users or clients who need certain abilities not available in the default roles.

      Both user roles and permissions are set by the Administrator, which is typically the WordPress site owner. By default, there are six different user roles: Super Admin, Administrator, Editor, Author, Contributor, and Subscriber. Each role has its own set of capabilities, which we’ll discuss in more detail below.

      User roles and permissions play an important role in ensuring that your WordPress website is secure and runs smoothly. By managing these settings, you can control who has access to what areas of your site, and what they can do there.

      If someone has too many privileges, they can end up publishing low-quality content or changing settings that impact the functionality or appearance of your site. The good news is that when you implement user roles and capabilities, you can have peace of mind knowing that only trusted parties have full admin access.

      An Overview of the Default User Roles in WordPress

      Now that you know a bit about the importance of user roles, let’s take a closer look at the six default user roles you can choose from when managing your WordPress website. Keep in mind that as an Administrator, you have the ability to create new user roles and assign them to specific users on your site. You can also manage permissions for existing user roles.

      Super Admin

      The Super Admin is the highest level of user on a WordPress site. This user has complete control over the site, including the ability to add and delete users, install and activate plugins, manage themes, and more. Super Admins are typically only found on multisite installations of WordPress.

      Super Admins can manage every setting and feature for each site within a multi-site network. They can add and delete other Administrators, create new sites, and control content across each site.

      Administrator

      Administrators have complete control over a single WordPress site. They can add and delete users, install and activate plugins, manage themes, etc. Usually, they are the site owners or main authors:

       

      WordPress Dashboard

      This powerful role has complete access to content, features, and site settings. They can update the CMS as well as plugins and themes. The Admin is also responsible for assigning user roles and capabilities to other registered users. Ideally, you should only have one Administrator per website.

      Editor

      Editors can manage and publish posts and pages, as well as moderate comments. They can also schedule content and edit categories. However, they cannot install or activate plugins, or manage themes:

      WordPress Dashboard

      In a nutshell, an editor can modify content created by themselves and other users with a lower status, such as Authors and Contributors. They can’t change content for users with permissions higher than theirs, such as an Administrator. Typically, this role is reserved for content managers or similar titles.

      Author

      As you may have guessed, authors can write and publish their own posts and pages. They can also delete their own posts.  However, they cannot publish, edit, or delete anyone else’s posts. Additionally, authors cannot add or delete users, install or activate plugins, or manage themes:

      WordPress Dashboard

      Unlike Contributors, Authors have access to the WordPress Media Library. While they can edit reader comments, they can only do so on their own posts.

      Contributor

      WordPress Contributors can write and submit their own posts for review by an Administrator or Editor. Once a post is published, they cannot edit it. Furthermore, contributors cannot add or delete users, install or activate plugins, or manage themes.

      Contributors are usually roles assigned to freelance writers or guest bloggers. This role is also commonly used for new hires whose content needs editing or reviewing before it can be published on the site.

      Once submitted for review, only the Editor or Administrator can publish their posts. Contributors cannot access the Media Library.

      Subscriber

      Subscribers can manage their own profiles and read posts and pages on a WordPress site. They cannot write or publish their own posts or pages, nor can they add or delete users, install or activate plugins, or manage themes:

      WordPress User Profile Personal Options screen

      Subscribers have the fewest permissions and capabilities of all the WordPress roles. It is the default user role set for new registrations.

      There are a few additional user role options available on some WordPress sites. For example, if you’re running a WooCommerce site, Shop Managers have similar capabilities to Administrators, but with some added features specifically for managing WooCommerce stores. For instance, they can add and delete products, manage orders, and more.

      How to Manage User Roles in WordPress 

      Now that you have a better sense of what each user role can do, let’s get into how to manage them. Below, you’ll find instructions for how to add, delete, and update users and user roles in WordPress.

      1. Creating and Deleting Users in WordPress

      Before you assign a user role in WordPress, you first need to have a user to attach it to. To add a new user in WordPress, you can navigate to Users > Add New, then fill in the information. This will include details such as username, email, and password:

      WordPress add new User

      Note that, by default, the Role is automatically set to Subscriber. When you’re done, you can click on the Add New User button at the bottom of the screen.

      Alternatively, you can create a new user through your database. To do this, you can navigate to phpMyAdmin from your cPanel dashboard (or whichever system your host uses), then select your WordPress database.

      Next, locate the wp_users table (name may vary depending on your database prefix):

      phpMyAdmin user database

      Once you click on the users table, you can select the Insert tab:

      phpMyAdmin user database

      On this screen, you can enter the following credentials:

      • user_login: The username you want to assign the user.
      • user_pass: The password for the user’s account; you can select MD5 in the Function drop-down.
      • user_email: The email address you want to use.
      • user_registered: The date and time for when the user will be registered.
      • user_status: You can set this value to “0”.

      When you’re done filling out the details, you can click on the Go button at the bottom of the screen. Next, navigate back to your WordPress database, then select the wp_usermeta table, followed by the Insert tab:

      phpMyAdmin user database

      You can insert the following details in the form:

      • unmeta_id: This is autogenerated, so you can leave it blank.
      • User_id: The id of the user you created.
      • Meta_key: You can set this as “wp_capabilities”.
      • meta_value: Add this as “a:1:{s:13:”administrator”;b:1;}”

      Finally, you can add another row. Then, input the following information:

      • Unmeta_id: You can leave this blank.
      • User_id: The id of the user you created.
      • Meta_key: You can make this “wp_user_level”.
      • Meta_value: You can put this as “10”.

      When you’re finished, you can click on the Go button to save your changes.

      To find a full list of your users, you can go to Users > All Users from your admin interface:

      WordPress Users screen

      To delete a user from your WordPress dashboard, you can hover your mouse over the name of the user, then click on the Delete link. That’s it!

      You can delete a user from your WordPress database as well. To do so, log into phpMyAdmin, then navigate to the wp_users table:

      phpMyAdmin user database

      Next to each user, you’ll find an Edit, Copy, and Delete option. Simply select Delete to remove the user.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      2. Adding a User Role 

      There are a few ways to create a new user role in WordPress. The easiest way is to go through the admin interface. As you may have noticed in the last section, you can assign a user role at the time of creating a new user.

      To assign or update a role to an existing user, you can navigate to User from your WordPress dashboard, then select the Edit link under the user name:

      WordPress User Editor

      At the bottom of the screen, you can select an option from the Role drop-down menu:

      WordPress select User Role Administrator

      When you’re done, you can simply select the Add New User or Update User button at the bottom of the screen.

      Another way you can add a new user role in WordPress is by manually editing your code. For instance, you can add a custom user role, such as Moderator, with the add_role() function.

      To do so, you can add the following code to your theme’s functions.php file:

      add_role( 'new_user_role', __( 'Moderator' ), array( 'read' => true, 'edit_posts' => true, 'delete_posts' => true ) );

      When you’re done, be sure to update the file to save your changes. It’s as simple as that!

      3. Deleting a User Role in WordPress

      If you want to delete a user role in WordPress so that it is no longer an option, you can do so by editing your theme’s files. Keep in mind that modifying theme files can be risky, so it’s best to create a backup of your site before you continue on.

      To get started, go to Appearance > Theme File Editor in your WordPress dashboard. Next, locate and open the Theme Functions file:

      WordPress Theme Editor

      In this file, you can add one (or all) of the following code snippets, depending on which user role(s) you want to remove:

      remove_role( 'subscriber' );
      remove_role( 'editor' );
      remove_role( 'contributor' );
      remove_role( 'author' );

      When you’re done, select the Update File to save your changes.

      4. Updating Existing User Roles and Permissions

      If you want to update an existing user’s permissions, you can select the Edit link from the User list. You can then scroll to the bottom of the screen and modify the role by selecting a new one from the User Role drop-down menu. Remember to save your changes.

      Another option is to use a plugin, such as User Role Editor:

      WordPress User Role editor plugin

      This free version of this tool lets you easily change user roles and capabilities. Once installed and activated on your site, you can browse to Users > User Role Editor:

      WordPress User Role Editor

      Next, you can select the checkboxes of the capabilities you want to allow the selected role to have. When you’re done, click on the Update button at the bottom of the screen to save your changes.

      The plugin also lets you add new roles or delete ones that you aren’t using. It even lets you assign capabilities on a per-user basis.

      Tips for Picking the Right User Roles and Permissions

      As a general rule of thumb, it’s a smart idea to set the user role as low as possible. In other words, you want to give users as few permissions as possible that won’t interfere with or impact their ability to do their assigned tasks.

      Selecting the roles for your users should be based on the level of access that’s necessary.There are also specific roles for certain use cases.

      For example, if you have a full-time writer for your WordPress website, you can assign them the Author role. They’ll be able to write, draft, and publish posts on your site, as well as access the Media Library. However, they won’t be able to access, edit, or delete other pages and posts. Therefore, if this is a necessary capability, you may want to assign them the Editor role.

      On the other hand, if you have a freelance writer or a new hire that you don’t want to give publishing privileges to, you can make them a Contributor. This will let them write pages and posts, but they won’t be able to publish them. They can only submit it to the Editor (or Admin) for review.

      Consider assigning the Contributor role to anyone that doesn’t work in-house. We also recommend having as few Administrators as possible. This can help safeguard your site and prevent errors.

      If you have a multi-site installation, it’s a good idea to have one Super Admin. That way, they can handle any security or site issues that arise on any of the sites without interference or confusion from other admins. However, you could assign a single Administrator or Editor for each of the sites within your multisite network.

      Troubleshooting WordPress User Role and Permission Issues

      WordPress user roles and permissions are relatively straightforward and easy to use. However, sometimes issues arise, which can make it difficult for users with certain roles or permissions to carry out their tasks properly.

      One of the most common is being locked out of your WordPress admin and encountering a page with the message “Sorry, you are not allowed to access this page”. This error can be frustrating because it can be challenging to nail down the cause of it.

      However, if you see this message it’s likely because there’s a permission setting that is preventing you from accessing a certain area for security purposes. If you’re an Administrator or should have access, there are a few potential solutions you can try out.

      If this issue occurred directly after a WordPress update, restore the previous version of your site. Next, you can try disabling all of your plugins and re-enabling them one-by-one. You can also try activating a default WordPress theme. These steps can help you narrow down the source of the notification.

      Alternatively, you can check to ensure that you have the necessary Administrator privileges. To do this, navigate to phpMyAdmin then to the wp_users table.

      Next, locate your username and make a note of your ID. Browse to the wp_usermeta table and locate your metauser ID:

      phpMyAdmin user database

      Under the Metavalue column, it should read as the following:

      A:1:{s:13:"administrator";s:1:"1";}

      If there is something else in this field, we recommend editing it to replace it with the above. Simply save your changes when you’re done.

      Useful WordPress User Role and Permissions Plugins

      At this point, you likely understand the various settings and options you have for changing user roles and permissions in WordPress. However, to make the process even easier, you might consider using a plugin.

      We already discussed the User Role Editor plugin, but there are a handful of additional options to choose from. Below, we’ll take a look at some of the most popular ones and explain what you can use them for.

      Members

      Members is a plugin that lets you manage the permissions of registered users:

      MemberPress

      It’s beginner-friendly, boasting an intuitive interface that is easy to navigate. You can use it to create new roles and add permissions to each one. You can also clone user roles and customize the permissions for blog content.

      PublishPress Capabilities

      PublishPress Capabilities is another useful tool that can help you gain more control over your user roles:

      PublishPress

      It lets you add new roles, clone existing ones, and add individual permissions for each role. You can also backup, migrate, and restore the permissions. It can be used for single websites or on multisite networks. The plugin also integrates seamlessly with WooCommerce, which is helpful for store and product management.

      WPFront User Role Editor

      WPFront User Role Editor is a popular plugin you can use for managing user roles in WordPress:

      WPFront

      You can use it to create, delete, and modify user permissions. You can add new names for roles and clone existing ones. It also lets you assign multiple roles to users.

      Take Control of User Role Management on Your WordPress Site

      If you’re looking to manage WordPress user roles and permissions, it’s important to understand the different capabilities associated with each role. With this information, you can better manage your site and ensure that users have the appropriate level of access to your content and features.

      Whether you’re managing a simple blog or creating a complex website with multiple authors, user permissions are an important part of WordPress. With the right set of permissions in place, you can ensure that your site remains secure and runs smoothly.

      Are you interested in learning about more ways you can make managing your WordPress site as simple as possible? Check out our Managed WordPress Hosting solutions to learn about DreamPress!

      Do More with DreamPress

      DreamPress’ automatic updates, caching, and strong security defenses take server management off your hands so you can focus on content creation.

      Managed WordPress Hosting - DreamPress



      Source link

      Decoding WordPress: New Site Blocks in 5.9


      WordPress has always been a user-friendly platform that is flexible and easy to learn. However, those without coding skills may struggle to perform certain customization tasks.

      Fortunately, Version 5.9 introduced Full-Site Editing, which brings together both new and existing features to provide centralized control of your entire site. One of the most significant changes is the addition of new site level blocks.

      In this post, we’ll discuss everything you need to know about site blocks in WordPress. We’ll also look at some examples and show you how to use them. Let’s get started!

      An Introduction to WordPress Blocks

      Blocks have been a fundamental aspect of WordPress since late 2018. Version 5.0 of WordPress replaced the classic editor with a new WordPress block editor called Gutenberg.

      A block is a specific element that you can add to your site. For instance, there are blocks for images, headings, lists, paragraphs, and more. This system provides users with a simple and intuitive way to create a unique website.

      Each block comes with a set of customization options, such as alignment, color, and size. Additionally, blocks can be moved around on via a drag-and-drop editor, facilitating a simpler page-building process.

      Common WordPress Blocks

      Gutenberg introduced blocks for various purposes. There may be some blocks that you will never touch. However, there are others you’ll probably use every time you create a post. Let’s take a look at some of the most common options in the new block editor.

      The Heading Block

      The Heading block provides several choices for configuring and styling headings:

      WordPress Heading Block

      This block can help you organize your content more efficiently. For instance, you can select the heading level H2 for main sections, and H3-H6 for subsections. Additionally, you can add a hyperlink to the heading.

      The Paragraph Block

      Paragraphs are the most frequently-used block in the Gutenberg editor:

      WordPress Paragraph Block

      This element enables users to write text and customize the typography. Usually, headings are used to group relevant paragraphs together and split up the page’s content.

      The Image Block

      Image blocks enable you to upload photos or artwork to your site:

      WordPress Image Block

      You can then use the settings to resize and crop your images. You can also add captions and alt text.

      The Video Block

      You can also add videos to your post. There are different options for displaying videos:

      WordPress Video Block

      For instance, you can upload them to your site’s Media Library, or embed them from YouTube and other video-sharing platforms. You can also add text tracks such as subtitles, captions, chapters, and descriptions to the block.

      The List Block

      The List block enables you to insert bulleted or numbered lists into your page:

      WordPress List Block

      This block comes with styling options such as bold and italics, as well as more intricate rich-text controls. Additionally, you can add hyperlinks to list items.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      New Site Blocks in WordPress 5.9

      Now that Full-Site Editing is here, individual blocks can also be used for editing your site’s theme. You can use the new editor to customize all aspects of your site:

      WordPress Full Site Editing - edit template

      This feature has replaced the Customizer. However, it only supports block-based themes, such as Twenty Twenty-Two. If you’re using a ‘standard’ theme, you’ll still have access to the Customizer (and the Gutenberg block editor), but you won’t be able to use the Full-Site Editor.

      The Full-Site Editor comes with templates for different pages, such as your archive or home page. Additionally, you can customize more areas of your site, such as your header and footer. There is also a new Global Styles feature, which enables you to define site-wide settings for your blocks.

      In addition, the Full-Site Editor has introduced a range of ‘theme blocks’. Often nicknamed ‘site blocks’, these new additions enable you to use and edit global elements such as the site logo and tagline, navigation, and post lists.

      The Benefits of Using Theme Blocks

      The new theme blocks were introduced to make the web design process in WordPress simpler and more streamlined. Previously, the WordPress theme editor had limited customization options, and users who wanted unique designs often needed to use custom code.

      Theme blocks remove the need for coding (and third-party page builder plugins) in most cases. Each block has a variety of styling and display options, offering users the flexibility to create almost any layout and design. Whether you’re a WordPress beginner or an experienced web developer, the process of creating custom sites is now faster and easier.

      Let’s take a look at some notable site blocks that have been added with WordPress 5.9. This is just a brief introduction – we’ll delve more deeply into each of these Gutenberg blocks shortly.

      Navigation

      This feature enables you to add your site’s navigation menu to a page:

      WordPress Navigation Block

      You can customize both the design and structure of your menu. For instance, you can add submenu items, change the color and alignment, and more.

      Query Loop

      A query loop is a block that displays a set of posts based on specific conditions and parameters:

      WordPress Query Loop Block

      This is a great way to showcase posts on a particular topic. You can filter content by post categories, tags, authors, and keywords. The block also comes with different styling options for the post feed.

      Template Part

      Template parts are used to organize the structure of a site. They’re essentially collections or containers of other content blocks:

      WordPress Template Part Block

      They can only be used when editing templates, so you’ll find this block in the Full-Site Editor. Each template part has a user-generated name. When adding a block, you can choose an existing template or create a new one.

      How to Use Common WordPress Site Blocks (6 New Theme Blocks)

      Now, let’s take a detailed look at a few common theme blocks. For each of the new blocks, we’ll discuss its purpose and the steps for using it.

      1. Navigation

      Navigation blocks are used for editing your site’s menus. When you add this block to your page, you are given three options: select an existing menu, add all of the site’s pages, or start with an empty menu:

      WordPress Navigation Block

      You can include additional menu items as well as indented items, which appear as subpages. Moreover, you can change the links and names of each item using the “anchor” icon in the toolbar. The toolbar also enables you to change the alignment and other layout settings.

      2. Login/out

      The login/out block provides a simple way to add a login and logout button to your website:

      WordPress Login/Out Block

      It automatically displays the correct link depending on the status of the user. You also have the option to display the login/out button as a switch.

      3. Template Part 

      This element can be thought of as a group of blocks. The template part helps you organize the structure of your page. These blocks can only be used when editing templates, and they’re an excellent way to manage global areas such as headers and footers:

      WordPress Header Block

      Template parts can be added in the site editor. Upon selecting the block, you’ll be asked if you want to add an existing template or create a new one.

      If you opt for the latter, you’ll be prompted to enter a name for the template. Then, you can go ahead and add in blocks to create the desired layout.

      4. Site Title

      As the name suggests, this block is used to display the title of your site:

      WordPress Site Title Block

      By default, the title links to the home page, but this can be turned off with a toggle switch in the settings. There’s also a range of styling options, including text and background colors, font size, line height, letter spacing, and other typography settings.

      5. Post Excerpt

      Post excerpts give readers a sneak peek into a post, and can help them decide whether or not they wish to read the entire article:

      WordPress Post Excerpt Block

      Most of the time, this block will be a child element of a query loop. It displays either the first 55 words of a post, or the set excerpt for that post. You can also add a “read more” link. This will take the user directly to the full post.

      6. Query Loop

      Query loops can be used to display a set of posts based on specific conditions and parameters. For example, you may use this block to show all posts in a particular category or by a specific author:

      WordPress Query Loop Block

      Query loops are made up of multiple blocks, including post titles, dates, excerpts, and featured images. You have the option to start blank and add nested blocks manually, or start with a premade layout and edit from there.

      You can then alter the width, alignment, arrangement, and colors. You can also change the number of posts that the query loop displays.

      Conclusion

      In the past, customizing WordPress sites may have been challenging for some users. However, with the release of new site blocks in version 5.9, the process has become a lot easier.

      Thanks to the Full-Site Editing feature, you can now make changes to your entire site from a unified interface. You can also customize individual elements such as the site title and tagline, navigation menu, and template parts like headers and footers.

      If you’re looking for a fast, reliable, and affordable place to host your WordPress site, we’ve got you covered. Check out our DreamHost WordPress Hosting plans!

      Power Your Website with DreamHost

      We make sure your website is fast, secure and always up so your visitors trust you. Plans start at $1.99/mo.

      shared hosting



      Source link

      Decoding WordPress: An Introduction to Global Styles


      WordPress blocks and Full-Site Editing (FSE) features make building and styling a successful website quick and easy.

      Global Styles can help you unify the appearance of your WordPress site without having to edit single blocks or pages. So whether you want to change your background color or adjust the heading typography, you’ll be able to make your modifications in a single place, resulting in a more cohesive and all-around better User Experience (UX).

      In this post, we’ll walk you through Global Styles. We’ll explain what they are, their benefits, and how the new features work. Then we’ll discuss how to use them to style your WordPress website. Let’s get started!

      An Overview of WordPress Global Styles

      Before working with Global Styles, it’s important to understand what they are and how they operate. This feature works in conjunction with theme.json, a new theme settings file. Developers can use theme.json to define defaults for a site as well as individual blocks. Gutenberg automatically applies this JSON when you place the file in the root directory of a block-based theme.

      This file is one of the most useful tools of the new full site editor in WordPress 5.9. The file lets theme authors share Global Styles as well as Global Settings. WordPress reformats the data taken from these JSON objects and turns it into CSS. Then users can further customize the styles in the WordPress editor.

      In previous iterations of the Gutenberg plugin, you had to register support for the style properties of a block before you were able to work with them in theme.json. Also, in classic themes and older versions, you had to use PHP to define things such as your color choices and fonts. Then you needed to add styles for the front and back end sides of your theme.

      However, with the latest release, when you use a theme with the theme.json file in place, WordPress automatically adds the styles defined there to your stylesheet. You can use this system to add entirely new color palettes, change the typography of themes, and more.

      Why Use WordPress Global Styles

      No matter your skill level, you’ll likely find using Global Styles an intuitive and accessible experience. Overall, it can streamline the web design process by making it easier to change the look and feel of your site. If you’re a WordPress beginner, taking advantage of these Global Styles may mean that you won’t need to hire a developer in order to design your website. Sorry, developers.

      On the flip side though, this new feature might be particularly useful for theme developers. That’s because Global Styles helps WordPress developers style blocks within the Block Editor. This can be highly advantageous, especially for new theme authors. It offers a variety of controls that minimize the need to create custom solutions for styling a site.

      In other words, Global Styles simplifies theme development to a great degree. As a result, it can help developers avoid damaging design mistakes.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      Creating the theme.json File

      The theme.json file contains two important parts: settings and styles. Settings refer to a list of global or contextual configuration values that determine how the editor and blocks behave. For example, it influences which controls are enabled by default, which controls are hidden from the User Interface (UI), the available color palette, typography settings, etc.

      Styles handles the theme’s design language and enables theme authors to define elements such as:

      • Font size
      • Line height
      • Background colors
      • Link colors

      If you want to create a theme.json file, you can make a new file of that name and then place it inside the root folder of your theme. All the contents of your file should be inserted inside two curly brackets: { }.

      Next, you’ll use property names and values within double quotes and separated with a colon, for example:

      {
      
      "property-name": "value"
      
      }

      The property name can either be a setting or a block name. Below is an example of a very basic theme.json file:

      {
      
          "version": 1,
      
          "settings": {},
      
          "styles": {},
      
          "customTemplates": {},
      
          "templateParts": {}
      
      }

      Version 1 of the theme.json format is the earliest, most stable version. However, version 2 is used starting with WordPress 5.9. While the version section must be the first to follow the opening curly bracket, the subsequent sections can be placed in any order.

      As we mentioned, the two main sections of the file are Settings and Styles. So let’s have a closer look at the presets for each.

      Settings Presets

      Presets refer to the default controls as well as any custom CSS properties and are generated by the values in theme.json. Some of the main preset categories include:

      • Color
      • Typography
      • Layout
      • Spacing

      Categories can also have subcategories. For example, a subcategory of Color could be Color Palette:

      {
      
      "version": 2,
      
      "settings": {
      
      "color": {
      
      "palette": [
      
      {

      Each preset also creates a custom CSS property using the “–wp–preset–{preset-category}–{preset-slug}” naming convention.

      There are a ton of presets and examples that you can use to create your theme.json file, so we won’t go over all of them here. However, you can refer to the WordPress Handbook for more detailed guidance.

      Styles Presets

      Styles presets control the styles of objects within blocks. For example, the following would be a way to use the hex value for a background and a Global Styles preset for the text color:

      {
      
              "version": 2,
      
      "settings": { ... },
      
      "styles": {
      
      "color": {
      
      "background": "#FBF",
      
      "text": "var(--wp--preset--color--purple)"
      
      }
      
      }
      
      }

      If we wanted to change the heading color of a block, it would look similar to this:

      {
      
              "version": 2,
      
      "settings": {...},
      
      "styles": {
      
      ...,
      
                     "blocks": {
      
                   "core/heading": {
      
           "color": {
      
            "text": "var(--wp--preset--color--blue)"
      
           }

      Again, there are nearly infinite examples and ways to use presets for block styles. You can refer to WordPress documentation for a full breakdown.

      There are also Template and Template parts sections. These include the base files of your theme, such as index.html, as well as sections to organize and structure your theme.

      How to Style Your WordPress Site Using Global Styles

      If you’re looking for a beginner-friendly way to use Global Styles to style your website, you can use the Global Styles interface with a WordPress block theme. Note that you will only have access to the Styles interface with WordPress 5.9 or higher.

      Choosing a Block-Based Theme

      First, you’ll need a block-based theme. To find one, you can navigate to the WordPress Theme Directory from your admin dashboard by browsing to Appearance > Themes > Add New. Next, you can click on the Feature Filter and select Full Site Editing, followed by Apply:

      WordPress Full-Site Editing theme feature filter

      Once you find a WordPress theme you like, you can hover your mouse over it, then select Install followed by Activate. We’ll be using Twenty Twenty-Two, which may already be installed if you are using WordPress 5.9 or later.

      Accessing the Styles Interface

      Next, head over to your Theme Editor (Appearance > Editor). In the top right-hand corner of the screen, you’ll see a half-shaded circle, which represents the Styles panel:

      WordPress Global styles panel

      When you first click on it, it will present a Styles Welcome Guide. If you need access to this in the future, you can find it by clicking on the three vertical dots in the upper right-hand corner and selecting Welcome Guide.

      The preview window shows you how the current style of your theme looks. Under the Styles panel, you’ll find settings for:

      • Typography
      • Colors
      • Layout
      • Blocks

      Let’s take a closer look at each.

      Typography

      Under Typography, you can manage the typography settings for two elements: Text and Links.

      You can change the font family and size:

      WordPress Global Styles typography settings screen

      You can also adjust the line height and select a font-weight. You’ll have these same options for your links. When you’re done, remember to save your changes.

      Colors

      Under Colors, you’ll find the default color presets that come with your theme. To create your own color palettes, you can enter the HEX value numbers or use the drag-and-drop color picker to generate your preferred colors:

      WordPress Global Styles color settings

      You can also rename the colors to something more identifiable or descriptive than the standard hexadecimal alphanumeric values. You can add custom gradients, apply duo-tone filters to images, and more.

      Next, you can modify the colors for three main elements: Background, Text, and Links. You can also select any of these elements to customize the styling. The changes will be applied instantly as you are editing.

      Layout

      Under Layout, you can adjust padding and other elements. This is straightforward and can be very useful when you need to make a minor adjustment (for example, for the sake of page symmetry).

      Blocks

      Finally, you can change the appearance of individual blocks. After you select Blocks from the Styles panel, you’ll find a list of blocks on your site.

      Let’s say you wanted to change the style of your Heading block. You can select Heading from the list, then adjust its Colors and Typography settings:

      Styling options for the WordPress Heading block

      When you’re done, you can click on Save. If you ever want to revert back to the theme styles you had before making changes, you can navigate to the Styles panel, click on the three vertical dots, and then select Reset to defaults.

      A Better Way to Use and Style WordPress

      WordPress is continuously working to improve the editing experience for its users. Now, thanks to Global Styles, theme development has just become that much easier for both beginners and seasoned professionals.

      As discussed in this post, you can create a theme.json file to apply Global Styles configurations to your theme. You can also use the Styles editor with a block-based theme to customize the appearance of your site. All this makes designing a successful website a breeze.

      DreamHost is a team of experienced web experts. We understand the importance of optimizing your WordPress experience. We promise to support your efforts using the latest open-source tech and award-winning support. Check out our Managed WordPress hosting plans today to learn more!

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link