Kinsta® https://kinsta.com/ Fast, secure, premium hosting solutions Mon, 14 Oct 2024 12:20:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://kinsta.com/wp-content/uploads/2024/09/cropped-Kinsta-black-favicon-1-32x32.png Kinsta® https://kinsta.com/ 32 32 Revolutionizing WordPress typography with full site editing and theme.json https://kinsta.com/blog/wordpress-typography-theme-json/ https://kinsta.com/blog/wordpress-typography-theme-json/#respond Tue, 15 Oct 2024 14:10:40 +0000 https://kinsta.com/?p=185246 Words are the backbone of the Internet, despite the proliferation of media. This means the typefaces you choose for your site will be a crucial aspect ...

The post Revolutionizing WordPress typography with full site editing and theme.json appeared first on Kinsta®.

]]>
Words are the backbone of the Internet, despite the proliferation of media. This means the typefaces you choose for your site will be a crucial aspect of your layout and design.

WordPress typography can evoke moods, help with branding, and more. Full site editing (FSE) in WordPress puts customizing this typography in the hands of users — and the theme.json file helps developers build WordPress themes that leverage this.

This article explores WordPress typography for both FSE and theme.json. However, the discussion also includes key contexts such as the technology you use, the technical considerations to bear in mind, and setting the evolution of how we use typefaces in design.

Typography on the web: a quick history

If you look back at early web designs, you can see that, despite the variety in layouts, typefaces have had a consistent presentation. This is part availability and part necessity. In a nutshell, without the technology we have now, words on the web can only use fonts available on your computer.

A mid-to late-’90s “web surfer” would have only a handful of predictable typefaces: Times New Roman, Arial, Helvetica, Georgia, and Verdana. The latter two are Microsoft commissions that render well for the web regardless of the era.

A comparison of two serif typefaces, Verdana and Georgia. The image shows uppercase and lowercase letters – as well as numbers – in both fonts. Verdana appears more condensed and geometric, while Georgia has more pronounced serifs and a slightly more traditional look.
Specimens of both the Verdana and Georgia fonts.

This primitive selection is consistent and dependable but lacks flexibility. Services such as Google Fonts and Adobe Fonts use the WOFF file format to give you access to a font library of thousands, with a straightforward embedding process.

The Google Fonts website showing font previews and filtering options. The preview text reads, "Everyone has the right to freedom of thought," displayed in different fonts, including Roboto, SUSE, and Noto Sans Hannunoo. Filter options for language, writing system, and font properties are visible on the left-hand sidebar.
The main Google Fonts interface.

This gives you greater scope to improve readability, create distinctive designs, and tailor the user experience (UX) for your site. Drawbacks include potential performance hits (such as a content layout shift), reliance on third-party services to display the most crucial element on your site, and privacy concerns.

This leads many web designers to forgo font libraries and reconsider using system fonts. The faster processing and control you have over applying a “system font stack” that prioritizes native typefaces and also uses fallback options is a solid approach.

WordPress and typography

WordPress places a strong emphasis on typography to help you create engaging and readable content. Throughout its history, the WordPress default themes all use font pairings that strike a balance between aesthetics and functionality.

Current default themes use system font stacks for a clean, modern, and performant presentation. Older default themes use pairings such as Noto Sans and Noto Serif (for Twenty Fifteen) and Montserrat and Merriweather (for Twenty Sixteen).

To showcase this typography “circle of life”, Twenty Sixteen uses Helvetica and Georgia as fallback options. The Twenty Ten default theme only uses Helvetica, Arial, and Georgia:

The WordPress.org theme preview for "Twenty Ten" displaying a scenic header image of a tree-lined path. The left-hand sidebar shows theme information and download options, while the main area presents sample content and layout.
The Twenty Ten demo page from WordPress.org.

While these choices set the tone for WordPress design within each theme, they can also inspire you to pay close attention to how you use typography — something WordPress FSE helps with.

A quick primer on full site editing and theme.json

FSE and theme.json are central to how you manage typography in WordPress, so understanding each is essential. FSE leverages the Block Editor and adds more functionality to become the Site Editor.

The WordPress Site Editor interface displaying a landscaping company's homepage. The page has a blue background with white text reading
The WordPress Site Editor interface looks much like the Block Editor, but with more customization scope.

This unifies your site design options in a number of ways:

  • You use the editing approach of Blocks for the entire site, not just your content.
  • A template library is part of the setup, so you can edit these using the same tools as your content.
  • Styling also happens within the Site Editor and offers a global settings scheme.
  • Site editing doesn’t need any code in order to implement any of the available options. This bridges the gap between development and end-user design.

You can consider the theme.json file to be a development version of FSE. You need JavaScript Object Notation (JSON) knowledge to work with the file, but this is within the capabilities of most site owners. It’s a central configuration file for managing your global styles and settings.

A code editor window titled is displayed over a scenic background of forested mountains. The editor shows a portion of a WordPress theme.json file with various styling configurations. The code includes settings for calendar, categories, and code elements, using CSS variables for colors and spacing. Line numbers are visible on the left, and the editor interface has a dark theme for improved readability against the backdrop.
A theme.json file showcased within a code editor.

Each setting uses a key/value pair of option:value, and you can implement this in a number of ways:

  • Defining global color palettes.
  • Setting up font families and sizes.
  • Configuring Block-specific styles.
  • Managing spacing and layout preferences.

Leveraging theme.json lets you create more consistent and customizable themes without the need for custom CSS (although this is also possible). The adaptability and flexibility of theme.json means this is a key component of developing themes for WordPress. The optimal approach is to use both in different ways for all of your theme design — and typography is no exception.

Setting up typography within the WordPress Site Editor

If you know how to use the Block Editor, you can also use the Site Editor. Within WordPress, navigate to the Appearance > Editor screen. This displays the home screen for the Site Editor:

The WordPress Site Editor home screen. The left-hand sidebar shows design options, while the main area displays a blue-themed homepage with the heading "A commitment to innovation and sustainability" and an image of a modern building.
The Site Editor home screen.

The Styles screen in the left-hand navigation gives you some global design options that include typography changes:

A GIF of the WordPress Site Editor showcasing various theme style presets. The main content area displays "A commitment to innovation and sustainability" with a description of Études firm. It changes the color scheme and typography based on the selections within the left-hand sidebar, which shows style options and color schemes.
Different styles preset options within the WordPress Site Editor.

For most use cases, individual settings for various typography aspects will give you greater value. There are two small icons at the top of the Styles screen that will open further options: the Style Book and the Edit Styles pencil icon.

A portion of the WordPress Site Editor showing style options on the left-hand side, and a preview of the website on the right. Two icons for viewing and editing are highlighted in red.
The styles editing icons within the Site Editor.

In addition, you can set typography options at an element level and for each Block.

The Font Library

The Edit Styles > Typography screen displays the Font Library, although it doesn’t have this explicit name within the Site Editor. This lets you handle fonts and typefaces in a few ways:

  • You can upload and manage custom typefaces.
  • There’s an option to use Google Fonts directly within WordPress.
  • Create font collections using PHP.

To access the Font Library from the Typography section in the Site Editor sidebar, click the Manage fonts icon:

The Typography settings panel within the Site Editor showing font options, including Cardo, Jost, System Sans-serif, and System Serif. A Manage fonts button is highlighted in the top right corner. The panel is displayed alongside a blue website background containing Latin text, demonstrating the applied typography styles.
The Manage Fonts icon within the WordPress Site Editor.

Here, the Library tab shows you the current registered typefaces for your theme and indicates which ones are active:

The WordPress Font Library interface displaying installed and theme fonts. Merriweather Sans is listed as an installed font with four active variants. Theme fonts include Cardo, Jost, System Sans-serif, and System Serif, each with their respective active variants.
The WordPress Font Library interface.

Clicking through any of these lets you activate or deactivate individual fonts:

The Font Library selection dialog box displaying options for the Cardo font family. The dialog shows three variants: Cardo Normal, Cardo Bold, and Cardo Normal Italic, each with a checkbox selected. Above the variants, there's a note cautioning that too many font variants could slow down the website.
The current active fonts within the Site Editor’s Font Library.

On the Upload tab, you use a drag-and-drop uploader dialog to install your own fonts in TTF, WOFF, WOFF2, and OTF formats.

The Install Fonts tab connects to Google Fonts, so you can leverage that library within your theme. Note that this approach downloads and serves fonts from your site, rather than a Google CDN:

The WordPress Font Library showing options to install Google Fonts. The search bar lets users find specific fonts, and a list displays various font options including Merienda, Merriweather, and Metal Mania. Pagination controls are visible at the bottom.
The Google Fonts library within the WordPress Site Editor.

Here, select the fonts you want to install from the comprehensive list, then click the Install button. Once the success notification displays, those fonts will show on the Library tab:

The WordPress Font Library displaying installed and theme fonts. Merriweather Sans is listed as an installed font with four variants active. Theme fonts include Cardo, Jost, System Sans-serif, and System Serif, each with their respective active variants.
The installed fonts for a WordPress instance.

This lets you use the fonts as you would any other on your site. Now, you have to customize them to fit your needs.

The Style Book

One of the dangers of choosing and setting typefaces is that you don’t know how it will look in combination with color schemes, layouts, and formattings. The Style Book is invaluable, as it lets you preview your typography settings across different elements.

The WordPress Style Book editor interface showing a blue background with "Code Is Poetry" repeated in different font sizes as headings. The right-hand sidebar displays style options for typography and elements.
The Site Editor Style Book.

Choosing the eye icon will open the Style Book, and there are five tabs here:

  • Text: Go here to work with paragraphs, headings, lists, and other elements that focus on text.
  • Media: Here, you can adjust images, video, and audio design presentations.
  • Design: This section collates structural design facets, such as columns, separators, and buttons.
  • Widgets: There are two elements to this screen: dynamic generations, such as lists of archives and comments. You also work with the search bar, social media icons, and tag clouds here.
  • Theme: This focuses on your site header elements, such as the title, tagline, navigation, and logo.

If you click on an element in the Style Book, you have various options to play with in the sidebar. You’re working with the typography settings for each Block here rather than dedicated elements:

The Style Book showing the Typography settings panel with options for headings and paragraphs. The heading "Code Is Poetry" is displayed in various sizes, with a sample paragraph below. Font customization options are visible on the right-hand side.
You have full scope to edit typography directly from the Style Book.

You can arrive at the same screens through the Styles > Blocks section from the Site Editor homepage. Regardless, the options you see let you customize the typography (and more) of each Block in granular detail.

Tuning typography options within the Site Editor

For all Blocks and elements, you have the same core options available to you. Here’s an overview of each option within the panel.

Font type and size

The Font drop-down menu is straightforward: choose the font you want to apply to the specific element or Block:

The Style Book interface displaying a paragraph from Don Quixote and a list of characters from Alice in Wonderland. The right-hand sidebar shows typography settings, including font selection (currently set to Cardo) and various text formatting options. A quote by Julio Cortázar is featured in a blue box at the bottom.
Choosing a font from the available selection in the Typography tab.

The Size presets have the least customization within the Site Editor. You choose a size from a range between Small and Extra Extra Large:

The Site Editor's Typography settings panel. The font is set to Cardo, size is set to Medium (M), and the appearance drop-down menu shows Regular selected. Line height is set to 1.55, and additional options for letter spacing and letter case are visible.
WordPress offers font size presets within the Site Editor.

If you edit theme.json, you can change these preset values — but can’t from the Site Editor. The Set Custom Size button gives you a way to set a custom size using an array of sizing units:

The Site Editor interface showing typography settings for a site. The main text area displays a paragraph in white on a blue background. The right-hand sidebar lets you customize font, size, appearance, and line height, with the Cardo font selected and size set to 1.2 rem.
Choosing a custom font size and unit.

There are more ways to adjust typography within the Site Editor, including methods that you typically use CSS for.

Appearance, line height, and letter spacing

The Appearance drop-down menu seems simple: choose a font weight from an extensive list and it will apply to your text. However, you won’t often have all of the available fonts for each weight.

The Appearance drop-down menu within the WordPress Site Editor. The panel is set to Regular. Below it, a line height adjustment control is set to 1.55, with plus and minus buttons for fine-tuning.
The Appearance drop-down menu in the WordPress Site Editor.

Our testing shows that WordPress doesn’t filter this list to show only available font weights. In addition, it will apply a ”nearest match” if you select a weight without a matching font. For example, we use Cardo Normal, Cardo Bold, and Cardo Bold Italic for our example site. Choosing Semi Bold, Bold, Extra Bold, or Black uses only Cardo Bold:

A GIF of the WordPress Site Editor showing a blue background with a quote from Don Quixote on the left-hand side. The right-hand sidebar shows a user cycling through options within the Appearance drop-down menu.
Changing the appearance of text within the WordPress Site Editor.

Line height doesn’t use presets and balances your font choice, appearance, and size.  This value puts more space between each line and it’s often a practical implementation when text looks bunched up:

A GIF of the WordPress Site Editor showcasing a change in the line height setting within the right-hand sidebar. The main area displays text from Don Quixote and a list of characters from Alice in Wonderland. A quote at the bottom reads, "In quoting others, we cite ourselves."
Changing the line height in the WordPress Site Editor.

Letter spacing is similar, and it follows the CSS custom of adding itself to the natural spacing that’s present:

The Site Editor Typography sidebar showing the font set to Cardo, with options to adjust size, appearance, line height, and letter spacing. A blue background with white text showcases how the letter spacing (5 px here) appears on the website.
You can push letter spacing too far to be usable.

As with custom font sizing, you can select different units of measurement. Choosing a relative value is often the preferable approach here. WordPress sets letter spacing to a CSS default of “normal.” This lets the browser choose the value and, in our experience, this is ideal.

It’s a typical practice to use small positive letter spacing values — often no more than 0.12rem/em — and hardly any negative spacing.

The final set of choices – letter case – lets you choose to make text upper, lower, or sentence case. You can also remove the casing. This is great for consistency when it comes to type, as you don’t need to specifically use a specific case when creating content.

How to use theme.json to define your WordPress theme’s typography

The Site Editor is great for site users without technical knowledge. The theme.json file is how you ensure the Site Editor gives users what they need to customize their sites. It’s the configuration file that is the development base for your theme.

We aren’t going  into the structure and formatting of the entire theme.json file, but we are looking at how to define, set, and apply typography within.

Understanding the theme.json structure and defining global settings

You use JSON to define all elements within theme.json, which includes typography. The typography element nests under the settings object within that file. From there, you nest further elements, properties, and objects to build your site’s typography:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

All of these elements follow a similar pattern. The defaults — and easiest to understand — are global settings. These nest in a straightforward way, but you can also define typography settings for individual Blocks:

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

This uses the blocks property and a specific namespace for each Block you want to target. While it adds two more nesting layers, there’s no alternative to this approach. Regardless, you have a lot of properties to play with.

Registering fonts

You have the same level of customization for typography as you do within the Site Editor interface — more in some instances. At a core level, you nest your font stack to the fontFamilies property, then give it a slug and name:

  • fontFamily maps to the font-family CSS value, and will be the stack of typefaces you wish to use in your theme.
  • name is what you see in the Site Editor when selecting a font, so it will be human-readable.
  • slug appends to a custom CSS property for further use.

For system fonts, this is straightforward:

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

Registering custom web fonts requires that you use the fontFace property and define some attributes:

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Once you have registered fonts, you select them from the various drop-down menus within the Site Editor.

Note that there are a few ways you can register typefaces for your theme. You have the Font Library within the Site Editor interface, typical PHP enqueuing, and the Create Block Theme plugin:

A blue background with white text reading CREATE BLOCK THEME in a bold sans-serif font. The words are stacked vertically with CREATE at the top in the largest size, BLOCK slightly smaller in the middle, and THEME smallest at the bottom.
The Create Block Theme header image from WordPress.org.

This is a boilerplate for building a theme, but also lets you register and define typography too. Once you register fonts in whatever way is comfortable (we recommend the Font Library), you can begin to look at sizing.

Setting font sizing and presets within theme.json

Another core task with typography is setting font sizes. This uses the fontSizes property and lets you define presets for the Site Editor:

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

As with other typography settings, WordPress will generate a custom CSS property for each preset using the slug you provide:

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress disables fluid typography by default, but you can turn this on using boolean values. It’s an option you can set at a global level…

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

…or for each preset and size you define:

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

The min and max values let you determine the range of scalability for each fluid font size you define.

Implementing advanced typography features

The theme.json provides a full complement of options, on par with what you can find in the Site Editor. This lets you customize the typography on your site to a set of defaults that make sense for your theme:

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

You can choose to enable or disable these options. Each option takes a boolean value, which means you have some customization options for the Site Editor, too. There are a few customizations you can make that go beyond the Site Editor’s offerings:

  • customFontSize is on by default, and lets users input custom font sizes — but you can disable it if you want to tightly control the available options.
  • dropCap defaults to false, but if you enable it, the user has the option to enable drop caps for the initial letter of any Paragraph blocks.
  • textColumns enables a “columns” option for any text within a Block, and this is off by default.
  • writingMode enables options to change the text orientation within the Site Editor. You can give users a choice between horizontal and vertical text.

The scope of theme.json means you should work there first, especially when building a theme. The options in the Site Editor will let you or your users refine WordPress typography.

How to implement typography using theme.json: a practical example

FSE makes design and development with WordPress easier than ever before. What’s more, some of the general process of selecting and implementing those typefaces is more straightforward. Some of this is due to design trends, but the tools exist to plug gaps where you don’t have a graphic designer available to help.

We can start with your core typeface selections.

1. Pair complimentary typefaces

There’s a reason so much writing goes into how to choose fonts and typefaces. It’s because it can be a tricky task. For instance, you have to consider the branding of the site, its purpose, and what you want to convey.

However, thanks to current design trends, there’s much less work to do here. This is because your body text can use system fonts — specifically the primary operating system (OS) typeface. The only task for you is to choose something that works alongside it.

This isn’t a tutorial on pairing typefaces, but we have some tips to pass on:

  • OS typefaces for the body copy will typically be sans-serif. This means looking for either a serif typeface or another sans-serif that looks different, unique, and stands out.
  • Keep things simple, and maybe consider only using the OS font if it works with the design.
  • Test out different combinations, as you can get a feel for which typefaces work together (and which don’t).

A good pair for a system font stack is Playfair Display, a serif Google Font:

The Google Fonts website displaying the Playfair Display font specimen. The sample text reads, "Whereas disregard and contempt for human rights have resulted" in various sizes. Options for specimen, type tester, glyphs, and about, and license are shown, along with a Get font button.
The Google Fonts specimen page for Playfair Display.

With a pair of fonts, you have to consider their size, not only on the page but in relation to one another.

2. Find the right absolute and relative sizing

Choosing font sizing is also crucial, as the wrong absolute sizes can ruin your UX/UI. It’s also an area where you may want to stick to the defaults. However, we encourage you to experiment here, as each pairing will have its own “space” for the typefaces.

Typescale is an excellent tool that can help you create the right WordPress typography, whatever your need:

The Typescale web app interface for customizing typography. The left-hand panel shows font settings, while the right-hand side displays a preview of different heading sizes and a sample landing page design.
The Typescale website.

One of the best aspects of the tool is the scale choices. It essentially does lots of work for you in choosing complimentary font sizes. We select a Major Third scale here, with a factor of 1.2 and a base size of 16px:

A typography scale interface from Typescale, displaying various heading sizes for
The font scaling options within Typeface.

Looking in the middle panel, you will see the resulting sizes for each heading and paragraph and can choose from a number of units of measurement. Note that Typescale also lets you change the letter spacing, line height, font weight, and more: all customizable within theme.json.

3. Applying defaults within theme.json

Once you have the right typefaces and sizing, you can implement them within your theme.json file. Here’s an example of what a typical theme.json file will look like:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": "\"Playfair Display\", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

You can apply also these typefaces to any Block, and even think about styling each heading in a unique way. Look to create a consistent and hierarchical WordPress typography system that will form the foundation of your theme’s design. It will ensure a cohesive look across your site, while the Site Editor will give you better flexibility and customization.

Kinsta’s role in your WordPress theme development workflow

Kinsta’s high-performance hosting offers plenty to help you run an efficient and speedy website. However, it also offers robust development tools, including DevKinsta, a local development environment that runs on Docker containers.

An artistic illustration of the DevKinsta logo. It depicts a person working at a computer in a dark environment. The image uses shades of blue and purple, showing hands typing on a keyboard and adjusting equipment. A monitor displays a stylized K logo.
The DevKinsta logo.

It’s important to make sure your WordPress typography works before you push live. This is where Kinsta’s staging environments will be essential. In particular, Selective Push will be something you use a lot. This lets you push specific files and folders — any asset you wish — rather than everything at once.

The MyKinsta interface showing a Push to Live dialog box. Options to push files and databases from staging to live environment are presented, with checkboxes for specific files, folders, and database tables.
Kinsta’s selective push tool.

This way, you can make discreet design changes by pushing singular files (such as theme.json). In addition, you can minimize the risk of damaging parts of your site’s design you are happy with, and you can make more frequent, incremental updates to your site’s typography.

Summary

FSE is maturing, and theme.json is central to the whole approach to WordPress editing. Typography is a critical factor, and WordPress provides developer-level tools and access to elements that would previously require a grounding in CSS and PHP.

Between the Site Editor’s intuitive interface, and the adaptability of theme.json, you can create typography that enhances your site’s aesthetics, resonates with your branding, and gives a boost to the overall user experience.

We’d love to hear about your experiences with WordPress typography and whether FSE holds the key to success for you. Share your thoughts with us in the comments below.

The post Revolutionizing WordPress typography with full site editing and theme.json appeared first on Kinsta®.

]]>
https://kinsta.com/blog/wordpress-typography-theme-json/feed/ 0
Security requirements and 9 best practices for robust e-commerce websites https://kinsta.com/blog/ecommerce-security/ https://kinsta.com/blog/ecommerce-security/#respond Thu, 10 Oct 2024 14:14:45 +0000 https://kinsta.com/?p=184722 If you run a website, specifically an e-commerce website, it is your responsibility to ensure that transactions occur securely and that the data of your users ...

The post Security requirements and 9 best practices for robust e-commerce websites appeared first on Kinsta®.

]]>
If you run a website, specifically an e-commerce website, it is your responsibility to ensure that transactions occur securely and that the data of your users and clients are not compromised. Your WordPress website’s database stores personal data, physical and electronic addresses, credit card details, transaction logs, and much more, and you are responsible for the security and integrity of all this data.

Security is not synonymous with inviolability. There is no such thing as absolute security on the Internet, especially when it comes to open-source software. However, there are many security measures that you can take to minimize risks of breaches, data theft, and other more or less serious damage to your website or infrastructure. Remember that, according to the GDPR, the Data Controller is responsible for ensuring that data processing complies with the GDPR and data protection regulations.

The data controller determines the purposes for which and the means by which personal data is processed. So, if your company/organization decides ‘why’ and ‘how’ the personal data should be processed, it is the data controller. Employees processing personal data within your organization do so to fulfill your tasks as data controller.

A security flaw in a website can put a company’s life at risk. Who would want to entrust their credit card details to an insecure website? And what damage would result to your brand’s reputation if your customers’ data were stolen and used for illicit purposes?

In short, on the same level as performance, security is a mission-critical factor for a successful e-commerce website and business. With this in mind, in this article, we have gathered a list of security measures and best practices that every e-commerce owner should adopt in order to remain competitive in local and international markets and avoid serious legal liability and damage to their online business.

13 major security risks for e-commerce websites

According to the 2020 Trustwave Global Security Reporttraditional brick-and-mortar retailers and e-commerce environments are the most exposed industries to cybersecurity risks, with about 24% of the total security incidents in 2019.

This leads us to consider the importance of security for e-commerce websites, find out the threats that loom over an online business, and the measures that e-commerce site owners must take to secure their customers’ transactions and data.

To better understand the actions and best practices an online business owner must adopt to secure their websites and e-stores, we first need to understand the most dangerous threats to e-commerce websites.

Based on the OWASP Top 10 Web Application Security Risks, we compiled the following non-exhaustive list of the most widespread threats that e-commerce websites have to face today.

OWASP Top Ten for 2021 compared to 2017
OWASP Top Ten for 2021 (Image source: OWASP)

1. Malware and Ransomware

There are many types of malware and different levels of security threats. Hackers use them to hack devices and steal data. Malware can cause severe monetary damage and can even destroy an entire company.

Although the consequences may not always be so dire, your customers may receive the error message “The site ahead contains malware” or “Deceptive site ahead” or the like, and this can affect your site’s visibility in SERPs and damage your brand image seriously.

Ransomware is a sub-species of malware. In short, ransomware hijacks a device or website, denying access to its files until the victim pays a ransom for the decryption key.

Due to the high risk that a malware attack can have on an e-commerce website, scanning your e-commerce site regularly for malware infections is vital for your business.

Check Out Our Video Guide to Malware

2. Phishing

Phishing is a kind of social engineering attack used by cybercriminals to spread malware — usually through emails.

A diagram of a phishing attack
A diagram of a phishing attack (Image source: Cloudflare)

It refers to an attempt to steal sensitive information such as usernames, passwords, credit card or bank account details, or other important data to use or sell with malicious intent. Typically, this type of attack is carried through spam and other forms of fraud emails or instant messages.

Google's phishing warning sign, showing
Google’s phishing warning sign. (Image source: FixMyWP)

3. DDoS attacks

DDoS is the short term for distributed denial of service. This is a type of attack that floods a website with a large number of requests to overwhelm the server with excessive Internet traffic and take the website down. The consequence is that your site goes offline, and the bandwidth costs increase dramatically. This can also cause the suspension of your hosting account.

MyKinsta dashboard analytics showing resource consumption
MyKinsta dashboard analytics showing resource consumption.

4. SQL injection

SQL injection is a kind of attack performed by a malicious actor who tries to inject SQL statements into a web application. If the attack is successful, they’ll be able to access your site database and read, modify, or remove data.

Example of SQL injection
An example of SQL injection (Image source: Cloudflare)

5. Cross-site scripting

Cross-Site Scripting (XSS) is a kind of attack where someone attaches malicious code onto a website to be executed on page load. The injection happens on a user’s browser and typically aims to steal sensitive information.

Cross-site scripting attack
How a cross-site scripting attack works (Image source: Cloudflare)

6. Man-in-the-middle attacks

A man-in-the-middle (MitM) or on-path attack is a cyberattack where someone places in the middle of communication between two devices (such as a web browser and a web server) aiming to grab information and/or impersonate one of the two agents with malicious intent.

7. Credential stuffing

Credential Stuffing is a cyberattack where the attacker uses credentials obtained from a data breach on a service or website to log into a different service or website. This kind of attack is a common risk for professionals working from home and remote companies.

Credential stuffing scheme
How credential stuffing works. (Image source: Cloudflare)

8. Zero-day exploits

A zero-day exploit is an unresolved or previously unknown security vulnerability that has no fix in place. Zero-day means that you have zero days to fix the issue before it causes serious damage to your business.

How hackers carry out a zero day attack
How hackers carry out a zero-day attack. (Source: Norton)

9. E-skimming

E-skimming or digital skimming is the insertion of malicious software into a retailer’s website aiming to steal payment data during checkout. This is also known as Magecart attack.

MageCart diagram
A diagram describing how a MageCart attack works (Image source: Sucuri)

10. Brute force attacks

A brute force attack is a trial-and-error method used to decode sensitive data such as login credentials, API keys, and SSH credentials. Once a password has been compromised, it can be used to access other services if you use the same credentials on multiple websites. (See credential stuffing.)

Using strong passwords, enabling multi-factor authentication systems, and using a robust password manager are all best practices preventing this kind of cyberattacks.

11. Backdoors

A backdoor provides a way to bypass an authentication or encryption system to automatically log into a website, device, or service. Once a website or service has been breached, a malicious actor can create their own backdoors to access your website, steal data, and potentially destroy your entire site.

12. Social Engineering attacks

Social engineering attacks are particularly dangerous because they exploit characteristics of human nature: trust in others, lack of knowledge, discomfort in contravening an order, utilitarianism, and so on. The basis of social engineering is the psychological manipulation of people for the purpose of disclosure of confidential information such as passwords, bank account details, and financial information.

The most common channels used to perform this kind of attack are emails, chat, phone calls, social networks, websites, and others. The attacker can then use that information to conduct other kinds of exploits such as Cross-Site Request Forgery.

Check Out Our Video Guide To Understand All About CSRF Attacks

13. Supply Chain Attacks

Typically, with a supply chain attack, a cyber attacker infiltrates malicious code into a vendor’s software to be distributed with an update.

Although they are not as widespread as other backdoor attacks, supply chain attacks have been recently detected on several WordPress plugins.

9 best practices to secure your e-commerce website

Securing a website can be a tough task if you don’t have the right tools and skills, but it doesn’t have to be a job for dedicated engineers. The main thing is to be aware of the areas of vulnerability and educate yourself and your team on the best practices for securing your e-commerce website from the most common threats.

Your task is twofold: on the one hand, you are responsible for securing WordPress and WooCommerce, determine who can access the platform, the plugins to be installed, the payment gateway, the authentication system, and everything related to WordPress, plugin, and theme maintenance. On the other hand, you need a secure and cutting-edge infrastructure. This is where the quality of your web hosting service comes in.

Sure, your web hosting provider cannot save you from any kind of threats. There are security actions that you and only you, as a site owner, can take. But a secure hosting service that takes your site’s security seriously can help a lot. Here are the main security-related features to look for in a modern web hosting service.

1. Choose a cutting-edge hosting infrastructure

The choice of the hosting infrastructure is vital to your website security, your brand reputation, and, eventually, the success of your business. You have several types of service to choose from, and they differ considerably in terms of infrastructure and services provided:

  • Shared hosting
  • Dedicated hosting
  • VPS hosting
  • Cloud hosting
  • Managed WordPress hosting

For an e-commerce website, relying on a secure infrastructure is crucial. If you care about your business, a shared hosting is not an option for you as it may not guarantee the minimum security standards for a successful e-commerce website.

Dedicated hosting can be highly customized and optimized for security but may require SysAdmin skills that may be hard to find for a small or medium-sized business.

In case you need control over your hosting but you don’t have great technical knowledge and/or resources, you may opt for a Virtual Private Server (VPS) hosting, which places somewhere in the middle between shared hosting and dedicated hosting. But a VPS may have a few cons: It could be unable to handle high traffic levels or spikes and performance is still affected by other websites on the server.

A cloud hosting service may be a good option for you as it typically has several security measures in place to secure your websites. However, it can be hard to configure and manage if you don’t have the necessary skills.

A managed WordPress and WooCommerce hosting gives you peace of mind because you are not responsible for server configuration and optimization, and you have specialized support service and simplified site installation and maintenance.

A cloud-based managed WordPress hosting service merges the advantages of both worlds, combining the high-speed and secure infrastructure of cloud services with the ease of use of managed WordPress hosting services.

Kinsta hosting infrastructure and technical stack

At Kinsta, we believe we have created the fastest and most secure managed WordPress hosting solution available today on top of the Google Cloud Platform.

Google Cloud regions
Google Cloud regions (Source: Google)

We provide C3D and C2 compute-optimized VMs on all plans, from Starter to Enterprise and beyond, in the regions where they are available. We also take advantage of Google secure infrastructure, which includes an enterprise-level firewall to filter out malicious traffic before it hits your website.

In addition, we have built a fast and secure technical stack based on Nginx, MariaDB, PHP 8.3, LXD containers, and our integration of Cloudflare Enterprise, which provides additional security, including a firewall, DDoS protection, and much more. This stack is available for all our clients, regardless of their plans.

We use Linux containers (LXC) and LXD to orchestrate them on top of the Google Cloud Platform (GCP), ensuring complete isolation for each individual WordPress site. On Kinsta, your website doesn’t share resources with any other website, including other websites on your account.

A diagram of Kinsta’s WordPress Hosting infrastructure
A diagram of Kinsta’s WordPress Hosting infrastructure.

Check out this post to learn more about our cutting-edge isolated container technology.

2. Use a web application firewall

A web application firewall (WAF) is a shield that filters out malicious connections from reaching your website and keeps your WordPress website secure.

Direct connection between two computers on the Internet, such as your computer and a web server, is not secure if you don’t put a firewall in the middle. A malicious actor may infect your website with some kind of malware or launch a DDoS attack.

This is where a web application firewall comes in. It scans every single connection request to your website and blocks potentially malicious access attempts.

A WAF is crucial for your website, whether you are a first-time blogger or a successful entrepreneur. With e-commerce websites, using a web application firewall is vital because an unprotected website is an easy catch for hackers and other malicious actors.

Without a web application firewall, a hacker can easily take control of your site, change login credentials, steal or destroy data, ruin it, and perform any sort of illicit activities. Potentially, it could wipe out your site entirely. In addition, your website would be more vulnerable to DDoS and brute force attacks.

To protect your website with a WAF, you don’t need to install and configure additional software on your server. Several cloud-based options, such as Cloudflare, Sucuri, and WordFence, can be set up on your server in few minutes.

All websites hosted by Kinsta are protected by Cloudflare

In addition to the IP-based protection that we provide with the Google Cloud Platform firewall, all websites hosted by Kinsta benefit from our Cloudflare integration, which includes an enterprise-level web application firewall with custom rulesets and free DDoS protection.

Thanks to our Cloudflare integration, you don’t need to set up a WAF manually because your site is automatically secured behind Cloudflare’s firewall, regardless of the plan you subscribe to.

Cloudflare waf
How a web application firewall works (Image source: Cloudflare)

3. Install an SSL certificate

SSL is a protocol used to encrypt and authenticate the data sent between a client application and a web server. If you run an e-commerce website, an SSL certificate is vital for your website and your business because it ensures data encryption, website authentication, data integrity, and user trust.

In addition, an SSL certificate improves search engine ranking because search engines prefer SSL-encrypted sites. If you want to have a chance to be listed on Google’s first page, you need a valid SSL certificate with HTTPS encryption.

SSL certificates on Kinsta

If your website is hosted by Kinsta, you don’t need to deal with all the technical intricacies that an SSL typically requires. Our clients can take advantage of our Cloudflare integration, which includes automatic SLL certificates for all WordPress websites. This includes wildcard SSL certificates, which means that your SSL also covers any subdomains relating to your main domain. And if you already have one, you can also install your custom SSL certificate.

Cloudflare SSL certificates come at no cost for all our clients, regardless of their plan.

For a closer view of Kinsta WordPress SSL certificates, check out our online docs.

Check Out Our Video Guide to Choosing the Right SSL Certificate for Your Site

4. Use secure SFTP and SSH connections

To perform a manual backup of your WordPress website or manually upload a plugin or theme, you need to access the site’s filesystem via an FTP client. An FTP client typically supports both FTP and SFTP connections, but you should only rely on SFTP, that uses a secure channel to transfer files over SSH. This makes a big difference with standard FTP connections.

Setting SFTP protocol in Filezilla
Setting SFTP protocol in Filezilla

Kinsta only supports SFTP/SSH connections

Because SFTP is a more secure method, Kinsta only supports SFTP connections.

SFTP/SSH details are available in your MyKinsta dashboard under WordPress Sites > Sitename > Environment > Info.

SFTP environment credentials in MyKinsta
SFTP environment credentials in MyKinsta

You should never use identical login credentials across multiple services and website environments. For this reason, on Kinsta, each single website environment – staging or production – has unique database and SFTP/SSH access credentials.

5. Use supported versions of PHP

Each PHP version is typically supported for two years. Only supported versions receive performance and security updates, so using unsupported PHP versions reduces performance and increases the risk of security vulnerabilities.

As of August 2024, the officially supported versions of PHP are PHP 8.1, 8.2, and 8.3.

Supported PHP versions
Supported PHP versions (Source PHP.net)

At the time of this writing, all PHP versions prior to 8.1 don’t receive security updates. This means that if you are using PHP 8.0 or earlier, your site is exposed to security flaws that will not be fixed.

WordPress core is built with PHP. Plugins are also based on PHP, and WooCommerce is no exception. If your e-commerce is based on WordPress, using a supported PHP version is vital to the success of your online store.

In addition to improved security, the most recent versions of PHP offer better performance. You could gain a boost in site speed by simply upgrading to the latest PHP version.

Kinsta only allows supported PHP versions

This may require additional development effort if you use custom plugins that are not compatible with supported PHP versions. However, our main responsibility is to ensure maximum security for your websites and our entire infrastructure. For this reason, Kinsta does not allow you to use unsupported PHP versions.

Kinsta clients can change the PHP version of their WordPress website in MyKinsta. Navigate to your site config section and select Tools from the left menu. Scroll down the page and find PHP engine. Click on the Modify button and select the PHP version for your website.

Modify PHP engine in MyKinsta
Modify PHP engine in MyKinsta

6. Enable two-factor authentication

Using strong passwords to secure your website and hosting account may not be enough to secure your e-commerce website. Using a multi-factor authentication system is strongly recommended.

Multi-factor authentication is an authentication system where the user accessing the service is required to give two or more proofs of their identity. This can be done in different ways: Biometrics such as fingerprints, an authenticator app, an email, an SMS, a hardware token, and more.

When it comes to your e-commerce website, you should enforce authentication security by enabling two-factor authentication (2FA) on both your hosting service and your WordPress website.

Enable 2FA with Kinsta

In addition to using a strong password for MyKinsta, we recommend enabling two-factor authentication and asking all users in your company to do the same. With 2FA enabled, all MyKinsta login attempts will require an additional verification code from an authenticator app (e.g., Google Authenticator) on your phone or password management app.

To enable 2FA in MyKinsta, click on your name in the top right corner and select User settings. In My Account, scroll the page down to the section Two-factor authentication. Click on the toggle button and scan the QR code in your authenticator app, enter the 6-digit code you see in the app, and you are done.

Two-factor authentication in MyKinsta
Two-factor authentication in MyKinsta

Note that Kinsta no longer supports SMS-based 2FA because it is vulnerable to phone-based attacks and is less secure than a time-based token. A recent Authy data breach exposed 33 million customer phone numbers, increasing the threat of SMS phishing and SIM-swapping attacks.

Kinsta no longer supports SMS authentication
Kinsta no longer supports SMS authentication

You can read more about 2FA on Kinsta in our documentation.

Enable 2FA with WordPress

You may also want to enable two-factor authentication on your e-commerce website. WordPress does not support 2FA out of the box, but you can quickly and easily add this feature to your website with one of the following plugins:

7. Core, plugins, and theme updates

In addition to WordPress core releases, new security updates are issued regularly whenever a new vulnerability is detected. The same happens with themes and plugins.

To keep your WordPress website protected, you need to keep your whole WordPress website up to date to prevent security vulnerabilities.

In your WordPress dashboard, under Dashboard > Updates, you can enable automatic core updates for all WordPress versions, or for maintenance and security releases only.

You can also manage automatic updates for themes and plugins.

Enable/disable automatic plugin updates
Enable/disable automatic plugin updates
Enable/disable automatic plugin updates
Enable/disable automatic plugin updates

Note that, starting with WordPress 6.6, you can rollback automatic updates for your plugins in case of failure.

If you prefer, you can disable this feature and perform the updates yourself, but updating a large number of sites can be a time-consuming and boring task. That’s why many agencies resort to third-party tools that allow them to manage updates to all their WordPress sites from a single external environment.

Kinsta customers do not need to pay for third-party services to manage their updates in bulk because they can take advantage of the bulk updates feature available in the MyKinsta dashboard.

WordPress updates with Kinsta

You can manage your WordPress website themes and plugins directly from MyKinsta. In your dashboard, navigate to WordPress sites > Sitename > Themes and plugins. Here, you can select one or more plugins or themes and update them individually or in bulk.

Update plugins in bulk in MyKinsta
Update plugins in bulk in MyKinsta

Note that when you run an update from MyKinsta, a system-generated backup is created so you can revert the process for 2 hours if the update fails. This adds a layer of security and gives you peace of mind when you need to update your plugins or themes.

A system-generated backup is created when you bulk update your plugins
A system-generated backup is created when you bulk update your plugins

You can also run bulk updates for multiple WordPress websites at once. In your MyKinsta dashboard, select WordPress sites. Once there, select one or more websites and click on the Actions button on the right, then select the bulk action you want to perform. If you are updating plugins, click on the corresponding menu item. A pop-up will display a list of plugins for which an update is available.

Pick the plugins to update and wait a few seconds. A pop-up will let you know if the process has been completed successfully.

If the update fails, navigate to Sitename > Backups > System-generated page in MyKinsta and restore the most recent backup.

System-generated backups in MyKinsta dashboard
System-generated backups in MyKinsta dashboard

And, what’s even more powerful, you can perform all these operations on a staging environment first, then push staging to live without any risk.

On Kinsta, you can bulk update themes and plugins for all your WordPress sites conveniently from a single page without any risk. Perfect for agencies handling a lot of sites in one place.

8. Backups

If an update goes wrong, or a site is compromised or completely wiped out due to a security vulnerability, a backup can save your life. If your host does not provide an automatic backup system, you can always resort to a WordPress plugin. We recommend using a WordPress plugin that provides incremental backups: This allows you to have a backup of your site without losing disk space or reducing site performance.

However, a web hosting service that really cares about your e-commerce website should provide regular WordPress backups. Kinsta provides six different types of backup.

The six types of backups provided by Kinsta

We provide daily automatic WordPress backups, as well as system-generated backups for all WordPress websites. These backups, along with manual backups, are available as restore points in MyKinsta. You can also manually create a downloadable backup once a week.

You can browse your backups in your MyKinsta dashboard under WordPress sites > Sitename > Backups. Here you can restore your backup to an environment of your choice with a single click.

Daily backups in MyKinsta
Restoring a backup to a staging environment in MyKinsta

If you update your e-commerce website several times a day and you need more backups, you can purchase an add-on for hourly backups.

Hourly backups in MyKinsta
You can anable six-hours and hourly backups in MyKinsta

An add-on for external backups is also available, allowing you to store your backups on an external storage service such as Amazon S3 or Google Cloud Storage.

External backups in MyKinsta
Kinsta provides an integration with Amazon S3 and Google Cloud Storage

The retention period for backups is 14 to 30 days, depending on the hosting plan you subscribed to.

You can read more about WordPress backups in our docs.

9. Be careful with plugins

You often need many plugins on your WordPress website. This is especially true for e-commerce, which often requires features not available in WordPress or WooCommerce out of the box. We have a long list of recommended plugins you can browse through to see for yourself:

But you should never install the first plugin that pops up. There are some best practices to follow when choosing plugins for your WooCommerce website:

Do not install nulled plugins. This is vital for an e-commerce business. Nulled plugins are premium WordPress plugins or themes that have been hacked and can contain modified code designed to cause harm or collect information.

Prefer plugins that receive regular updates from vendors with good reputations. Trust the community and check reviews and ratings from other users. Avoid, if possible, plugins with low ratings and maintained by unknown vendors.

Technical details of the WooCommerce plugin
Technical details of the WooCommerce plugin

Always test a plugin in a staging environment before using it in production. This prevents compatibility issues with other plugins or the WordPress core itself.

Always back up your site before installing the plugin in production.

Do not install unnecessary plugins or plugins providing redundant features. Unnecessary plugins could potentially create unnecessary security flaws, conflict with other plugins, or reduce site performance.

Check if there are any known vulnerabilities associated with the plugin. Use security services such as the WordPress Vulnerability Database or WPScan.

However, security vulnerabilities can also be detected in popular plugins that receive regular updates. Plugins like WooCommerce and Easy Digital Downloads are no exception.

So, how can a web host help with plugin and theme vulnerabilities?

Kinsta security alerts

Whenever a security vulnerability is detected on one of your sites, whether it’s a core, plugin, or theme flaw, you immediately receive a notification in MyKinsta and an email notifying you about the issue and suggesting steps to fix it.

This feature is highly valued by our customers because it allows them to take quick action on vulnerabilities detected on their sites. If you are a Kinsta client, sooner or later, you will most likely receive an email like this:

An email from Kinsta notifying a vulnerability in WooCommerce
An email from Kinsta notifying a vulnerability in WooCommerce

WordPress-specific threats and how to prevent them

In the first section of this article, we have listed some of the major security threats that affect the generality of e-commerce websites. Some of these threats are particularly serious for WordPress/WooCommerce sites.

Although WordPress is open-source software, it is worth pointing out that hackers do not breach WordPress websites because of inherent vulnerabilities in the CMS but rather because of vulnerabilities that could have been predicted and fixed prior to any incident.

Failure to update the core, plugins, and theme can make your e-commerce website vulnerable, the same way as using weak passwords and not having a strict site access policy.

Here is a quick list of threats and best practices to prevent them that can help you keep your website secure:

For a more comprehensive list of actions you can take to secure WordPress websites, check our WordPress Security Guide and Site Security Cheat Sheet.

More Kinsta features for your e-commerce website security

At Kinsta, our mission is to provide the fastest and most secure WordPress hosting environment in the world. We are always looking for new ways to ensure that your e-commerce websites can offer the best shopping experience to your users and clients. Here are some of Kinsta’s services and features specifically aimed at securing your WordPress/WooCommerce website.

Uptime checks

If your website does not load or its response time is slow, how can you be sure that it is down for everyone or just you?

The short answer is that you need to check if your website is down. You can do it yourself following these steps or, if your site is hosted on Kinsta, you can rely on Kinsta uptime checks.

Kinsta scans your website every 3 minutes. It’s 480 checks every day.

If your site is down, our engineers start working immediately on the problem. There is a very good chance that the problem will be fixed before you even notice it.

Check Out Our Video Guide On How To Check if a Website Is Down:

Kinsta’s security pledge

Keeping an e-commerce site up-to-date is vital for your business, but it may not be enough. For this reason, scanning your website regularly with malware detection tools, such as Sucuri or WordFence, is always recommended even if you do not suspect to have been infected. Our advice is to scan your e-commerce website at least once a month, but we suggest scanning several times a month anytime you make changes to the site structure and install new plugins. If you don’t know where to start, here is a security checklist for your website.

But sometimes, despite all your efforts, it may happen that your site gets infected. What to do then?

Kinsta customers do not have to worry about this because Kinsta provides a free hack fix guarantee for all our clients regardless of their plan. If your WordPress site is hacked while hosted at Kinsta, we’ll work with you for free to try and undo the damage.

Our security pledge includes:

  • An inspection of the site and a deep scan of the site’s files to identify malware.
  • Repair of the WordPress core by installing a clean copy of the core files.
  • Identification and removal of infected plugins and themes.

Check our docs for a more detailed overview of Kinsta’s security pledge.

IP blocking

Sometimes, it may be necessary to block an IP address or range of IPs to prevent malicious behavior from bots, spammers, or other actors. Generally, you can block IP addresses from the server configuration file.

Kinsta users do not have to manually configure their server because Kinsta provides all our customers with a free IP deny tool available in MyKinsta.

To check IPs and the number of requests, log in to MyKinsta and navigate to WordPress Sites > sitename > Analytics > Geo & IP.

Top client IPs.
Top client IPs.

The Top client IPs section shows the list of IP addresses and the number of requests coming from each IP. If you notice an abnormal number of requests from specific IPs, you may want to investigate further through a reputation checker like CleanTalk or Spamhaus to see if the IP address has been identified as a bot, spammer, or other malicious IP address.

If an IP address is identified as malicious, you can block it using the IP Deny tool, available under WordPress Sites > sitename > IP deny.

Add IP addresses to the IP Deny tool in MyKinsta.
Add IP addresses to the IP Deny tool in MyKinsta.

Once you have blocked an IP address, you will see it listed below on the same page.

Add an IP address to deny in MyKinsta.
Add an IP address to deny in MyKinsta.

Kinsta security certifications

Kinsta commitment to ensuring the security of all clients’ sites is verified and certified at different levels.

Kinsta complies with the Security criterion of the System and Organization Controls (SOC 2) compliance framework developed by the American Institute of Certified Public Accountants (AICPA). This standard is used to evaluate a service organization’s adherence to one or more trust services criteria.

The five trust services criteria are:

  • Security
  • Availability
  • Processing integrity
  • Confidentiality
  • Privacy

But this is not all. Kinsta has achieved ISO 27001, 27017, and 27018 certifications. This achievement reflects adherence to best practices in information security, with additional emphasis on controls safeguarding data in cloud computing environments.

These certifications provide a guarantee of security and stability for all e-commerce website owners who can rely on a hosting service that allows them to devote themselves to their business with peace of mind.

ISO/IEC 27001 is the world’s best-known standard for information security management systems. An ISMS implemented according to this standard “is a tool for risk management, cyber-resilience, and operational excellence.”

Conformity with ISO/IEC 27001 means that an organization or business has put in place a system to manage risks related to the security of data owned or handled by the company and that this system respects all the best practices and principles enshrined in this International Standard.

ISO/IEC 27017:2015 establishes guidelines for information security controls applicable to the provision and use of cloud services. It provides:

  • additional implementation guidance for relevant controls specified in ISO/IEC 27002;
  • additional controls with implementation guidance that specifically relate to cloud services.

Last, ISO 27018:2019

establishes commonly accepted control objectives, controls, and guidelines for implementing measures to protect Personally Identifiable Information (PII) in line with the privacy principles in ISO/IEC 29100 for the public cloud computing environment.

You can visit Kinsta’s Trust Center for more information on the company’s ongoing compliance efforts.

Summary

There is a lot to be done to secure an e-commerce website. Doing it yourself requires considerable technical skills that may not be available to small businesses and start-ups.

Yet a company owner who wants to launch an online store, accepting the challenge of international markets, should not give up the growth opportunities that e-commerce has to offer. This is where enterprise-level managed WordPress and WooCommerce hosting can help.

As a premium managed WordPress and WooCommerce web hosting service, Kinsta provides a fast and secure cloud hosting for any e-commerce website. With Kinsta, you can launch an online store without worrying about all the technical intricacies, leaving behind an e-commerce website.

Our features include automatic daily backups, a dedicated firewall powered by Cloudflare, real-time monitoring for threats and vulnerabilities, free SSL certificates for encrypted transactions, DDoS protection to guard against malicious traffic, and many more features to protect your e-commerce website.

With all these proactive security measures, Kinsta locks your e-commerce website, minimizing the risk of data breaches and downtime.

Now it’s your turn. What are the risks and vulnerabilities you deal with every day? Does your hosting service provide your e-commerce site with adequate protection against malicious agents? Share your experience in the comments below.

The post Security requirements and 9 best practices for robust e-commerce websites appeared first on Kinsta®.

]]>
https://kinsta.com/blog/ecommerce-security/feed/ 0
How agencies can manage multiple WordPress sites efficiently https://kinsta.com/blog/manage-multiple-sites/ https://kinsta.com/blog/manage-multiple-sites/#respond Tue, 08 Oct 2024 14:11:36 +0000 https://kinsta.com/?p=185316 Managing a portfolio of WordPress sites can feel like an endless juggling act for agencies. For starters, every client needs a unique setup. Then, they need ...

The post How agencies can manage multiple WordPress sites efficiently appeared first on Kinsta®.

]]>
Managing a portfolio of WordPress sites can feel like an endless juggling act for agencies. For starters, every client needs a unique setup. Then, they need regular updates, performance monitoring, and troubleshooting.

The complexity quickly ramps up. Add keeping all these sites secure and running smoothly — while ensuring resources are properly allocated — and you’re talking about a lot of hands-on work and intense attention to detail.

If you’re overwhelmed just reading through all that, you’ll be relieved to hear MyKinsta can take some of this work off your hands. Kinsta’s Managed WordPress Hosting dashboard is a flexible and powerful tool that can help you manage multiple sites efficiently. MyKinsta takes the chaos out of site management, letting you focus on what you do best — working on your business.

Here, we’re talking about why dashboard systems like cPanel lack efficiency and why a centralized dashboard like MyKinsta is such a great benefit.

Let’s dive in.

The problem with traditional hosting solutions (like cPanel)

When you rely on something like cPanel, you can face challenges that impact the performance and efficiency of managing multiple client sites. Using cPanel in a shared hosting environment, you’ll see resources allocated across all sites on a single server. This means a traffic spike on one client’s site could use up the available bandwidth, CPU cycles, and memory, leaving other sites slow or even crashing during critical moments.

Beyond performance concerns, security is another significant risk. With shared hosting, one compromised site can expose the entire server. This puts every other client’s website at risk. Shared hosting environments make managing multiple sites with high-security requirements a constant concern for agencies. And that applies to everything from ecommerce sites to membership sites. Any site that stores customer data is particularly at risk.

Traditional hosting solutions can lack flexibility. The need to manually configure server settings, manage resources, and troubleshoot across different environments creates inefficiencies. And as agencies grow and gain more clients, these issues become even more pronounced. There’s a limit to how much you can do in a day. This hinders scalability across your agency and slows down daily operations.

MyKinsta’s isolated container technology solves these problems by assigning each WordPress site its own dedicated container with isolated resources. This includes PHP, MySQL, and NGINX.

But what does this mean, practically speaking?

It means traffic surges or performance issues on one site won’t impact others. So, there’s reliable operation across the board. The added security from this isolation also means that if one site is compromised, others remain safe.

A centralized dashboard to manage multiple sites

Managing multiple client sites using separate cPanel instances or dashboards quickly becomes overwhelming. This means you’re constantly switching between tabs, having to remember different credentials, and searching for specific settings across platforms. All of this digital “running around” eats into valuable time and drains productivity.

Routine tasks like monitoring site performance or running security audits can become complicated when you’re carrying them out across dozens of client sites. What should be easy quickly becomes unmanageable.

Kinsta’s centralized dashboard simplifies this process. MyKinsta helps you manage all your client sites in one place. Say goodbye to multiple dashboards and different control panels. Say hello to a unified dashboard that gives you quick access to each site’s info. Performance metrics, security reports, backups, and settings are all housed in one place.

In the MyKinsta dashboard, you can easily add a new site, jump between sites, make updates, or pull important data, all without ever leaving the platform. This can save time and make it easier to manage a large client portfolio.

Screenshot showing the MyKinsta interface for managing multiple WordPress site.
Adding a new WordPress site in MyKinsta.

Achieve client transparency with site monitoring and reporting

Tracking the health and performance of multiple client sites is a common challenge for agencies. Manually gathering performance metrics, uptime data, and security reports from separate sources takes a lot of time. And since it’s a manual effort, that leaves room for mistakes.

Repeating these tasks across multiple sites can lead to delays in identifying issues or, worse, overlooking critical problems entirely. It’s not uncommon to end up scrambling through piecemeal tools to diagnose a client issue and compile a comprehensive report. This reactive approach doesn’t inspire confidence or build client trust.

With MyKinsta’s built-in monitoring tools, you can track real-time data across all client sites from a single interface. The platform automatically collects key performance indicators, uptime data, and security logs, making it easy to catch potential issues before they escalate. And since all this information is exportable, you can generate detailed reports for your clients whenever they’re needed.

If you need more in-depth monitoring, you can harness Kinsta’s APM tool to troubleshoot issues. There is no need for external tools like New Relic when you have APM built in. Just turn it on and off as needed.

Screenshot showing the Application Performance Monitoring interface in MyKinsta.
WordPress Application Performance Monitoring in MyKinsta.

This proactive monitoring system helps you identify and resolve issues faster. But it also means you can be fully transparent with your clients. Keep your clients abreast of everything going on with their sites, from performance to security. It’ll make you appear more vigilant (because you will actually be so), helping you build client trust.

Bulk actions and updates across multiple sites

Updating multiple client sites’ plugins, themes, or WordPress versions is time-consuming. It’s not just about the number of sites you manage — it’s about the repetitive nature of having to log into each site individually, locate the updates, apply them, and then test for compatibility issues.

Every update pulls your team away from more critical tasks like improving site performance or building new features. This process also increases the risk of inconsistencies, as even minor oversights can lead to vulnerabilities that compromise the security of a site.

To illustrate what we mean, imagine it’s Monday morning, and your team is looking at a long list of client sites, each requiring plugin updates, theme adjustments, or core WordPress version upgrades. Tackling these one by one takes a lot of time and leaves plenty of room for missed steps or delays.

This piecemeal approach can lead to inconsistent environments, where some sites are up-to-date while others lag behind. Some clients would be exposed to security risks for longer than others. Some might have performance issues. It’s a mess.

With MyKinsta’s bulk action feature, you can solve this pain point overnight. It lets you push updates or changes across multiple sites at once. Whether it’s updating a security plugin, rolling out a new WordPress version, or tweaking a theme’s settings, you can apply these changes to all your sites with just a few clicks.

Screenshot showing the dialog in MyKinsta for updating WordPress themes across multiple sites.
Bulk-updating WordPress themes across multiple sites.

This feature helps you apply updates consistently and reduces downtime, too. And since these update tasks take less time, you and your team can spend more time on high-value tasks like building client relationships, onboarding new clients, or building out new features.

Site cloning and staging for safer development

Testing updates or new features directly on live client sites is a risky move. In fact, you shouldn’t do it. Ever. Even minor tweaks can have unintended consequences. One moment, everything works fine, then you make a change, and the site is down. Now you’re scrambling to roll back the changes, all while the client’s business is impacted, and you risk losing customers or revenue.

This risk is magnified when you’re working with multiple client sites. The stakes are higher because any error can lead to downtime across several sites. And nobody wants to deal with that. Clients rely on their websites for business, and even brief periods of downtime can harm their brand reputation, revenue, and overall trust in your agency’s abilities. One misguided plugin update could set up a chain reaction.

That’s why MyKinsta is such an agency-friendly platform. It includes a staging environment to eliminate these risks. Instead of making adjustments directly on live sites, quickly clone a site and use the staging environment to run tests. Whether you’re testing a new plugin, tweaking performance settings, or introducing new site features, you can make changes safely, knowing they won’t affect the live site until you’re ready to deploy them.

And all of this is easily accessible from within the MyKinsta dashboard.

Screenshot showing the dialog for accessing and adding WordPress environments in MyKinsta.
Creating a new staging environment within MyKinsta.

Once you’re happy with the changes on the staging environment and confident there are no bugs or compatibility issues, deploy them to the live site with just a few clicks. This whole process ensures the client’s live site remains untouched during testing and reduces the risk of downtime or site crashes.

If something does go wrong in staging, it’s easy to identify and fix the issue before it impacts a client site.

It’s also worth noting that sites are automatically backed up before each deployment from staging as an extra level of precaution. That’s even more protection.

Summary

Managing multiple WordPress sites for clients can quickly become overwhelming without the right tools. From resource management to security risks and time-consuming updates, traditional hosting platforms struggle to provide the efficiency agencies need. However, Kinsta addresses these issues more with the MyKinsta dashboard, bulk action capabilities, staging environments, and real-time monitoring. These features can help you make a more efficient workflow, scale operations, and provide better service to clients overall

In addition to these powerful tools, Kinsta offers valuable agency perks like white labeling of the WordPress admin dashboard, free hosting for your own site, and a 30-day money-back guarantee. It’s a comprehensive solution designed to help your agency grow and thrive.

Are you ready to make site management easier? Try Kinsta today and experience the difference for yourself.

The post How agencies can manage multiple WordPress sites efficiently appeared first on Kinsta®.

]]>
https://kinsta.com/blog/manage-multiple-sites/feed/ 0