This is a valid RSS feed.
This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 59, column 0: (68 occurrences) [help]
line 127, column 0: (22 occurrences) [help]
line 284, column 0: (65 occurrences) [help]
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-emb ...
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
>
<channel>
<title>WordPress.com News</title>
<atom:link href="https://wordpress.com/blog/feed/" rel="self" type="application/rss+xml" />
<link>https://wordpress.com/blog</link>
<description>The latest news on WordPress.com and the WordPress community.</description>
<lastBuildDate>Mon, 12 May 2025 14:21:48 +0000</lastBuildDate>
<language>en</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>http://wordpress.com/</generator>
<cloud domain='wordpress.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
<url>https://s0.wp.com/i/buttonw-com.png</url>
<title>WordPress.com News</title>
<link>https://wordpress.com/blog</link>
</image>
<atom:link rel="search" type="application/opensearchdescription+xml" href="https://wordpress.com/blog/osd.xml" title="WordPress.com News" />
<atom:link rel='hub' href='https://wordpress.com/blog/?pushpress=hub'/>
<item>
<title>Customize Your WordPress Development Workflow: New Preferences in Studio</title>
<link>https://wordpress.com/blog/2025/05/12/preferences-studio/</link>
<comments>https://wordpress.com/blog/2025/05/12/preferences-studio/#comments</comments>
<dc:creator><![CDATA[Nick Diego]]></dc:creator>
<pubDate>Mon, 12 May 2025 12:24:33 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Studio]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79454</guid>
<description><![CDATA[Studio by WordPress.com 1.5.1 enhances local development with code editor and terminal preferences.]]></description>
<content:encoded><![CDATA[
<p><a href="https://developer.wordpress.com/studio?utm_source=dotcom_blog&utm_medium=blog_post&utm_campaign=customize_terminal_code_editor">Studio by WordPress.com</a> is a free local development tool designed to help developers build plugins, themes, and full WordPress sites. The recent 1.5.1 release introduces more flexible environment customization, including support for setting your preferred code editor and terminal application directly in Studio.</p>
<p>This has been one of our most requested features, especially with tools like Cursor becoming more popular. The new Preferences interface lays the groundwork for supporting even more tools over time.</p>
<h2 class="wp-block-heading">How to configure your preferences</h2>
<p>To set your preferred code editor and terminal, open the <strong>Settings</strong> modal. Click <strong>“Howdy, [your name]”</strong> or <strong>“WordPress.com login”</strong> if you’re not signed in.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79461" data-permalink="https://wordpress.com/blog/2025/05/12/preferences-studio/studio-open-preferences/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg" data-orig-size="1226,854" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="studio-open-preferences" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=1024" width="1226" height="854" src="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg" alt="An orange arrow highlighting the Howdy, NAME area in Studio" class="wp-image-79461" srcset="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg 1226w, https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=150&h=104 150w, https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=300&h=209 300w, https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=768&h=535 768w, https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg?w=1024&h=713 1024w" sizes="(max-width: 1226px) 100vw, 1226px" /></figure>
<p>Select the <strong>Preferences</strong> tab in the modal window. From there, you can choose your preferred code editor and terminal application.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79460" data-permalink="https://wordpress.com/blog/2025/05/12/preferences-studio/studio-editor-preferences/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg" data-orig-size="1400,1004" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="studio-editor-preferences" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=1024" width="1400" height="1004" src="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg" alt="The preferences modal window in Studio, showing options for terminal and code editor" class="wp-image-79460" srcset="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=150&h=108 150w, https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=300&h=215 300w, https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=768&h=551 768w, https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg?w=1024&h=734 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The following options are currently supported:</p>
<p><strong>Code editors:</strong></p>
<ul class="wp-block-list">
<li>Visual Studio Code</li>
<li>Cursor</li>
<li>Windsurf</li>
<li>PHPStorm</li>
<li>WebStorm</li>
</ul>
<p><strong>Terminal applications:</strong></p>
<ul class="wp-block-list">
<li>Terminal (Mac)</li>
<li>Command Prompt (Windows)</li>
<li>Warp</li>
<li>Ghostty (Mac)</li>
<li>iTerm2 (Mac)</li>
</ul>
<p class="overflow-wrap-break-word has-primary-light-background-color has-background" style="border-radius:5px"><strong>Note:</strong> To appear as selectable options in your Studio Preferences, the applications must be installed on your computer. On macOS, they need to be in <code>/Applications</code> or <code>/Users/YOUR_USERNAME/Applications</code>.</p>
<p>Once you have made your selections, click <strong>Save</strong>. You can change your preferences at any time. </p>
<p>Once saved, the buttons on each site’s <strong>Overview</strong> tab will update to match your chosen tools. Here, you can see the user has configured the Terminal app on Mac and Cursor.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79472" data-permalink="https://wordpress.com/blog/2025/05/12/preferences-studio/terminal-cursor-studio-preferences/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg" data-orig-size="1400,1001" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="terminal-cursor-studio-preferences" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=1024" width="1400" height="1001" src="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg" alt="Two orange arrows pointing to the Cursor and Terminal buttons in Studio " class="wp-image-79472" srcset="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=150&h=107 150w, https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=300&h=215 300w, https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=768&h=549 768w, https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg?w=1024&h=732 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<h2 class="wp-block-heading">What’s next for Studio?</h2>
<p>We’re actively improving Studio to make it the best local WordPress development tool. Here are a few updates coming in the future:</p>
<ul class="wp-block-list">
<li><strong>Integration with Pressable</strong>: Sync and deploy full sites to <a href="https://pressable.com/">Pressable</a>-hosted websites.</li>
<li><strong>An</strong> <strong>enhanced command-line interface (CLI)</strong>: Studio will better support streamlined development workflows.</li>
</ul>
<p>You can track progress, preview upcoming features, and make your own requests in the <a href="https://github.com/Automattic/studio">Studio GitHub repository</a>.</p>
<p>Studio is just over a year old, and 2025 will be an important year for the open source project. If you haven’t recently used Studio, now is a great time to download the latest version for free and explore new features like <a href="https://developer.wordpress.com/docs/developer-tools/studio/assistant/">Studio Assistant</a> and <a href="https://developer.wordpress.com/docs/developer-tools/studio/sync/">Studio Sync</a>.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://developer.wordpress.com/studio?utm_source=dotcom_blog&utm_medium=blog_post&utm_campaign=customize_terminal_code_editor">Download Studio</a></div>
</div>
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<p>If you’re interested in contributing to Studio, perhaps by adding support for additional code editors or terminal applications, <a href="https://github.com/Automattic/studio">we would love to see your contributions in the GitHub repository</a>.</p>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/05/12/preferences-studio/feed/</wfw:commentRss>
<slash:comments>6</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/05/blog-header403x.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/05/blog-header403x.jpg" medium="image">
<media:title type="html">Blog header@3x</media:title>
</media:content>
<media:content url="https://2.gravatar.com/avatar/5d499534bfc21eaf9fa55506d50ffa01881d9a6cba58935552d3a8ac45944c29?s=96&d=retro" medium="image">
<media:title type="html">ndiego</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/studio-open-preferences.jpg" medium="image">
<media:title type="html">An orange arrow highlighting the Howdy, NAME area in Studio</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/studio-editor-preferences.jpg" medium="image">
<media:title type="html">The preferences modal window in Studio, showing options for terminal and code editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/terminal-cursor-studio-preferences.jpg" medium="image">
<media:title type="html">Two orange arrows pointing to the Cursor and Terminal buttons in Studio </media:title>
</media:content>
</item>
<item>
<title>Mastering Custom Block Styles in WordPress: 6 Methods for Theme and Plugin Developers</title>
<link>https://wordpress.com/blog/2025/05/07/custom-block-styles/</link>
<comments>https://wordpress.com/blog/2025/05/07/custom-block-styles/#comments</comments>
<dc:creator><![CDATA[Birgit Pauli-Haack]]></dc:creator>
<pubDate>Wed, 07 May 2025 17:00:00 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[block development]]></category>
<category><![CDATA[block styles]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79378</guid>
<description><![CDATA[Learn how to create custom block styles in WordPress using theme.json, PHP, or JavaScript—perfect for theme and plugin developers targeting the block editor.]]></description>
<content:encoded><![CDATA[
<p>Block Style Variations (block styles) enable developers to <strong>give content creators pre-made styling options for core blocks, ensuring brand consistency and streamlining content production</strong>. Using block styles can also eliminate the need to create custom blocks, reducing code maintenance.</p>
<p>In this guide, you’ll learn several ways to add custom block styles in WordPress, whether you’re working with a theme or a plugin. We’ll cover options using JSON (<code>theme.json</code>), PHP (<code>register_block_style()</code>), and JavaScript, with clear guidance on which method suits which situation.</p>
<p>You will also learn how to remove core block styles from the editor and curate the experience for your content creators. </p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px">The <code>theme.json</code> code refers to <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/">block styles</a> as “variations” (short for “block style variations”), which is sometimes confused with <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/">block variations</a> or <a href="https://make.wordpress.org/core/2022/05/03/global-styles-variations-in-wordpress-6-0/">Global Styles variations</a>. This post refers to these as “block styles” to avoid confusion.</p>
<p>This post starts with simple examples and gradually introduces more advanced methods for adding block styles, from quick theme tweaks to plugin-based approaches.</p>
<p>The code referenced in this post is also available on GitHub: </p>
<ul class="wp-block-list">
<li><strong>Theme</strong>: <a href="https://github.com/Automattic/dotcom-plain-pauli">plain-pauli</a></li>
<li><strong>Plugin</strong>: <a href="https://github.com/Automattic/dotcom-pauli-block-styles">block-styles</a></li>
</ul>
<p>You’ll want to have a basic understanding of CSS to follow along. Being comfortable with <code>theme.json</code> is also key, and knowing a bit about PHP and WordPress hooks will definitely come in handy.</p>
<p>To follow along or use the example code, you can use <a href="https://developer.wordpress.com/studio?utm_source=dotcom_blog&utm_medium=blog_post&utm_campaign=block_styles">Studio, our free and open source local development environment</a>, available for Mac and Windows.</p>
<ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#what-are-custom-block-styles">What are custom block styles?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#method-1-add-a-block-style-via-a-json-file-styles-folder">Method 1: add a block style via a JSON file (/styles folder) </a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#method-2-register-block-style-in-php-and-style-it-via-theme-json">Method 2: register block style in PHP and style it via theme.json</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#register-block-style">Register block style </a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#add-styling-to-theme-json">Add styling to theme.json</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#method-3-add-a-block-style-with-register-block-style-php">Method 3: add a block style with register_block_style() (PHP)</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#3a-use-the-style-data-parameter">3a. Use the style_data parameter</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#3b-use-the-inline-style-parameter">3b. Use the inline_style parameter</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#3c-use-the-style-handle-parameter">3c. Use the style_handle parameter</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#method-4-register-block-styles-using-javascript-css">Method 4: register block styles using JavaScript + CSS</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#optional-removing-unwanted-core-block-styles">Optional: removing unwanted core block styles</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#summary-custom-block-styles-at-a-glance">Summary: custom block styles at a glance</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/07/custom-block-styles/#resources-to-learn-more">Resources to learn more</a></li></ol>
<h2 class="wp-block-heading" id="what-are-custom-block-styles">What are custom block styles?</h2>
<p>Custom block styles let you define alternative visual treatments for existing blocks, like adding a border, changing the background, or tweaking typography. </p>
<p>When the block is selected, these custom styles will appear in the <strong>Styles</strong> panel within the editor sidebar, giving content creators easy ways to apply consistent, reusable design patterns. You can create as many custom block styles as you’d like.</p>
<p>Below you’ll find an example of the <a href="https://wordpress.com/support/wordpress-editor/blocks/image-block/">Image block</a>. The <strong>Styles</strong> panel below shows four styles: <strong>Default</strong>, <strong>Rounded</strong>, <strong>Purple Border</strong>, and <strong>Red Border</strong> (which is the selected style showing in the editor).</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79407" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/red-border-preview/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg" data-orig-size="1028,430" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="red-border-preview" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=1024" loading="lazy" width="1028" height="430" src="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg" alt="A red border around an image in the WordPress editor" class="wp-image-79407" srcset="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg 1028w, https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=150&h=63 150w, https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=300&h=125 300w, https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=768&h=321 768w, https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg?w=1024&h=428 1024w" sizes="(max-width: 1028px) 100vw, 1028px" /></figure>
<p>We’ll walk through six ways to add custom block styles in WordPress, from simple theme edits to more advanced methods.</p>
<h2 class="wp-block-heading" id="method-1-add-a-block-style-via-a-json-file-styles-folder">Method 1: add a block style via a JSON file (<code>/styles</code> folder) </h2>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Theme developers</li>
<li><strong>Where you would typically use it:</strong> Commonly in themes </li>
<li><strong>Version requirements:</strong> WordPress 6.6 or higher with <code>theme.json</code> v3 </li>
</ul>
<p>For theme developers, the most streamlined way to add custom block styles to a theme is to add a new file to the /styles folder. </p>
<p>This method requires upgrading the <a href="https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/"><code>theme.json</code> schema to v3</a>, which is only available in WordPress 6.6 and above. As a theme developer, you would either require your users to install the Gutenberg plugin or update the minimum requirement for your theme to WordPress 6.6 to ensure everything works as intended.</p>
<p>Say we wanted to add a blue border style called <code>image-blue-border.json</code>.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; auto-links: false; title: ; quick-code: false; notranslate">
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Blue Border",
"slug": "blue-border",
"blockTypes": [ "core/image" ],
"styles": {
"border": {
"color": "#00f9ff",
"style": "solid",
"width": "4px",
"radius": "15px"
},
"shadow": "var(--wp--preset--shadow--natural)"
}
}
</pre></div>
<p>With <code>theme.json</code> v3, the metadata information for a block’s style is automatically registered within the<a href="https://developer.wordpress.org/reference/classes/wp_block_styles_registry/"> WP_Block_Styles_Registry</a>:</p>
<ul class="wp-block-list">
<li>The <code>title</code> is the same as the <code>label</code> from the <code>register_block_style code</code>.</li>
<li>The <code>slug</code> is similar to the <code>name</code> property of the <code>register_block_style function</code>.</li>
<li>The <code>blockTypes</code> property can be used to assign a style to a particular block or series of blocks.</li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="79409" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/blue-border-preview/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg" data-orig-size="1024,362" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="blue-border-preview" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg?w=1024" loading="lazy" width="1024" height="362" src="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg" alt="a blue border around the image block in the WordPress editor" class="wp-image-79409" srcset="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg 1024w, https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg?w=150&h=53 150w, https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg?w=300&h=106 300w, https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg?w=768&h=272 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p>The code <code>"shadow": "var(--wp--preset--shadow--natural)"</code> refers to the preset “Natural” shadow style in WordPress. By using a <code>preset</code> variable, your block will automatically reflect any global style changes, keeping your design consistent across themes and updates.</p>
<p>Once you save your code changes:</p>
<ul class="wp-block-list">
<li>Your new style is added to the <strong>Styles</strong> panel for that particular block. </li>
<li>The block editor shows a preview when you hover over the button.</li>
<li>The Styles engine attaches the CSS class <code>is-blue-border</code> to the block in the editor and on the frontend.</li>
<li>When opening the Global Styles via <em>Styles → Blocks → Image</em><strong>,</strong> the styles can be changed by the user for the whole site. </li>
</ul>
<p>To organize your block style code, you can create a subfolder in the styles folder called <code>/blocks</code> and keep them all together. A few theme developers found they could reduce the length of their <code>functions.php</code> file considerably by implementing subfolders instead.</p>
<h2 class="wp-block-heading" id="method-2-register-block-style-in-php-and-style-it-via-theme-json">Method 2: register block style in PHP and style it via <code>theme.json</code></h2>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Theme developers</li>
<li><strong><strong>Where you would typically use it</strong></strong>: In the theme.json file and in functions.php</li>
<li><strong>Version requirements:</strong> WordPress 6.6 or higher with <code>theme.json</code> v3 </li>
</ul>
<p>To add a custom block style using this method, you’ll need to register the style and add your stylings in the <code>theme.json</code> file.</p>
<h3 class="wp-block-heading" id="register-block-style">Register block style </h3>
<p>In your <code>functions.php</code> file, use the <a href="https://developer.wordpress.org/reference/functions/register_block_style/"><code>register_block_style()</code></a> function to set the two mandatory arguments (additional optional arguments are covered below): </p>
<ul class="wp-block-list">
<li><code>name</code>: The identifier of the style used to compute a CSS class.</li>
<li><code>label</code>: A human-readable label for the style.</li>
</ul>
<p>Once set, you can add them to the <code>init</code> hook in your theme. </p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function my_style_red(){
register_block_style(
'core/image',
array(
'name' => 'red-border',
'label' => __( 'Red Border', 'my-theme' )
)
);
}
add_action( 'init', 'my_style_red' );
</pre></div>
<h3 class="wp-block-heading" id="add-styling-to-theme-json">Add styling to <code>theme.json</code></h3>
<p>We’ll add some styling for the <code>red-border</code> variation to the <code>theme.json</code> file. It’s placed within the <code>styles.blocks.core/image</code> section, as we’re making changes to the Image block.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; auto-links: false; title: ; quick-code: false; notranslate">
"styles": {
"blocks": {
"core/image":{
"variations": {
"red-border":{
"border": {
"color":"#cf2e2e",
"style": "solid",
"width": "4px",
"radius":"15px"
}
}
}
},
</pre></div>
<p>These two code snippets work together because the <code>name</code> used in the <code>register_block_style()</code> function in your <code>functions.php</code> file and the variations’ <code>name</code> arguments in your <code>theme.json</code> file are identical. </p>
<p>This method produces the same editor and frontend results as using a JSON file in the <code>/styles</code> folder:</p>
<ul class="wp-block-list">
<li>The style will be visible in the editor and on the frontend. </li>
<li>It is also available via the <em>Editor → Styles → Blocks → Image</em> section for global customization.</li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="79429" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/screenshot-78/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg" data-orig-size="1357,688" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"Screenshot","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"Screenshot","orientation":"1"}" data-image-title="Screenshot" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=1024" loading="lazy" width="1357" height="688" src="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg" alt="a red border around an image block in the Global Styles in WordPress" class="wp-image-79429" srcset="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg 1357w, https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=150&h=76 150w, https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=300&h=152 300w, https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=768&h=389 768w, https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg?w=1024&h=519 1024w" sizes="(max-width: 1357px) 100vw, 1357px" /></figure>
<p>If the styles available in <code>theme.json</code> aren’t enough, you have a few options: </p>
<ul class="wp-block-list">
<li>You can use the <code>CSS</code> property in JSON notation. The WordPress.org <a href="https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/">per-block CSS with <code>theme.json</code></a> article provides a good summary of how to do this. </li>
<li>You can use any of the methods below and add them to your <code>functions.php</code> file. </li>
<li>You can register the block style via <code>register_block_style()</code> and include the CSS in your theme’s overall <code>style.css</code> file, referencing the block and style class name. That being said, this is not recommended as these styles will always load, even if the block isn’t in use. A bug is also<a href="https://github.com/WordPress/gutenberg/issues/27244"> preventing the styles from loading on the frontend</a>.</li>
<li>You can use block stylesheets to only load the styles when the block is used, as outlined in the <a href="https://developer.wordpress.org/themes/features/block-stylesheets/">WordPress Theme handbook tutorial on block stylesheets</a>. </li>
</ul>
<h2 class="wp-block-heading" id="method-3-add-a-block-style-with-register-block-style-php">Method 3: add a block style with <code>register_block_style()</code> (PHP)</h2>
<p>The <code>register_block_style()</code> function has three additional and optional parameters. They are listed on the documentation page for the <a href="https://developer.wordpress.org/reference/classes/wp_block_styles_registry/register/">WP_Block_Styles_Registry</a> class that handles the registration and management of block styles.</p>
<ul class="wp-block-list">
<li><code>style_data</code>: A <code>theme.json</code>-like object used to generate CSS.</li>
<li><code>inline_style</code>: Inline CSS code that registers the CSS class required for the style.</li>
<li><code>style_handle</code>: The handle of a previously registered style to enqueue alongside the block style.</li>
</ul>
<p>See the<a href="https://developer.wordpress.org/reference/functions/register_block_style/"> documentation for <code>register_block_style()</code></a> for more information.</p>
<h3 class="wp-block-heading" id="3a-use-the-style-data-parameter">3a. Use the <code>style_data</code> parameter</h3>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Plugin developers and theme developers</li>
<li><strong>Where you would typically use it:</strong> In plugin files or <code>functions.php </code></li>
<li><strong>Version requirements:</strong> WordPress 6.6 or higher</li>
</ul>
<p>Although block styles have been a fundamental way that WordPress works since 5.0, the <code>style_data</code> parameter was added in WordPress 6.6. </p>
<p>This method for defining block styles uses “a <code>theme.json</code>-like object,” meaning an array of nested styles in a format that very closely resembles the <a href="https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/">styles section of the <code>theme.json</code></a> file. At the root level, the styles are applied to the block(s) that you define with the <code>block_name</code> array. </p>
<p>If you are familiar with <code>theme.json</code> structure, you can use this method to add additional styles. This method enables those styles in <em>Editor → Styles → Blocks</em><strong> </strong>and users can make changes there. </p>
<p>As you can see, the array notation for this parameter follows JSON closely. </p>
<p>The <code>theme.json</code> reads:</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; auto-links: false; title: ; quick-code: false; notranslate">
"border": {
"color":"#cf2e2e",
"style": "solid",
"width": "4px",
"radius":"15px"
}
</pre></div>
<p>The array in PHP reads:</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
array(
'border' => array(
'color' => '#f5bc42',
'style' => 'solid',
'width' => '4px',
'radius' => '15px'
),
</pre></div>
<p>To further demonstrate this idea, this function adds an orange border with a box shadow using the “sharp” shadow style preset. </p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function my_orange_border() {
register_block_style(
array( 'core/image' ),
array(
'name' => 'orange-border',
'label' => __( 'Orange Border', 'pauli' ),
'style_data'=> array(
'border' => array(
'color' => '#f5bc42',
'style' => 'solid',
'width' => '4px',
'radius' => '15px'
),
'shadow' => array(
'var(--wp--preset--shadow--sharp)'
)
)
)
);
};
add_action( 'init', 'my_orange_border' );
</pre></div>
<figure class="wp-block-image size-full"><img data-attachment-id="79430" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/screenshot-79/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg" data-orig-size="1110,502" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"Screenshot","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"Screenshot","orientation":"1"}" data-image-title="Screenshot" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=1024" loading="lazy" width="1110" height="502" src="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg" alt="An Orange Border style selected in the Styles panel and the orange border showing on the image in the WordPress editor" class="wp-image-79430" srcset="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg 1110w, https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=150&h=68 150w, https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=300&h=136 300w, https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=768&h=347 768w, https://en-blog.files.wordpress.com/2025/05/orange-border.jpg?w=1024&h=463 1024w" sizes="(max-width: 1110px) 100vw, 1110px" /></figure>
<p>Of the three parameters, only the <code>style_data</code> information will be added to the global style section in the site editor and can be edited by the site owner. The other two add the styles to the Styles panel, and there is no edit path within the UI.</p>
<h3 class="wp-block-heading" id="3b-use-the-inline-style-parameter">3b. Use the <code>inline_style</code> parameter</h3>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Plugin developers and theme developers</li>
<li><strong>Where you would typically use it:</strong> In the main plugin PHP file or <code>functions.php</code></li>
<li><strong>Version requirements:</strong> WordPress 5 or higher</li>
</ul>
<p>The value for the <code>inline_style</code> parameter is a combination of the CSS selector and the CSS properties.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function my_double_frame_styles() {
register_block_style(
'core/image',
array(
'name' => 'double-frame',
'label' => __( 'Double-Frame', 'pauli' ),
'inline_style' => '.wp-block-image.is-style-double-frame
img { border: 10px ridge lightgreen; }'
)
);
}
add_action( 'init', 'my_double_frame_styles' );
</pre></div>
<figure class="wp-block-image size-full"><img data-attachment-id="79432" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/screenshot-80/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg" data-orig-size="1032,509" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"Screenshot","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"Screenshot","orientation":"1"}" data-image-title="Screenshot" data-image-description="" data-image-caption="<p>Screenshot</p>
" data-medium-file="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=1024" loading="lazy" width="1032" height="509" src="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg" alt="A Double Frame style selected in the Styles panel and the green border showing on the image in the WordPress editor" class="wp-image-79432" srcset="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg 1032w, https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=150&h=74 150w, https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=300&h=148 300w, https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=768&h=379 768w, https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg?w=1024&h=505 1024w" sizes="(max-width: 1032px) 100vw, 1032px" /></figure>
<p>The class name follows standard block editor naming conventions. Each core block’s class name contains the prefix <code>wp-block</code> + the block name, like <code>image</code>. It is then followed by the block style prefix <code>is-style</code> and the registered style <code>slug</code>, like <code>double-frame</code>.</p>
<p>The class name <code>.wp-block-image.is-style-double-frame</code> is followed by the style that you want to attach to the block. Here you see the CSS values for the border property for the image element (<code>img</code>). It adds a ridged, light green 1px border. </p>
<p>You can have quite a few CSS properties combined in the <code>inline_style</code> parameter for the function, but it may become hard to read and manage.</p>
<h3 class="wp-block-heading" id="3c-use-the-style-handle-parameter">3c. Use the <code>style_handle</code> parameter</h3>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Plugin developers and theme developers</li>
<li><strong>Where you would typically use it:</strong> In plugin files or <code>functions.php</code></li>
<li><strong>Version requirements:</strong> WordPress 5 or higher</li>
</ul>
<p>For more elaborate styles, consider placing the CSS in a separate file and using <code>wp_enqueue_style()</code> to load it on the frontend and backend. Then use the <code>style_handle</code> parameter in the <code>register_block_style()</code> function. </p>
<p>Here is some example code using this method to add a purple border style.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function my_purple_border_styles() {
wp_enqueue_style(
'my-image-block-style',
plugin_dir_url(__FILE__) . '/my-purple-border.css',
array( 'wp-edit-blocks' ),
'1.0'
);
register_block_style(
'core/image',
array(
'name' => 'purple-border',
'label' => __( 'Purple Border, slightly rounded', 'pauli' ),
'style_handle' => 'my-image-block-style'
)
);
}
</pre></div>
<p>And here is the accompanying <code>my-purple-border.css</code> file, which is placed into the plugin’s root folder.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: css; auto-links: false; title: ; quick-code: false; notranslate">
.is-style-purple-border img {
border: 6px solid purple;
border-radius: 15px;
box-shadow: 10px 5px 5px #e090fc;
};
</pre></div>
<p>The image block now has a purple border with a pinkish shadow style. </p>
<figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg"><img data-attachment-id="79433" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/screenshot-81/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg" data-orig-size="1064,501" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"Screenshot","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"Screenshot","orientation":"1"}" data-image-title="Screenshot" data-image-description="" data-image-caption="<p>Screenshot</p>
" data-medium-file="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=1024" loading="lazy" width="1024" height="482" src="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=1024" alt="A purple border style selected in the Styles panel and the purple border showing on the image in the WordPress editor" class="wp-image-79433" srcset="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=1024 1024w, https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=150 150w, https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=300 300w, https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=768 768w, https://en-blog.files.wordpress.com/2025/05/purple-border.jpg 1064w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
<p class="has-primary-light-background-color has-background" style="border-radius:5px"><strong>Note</strong>: There is also a <a href="https://github.com/WordPress/gutenberg/issues/27244">bug report open</a> about the stylesheet loading even when the block styles aren’t used. Because of this, it’s not recommended for complex CSS.</p>
<h2 class="wp-block-heading" id="method-4-register-block-styles-using-javascript-css">Method 4: register block styles using JavaScript + CSS</h2>
<ul style="border-radius:5px" class="wp-block-list has-light-gray-background-color has-background">
<li><strong>Best for:</strong> Plugin developers and theme developers</li>
<li><strong>Where you would typically use it:</strong> In a separate <code>*.js</code> file, enqueued in a plugin file, or in <code>functions.php</code></li>
<li><strong>Version requirements:</strong> WordPress 5 or higher</li>
</ul>
<p>Compared to using the separate JSON file to add a block style variation, using JavaScript is more elaborate. It has three parts: </p>
<ul class="wp-block-list">
<li><strong>PHP</strong>: To enqueue the necessary files</li>
<li><strong>JavaScript</strong>: To register the block style</li>
<li><strong>CSS</strong>: To style the block</li>
</ul>
<p>The <code>wp_enqueue_script()</code> function adds JavaScript files to a webpage. It’s not JavaScript itself, but rather a WordPress PHP function that’s often used in WordPress theme or plugin development. For this example, we can store the <code>.js</code> file in the theme’s <code>/js/</code> subdirectory and name it <code>curate-core.js</code>. </p>
<p>The example code loads our custom <code>curate-core.js</code> file after the necessary WordPress block editor scripts. It’s added to the bottom of the page for better performance and is hooked into <code>enqueue_block_editor_assets</code> so it only loads in the editor. </p>
<p>This code example goes into the theme’s <code>functions.php</code> file or your plugin’s <code>*.php</code> file. </p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function pauli_block_editor_scripts() {
wp_enqueue_script(
'pauli-editor',
get_theme_file_uri( '/js/curate-core.js' ),
array( 'wp-blocks', 'wp-dom' ),
wp_get_theme()->get( 'Version' ), true
);
}
add_action( 'enqueue_block_editor_assets', 'pauli_block_editor_scripts' );
</pre></div>
<p>This code should go in the JavaScript file <code>curate-core.js</code>:</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; auto-links: false; title: ; quick-code: false; notranslate">
wp.domReady( function() {
wp.blocks.registerBlockStyle(
'core/image', {
name: 'black-border',
label: 'Black Border',
}
);
} );
</pre></div>
<p>You can then add our block styles to your theme’s <code>style.css</code> file using the automatically added class name, <code>is-style-black-border</code>.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: css; auto-links: false; title: ; quick-code: false; notranslate">
.is-style-black-border img {
border: 15px ridge black;
}
</pre></div>
<p><a href="https://github.com/WordPress/gutenberg/issues/27244">Due to a bug</a>, you need to add the <code>style.css</code> to the frontend. It doesn’t seem to be automatically loaded. You use <code>wp_enqueue_style()</code> and then use the hook <code>wp_enqueue_scripts</code>.</p>
<p>Then you’d add the following to your <code>functions.php</code> or plugin file:</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
function enqueue_theme_styles() {
wp_enqueue_style(
'my-theme-styles',
get_stylesheet_uri(), // This gets your style.css
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles' );
</pre></div>
<p>You also need to add <code>style.css</code> to the block editor so your users can see how the block style looks when they are working on the post or page. </p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
//add style.css to editor
function add_theme_editor_styles() {
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'add_theme_editor_styles' );
</pre></div>
<figure class="wp-block-image size-full"><img data-attachment-id="79434" data-permalink="https://wordpress.com/blog/2025/05/07/custom-block-styles/screenshot-82/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/black-border.jpg" data-orig-size="1104,497" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"Screenshot","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"Screenshot","orientation":"1"}" data-image-title="Screenshot" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=1024" loading="lazy" width="1104" height="497" src="https://en-blog.files.wordpress.com/2025/05/black-border.jpg" alt="A black border style selected in the Styles panel and the black border showing on the image in the WordPress editor" class="wp-image-79434" srcset="https://en-blog.files.wordpress.com/2025/05/black-border.jpg 1104w, https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=150&h=68 150w, https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=300&h=135 300w, https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=768&h=346 768w, https://en-blog.files.wordpress.com/2025/05/black-border.jpg?w=1024&h=461 1024w" sizes="(max-width: 1104px) 100vw, 1104px" /></figure>
<h2 class="wp-block-heading" id="optional-removing-unwanted-core-block-styles">Optional: removing unwanted core block styles</h2>
<p>Now that you know how to <em>add</em> block styles to your theme or your plugin, you might also want to <em>remove</em> some additional block styles that come with the block editor out of the box.</p>
<p>There are two functions you’ll need to address: </p>
<ul class="wp-block-list">
<li>The PHP function <a href="https://developer.wordpress.org/reference/functions/unregister_block_style/"><code>unregister_block_style()</code></a></li>
<li>The JavaScript function <code><a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/">unregisterBlockStyle()</a></code></li>
</ul>
<p>Block styles can only be unregistered in the same coding language used to register them. All core blocks are registered with JavaScript. </p>
<p>The example code below removes the additional block style for the image block called <code>rounded</code>.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; auto-links: false; title: ; quick-code: false; notranslate">
wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/image', [ 'rounded' ] );
} );
</pre></div>
<p>For more ways to modify the block editor, read <a href="https://developer.wordpress.org/news/2024/07/15-ways-to-curate-the-wordpress-editing-experience/">15 ways to curate the WordPress editing experience</a>.</p>
<h2 class="wp-block-heading" id="summary-custom-block-styles-at-a-glance">Summary: custom block styles at a glance</h2>
<p>You now know the six ways to register block styles for the WordPress block editor. Here’s a quick recap of what we covered:</p>
<figure class="wp-block-table has-small-font-size"><table><thead><tr><th>Block Style Added in Example Code</th><th>Language</th><th>Theme/Plugin</th><th>Parameter</th><th>File</th><th>Global Styles</th></tr></thead><tbody><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f7e5.png" alt="🟥" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Red </td><td>PHP+ </td><td>Theme</td><td></td><td><code>theme.json</code></td><td>yes</td></tr><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f7e6.png" alt="🟦" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Blue </td><td>JSON</td><td>Theme</td><td></td><td><code>image-blue-border.json</code></td><td>yes</td></tr><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f7e7.png" alt="🟧" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Orange </td><td>PHP</td><td>Theme/Plugin</td><td><code>style_data</code></td><td></td><td>yes</td></tr><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f7ea.png" alt="🟪" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Purple</td><td>PHP</td><td>Theme/Plugin</td><td><code>style_handle</code></td><td>.css</td><td>no</td></tr><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f7e9.png" alt="🟩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Double Frame </td><td>PHP </td><td>Theme/Plugin</td><td><code>inline_style</code></td><td></td><td>no</td></tr><tr><td><img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/2b1b.png" alt="⬛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Black </td><td>JS</td><td>Theme/Plugin</td><td></td><td><code>.js</code> + <code>.css</code> + <code>.php</code></td><td>no</td></tr></tbody></table></figure>
<p>The easiest method is to add a JSON file to the <code>/styles</code> folder using the <code>theme.json</code> format. Another option uses minimal PHP in your <code>functions.php</code> file alongside your <code>theme.json</code> configuration. Both approaches add block styles to the Styles panel in the editor, where users can apply and customize them.</p>
<p>Plugin developers can use the <code>style_data</code> parameter to achieve similar results, including integration with Global Styles.</p>
<p>Other plugin-based methods—using <code>inline_style</code>, <code>style_handle</code>, or JavaScript—don’t support Global Styles editing, but still make the styles selectable in the editor.</p>
<p>Keep in mind that the first three methods (JSON file, <code>theme.json</code> with PHP, and style_data) require WordPress 6.6 or higher. To support older WordPress versions, you’ll need to use one of the other available approaches.</p>
<h2 class="wp-block-heading" id="resources-to-learn-more">Resources to learn more</h2>
<p>Want to learn even more about block styles and block variations? Here are some resources to check out: </p>
<p><strong>YouTube</strong></p>
<ul class="wp-block-list">
<li><a href="https://www.youtube.com/watch?v=ICI0GW9vibk">Builder Basics: Block Styles vs. Block Variations</a></li>
</ul>
<p><strong>Make.WordPress Dev Note</strong></p>
<ul class="wp-block-list">
<li><a href="https://make.wordpress.org/core/2024/06/24/section-styles/">Section styles coming to WordPress 6.6</a></li>
</ul>
<p><strong>WordPress Developer Blog</strong></p>
<ul class="wp-block-list">
<li><a href="https://developer.wordpress.org/news/2024/06/21/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/">Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6</a></li>
<li><a href="https://developer.wordpress.org/news/2022/12/leveraging-theme-json-and-per-block-styles-for-more-performant-themes/">Leveraging theme.json and per-block styles for more performant themes</a></li>
<li><a href="https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/">Per-block CSS with theme.json</a></li>
<li><a href="https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/">Beyond block styles, part 1: using the WordPress scripts package with themes</a></li>
<li><a href="https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-2-building-a-custom-style-for-the-separator-block/">Beyond block styles, part 2: building a custom style for the Separator block</a></li>
<li><a href="https://developer.wordpress.org/news/2023/08/beyond-block-styles-part-3-building-custom-design-tools/">Beyond block styles, part 3: building custom design tools</a></li>
</ul>
<p><strong>Block Editor Handbook</strong></p>
<ul class="wp-block-list">
<li><a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/">Block Styles</a></li>
</ul>
<p><strong>Themes Handbook </strong></p>
<ul class="wp-block-list">
<li><a href="https://developer.wordpress.org/themes/features/block-style-variations/">Block Style Variations</a></li>
</ul>
<p></p>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/05/07/custom-block-styles/feed/</wfw:commentRss>
<slash:comments>6</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/05/custom-block-styles.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/05/custom-block-styles.jpg" medium="image">
<media:title type="html">custom-block-styles</media:title>
</media:content>
<media:content url="https://1.gravatar.com/avatar/d121975f90f99b1fab5618e1ad20f146a1bf9793d68907fe4c6fb3288109b461?s=96&d=retro" medium="image">
<media:title type="html">birgitpauli</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/red-border-preview.jpg" medium="image">
<media:title type="html">A red border around an image in the WordPress editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/blue-border-preview.jpg" medium="image">
<media:title type="html">a blue border around the image block in the WordPress editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/global-styles-red-border.jpg" medium="image">
<media:title type="html">a red border around an image block in the Global Styles in WordPress</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/orange-border.jpg" medium="image">
<media:title type="html">An Orange Border style selected in the Styles panel and the orange border showing on the image in the WordPress editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/green-border-double-frame.jpg" medium="image">
<media:title type="html">A Double Frame style selected in the Styles panel and the green border showing on the image in the WordPress editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/purple-border.jpg?w=1024" medium="image">
<media:title type="html">A purple border style selected in the Styles panel and the purple border showing on the image in the WordPress editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/black-border.jpg" medium="image">
<media:title type="html">A black border style selected in the Styles panel and the black border showing on the image in the WordPress editor</media:title>
</media:content>
</item>
<item>
<title>Parked Domains Explained: How They Work and What They’re For</title>
<link>https://wordpress.com/blog/2025/05/06/parked-domains/</link>
<comments>https://wordpress.com/blog/2025/05/06/parked-domains/#comments</comments>
<dc:creator><![CDATA[Shreelekha Singh]]></dc:creator>
<pubDate>Tue, 06 May 2025 17:35:00 +0000</pubDate>
<category><![CDATA[Resources]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79344</guid>
<description><![CDATA[Not ready to launch your site? Learn what a parked domain is, why it matters, and how to manage one with WordPress.com.]]></description>
<content:encoded><![CDATA[
<p>Ever found the perfect domain name, only to land on a generic page filled with ads or a message saying it’s for sale? The domain could be parked.</p>
<p>In this guide, we’ll explain what parked domains are, how to recognize them, and what to do if the domain you want is already parked.</p>
<h2 class="wp-block-heading">What is a parked domain?</h2>
<p>A “parked” domain may mean different things, depending on where you register your domains. It might be a domain:</p>
<ul class="wp-block-list">
<li>That displays a “coming soon” page but doesn’t yet host a functional site. WordPress.com <a href="https://wordpress.com/support/privacy-settings/display-a-coming-soon-page/">enables a “coming soon” page</a> by default for all domains purchased through <a href="https://wordpress.com/domains/?ref=blog">our domain suggestion tool</a> until you launch your site.</li>
<li>Owned by an investor or broker, often monetized with ads or listed for sale, especially if it receives traffic due to its name or previous usage.</li>
<li>That has expired or been canceled and is pending deletion, so it shows a static page or monetized links.</li>
</ul>
<p>In contrast, buying a domain to reserve it for future use, such as for a project that’s still in development, isn’t typically considered domain parking. As long as you continue renewing your registration, you own the domain, even if you aren’t using it yet.</p>
<h2 class="wp-block-heading">Telltale signs of a parked domain</h2>
<p>Looking at a website and wondering if it’s parked? Here’s what to look for:</p>
<ul class="wp-block-list">
<li><strong>A generic, templatized landing page:</strong> Parked domains display a cookie-cutter design without much customization. They also typically have placeholder content. </li>
<li><strong>Lack of navigation:</strong> These sites don’t have menus or sitemaps to show that they’re functional. You’ll find a single landing page with nowhere else to go.</li>
<li><strong>Broker or registrar branding:</strong> You’ll see logos or footer text from domain registrars. You may also see display banners like “This domain is for sale” and a domain broker’s contact information in case you’re interested in purchasing it. Here’s an example:</li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="79355" data-permalink="https://wordpress.com/blog/2025/05/06/parked-domains/purchase-parked-domain-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg" data-orig-size="1400,985" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="purchase-parked-domain-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=1024" loading="lazy" width="1400" height="985" src="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg" alt="An example of a "make an offer" form on a parked domain" class="wp-image-79355" srcset="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=150&h=106 150w, https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=300&h=211 300w, https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=768&h=540 768w, https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg?w=1024&h=720 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ul class="wp-block-list">
<li><strong>Page filled with ads and links:</strong> You might see an ad-heavy page showing links related to the domain’s keywords. This is a tactic for generating passive income through unused, parked domains.</li>
</ul>
<h2 class="wp-block-heading">How to obtain a parked domain</h2>
<p>What if the domain you want <em>is already parked</em>? Here are a few alternatives you can try:</p>
<h3 class="wp-block-heading">Contact the owner with an inquiry </h3>
<p>The first order of business when you want to buy a parked domain is to contact the owner.</p>
<p>Most parked domains include the owner’s contact information <em>if they’re willing to sell</em>.</p>
<p>Send a transparent, professional inquiry showing interest in purchasing the domain. Avoid mentioning how much you can pay to keep some space for negotiations. </p>
<p>Make sure you explain how you plan to use the domain. Some owners care more about the future of their domains beyond just the sale price.</p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px"><strong>Tip</strong>: For domains that clearly use a trademark you own, you can claim the domain from the current owner through a process called <a href="https://www.icann.org/en/contracted-parties/consensus-policies/uniform-domain-name-dispute-resolution-policy/uniform-domain-name-dispute-resolution-policy-01-01-2020-en">UDRP</a>.</p>
<h3 class="wp-block-heading">Make an offer through a broker </h3>
<p>If direct contact with the owner fails, reach out to a domain broker to negotiate a deal on your behalf. </p>
<p>By working with a broker, an intermediary can use their hands-on experience to help negotiate a favorable deal. While brokers charge a percentage of the final sale price or a flat fee, their negotiation tactics might give you a significantly lower acquisition cost.</p>
<h3 class="wp-block-heading">Look for variations of the domain</h3>
<p>If all efforts fail and your first-choice domain is out of reach, you can consider some of these variations:</p>
<ul class="wp-block-list">
<li><strong>Extensions/TLDs</strong>: Explore different extensions instead of the one you originally wanted—<a href="https://wordpress.com/domains/?ref=blog">we have domains ending in everything from</a> <code>.com</code>, <code>.net</code>, and <code>.blog</code> to <code>.dog</code> and <code>.christmas</code>. </li>
<li><strong>Prefixes/suffixes</strong>: Add a relevant word before or after your core term to create a new variation.</li>
<li><strong>Hyphens</strong>: Add hyphens between words to create a new domain. However, avoid adding too many hyphens, as they can confuse users when typing and be difficult to memorize.</li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="78337" data-permalink="https://wordpress.com/blog/2025/03/21/what-is-a-domain-name/wordpress-com-domain-registrar/" data-orig-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" data-orig-size="1400,750" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-domain-registrar" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=1024" loading="lazy" width="1400" height="750" src="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" alt="The WordPress.com domain search tool with a headline saying 'A Domain Name for Every Idea' and a field for finding a domain" class="wp-image-78337" srcset="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg 1400w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=150&h=80 150w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=300&h=161 300w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=768&h=411 768w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=1024&h=549 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<h3 class="wp-block-heading">Monitor the domain</h3>
<p>If all else fails, you may want to use a domain monitoring service to track your desired domain and get notified if it expires or becomes available for purchase. However, remember that this approach requires patience and does not guarantee success.</p>
<h2 class="wp-block-heading">Turn domains into opportunities </h2>
<p>Whether you’re exploring parked domains or looking for the perfect name to launch your next idea, domains open the door to future opportunities—creative, professional, and everything in between.</p>
<p>Ready to purchase a domain? Check out <a href="https://wordpress.com/domains/?ref=blog">WordPress.com’s domain suggestion tool</a> to find all our available domains. We have <a href="https://wordpress.com/support/domains/domain-pricing-and-available-tlds/">over 350 available TLDs</a>, and they average just $13 per year.</p>
<p>When you’re ready to launch a website, WordPress.com makes it easy to turn your domain into a fast, secure, and fully customizable website.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/domains/?ref=blog">Explore domains</a></div>
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Explore WordPress.com hosting</a></div>
</div>
<p></p>
<p></p>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/05/06/parked-domains/feed/</wfw:commentRss>
<slash:comments>10</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/05/parked-domains.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/05/parked-domains.jpg" medium="image">
<media:title type="html">parked-domains</media:title>
</media:content>
<media:content url="https://0.gravatar.com/avatar/6a4af21dd8f25b7cfb7509e388c05e2ddb2249f4bb79ade021325e5f2dbfba33?s=96&d=retro" medium="image">
<media:title type="html">shreelekhasingh</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/purchase-parked-domain-example.jpg" medium="image">
<media:title type="html">An example of a "make an offer" form on a parked domain</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" medium="image">
<media:title type="html">The WordPress.com domain search tool with a headline saying 'A Domain Name for Every Idea' and a field for finding a domain</media:title>
</media:content>
</item>
<item>
<title>What Meta Descriptions Do and How They Help Drive Traffic</title>
<link>https://wordpress.com/blog/2025/05/05/meta-descriptions/</link>
<comments>https://wordpress.com/blog/2025/05/05/meta-descriptions/#comments</comments>
<dc:creator><![CDATA[Ben Sailer]]></dc:creator>
<pubDate>Mon, 05 May 2025 15:45:00 +0000</pubDate>
<category><![CDATA[Resources]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79316</guid>
<description><![CDATA[More clicks. Better visibility. Stronger SEO.]]></description>
<content:encoded><![CDATA[
<p>Meta descriptions might not appear on the frontend of your site for your readers to see, but they play a significant role behind the scenes. These short blurbs can influence whether someone clicks through from search or scrolls right on past. </p>
<p>In this post, we’ll break down what meta descriptions are, why they matter, and how to write descriptions that actually get clicks.</p>
<ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#what-are-meta-descriptions">What are meta descriptions?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#how-do-meta-descriptions-impact-seo">How do meta descriptions impact SEO?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#what-happens-if-pages-are-missing-meta-descriptions">What happens if pages are missing meta descriptions?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#do-meta-descriptions-need-to-be-unique">Do meta descriptions need to be unique?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#how-long-should-meta-descriptions-be">How long should meta descriptions be?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#using-tools-to-preview-your-meta-descriptions">Using tools to preview your meta descriptions</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#some-simple-and-overlooked-tips-for-writing-meta-descriptions">Some simple (and overlooked) tips for writing meta descriptions</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#keep-your-title-tag-in-mind">Keep your title tag in mind</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#get-aligned-with-search-intent">Get aligned with search intent</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#keep-voice-search-in-mind">Keep voice search in mind</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#leverage-emotional-sentiment">Leverage emotional sentiment</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#include-calls-to-action">Include calls to action</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#updating-meta-descriptions-on-wordpress-websites">Updating meta descriptions on WordPress websites</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#jetpack">Jetpack</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#other-plugins">Other plugins</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/05/05/meta-descriptions/#go-optimize-your-meta-descriptions">Go optimize your meta descriptions</a></li></ol>
<h2 class="wp-block-heading" id="what-are-meta-descriptions">What are meta descriptions?</h2>
<p>A meta description is a line of text in web pages that summarizes their contents. Have you ever seen the summaries underneath the blue links on search results pages? Those are meta descriptions. Here is an example direct from Google:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79324" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/google-about-meta-description-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg" data-orig-size="1400,259" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="google-about-meta-description-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=1024" loading="lazy" width="1400" height="259" src="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg" alt="The Google search result for the Google about page with a title and meta description" class="wp-image-79324" srcset="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=150&h=28 150w, https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=300&h=56 300w, https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=768&h=142 768w, https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg?w=1024&h=189 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption">Unsurprisingly, Google knows how to write a solid meta description.</figcaption></figure>
<p>Meta descriptions may also appear in link previews on social media posts, text messages, and chat apps. When written as HTML, they are wrapped in a <code><meta></code> tag within the <code><head></code> section of your page.</p>
<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; auto-links: false; gutter: false; title: ; quick-code: false; notranslate">
<meta name="description" content="INSERT YOUR META DESCRIPTION HERE" />
</pre></div>
<p>You can also see the meta description on any web page by right-clicking and selecting <strong>View Page Source</strong>. Here is an example from the entertainment website Polygon:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79327" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/polygon-meta-description-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg" data-orig-size="1400,124" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="polygon-meta-description-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=1024" loading="lazy" width="1400" height="124" src="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg" alt="The page source code for the polygon.com website with the meta description tag underlined in orange" class="wp-image-79327" srcset="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=150&h=13 150w, https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=300&h=27 300w, https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=768&h=68 768w, https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg?w=1024&h=91 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Meta descriptions are closely related to <a href="https://wordpress.com/blog/2025/02/27/wordpress-title-tags/">title tags</a>, which appear as the actual blue links in search results. Together, they tell search engines and users what your site’s pages (from your homepage to individual blog posts and pages) are about.</p>
<h2 class="wp-block-heading" id="how-do-meta-descriptions-impact-seo">How do meta descriptions impact SEO?</h2>
<p>Unlike title tags, meta descriptions do not directly influence search engine rankings. However, they do affect how your pages appear in search results and tell users why they should click.</p>
<p>Reddit user Neither-Emu7933 <a href="https://www.reddit.com/r/SEO/comments/zsjxsy/is_this_accurate_meta_descriptions_are_important/?rdt=60636">summarized this concept well</a>:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79329" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/reddit-how-meta-descriptions-work/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg" data-orig-size="1400,436" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="reddit-how-meta-descriptions-work" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=1024" loading="lazy" width="1400" height="436" src="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg" alt="A description of how meta descriptions work from reddit user Neither-Emu7933" class="wp-image-79329" srcset="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=150&h=47 150w, https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=300&h=93 300w, https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=768&h=239 768w, https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg?w=1024&h=319 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Think of your meta description as a brief pitch—it won’t directly boost your content rankings, but it can help it win the click. Paired with a strong title tag, it’s your best chance to stand out in a crowded search result.</p>
<h2 class="wp-block-heading" id="what-happens-if-pages-are-missing-meta-descriptions">What happens if pages are missing meta descriptions?</h2>
<p>If a page is missing a meta description, the short answer is that nothing bad is likely to happen. But the long answer is a bit more nuanced. Meta descriptions can influence click-through rates, so leaving them out means missing an opportunity to shape how your content appears in search results.</p>
<p>If the meta description tag is missing, then Google will use <em>other</em> text from the page to generate its own snippet. Some people prefer to let Google handle meta descriptions instead of writing one manually. In fact, former Googler Matt Cutts once said he <a href="https://www.seroundtable.com/google-meta-descriptions-17695.html">doesn’t include meta descriptions on all of his blog posts</a>: </p>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="embed-youtube"><iframe title="Is it necessary for every page to have a meta description?" width="500" height="281" src="https://www.youtube.com/embed/W4gr88oHb-k?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
</div></figure>
<p>So should you leave meta descriptions blank? Google’s own AI says that it may be risky:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79332" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/what-happens-if-i-dont-add-meta-descriptions/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg" data-orig-size="1400,698" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="what-happens-if-i-dont-add-meta-descriptions" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=1024" loading="lazy" width="1400" height="698" src="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg" alt="A search result for 'what happens if I don't add meta descriptions' and the Google AI summary" class="wp-image-79332" srcset="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=150&h=75 150w, https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=300&h=150 300w, https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=768&h=383 768w, https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg?w=1024&h=511 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Leaving meta descriptions blank can <span style="margin: 0px;padding: 0px">result in i<strong>naccurate page descriptions and, therefore, less search traffic</strong></span>.</p>
<h2 class="wp-block-heading" id="do-meta-descriptions-need-to-be-unique">Do meta descriptions need to be unique?</h2>
<p>Duplicative meta descriptions are confusing for search engines and unhelpful for users, so the meta descriptions across your website should all be unique.</p>
<p>If your site or blog has many posts and pages that are missing meta descriptions, writing unique meta descriptions for each one could take a long time. In this instance, we recommend following Matt Cutts’ timeless advice from the video we shared earlier in this post:</p>
<ul class="wp-block-list">
<li>Include meta descriptions on your most important pages.</li>
<li>Make sure your meta descriptions are unique.</li>
<li>Leave the rest of your meta descriptions blank.</li>
</ul>
<p>Once you’ve done that, <strong>make it a habit to include meta descriptions on new pages and posts.</strong> This is a compromise between time-consuming manual effort and setting yourself up for future success.</p>
<h2 class="wp-block-heading" id="how-long-should-meta-descriptions-be">How long should meta descriptions be?</h2>
<p>The traditional advice is that <strong>meta descriptions should be 150 characters or less</strong>. This will ensure search engines don’t cut them off. However, this isn’t the whole story.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79334" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/search-result-with-cut-off-meta-description/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg" data-orig-size="1400,269" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="search-result-with-cut-off-meta-description" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=1024" loading="lazy" width="1400" height="269" src="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg" alt="a search result for Bing with the meta description cut off as indicated by ..." class="wp-image-79334" srcset="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=150&h=29 150w, https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=300&h=58 300w, https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=768&h=148 768w, https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg?w=1024&h=197 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Google measures meta description length in <em>pixels</em> rather than characters. Depending on the specific letters, words, and numbers in your meta description, the total maximum length may be more or less than 150 characters. </p>
<p>Sometimes Google will overwrite the meta description you wrote and use text from the page itself to create a new meta description. Generally, Google will do this if your meta description is too short, or if it thinks it can create an alternative that’s more useful for the reader.</p>
<p>In these instances, the meta description that users see may be more than 300 characters. This makes it difficult to confidently say how long they should be. </p>
<p>So what should you do? <strong>As a best practice, stick with the 150-character guideline</strong> (but be aware that this isn’t a firm rule). </p>
<h2 class="wp-block-heading" id="using-tools-to-preview-your-meta-descriptions">Using tools to preview your meta descriptions</h2>
<p>It’s nice to actually see how meta descriptions will appear in search results <em>before</em> you publish a page. Fortunately, there are plenty of free tools you can use to preview them. Here are a few:</p>
<ul class="wp-block-list">
<li><a href="https://portent.com/serp-preview-tool">Portent’s Google SERP Preview Tool</a></li>
<li><a href="https://spotibo.com/serp-preview-tool/">Spotibo Google Search Results Preview Tool</a></li>
<li><a href="https://totheweb.com/learning_center/tool-test-google-title-meta-description-lengths/">To The Web Title Tag and Meta Description Tester</a></li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="79336" data-permalink="https://wordpress.com/blog/2025/05/05/meta-descriptions/portent-title-tag-meta-description-tester/" data-orig-file="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg" data-orig-size="1400,735" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="portent-title-tag-meta-description-tester" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=1024" loading="lazy" width="1400" height="735" src="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg" alt="The Portent Title tag and Meta Description tester page" class="wp-image-79336" srcset="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg 1400w, https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=150&h=79 150w, https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=300&h=158 300w, https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=768&h=403 768w, https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg?w=1024&h=538 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption">Free tools can help you preview title tags and meta descriptions before you publish them.</figcaption></figure>
<h2 class="wp-block-heading" id="some-simple-and-overlooked-tips-for-writing-meta-descriptions">Some simple (and overlooked) tips for writing meta descriptions</h2>
<p>Ready to get serious about writing meta tags? They aren’t difficult to write, but there are some tips and general best practices you can follow to make sure you get them right.</p>
<h3 class="wp-block-heading" id="keep-your-title-tag-in-mind">Keep your title tag in mind</h3>
<p>Search engine users will see your meta descriptions underneath your title tags. Keep this in mind when writing them, and ensure they read well together and accurately represent your content.</p>
<p>Need help writing title tags too? <a href="https://wordpress.com/blog/2025/02/27/wordpress-title-tags/">Here are some tips for writing excellent title tags to boost your search traffic</a>. </p>
<h3 class="wp-block-heading" id="get-aligned-with-search-intent">Get aligned with search intent</h3>
<p>If you’ve never heard the term “search intent,” it means understanding what a user is trying to do when they search for a specific keyword. There are a few different types of search intent:</p>
<ul class="wp-block-list">
<li><strong>Navigational intent</strong> means the user is looking for a specific website or page.</li>
<li><strong>Informational intent </strong>applies when someone seeks an answer to a question or wants to learn more about a topic.</li>
<li><strong>Commercial intent</strong> involves researching products or services before making a decision.</li>
<li><strong>Transactional intent </strong>indicates the user is ready to buy a product or service.</li>
</ul>
<p>When writing meta descriptions, ask yourself what someone looking for that specific page is trying to do, and promise them that the page will provide precisely what they are looking for.</p>
<h3 class="wp-block-heading" id="keep-voice-search-in-mind">Keep voice search in mind</h3>
<p>When crafting meta descriptions, remember voice search and visitors who use screen readers. </p>
<p>Try reading your meta description out loud to see how it sounds. If something sounds clunky or awkward, consider rewriting it to ensure that it’s accessible to all.</p>
<h3 class="wp-block-heading" id="leverage-emotional-sentiment">Leverage emotional sentiment</h3>
<p>Writing a meta description is like writing any other copy or content on your site. </p>
<p>Since emotional language drives action, <a href="https://smartblogger.com/power-words/">here are 801 power words</a> that can help make your meta description copy more motivating. </p>
<h3 class="wp-block-heading" id="include-calls-to-action">Include calls to action</h3>
<p>Meta descriptions are essentially ads for web pages. They should motivate the reader to click through to your site (instead of a different search result). If you’ve never written a call-to-action before, <a href="https://www.thebarefootwriter.com/become-a-better-writer/how-do-you-write-a-call-to-action">start with this guide from Barefoot Writer</a>.</p>
<h2 class="wp-block-heading" id="updating-meta-descriptions-on-wordpress-websites">Updating meta descriptions on WordPress websites</h2>
<p>All of the advice we’ve shared so far applies no matter which CMS or website builder you choose. But this is the WordPress.com blog; if you’re here, you probably want to know how to implement better meta descriptions on your own WordPress site.</p>
<p>Here are a few options for updating your meta descriptions:</p>
<h3 class="wp-block-heading" id="jetpack">Jetpack</h3>
<p>Every WordPress.com website comes with Jetpack, which enables <a href="https://wordpress.com/blog/2024/12/27/jetpack-wordpress-com/">tons of awesome features</a>, and sites on the <a href="https://wordpress.com/hosting/?ref=blog">Business plan and above</a> can use Jetpack’s SEO features to <a href="https://wordpress.com/support/seo-tools/#page-and-post-meta">edit title tags and meta descriptions</a>. </p>
<p>If your site is hosted with a different provider, <a href="https://jetpack.com/support/seo-tools/">you can use Jetpack’s SEO tools too</a>.</p>
<h3 class="wp-block-heading" id="other-plugins">Other plugins</h3>
<p>There are several popular <a href="https://wordpress.com/plugins/browse/seo">WordPress SEO plugins</a> that enable title tag and meta description editing (and a whole lot more). Here are three options:</p>
<ul class="wp-block-list">
<li><a href="https://wordpress.com/plugins/wordpress-seo">Yoast</a></li>
<li><a href="https://wordpress.com/plugins/all-in-one-seo-pack">All in One SEO (AIOSEO)</a></li>
<li><a href="https://wordpress.com/plugins/seo-by-rank-math">Rank Math SEO</a></li>
</ul>
<p>WordPress.com users can use third-party plugins on the <a href="https://wordpress.com/hosting/?ref=blog">Business plan and above</a>.</p>
<h2 class="wp-block-heading" id="go-optimize-your-meta-descriptions">Go optimize your meta descriptions</h2>
<p>If you take anything away from this article, it should be this: <strong>meta descriptions may be short, but they can influence how often your pages appear and get clicked in search results</strong>. </p>
<p>Now you know how to write ones that work, so give your pages the click-worthy summaries they deserve. Want to keep sharpening your SEO skills? <a href="https://wordpress.com/support/seo/?ref=blog">Check out our guide to optimizing your WordPress.com site for search</a>.</p>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/05/05/meta-descriptions/feed/</wfw:commentRss>
<slash:comments>14</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/05/what-meta-descriptions-do-drive-traffic.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/05/what-meta-descriptions-do-drive-traffic.jpg" medium="image">
<media:title type="html">what-meta-descriptions-do-drive-traffic</media:title>
</media:content>
<media:content url="https://0.gravatar.com/avatar/f28cc4dceaa3164357c405254e66a8fb62f1adf1f65b453a6e26608c4602dc21?s=96&d=retro" medium="image">
<media:title type="html">sailerbe</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/google-about-meta-description-example.jpg" medium="image">
<media:title type="html">The Google search result for the Google about page with a title and meta description</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/polygon-meta-description-example.jpg" medium="image">
<media:title type="html">The page source code for the polygon.com website with the meta description tag underlined in orange</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/reddit-how-meta-descriptions-work.jpg" medium="image">
<media:title type="html">A description of how meta descriptions work from reddit user Neither-Emu7933</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/what-happens-if-i-dont-add-meta-descriptions.jpg" medium="image">
<media:title type="html">A search result for 'what happens if I don't add meta descriptions' and the Google AI summary</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/search-result-with-cut-off-meta-description.jpg" medium="image">
<media:title type="html">a search result for Bing with the meta description cut off as indicated by ...</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/05/portent-title-tag-meta-description-tester.jpg" medium="image">
<media:title type="html">The Portent Title tag and Meta Description tester page</media:title>
</media:content>
</item>
<item>
<title>Managed WordPress Hosting: Is It Worth It? Here’s How to Decide</title>
<link>https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/</link>
<comments>https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#comments</comments>
<dc:creator><![CDATA[Nick Schäferhoff]]></dc:creator>
<pubDate>Mon, 28 Apr 2025 19:35:00 +0000</pubDate>
<category><![CDATA[Resources]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79284</guid>
<description><![CDATA[Wondering if managed WordPress hosting is worth it? Here's how to decide—and why it could save you time, traffic, and trouble.]]></description>
<content:encoded><![CDATA[
<p>Starting a website is a lot like starting a new relationship. At first, it’s all passion and excitement—you spend hours perfecting the design, writing content, and obsessing over every tiny detail. You’ve never been more excited. You’re convinced this is The One. </p>
<p>But then…reality sets in. Suddenly, you are doing all the work. You’re managing updates, handling backups, fixing glitches, and wondering why you never seem to have time for anything else. </p>
<p>Like any good relationship, it’s best when both sides contribute. That’s where managed WordPress hosting comes in. It steps up and says, “I got this.” It handles the technical chores, like updates, security, and backups, so you don’t have to. Finally, a little give-and-take!</p>
<p>Is managed hosting right for you? Is this the commitment you need? Keep reading to find out.</p>
<ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#what-is-managed-wordpress-hosting">What is managed WordPress hosting?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#managed-wordpress-hosting-benefits">Managed WordPress hosting benefits</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#are-there-any-drawbacks">Are there any drawbacks?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#is-managed-wordpress-hosting-right-for-you">Is managed WordPress hosting right for you?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#how-to-compare-managed-wordpress-hosting-providers">How to compare managed WordPress hosting providers</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/#choose-a-hosting-partner-you-can-count-on">Choose a hosting partner you can count on</a></li></ol>
<h2 class="wp-block-heading" id="what-is-managed-wordpress-hosting">What is managed WordPress hosting?</h2>
<p>A “managed” host refers to your hosting provider playing an active role in operating your site by handling technical tasks such as server optimization, security, performance, and maintenance.</p>
<p><a href="https://wordpress.com/blog/2025/04/11/types-of-web-hosting/">Unlike other forms of hosting</a> where you simply rent space and handle everything yourself, <em>managed</em> hosting handles these critical tasks for you so you can focus on growing your site.</p>
<h3 class="wp-block-heading" id="what-do-managed-hosting-plans-include">What do managed hosting plans include?</h3>
<p>With managed WordPress hosting, you typically get:</p>
<ul class="wp-block-list">
<li>Optimized server environments.</li>
<li>Automatic software updates.</li>
<li>Managed security, like automated backups and malware scanning.</li>
<li>WordPress-specific speed optimization and other performance features.</li>
<li>Integrated tools for WordPress developers.</li>
<li>Knowledgeable support.</li>
</ul>
<p>Providers also frequently offer additional features like <a href="https://wordpress.com/support/how-to-create-a-staging-site/">staging sites</a> and <a href="https://wordpress.com/move/?ref=blog">free migrations</a>.</p>
<h2 class="wp-block-heading" id="managed-wordpress-hosting-benefits">Managed WordPress hosting benefits</h2>
<p>There are many upsides to managed hosting, and here are some of the most impactful benefits for site owners:</p>
<h3 class="wp-block-heading" id="1-performance-and-optimization">1. Performance and optimization</h3>
<p>It starts with the environment where your website lives. </p>
<p>With traditional hosting, everyone gets the same generic setup. Managed WordPress hosting provides an environment (hardware and server technology like <a href="https://wordpress.com/blog/2024/10/11/what-is-php/">PHP</a>) specifically optimized for running WordPress.</p>
<p>This tailored setup means your server is configured to run WordPress as smoothly and efficiently as possible, resulting in faster loading times, better SEO, and a better experience for your visitors.</p>
<p>In addition to optimized infrastructure, managed hosting includes <a href="https://wordpress.com/support/site-speed/#how-we-optimize-your-site">built-in performance features</a> like caching, content delivery networks (CDNs), image optimization, and resource scaling designed to keep your site fast and stable, even as traffic grows.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="71765" data-permalink="https://wordpress.com/blog/2024/11/11/wordpress-speed-test/wordpress-com-site-speed-test-2/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg" data-orig-size="1400,570" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-site-speed-test" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=1024" loading="lazy" width="1400" height="570" src="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg" alt="a screenshot of the WordPress.com Speed Test landing page with a heading that says 'Optimize your WordPress site
for lightning-fast performance' with a white URL field" class="wp-image-71765" srcset="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg 1400w, https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=150&h=61 150w, https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=300&h=122 300w, https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=768&h=313 768w, https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg?w=1024&h=417 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption">Test your site speed for free at <a href="https://wordpress.com/speed-test">wordpress.com/speed-test</a></figcaption></figure>
<h3 class="wp-block-heading" id="2-enhanced-security">2. Enhanced security</h3>
<p>Security is a major concern for any website owner. A hacked or offline site can quickly turn into a major headache and a disruption you don’t want to deal with.</p>
<p>With traditional hosting, you’re responsible for securing your site yourself. In contrast, managed hosting providers take an active role <a href="https://wordpress.com/support/security/">in protecting your site</a> through multiple layers of defense, including:</p>
<ul class="wp-block-list">
<li><strong>Malware protection</strong>: Managed hosts scan your site for malicious software, viruses, and other threats that could harm your visitors or damage your site. Many also include brute force login protection to block hackers from guessing their way into your admin dashboard.</li>
<li><strong>Data protection</strong>: Encryption and data security are critical. Managed hosts typically provide SSL certificates by default to safeguard sensitive information like passwords and payment details. Many also include secure spam filtering to protect comment sections from unwanted content.</li>
<li><strong>Threat prevention</strong>: Features like web application firewalls (WAFs) and DDoS protection help block malicious traffic before it even reaches your site. Firewalls screen for dangerous activity, while DDoS mitigation ensures your site stays online even during traffic attacks.</li>
<li><strong>Backups and recovery</strong>: If something goes wrong, automatic daily backups allow you to quickly restore your site to a working version, minimizing downtime and loss of data.</li>
</ul>
<p>Security is made up of many layers of protection, and it’s important to be aware that there’s only so much even a managed hosting provider can do to keep your WordPress site safe. </p>
<p>In fact, a lot of website security is user-dependent. Things like selecting a strong password and limiting access to necessary persons only go a long way in keeping your site safe.</p>
<h3 class="wp-block-heading" id="3-expert-support">3. Expert support</h3>
<p>One of the main benefits of choosing a hosting provider specialized in WordPress is support.</p>
<p>Since traditional providers mainly rent out web space that you can use to run any content management system or web application, their support staff need extensive knowledge but may lack application-specific depth because they serve many customers with very different needs.</p>
<p>Managed WordPress hosting providers focus only on working with one system—WordPress. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79115" data-permalink="https://wordpress.com/blog/2025/04/22/wordpress-vs-webflow/wordpress-com-help-center-2/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg" data-orig-size="1400,693" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="wordpress.com-help-center" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=1024" loading="lazy" width="1400" height="693" src="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg" alt="A screenshot of the WordPress.com support assistant chat window" class="wp-image-79115" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=150&h=74 150w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=300&h=149 300w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=768&h=380 768w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg?w=1024&h=507 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<h3 class="wp-block-heading" id="4-scalability">4. Scalability</h3>
<p>As your site grows, you may need a bigger hosting plan or migrate to a new server.</p>
<p>Managed hosting often automatically scales to handle sudden traffic spikes and long-term growth. Features like redundancy, CDNs, and firewalls keep your site fast and online.</p>
<p>Instead of managing the bare minimum to keep your site running, managed hosting gives you an environment built to help your website grow and succeed.</p>
<h2 class="wp-block-heading" id="are-there-any-drawbacks">Are there any drawbacks?</h2>
<p>Of course, managed WordPress hosting comes with downsides.</p>
<h3 class="wp-block-heading" id="1-cost">1. Cost</h3>
<p>Managed hosting tends to be pricier than other types of hosting, especially shared hosting. That’s no surprise considering the extra features and service it offers. </p>
<p>That said, it’s often absolutely worth the additional cost because you’re exchanging money for something more valuable: your time.</p>
<p>With managed hosting, you spend less time on routine tasks so you can spend more on those things that move the needle in the success of your website. </p>
<p>Wouldn’t you rather focus on growing your site and connecting with your audience, instead of handling routine maintenance?</p>
<figure class="wp-block-image size-full"><img data-attachment-id="76155" data-permalink="https://wordpress.com/blog/2025/01/29/how-to-make-a-website/gallery-block-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg" data-orig-size="1500,710" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=1024" loading="lazy" width="1500" height="710" src="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg" alt="The settings of a gallery image block on WordPress with a gallery of five images shown in the editor" class="wp-image-76155" srcset="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg 1500w, https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=150&h=71 150w, https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=300&h=142 300w, https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=768&h=364 768w, https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg?w=1024&h=485 1024w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>
<p>lus, managed hosting helps you avoid a lot of time-consuming problems. With security and backups in place, you’re less likely to run into an emergency, and even if you have an issue, you have knowledgeable support to turn to.</p>
<p>With all that time saved, managed hosting is actually often more cost-effective, especially for high-traffic blogs or ecommerce websites.</p>
<h3 class="wp-block-heading" id="2-restrictions-and-less-control">2. Restrictions and less control</h3>
<p>Since a managed hosting provider handles much of your site’s infrastructure, you have less freedom to customize certain parts.</p>
<p>Managed WordPress hosts may <a href="https://wordpress.com/support/plugins/incompatible-plugins/">restrict themes or plugins</a> that duplicate built-in features to prevent conflicts and maintain performance.</p>
<p>While these restrictions might frustrate advanced users or developers who want more direct server control, they’re a major advantage for less technical users. You don’t have to worry about configuring complex optimizations yourself, as your hosting provider takes care of it for you.</p>
<h2 class="wp-block-heading" id="is-managed-wordpress-hosting-right-for-you">Is managed WordPress hosting right for you?</h2>
<p>Choosing the right hosting comes down to your website’s needs and your preferences.</p>
<p>Ask yourself:</p>
<ul class="wp-block-list">
<li>How much traffic does my site get today? </li>
<li>Am I expecting my site to grow in the future?</li>
<li>How comfortable am I managing technical tasks like updates, backups, and security?</li>
<li>Do I want to spend time on server management or focus on creating content, growing traffic, and building my audience?</li>
<li>How important is guaranteed uptime, fast support, and strong security for my site?</li>
<li>What’s my budget, and am I ready to invest in hosting that saves me time and risk?</li>
</ul>
<p>If you’re running a high-traffic blog, an ecommerce store, or client sites, or if your website handles sensitive data, managed hosting is likely a smart investment. It’s also a great fit if you simply prefer to focus on your content or business rather than worrying about technical maintenance.</p>
<p>In short:<strong> If your website is mission-critical, growing fast, or your time is better spent elsewhere, managed WordPress hosting can give you the performance, protection, and peace of mind you need</strong>.</p>
<h2 class="wp-block-heading" id="how-to-compare-managed-wordpress-hosting-providers">How to compare managed WordPress hosting providers</h2>
<p>Finally, if you’ve decided on managed hosting, how do you choose a provider?</p>
<h3 class="wp-block-heading" id="key-features-to-look-out-for">Key features to look out for</h3>
<figure class="wp-block-image size-full"><img data-attachment-id="79288" data-permalink="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/security-features-wordpress-com/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg" data-orig-size="1400,520" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="security-features-wordpress-com" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=1024" loading="lazy" width="1400" height="520" src="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg" alt="a list of four security features on WordPress.com in white text on a black background and two buttons––create a site and migrate a site" class="wp-image-79288" srcset="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=150&h=56 150w, https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=300&h=111 300w, https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=768&h=285 768w, https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg?w=1024&h=380 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The features managed hosting providers typically offer are often similar, at least on the surface. But it’s worth taking a closer look, especially at the details of standard features and additional services included in hosting plans.</p>
<p>Here’s a short checklist to use when evaluating different hosting providers:</p>
<ul class="wp-block-list">
<li><strong>Security features</strong>: What’s included with your hosting cost? What’s considered an “add-on?”</li>
<li><strong>Performance improvements:</strong> Optimized hardware and software are a given, but what about a CDN and other optimizations?</li>
<li><strong>Redundancy</strong>: Are there additional data centers in case one fails to guarantee the uptime of your website?</li>
<li><strong>Support quality</strong>: A good way to judge support quality is to run a test. Contact support with a question and see how well they can help you. Look at their other support resources too.</li>
<li><strong>Metered/unmetered traffic</strong>: Many managed hosting providers have bandwidth or traffic restrictions; ensure you understand these limits so you don’t end up paying more than expected.</li>
<li><strong>Developer features</strong>: Check for access to plugins, themes, staging sites, the ability to use custom code, SSH, and WP-CLI if you need them.</li>
<li><strong>Pricing:</strong> Are there extra costs or hidden fees? Check renewal rates, plan upgrades, and money-back guarantees.</li>
</ul>
<h3 class="wp-block-heading" id="our-recommendation-for-a-managed-wordpress-host">Our recommendation for a managed WordPress host</h3>
<p>There are many managed hosting providers out there, but we think <a href="https://wordpress.com/pricing/?ref=blog">WordPress.com is your best choice</a> for a few reasons: </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79290" data-permalink="https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/wordpress-com-homepage/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg" data-orig-size="1400,768" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-homepage" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=1024" loading="lazy" width="1400" height="768" src="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg" alt="The WordPress.com homepage with an image on the right and the headline 'Hassle-free WordPress' on the left" class="wp-image-79290" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=150&h=82 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=300&h=165 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=768&h=421 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg?w=1024&h=562 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>WordPress.com is a purely managed WordPress hosting provider. Every plan comes with automatic software and PHP updates, 99.999% uptime, and unmetered bandwidth and traffic. These features keep your site running smoothly, regardless of how many people visit your site.</p>
<p>Security is a top priority to us, and our approach goes beyond automated scans. </p>
<p>Jetpack Scan, our security tool enabled on all WordPress.com sites, checks your plugins, themes, uploads, and content automatically each day. If a risk is detected, our security team manually reviews the alert to determine its severity, ensuring false positives don’t disrupt your site while real threats are swiftly addressed.</p>
<p>Our automated monitoring and expert manual reviews keep your site secure with proactive, hands-on protection. Additionally, all paid plans come with a free domain for the first year (with <a href="https://wordpress.com/blog/2025/02/25/domain-privacy/">free domain privacy</a>) and 24/7 expert support. On <a href="https://wordpress.com/hosting/?ref=blog">plugin-enabled plans</a>, you also get benefits like real-time backups and one-click restore, a web application firewall, and developer features.</p>
<h2 class="wp-block-heading" id="choose-a-hosting-partner-you-can-count-on">Choose a hosting partner you can count on</h2>
<p>Every great relationship is built on trust and balance, and your hosting should be no different. If you prefer full control, managed WordPress hosting might not be your perfect match.</p>
<p>But if you want reliability, security, and real support, managed hosting is worth the commitment. Because in the end, a good hosting partner—like a good relationship—should make your life easier, not harder.</p>
<p>Ready to make your hosting life easier? </p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Get WordPress.com managed hosting</a></div>
</div>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/28/managed-wordpress-hosting/feed/</wfw:commentRss>
<slash:comments>25</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/managed-wordpress-hosting.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/managed-wordpress-hosting.jpg" medium="image">
<media:title type="html">managed-wordpress-hosting</media:title>
</media:content>
<media:content url="https://0.gravatar.com/avatar/f86cf3fe095787d59771ecaf48381fb8dee85925ea73f28501683883b9a3ff4e?s=96&d=retro" medium="image">
<media:title type="html">nschaeferhoff</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2024/11/wordpress-com-site-speed-test-1.jpg" medium="image">
<media:title type="html">a screenshot of the WordPress.com Speed Test landing page with a heading that says 'Optimize your WordPress site
for lightning-fast performance' with a white URL field</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress.com-help-center.jpg" medium="image">
<media:title type="html">A screenshot of the WordPress.com support assistant chat window</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/01/gallery-block-example.jpg" medium="image">
<media:title type="html">The settings of a gallery image block on WordPress with a gallery of five images shown in the editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/security-features-wordpress-com.jpg" medium="image">
<media:title type="html">a list of four security features on WordPress.com in white text on a black background and two buttons––create a site and migrate a site</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-com-homepage.jpg" medium="image">
<media:title type="html">The WordPress.com homepage with an image on the right and the headline 'Hassle-free WordPress' on the left</media:title>
</media:content>
</item>
<item>
<title>What is Web Hosting? How a Website Gets Online</title>
<link>https://wordpress.com/blog/2025/04/28/what-is-web-hosting/</link>
<comments>https://wordpress.com/blog/2025/04/28/what-is-web-hosting/#comments</comments>
<dc:creator><![CDATA[Amanda Coopersmith]]></dc:creator>
<pubDate>Mon, 28 Apr 2025 00:45:00 +0000</pubDate>
<category><![CDATA[Resources]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79255</guid>
<description><![CDATA[Learn how hosting works, why it's essential for every website, and what to look for when choosing a hosting provider.]]></description>
<content:encoded><![CDATA[
<p>Every website needs web hosting. As you take the first steps to build your site, you’ll see plenty of hosting providers (like <a href="https://wordpress.com/pricing/?ref=blog">WordPress.com</a>) ready to help you get online.</p>
<p>But what exactly is web hosting, and how do you choose the right provider for your needs? In this post, we’ll break down what web hosting is, what web hosting services do, and the infrastructure that keeps your site up and available.</p>
<h2 class="wp-block-heading">How web hosting works</h2>
<p>If you’ve ever encountered data storage issues on your phone or computer, you’re probably aware that <em>digital storage</em> requires <em>physical storage space</em>. Data can be stored directly on your device or an external hard drive, and if you use cloud-based data storage, your data is still stored in the real world in a server center owned by your provider.</p>
<p>To make your website accessible to visitors, your site’s data, including text, photos, and styling, must be stored on a server—a computer built to store, manage, and share data across the internet.</p>
<p>When someone types in your <a href="https://wordpress.com/blog/2025/03/21/what-is-a-domain-name/">domain</a>, their browser contacts your server, which responds by sending back the files needed to display your website.</p>
<h2 class="wp-block-heading">Is a domain name the same as web hosting?</h2>
<p>Many people don’t understand the difference between domains and web hosting, likely because both domains and web hosting are often referred to as a website’s “home” on the web. However, these are two completely separate (and necessary!) components required to get a website online. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="78337" data-permalink="https://wordpress.com/blog/2025/03/21/what-is-a-domain-name/wordpress-com-domain-registrar/" data-orig-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" data-orig-size="1400,750" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-domain-registrar" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=1024" loading="lazy" width="1400" height="750" src="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" alt="The WordPress.com domain search tool with a headline saying 'A Domain Name for Every Idea' and a field for finding a domain" class="wp-image-78337" srcset="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg 1400w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=150&h=80 150w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=300&h=161 300w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=768&h=411 768w, https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg?w=1024&h=549 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Your unique domain name (like <code>yourgroovydomain.com</code>) is what someone needs to type into their browser to get to your website. But without web hosting, your domain name wouldn’t have any website content to display. Think of your domain as the address and your hosting as the house where everything lives. </p>
<p>WordPress.com is a one-stop shop for web hosting <em>and</em> domain names, so you can get both when you sign up with us. You can browse available domain names <a href="https://wordpress.com/domains/?ref=blog">here</a>.</p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px">We dive deeper into the difference between domains and hosting <a href="https://wordpress.com/blog/2025/04/21/domain-vs-hosting/">in this guide</a>.</p>
<h2 class="wp-block-heading">The elements of a web host</h2>
<p>Several components interact to deliver your website to users’ computers, including hardware, software, and defined infrastructure. We’ll briefly cover each of these components below. </p>
<h3 class="wp-block-heading">Creating web hosting infrastructure</h3>
<p>Before anyone can visit your website, your website’s content and design need to be stored on a server. </p>
<p>There are different ways to set up servers for different types of websites (which we’ll address in more detail below). Servers can be configured to host multiple websites on a single machine, support a large site with specific security needs, or run several virtual servers at once. How your infrastructure is set up can have a big impact on your site’s speed and reliability.</p>
<h3 class="wp-block-heading">Translating domains through Domain Name Servers (DNS)</h3>
<p>When someone types your domain name into their browser, their computer uses the Domain Name System (DNS) to look up the IP address associated with that domain. DNS acts like a translator, converting your human-readable web address into the computer-readable IP address (like <code>192.0.2.1</code>) needed to find and load your website.</p>
<p>The computer then uses this IP address to determine which server to contact to retrieve your website’s data.</p>
<h3 class="wp-block-heading">Connecting to servers</h3>
<p>Servers must remain online and ready at all times to receive website requests. Once your server receives a secure request for your website, the server processes it and finds the information it needs to send back to the browser.</p>
<h3 class="wp-block-heading">Authenticating the request</h3>
<p>Authentication and authorization systems on your server verify that incoming requests are legitimate and ensure that sensitive data, like your users’ personal information, remains protected.</p>
<p>Using SSL/TLS encryption, your server delivers the site to your visitor’s computer, ensuring that bad actors can’t intercept or replace your site when data is passed between devices. <a href="https://wordpress.com/pricing/?ref=blog">WordPress.com includes a free SSL certificate with every site</a>, helping you protect your visitors’ connections from day one.</p>
<h3 class="wp-block-heading">Website delivery</h3>
<p>If everything is configured properly, your server will quickly deliver your website to your visitors’ screens.</p>
<h2 class="wp-block-heading">Why you should use a web hosting service</h2>
<p>While individuals can buy and manage their own servers for their websites, it requires a lot of technical know-how. </p>
<p>Before using your server, it must be properly configured for web hosting and secured against threats. Hosting also requires ongoing server maintenance, like installing security patches and software updates and maintaining the physical server and server space.</p>
<p>Even if you have the technical expertise to configure a server, most people mainly outsource (or rent) physical server space from a web hosting company to avoid “downtime,” or time your site is offline. </p>
<p>If your server goes down—for example, during a power outage or if your server experiences a software error—your website can’t be delivered to visitors. If you’ve ever seen a 404 error when accessing a website, the server may be offline. </p>
<p>Unlike individually owned servers, hosting providers offer around-the-clock resources for managing and maintaining physical servers, ensuring someone is always available to respond to server issues. Additionally, most server centers have backup safety features, like secondary power supplies and redundancies that help keep your site online. </p>
<p>When looking for a web hosting provider, you should expect a provider to offer at least 99% uptime to ensure your site is always accessible to visitors. </p>
<h2 class="wp-block-heading">Types of web hosting</h2>
<p>Not all web hosting providers or server setups are created equal. Below, we’ll briefly explain different web hosting setups and when you might want to use them. </p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px">Want to dig deeper into the different types of web hosting? We cover them in more detail <a href="https://wordpress.com/blog/2025/04/11/types-of-web-hosting/">in this guide</a>. </p>
<h3 class="wp-block-heading">Shared hosting</h3>
<p>Shared hosting is when multiple websites share a single server and resources. Shared hosting is generally a good fit for smaller websites with less traffic, as it is less expensive than a dedicated server. However, if a website on your server experiences a sudden spike in traffic, it could affect your website’s speed. </p>
<p>Shared hosting providers manage the setup and security features for the whole server, so it’s important to ensure you choose a provider with excellent uptime and security. </p>
<h3 class="wp-block-heading">VPS hosting</h3>
<p>Virtual private servers (VPS) are the middle ground between shared and dedicated hosting options, both in terms of price and resources. With a VPS, you have a private virtual server environment within a shared server, so you have more control over your setup and don’t risk other sites dipping into your resources. </p>
<p>VPS hosting requires more technical expertise to set up, as a developer needs to configure the virtual server. </p>
<h3 class="wp-block-heading">Dedicated hosting</h3>
<p>Dedicated hosting is when you have a whole server’s resources for your website. This is a good option for large enterprise businesses with a lot of traffic or companies with advanced safety needs, like healthcare companies or financial institutions. </p>
<p>Your server can be configured however you choose for your business, and you will need ongoing support to maintain and update your server. </p>
<h3 class="wp-block-heading">Cloud hosting</h3>
<p>Cloud hosting is a server setup that stores your website on a distributed network of servers across the globe. While your website is still on shared servers, there is redundancy in case one server experiences downtime or heavy traffic, ensuring your site stays online.</p>
<p>Cloud hosting costs are often lower than dedicated hosting but vary based on your site’s traffic and provider. Many providers charge more as the number of visitors increases.</p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px">Read more about the cloud data centers that power our Business and Commerce plans <a href="https://wordpress.com/blog/2024/04/01/data-center-visit/">here</a>.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79263" data-permalink="https://wordpress.com/blog/2025/04/28/what-is-web-hosting/automattic-data-center-map/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg" data-orig-size="1400,754" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="automattic-data-center-map" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=1024" loading="lazy" width="1400" height="754" src="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg" alt="A map of the world showing the different data center locations" class="wp-image-79263" srcset="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=150&h=81 150w, https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=300&h=162 300w, https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=768&h=414 768w, https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg?w=1024&h=551 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption">The Automattic data centers powering WordPress.com’s Business and Commerce plans</figcaption></figure>
<h3 class="wp-block-heading">Managed vs unmanaged hosting </h3>
<p>Unmanaged hosting may be cheaper up-front, but requires development and ongoing support for updates and patches. It is generally only recommended for businesses with in-house technical resources who want a more customized server setup.</p>
<p>For most folks looking to get online but not spend all of their time managing their websites, <a href="https://wordpress.com/pricing/?ref=blog">managed web hosting providers like WordPress.com</a> are a great option. </p>
<p>For example, when you host your site with WordPress.com, your site stays fast, secure, and online. We manage infrastructure, updates, backups, and security so you can focus on your content or growing your business, not upkeep.</p>
<h2 class="wp-block-heading">Choosing your hosting type</h2>
<p>For most websites just getting online, shared hosting is a good option, as it’s a super affordable way to get started. As your site content, traffic, and budgets grow, you can scale your server resources, moving to a faster and more secure setup like VPS, cloud hosting, or a dedicated server. </p>
<p>One exception is sites with specialized security needs, like websites that collect sensitive user data for healthcare, finance, banking, and ecommerce sites. For added security, a dedicated server may be necessary, even if you don’t have a lot of traffic. </p>
<p>If you choose to build your site with WordPress, <a href="https://wordpress.com/blog/2025/04/17/wordpress-market-share">the internet’s most popular CMS software</a>, we recommend looking for <strong>managed WordPress hosting</strong>. These providers are specifically optimized to support and grow WordPress-powered sites.</p>
<h2 class="wp-block-heading">Evaluating managed hosting options</h2>
<p>Managed hosting means you don’t need deep technical knowledge to get online; however, it’s still important to understand what kind of servers your provider uses, as these factors can affect speed, reliability, and security.</p>
<p>For example, WordPress.com offers shared hosting on lower plans while our <a href="https://wordpress.com/hosting/?ref=blog">Business plan and above</a> are powered by WP Cloud, Automattic’s high-performance cloud infrastructure built specifically for WordPress.</p>
<p>Since your provider will configure your server and features, not all web hosting companies are created equally. When evaluating providers, review their uptime, security features, and speed. </p>
<p>WordPress.com is a managed WordPress hosting provider <a href="https://wordpress.com/pricing/?ref=blog">offering comprehensive, reliable hosting for everyone on all plans</a>. With WordPress.com, you get high-quality web hosting at an affordable price that’s:</p>
<ul class="wp-block-list">
<li><strong>Reliable:</strong> Because WordPress.com hosts websites on thousands of servers across the globe, our uptime is 99.999%. </li>
<li><strong>Secure:</strong> WordPress.com users also get many built-in security features like <a href="https://wordpress.com/support/domains/https-ssl/#install-an-ssl-certificate">SSL certificates</a>, brute-force protection, spam protection, DDoS protection and mitigation, malware detection and removal, and a web application firewall (WAF). Plus, domains registered at WordPress.com come with free domain privacy.</li>
<li><strong>Fast: </strong>Our servers are optimized to host and deliver WordPress websites, and we use a variety of performance-boosting tools, including a content delivery network (CDN) that uses servers closer to your visitors for even faster load times. In third-party speed benchmark tests, we <a href="https://wphostingbenchmarks.com/company/wordpress-com/">consistently get top scores</a>.</li>
<li><strong>Unlimited bandwidth and traffic: </strong>Many providers will charge additional fees or slow down your site if you suddenly experience a spike in visitors. With WordPress.com, you always pay one price for unmetered bandwidth and traffic, ensuring your site remains fast when you need it most.</li>
</ul>
<h2 class="wp-block-heading">Your website deserves a great home</h2>
<p>You now know what it takes to get your website online—and why great hosting makes all the difference.</p>
<p>Get fast, secure, and reliable managed hosting with WordPress.com, and launch your site with confidence.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Get WordPress.com managed hosting</a></div>
</div>
<p></p>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/28/what-is-web-hosting/feed/</wfw:commentRss>
<slash:comments>19</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/what-is-web-hosting-how-to-choose.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/what-is-web-hosting-how-to-choose.jpg" medium="image">
<media:title type="html">what-is-web-hosting-how-to-choose</media:title>
</media:content>
<media:content url="https://0.gravatar.com/avatar/9b60579267a74272d3ab8252c512ed7903b710afb595c59af9f394e77657bb26?s=96&d=retro" medium="image">
<media:title type="html">ajcoopersmith</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/03/wordpress-com-domain-registrar.jpg" medium="image">
<media:title type="html">The WordPress.com domain search tool with a headline saying 'A Domain Name for Every Idea' and a field for finding a domain</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/automattic-data-center-map.jpg" medium="image">
<media:title type="html">A map of the world showing the different data center locations</media:title>
</media:content>
</item>
<item>
<title>How Can You Manage Multiple WordPress Sites?</title>
<link>https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/</link>
<comments>https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/#comments</comments>
<dc:creator><![CDATA[Joe Fylan]]></dc:creator>
<pubDate>Sat, 26 Apr 2025 13:00:00 +0000</pubDate>
<category><![CDATA[Admin Bar]]></category>
<category><![CDATA[Tips and Tutorials]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79230</guid>
<description><![CDATA[Discover ways to manage multiple WordPress sites from one place. Explore tools, dashboards, and tips to streamline updates, backups, and more.]]></description>
<content:encoded><![CDATA[
<p>Managing multiple WordPress sites can quickly turn into a juggling act. From software updates to plugin maintenance and daily tasks, keeping everything running smoothly takes time, unless you have the right tools.</p>
<p>In this guide, we’ll show you better ways to manage all your sites from one place, whether you’re running your own portfolio or looking after client projects.</p>
<h2 class="wp-block-heading">Who needs to manage multiple WordPress sites?</h2>
<p>It’s often professional web developers and agencies who manage multiple sites; however, it’s not uncommon for individual site owners to have more than one website. </p>
<p>For example, you might have a professional site (such as a freelance portfolio), a blog about a hobby (like <a href="https://wordpress.com/blog/2025/03/13/how-to-start-a-food-blog/">food</a>, travel, or fitness), and a site for sharing photos and keeping your friends and family updated on your travels.</p>
<p>Once your friends and family discover you’re good at <a href="https://wordpress.com/blog/2025/01/21/how-to-start-a-blog/">creating sites</a>, you might even be asked to make a few more for them. </p>
<p>While launching a new site can be relatively quick and painless, keeping them all running smoothly can be time-consuming: logins for the different accounts need to be remembered, domains will renew at different times, downtime needs monitoring, and plugins require updating.</p>
<p>And if the sites are hosted by different companies, managing multiple accounts, accessing various dashboards, keeping track of billing cycles, and adjusting to different levels of support and customer experience will be necessary. </p>
<p>All of the above can quickly lead to overwhelm…but there’s a better way.</p>
<p>If you’ve found yourself responsible for more than one website (professional sites or sites you’ve built for fun), this guide will show you how to manage multiple WordPress sites like a pro. </p>
<h2 class="wp-block-heading">Benefits of using a tool or service to manage multiple WordPress sites</h2>
<p>No matter where your WordPress sites are hosted, you don’t have to juggle them all manually.</p>
<p>There are several benefits to using an effective tool or service for managing multiple sites in one place. You can:</p>
<ul class="wp-block-list">
<li>Access all of the sites you’re managing from one place.</li>
<li><a href="https://developer.wordpress.com/docs/developer-tools/bulk-plugin-management/">Manage plugins in bulk</a> without having to log into each site individually.</li>
<li>Create additional new sites from a central location. </li>
<li>Manage other features and functionalities such as backups, user access, security, email accounts, and domain registration centrally.</li>
<li>Have one point of support for things like billing and licenses.</li>
<li>Use client-focused features for multi-site management, including discounted pricing, referral commissions, and site migrations. </li>
</ul>
<p>As you’ll see, not all options for managing multiple WordPress sites include the above benefits, but some provide more than others. </p>
<h2 class="wp-block-heading">How to manage multiple WordPress sites</h2>
<p>When it comes to managing multiple WordPress sites, there are a few different options to consider, including:</p>
<ul class="wp-block-list">
<li><a href="https://wordpress.com/blog/feed/#plugins-tools">WordPress plugins and tools</a></li>
<li><a href="https://wordpress.com/blog/feed/#multisite">WordPress Multisite</a></li>
<li><a href="https://wordpress.com/blog/feed/#dashboard-tools">Hosting dashboards and tools</a></li>
<li><a href="https://wordpress.com/blog/feed/#automattic-for-agencies">Automattic for Agencies</a></li>
</ul>
<h3 class="wp-block-heading" id="plugins-tools">WordPress plugins and tools</h3>
<p>If you want to centralize your site management without changing hosts, plugins, and third-party tools are an option. Several plugins and tools aim to help you handle your sites more efficiently, including <a href="https://jetpack.com/manage/">Jetpack Manage</a>, <a href="https://managewp.com/">ManageWP</a>, and <a href="https://infinitewp.com/">InfiniteWP</a>.</p>
<p>They’re available at a range of price points, and once set up, they give you the ability to add multiple sites to a centralized management dashboard. </p>
<p>From there, you can access your sites’ dashboards, update plugins, and manage backups. Some solutions have other helpful features like scanning for malware, monitoring uptime, and generating reports. </p>
<p>While these solutions can be rich in features, the setup process can be time-consuming and complicated for those new to managing multiple WordPress sites. They can also be relatively expensive if you want access to the most advanced or useful features.</p>
<p>Another drawback of these plugins and tools is that they don’t include hosting for your WordPress site—instead, they’re solutions used <em>alongside</em> your hosting package and domain registration provider. </p>
<p>So while these solutions can make it easier to manage your sites, you’re adding another service or product to your workflow.</p>
<h3 class="wp-block-heading" id="multisite">WordPress Multisite</h3>
<p>You can also use the native <a href="https://wordpress.org/documentation/article/wordpress-glossary/#multisite">WordPress Multisite feature</a> to manage multiple WordPress sites. </p>
<p>WordPress Multisite allows you to create a network of WordPress sites, all from a single installation of WordPress. The sites are created and managed from the same WordPress dashboard and share the same file system, database, and server resources.</p>
<p>One benefit of this shared approach is that updates to the WordPress software, themes, and plugins can be carried out once through a single dashboard, rather than on a site-by-site basis. </p>
<p>However, as all of the sites in the network use the same database, keeping them completely separate is challenging. </p>
<p>For example, removing a site from the network, such as transferring it to a client or different owner, wouldn’t be straightforward, as its content is stored in the central database. Keeping site database backups separate wouldn’t be possible either. If the database is damaged, all sites in the network could potentially go offline.</p>
<p>Because all sites in a Multisite network share the same server resources, a traffic spike on one site could slow down the others. Not only that, some WordPress plugins aren’t compatible with Multisite, limiting your options for adding new features to your site.</p>
<p><strong>Multisite isn’t available on WordPress.com, and other hosting providers also have restrictions on its use</strong>. If you do want to use Multisite to manage your sites, check whether your hosting provider supports it.</p>
<h3 class="wp-block-heading" id="dashboard-tools">Hosting dashboards and tools</h3>
<p>It’s worth checking which site management features your web host provides out of the box or as an add-on. </p>
<p>Sometimes they’ll have a user-friendly dashboard that simplifies managing multiple WordPress sites, plus other tools like bulk plugin management and domain registration.</p>
<p>To take advantage of hosting dashboards and tools, you’ll need to ensure that all your sites are hosted by the same company, usually under the same account. Otherwise, you’ll still be juggling multiple accounts, each with its own ways of doing things. </p>
<p>Furthermore, if you’re purchasing premium plugins, email, or domain registrations for your WordPress sites, you may need to manage those purchases separately. These “extras” can all add up, increasing the number of providers you have to work with when managing your sites. </p>
<p>If that seems overwhelming, you’re in luck because WordPress.com provides a feature-rich and easy-to-use solution.</p>
<p>You can quickly start multiple WordPress sites under one WordPress.com account, and you can manage those sites through the <a href="https://wordpress.com/blog/2024/06/10/hosting-dashboard/">WordPress.com Hosting Dashboard</a>—get there by clicking the blue WordPress.com logo in the top-left corner once you log into your WordPress.com account.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79243" data-permalink="https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/wordpress-com-hosting-dashboard/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg" data-orig-size="1400,835" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-hosting-dashboard" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=1024" loading="lazy" width="1400" height="835" src="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg" alt="The WordPress.com hosting dashboard with three sites listed" class="wp-image-79243" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=150&h=89 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=300&h=179 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=768&h=458 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg?w=1024&h=611 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>As WordPress.com is a managed host, we handle many of the tasks associated with managing a WordPress website for you, such as <a href="https://wordpress.com/support/check-your-wordpress-version/">WordPress software updates</a>, <a href="https://wordpress.com/support/plugins/update-a-plugin-or-theme/#plugins-and-themes-from-word-press-org-repositories">plugin updates</a>, and <a href="https://wordpress.com/support/security/">security</a>. </p>
<p>You’ll also get a <a href="https://wordpress.com/pricing/?ref=blog">performance-focused hosting environment</a> for each of your sites that uses high-frequency CPUs, global edge caching, a CDN with over 28 international locations, and automatic datacenter failover to keep your site online and accessible. In short, <strong>we make sure that your sites are fast, reliable, and secure</strong>. </p>
<p>You also get access to <a href="https://wordpress.com/themes/premium">premium WordPress themes</a> at no extra cost, priority 24/7 support from experts, and the ability to install plugins and themes on <a href="https://wordpress.com/hosting/?ref=blog">plugin-enabled WordPress.com plans</a>. </p>
<p>If you’re not hosted on WordPress.com, <a href="https://wordpress.com/move/?ref=blog">you can easily migrate your sites</a> to take advantage of managing your plugin updates, domains, and emails all from this singular, intuitive dashboard. Otherwise, sites hosted at any host can be managed from the dashboard by connecting them using the Jetpack plugin. </p>
<h4 class="wp-block-heading">Managing plugin updates with WordPress.com </h4>
<p>The Hosting Dashboard also lets you <a href="https://developer.wordpress.com/docs/platform-features/scheduled-plugin-updates/">schedule plugin updates</a> (for sites hosted on <a href="https://wordpress.com/hosting/?ref=blog">our Business plan or above</a>).</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79244" data-permalink="https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/wordpress-com-scheduled-plugin-updates-2/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg" data-orig-size="1400,723" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-com-scheduled-plugin-updates" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=1024" loading="lazy" width="1400" height="723" src="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg" alt="The WordPress.com scheduled updates page" class="wp-image-79244" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=150&h=77 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=300&h=155 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=768&h=397 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg?w=1024&h=529 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The system will check for plugin updates at your chosen time and day of the week. It will then start the installation if any updates are found. You can create multiple schedules and choose which sites and plugins they apply to. </p>
<p>We always run a <a href="https://wordpress.com/blog/2024/05/20/scheduled-plugin-updates/">health check</a> prior to making any updates, which assesses your site’s stability. As each plugin is updated individually, a health check is performed after each update to see if everything is functioning as expected.</p>
<p>If a health check fails, the system automatically rolls back the update, preventing downtime from breaking changes, and restores the previous version of the plugin. Should that also fail, the WordPress.com support staff will be notified to investigate the issue. </p>
<p>You can also enable email alerts that notify you after a plugin update.</p>
<p>If you’re managing sites that must be online at specific times, such as during business hours, being able to schedule automatic plugin updates outside of these times is very useful. The fact that updates are automatically rolled back if something goes wrong makes this feature even more valuable. </p>
<h4 class="wp-block-heading">Bulk plugin updates</h4>
<p>In addition to enabling scheduled plugin updates, you can <a href="https://wordpress.com/support/plugins/update-a-plugin-or-theme/#update-plugins-in-bulk">update plugins across all of your sites</a> through your WordPress.com Hosting Dashboard. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79245" data-permalink="https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/manage-plugins-bulk-wordpress-com/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg" data-orig-size="1600,846" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="manage-plugins-bulk-wordpress-com" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=1024" loading="lazy" width="1600" height="846" src="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg" alt="The bulk manage plugins area on WordPress.com" class="wp-image-79245" srcset="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg 1600w, https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=150&h=79 150w, https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=300&h=159 300w, https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=768&h=406 768w, https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg?w=1024&h=541 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure>
<p>This feature lets you update, activate, and deactivate the plugins on all of your sites from one central location. </p>
<h4 class="wp-block-heading">Domain management</h4>
<p>Managing all the <a href="https://wordpress.com/domains/?ref=blog">domains you’ve registered</a> through WordPress.com in one place is another benefit of using the WordPress.com Hosting Dashboard. </p>
<p>WordPress.com is a domain registrar, and thanks to this, we have an intuitive domains area within the Hosting Dashboard where you can purchase, manage, and migrate all of your domains in the same place where you’re managing your sites.</p>
<p>Thanks to this, you have one less service to work with for managing the essential components of your website. </p>
<h4 class="wp-block-heading">Email accounts</h4>
<p>WordPress.com also offers <a href="https://wordpress.com/support/add-email/professional-email/">an email service</a> that you can manage independently for each of your sites through the Hosting Dashboard. </p>
<p>In addition to managing the email service through the same account, you can also add a custom, branded email address to your domain.</p>
<h3 class="wp-block-heading" id="automattic-for-agencies">Automattic for Agencies </h3>
<p>While the WordPress.com Hosting Dashboard is great for managing multiple sites, <a href="https://wordpress.com/for-agencies/">Automattic for Agencies</a> is an option for agencies that offers even more tools and features. </p>
<p>Signing up for the free program gives you access to various benefits to help you and your team manage your agency’s sites more efficiently. </p>
<p>Whether WordPress.com hosts those sites or not, you can manage them through the <a href="https://agencieshelp.automattic.com/knowledge-base/getting-started-with-the-automattic-for-agencies-dashboard/">Automattic for Agencies dashboard</a>. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79246" data-permalink="https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/automattic-for-agencies-sites-dashboard/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg" data-orig-size="1400,592" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="automattic-for-agencies-sites-dashboard" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=1024" loading="lazy" width="1400" height="592" src="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg" alt="Red arrows and rectangles highlighting the Automattic for Agencies dashboard" class="wp-image-79246" srcset="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=150&h=63 150w, https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=300&h=127 300w, https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=768&h=325 768w, https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg?w=1024&h=433 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>You can view key information directly from the dashboard, including WordPress and PHP versions and statuses for each of your sites. </p>
<p>You can also check the <a href="https://jetpack.com/support/backup/">Jetpack VaultPress Backup</a> and <a href="https://jetpack.com/upgrade/scan/">Scan</a> statuses for your sites and access those tools directly from the dashboard. Activity logs for each site and detailed stats and uptime information can be found here, too. </p>
<p>If you want to move client sites to the platform, Automattic for Agencies provides free migrations. You can also <a href="https://automattic.com/for-agencies/switch-from-wp-engine-to-pressable-hosting/">earn money when migrating sites</a> from specific hosts, with outstanding hosting fees covered until the contract with that host expires. </p>
<p>Another benefit is the ability to <a href="https://automattic.com/for-agencies/program-incentives/">generate income</a> by referring Automattic products and services (like WordPress.com hosting) to their clients. Buying products in bulk from the <a href="https://agencieshelp.automattic.com/knowledge-base/the-marketplace/">Marketplace</a> and reselling them to clients is another way to earn money through the program. </p>
<p>For example, when recommending WordPress.com hosting to your clients, you can receive a 20% revenue share on the sale of hosting subscriptions for new sites (and renewals of those subscriptions). There are similar opportunities for recommending Jetpack products and WooCommerce-owned extensions. </p>
<p>Another notable feature is the ability to <a href="https://automattic.com/for-agencies/blog/streamline-your-client-billing-with-new-build-a-cart-referrals/">build a cart of products</a> to recommend to a client. The cart could include a hosting plan, premium plugins, and other Automattic products tailored to the client’s project. The cart of items would be packaged into a single, comprehensive invoice for the client, streamlining the payment experience. </p>
<p>Eligible agencies can also join the <a href="https://wordpress.com/development-services/">partner directory referral program</a> that’s used across all Automattic brands, helping them to land more clients.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79247" data-permalink="https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/agency-partner-automattic-wordpress-com/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg" data-orig-size="1400,822" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="agency-partner-automattic-wordpress-com" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=1024" loading="lazy" width="1400" height="822" src="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg" alt="The WordPress.com and Automattic for Agencies agency partner listing area" class="wp-image-79247" srcset="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=150&h=88 150w, https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=300&h=176 300w, https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=768&h=451 768w, https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg?w=1024&h=601 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p><a href="https://wordpress.com/for-agencies/">Automattic for Agencies</a> is worth considering if you want to reduce the admin involved in managing multiple client sites while getting access to many agency-focused features to make your life easier.</p>
<h2 class="wp-block-heading">Ready to manage your sites more efficiently?</h2>
<p>Managing multiple WordPress sites doesn’t have to mean juggling countless logins, services, and plugins.</p>
<p>Whether you need an all-in-one solution like WordPress.com’s Hosting Dashboard or more advanced tools and revenue opportunities through <a href="https://wordpress.com/for-agencies/?ref=blog">Automattic for Agencies</a>, you’ve got powerful options.</p>
<p>The right setup lets you spend less time on maintenance and more time building, growing, and launching new sites.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Manage your sites on WordPress.com</a></div>
</div>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/26/manage-multiple-wordpress-sites/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/manage-multiple-wordpress-sites.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/manage-multiple-wordpress-sites.jpg" medium="image">
<media:title type="html">manage-multiple-wordpress-sites</media:title>
</media:content>
<media:content url="https://1.gravatar.com/avatar/a48b5a29d15cb1d8870e855cc2dea894434ef4c25e3a4e5830b862d6f0640e12?s=96&d=retro" medium="image">
<media:title type="html">joecanwrite2013</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-com-hosting-dashboard.jpg" medium="image">
<media:title type="html">The WordPress.com hosting dashboard with three sites listed</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-com-scheduled-plugin-updates.jpg" medium="image">
<media:title type="html">The WordPress.com scheduled updates page</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/manage-plugins-bulk-wordpress-com.jpg" medium="image">
<media:title type="html">The bulk manage plugins area on WordPress.com</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/automattic-for-agencies-sites-dashboard.jpg" medium="image">
<media:title type="html">Red arrows and rectangles highlighting the Automattic for Agencies dashboard</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/agency-partner-automattic-wordpress-com.jpg" medium="image">
<media:title type="html">The WordPress.com and Automattic for Agencies agency partner listing area</media:title>
</media:content>
</item>
<item>
<title>How to Design a Blog Like a Pro (Even If You’re Just Getting Started)</title>
<link>https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/</link>
<comments>https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#comments</comments>
<dc:creator><![CDATA[Shreelekha Singh]]></dc:creator>
<pubDate>Fri, 25 Apr 2025 16:10:00 +0000</pubDate>
<category><![CDATA[Admin Bar]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79196</guid>
<description><![CDATA[Learn how to design a blog that’s visually striking, easy to navigate, and built for growth—complete with tips, best practices, and real-world examples.]]></description>
<content:encoded><![CDATA[
<p>Behind every successful blog lies one decisive factor: <strong>exceptional design</strong>. </p>
<p>Design is often the first thing people notice when they land on your blog, and it often shapes their decision to stay, scroll, or bounce. </p>
<p>The more thought you put into designing your blog, the more effortless it is for readers to consume your content, trust your brand, and return for more. </p>
<p>In this guide, we’ll decode everything it takes to design a stellar blog—<strong>from core principles and must-have design elements to our best practices</strong>. We’ll also dissect real-world examples from Spotify, Qualtrics, and other popular brands to inspire your design strategy. </p>
<ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#why-does-blog-design-matter">Why does blog design matter?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#key-principles-to-make-smart-design-choices">Key principles to make smart design choices </a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#seven-essential-elements-to-include-in-your-blog-design">Seven essential elements to include in your blog design</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#how-to-design-a-blog-five-best-practices">How to design a blog (five best practices)</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#breaking-down-four-great-blog-design-examples">Breaking down four great blog design examples</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/#over-to-you-you-re-all-set-to-design-your-blog">Over to you: you’re all set to design your blog </a></li></ol>
<h2 class="wp-block-heading" id="why-does-blog-design-matter">Why does blog design matter?</h2>
<p>In an attention economy, good design gives your blog a clear advantage. It can tackle countless distractions and information overload to:</p>
<ul class="wp-block-list">
<li><strong>Win audience trust</strong>: First impressions happen fast. A thoughtfully crafted design signals credibility even before people read a word on your blog. When readers see the time, effort, and care put into design, they subconsciously trust your expertise.</li>
<li><strong>Improve reader experience</strong>: Good design makes the reading experience completely effortless. White space, font choices, paragraph spacing, and content hierarchy—all these elements (and more) make it easy for people to consume information. </li>
<li><strong>Reinforce your brand</strong>: Your blog design should be an extension of your brand. Use your visual language to make memorable designs truly unique to your brand. These designs can create mental bookmarks for readers and improve recall value.</li>
<li><strong>Give you a competitive edge</strong>: Design can be a big differentiator. At a time when almost every business has a blog, readers would gravitate toward your blog if you respect their time and offer unique value with distinctive layouts, custom illustrations, and easy-to-navigate pages.</li>
</ul>
<p>Simply put, <strong>good design allows readers to navigate your blog easily and trust your brand</strong>. Let’s understand some foundational principles to guide your design decisions. </p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px"><strong>Further reading</strong>: Read <a href="https://wordpress.com/blog/2025/02/20/why-we-redesigned-our-blog/">why we redesigned our blog</a> and what you can learn from our experience.</p>
<h2 class="wp-block-heading" id="key-principles-to-make-smart-design-choices">Key principles to make smart design choices </h2>
<p>Good blog design is more than just aesthetics. You have to <strong>deliver a seamless reading experience</strong> that helps people find insights and solve their problems. </p>
<p>Follow these four principles to shape your design decisions and create such an experience. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79201" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/how-to-design-a-blog-key-principles/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg" data-orig-size="1400,813" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="how-to-design-a-blog-key-principles" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=1024" loading="lazy" width="1400" height="813" src="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg" alt="a circle highlighting the key principles of good blog design with the WordPress.com logo in the middle" class="wp-image-79201" srcset="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=150&h=87 150w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=300&h=174 300w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=768&h=446 768w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg?w=1024&h=595 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<h3 class="wp-block-heading" id="readability">Readability </h3>
<p>Readability directly impacts how long people stay on your blog and whether they understand your content. </p>
<p>Poor readability—from bad font choices, low contrast, and cramped layouts—can create a jarring experience. Readers have to strain their eyes and spend time re-reading every sentence before they eventually leave.</p>
<p>Instead, prioritize readability in your design with:</p>
<ul class="wp-block-list">
<li>Visual breakpoints</li>
<li>Clear text hierarchy</li>
<li>Good font selection</li>
<li>Generous white space</li>
<li>Equal paragraph spacing</li>
</ul>
<p>Designing for readability removes friction for your readers, helping them grasp your ideas more clearly.</p>
<h3 class="wp-block-heading" id="scannability">Scannability </h3>
<p>Most people scan content before reading it thoroughly, no matter how well-written your article is. A scannable blog design acknowledges this instead of arguing against it.</p>
<p>Think about it this way: Your readers will likely scan the headings first and jump to interesting sections before making up their mind to read the entire article. </p>
<p>Use some of these design elements to create scannability, such as:</p>
<ul class="wp-block-list">
<li>Headings </li>
<li>Bullet lists</li>
<li>Callout boxes</li>
<li>Section dividers</li>
<li>Pull/block quotes</li>
<li>Table of contents</li>
</ul>
<p>You want to set up natural pathways in your content to accommodate this reading pattern. </p>
<h3 class="wp-block-heading" id="consistency">Consistency </h3>
<p>Consistency in design can lower the cognitive load for your readers. </p>
<p>When you offer a familiar experience with navigation, typography, and even spacing, readers don’t have to put extra effort into relearning how your blog (or website) works. </p>
<p>Since they’re already accustomed to these design features, they can focus more on your content. </p>
<p>This principle aligns with the <a href="https://www.nngroup.com/articles/consistency-and-standards/">“Consistency and Standards” heuristic</a> by Jakob Nielsen, widely known as the father of usability design. He emphasizes that maintaining consistency in your design interface reduces the mental effort required to process information. </p>
<p>As a result, the experience feels more intuitive and comfortable.</p>
<h3 class="wp-block-heading" id="accessibility">Accessibility </h3>
<p>Accessibility is at the core of inclusive design. Beyond inclusivity, it also has practical benefits for all types of readers because designs that work for people with disabilities can also reduce friction for all readers.</p>
<p>Here are some ways you can infuse accessibility into your blog design:</p>
<ul class="wp-block-list">
<li><a href="https://wordpress.com/blog/2025/02/13/color-accessibility/"><strong>Proper color contrast</strong></a><strong>: </strong>Use contrasting colors to make your text easily readable.</li>
<li><strong>Clear navigation: </strong>Make it easy for people to search and find the information they need.</li>
<li><a href="https://wordpress.com/blog/2024/12/23/what-is-alt-text/"><strong>Image alt texts</strong></a>: Help readers understand the context of images or media assets.</li>
<li><a href="https://wordpress.com/blog/2025/02/05/header-tags/"><strong>Header tags</strong></a><strong>: </strong>Create a clear structure with an intuitive heading hierarchy (which also helps with readability and scannability).</li>
</ul>
<p>Designing for accessibility allows you to accommodate edge cases while presenting a more seamless reading experience for everyone.</p>
<h2 class="wp-block-heading" id="seven-essential-elements-to-include-in-your-blog-design">Seven essential elements to include in your blog design</h2>
<p>Before we dive into our blog design best practices, let’s look at seven elements that contribute to an effective blog design:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79202" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/how-to-design-a-blog-effective-blog-design/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg" data-orig-size="1400,813" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="how-to-design-a-blog-effective-blog-design" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=1024" loading="lazy" width="1400" height="813" src="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg" alt="The essential elements of effective blog design connected on a blue background" class="wp-image-79202" srcset="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=150&h=87 150w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=300&h=174 300w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=768&h=446 768w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg?w=1024&h=595 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ul class="wp-block-list">
<li><strong>Thumbnail images</strong>: Add an image to quickly communicate what your article is all about. The thumbnail also offers a glimpse into your content when people share links on social media.</li>
<li><strong>Author profiles</strong>: Google prefers content that <a href="https://developers.google.com/search/docs/fundamentals/creating-helpful-content">showcases real expertise</a>. Author and contributor profiles allow you to credit the experts who produced the content and establish credibility.</li>
<li><strong>Table of contents</strong>: A table of contents respects your readers’ time. It allows them to browse the entire article structure and jump to any section that interests them. </li>
<li><strong>Related content</strong>: Don’t let readers hit a dead end. Instead, share a selection of relevant resources on sidebars or end-of-post sections to help them find more information.</li>
<li><strong>Negative space</strong>: Add white space to create some breathing room in your blog layout and avoid cluttering too many elements together.</li>
<li><strong>Blog attributes</strong>: You want to add the publish date, update date, reading time, category, and other details to help readers quickly understand when the post was written and what a post is about. </li>
<li><strong>Call to action</strong>: Guide readers toward the next step with 1-2 CTAs strategically placed in your blog. Prioritize the most relevant CTAs for your topic and place one at the end of the content.</li>
</ul>
<p>These design elements can make your blog more effortless and engaging. </p>
<p>Now that we’ve clued you in on the basics, let’s break down our top tips on how to design a blog. </p>
<h2 class="wp-block-heading" id="how-to-design-a-blog-five-best-practices">How to design a blog (five best practices)</h2>
<p>A well-designed blog combines form and function. We’ve curated these tried-and-tested tips to help you strike the right balance between the two aspects for your blog design. </p>
<h3 class="wp-block-heading" id="1-strategically-choose-the-right-blogging-platform">1. Strategically choose the right blogging platform </h3>
<p>When evaluating blogging platforms, <strong>consider your current needs and future plans</strong>. While beginners might prefer a lightweight, no-frills solution, they’ll likely face constraints when their blog grows. </p>
<p>That’s why the ideal platform combines ease of use with room to evolve, which is exactly what you get with WordPress. </p>
<p>WordPress powers <a href="https://wordpress.com/blog/2025/04/17/wordpress-market-share/">over 40% of all websites</a>, and for good reason. </p>
<p>For starters, you get a user-friendly interface to build a blog, whether you’re a complete beginner or someone with technical experience. You can choose from <a href="https://wordpress.org/themes/">thousands of free themes</a> to get started. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79092" data-permalink="https://wordpress.com/blog/2025/04/22/wordpress-vs-webflow/wordpress-org-theme-repository/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg" data-orig-size="1400,786" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-org-theme-repository" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=1024" loading="lazy" width="1400" height="786" src="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg" alt="The WordPress.org theme repository with three themes showing" class="wp-image-79092" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=150&h=84 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=300&h=168 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=768&h=431 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg?w=1024&h=575 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p><a href="https://en-gb.wordpress.org/plugins/">Add plugins</a> to make your blog design more functional while taking care of aspects like SEO, email capture, and appointment bookings. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79100" data-permalink="https://wordpress.com/blog/2025/04/22/wordpress-vs-webflow/wordpress-org-plugin-repository/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg" data-orig-size="1400,767" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-org-plugin-repository" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=1024" loading="lazy" width="1400" height="767" src="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg" alt="The WordPress.org plugin repository showing two plugins" class="wp-image-79100" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=150&h=82 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=300&h=164 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=768&h=421 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg?w=1024&h=561 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>More importantly, WordPress gives you a robust content management system to publish and handle content proactively, even as you scale your publishing volume. Its intuitive interface and editing tools are fit for users of all skill levels, whether you’re a writer, marketer, or developer. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79204" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/wordpress-cms-editor/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg" data-orig-size="1400,738" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="WordPress-CMS-editor" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=1024" loading="lazy" width="1400" height="738" src="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg" alt="A blog post about the art of connection in the WordPress post editor" class="wp-image-79204" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=150&h=79 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=300&h=158 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=768&h=405 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg?w=1024&h=540 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The best part? Since WordPress is open-source, you’re never locked into a proprietary system that might limit your future options or make it difficult to move your content elsewhere.</p>
<p>When you build on <a href="https://wordpress.com/pricing/?ref=blog">WordPress.com</a>, you can sidestep many maintenance tasks required in self-hosting. </p>
<p>Your WordPress.com plan has <a href="https://wordpress.com/blog/2025/04/18/wordpress-maintenance-plans/">maintenance features</a> built into it by default. That means:</p>
<ul class="wp-block-list">
<li>Automatic core/theme/plugin updates. </li>
<li>Regular security and malware scanning.</li>
<li>Daily backups and built-in caching.</li>
<li>Free SSL certificates to keep your site secure for visitors.</li>
</ul>
<p>With all the backend maintenance taken care of, you have more time to focus on <a href="https://wordpress.com/blog/2024/12/30/web-design-process/">your design</a> and content.</p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px"><strong>Learn more</strong>: Ready to start a new blog? Check out <a href="https://wordpress.com/blog/2025/01/21/how-to-start-a-blog/">our best advice to set yourself up for long-term success</a>.</p>
<h3 class="wp-block-heading" id="2-create-a-consistent-and-recognizable-brand-identity">2. Create a consistent and recognizable brand identity </h3>
<p>Consistent, brand-aligned design <strong>makes your content instantly recognizable </strong>across multiple touchpoints—whether someone’s seeing it on your site, in an email, or in their social feed.</p>
<p>To create a strong brand identity, you need to define:</p>
<ul class="wp-block-list">
<li><strong>Design system</strong>: You should outline the ideal layout with spacing, margins, and padding values. Document specific color codes and measurements for all visual elements. Plus, you can create reusable components like buttons, headings, and navigation elements.</li>
<li><strong>Visual hierarchy</strong>: Design a clear content structure using different sizes, weights, and colors for heading levels. You can also write instructions for incorporating whitespace and alignment patterns.</li>
<li><strong>Core brand elements</strong>: This is the groundwork for your brand’s visual identity. You need a typeface and color palette with 2-3 primary colors and 1-2 accent colors that reflect your brand personality. Set clear rules for visuals—like aspect ratios and how images are framed—to make your blog look consistent and professional.</li>
</ul>
<p>With WordPress as your blogging software, you can customize your blog design per your visual identity while maintaining consistency with global styles, which keep your branding intact across all posts. </p>
<p>Build <a href="https://wordpress.com/blog/2023/05/30/custom-theme-designs/">your custom design system</a> by choosing the <strong>typography, color scheme, background colors, shadows, and layout</strong>. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79205" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/wordpress-style-editor/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg" data-orig-size="1400,655" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="WordPress-Style-Editor" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=1024" loading="lazy" width="1400" height="655" src="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg" alt="The WordPress Style editor page with an orange rectangle around the different styles" class="wp-image-79205" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=150&h=70 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=300&h=140 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=768&h=359 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg?w=1024&h=479 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Define your typography settings with fonts, sizes, colors, line height, and letter spacing. You can also adjust the appearance for different text types, like headings, buttons, and captions. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79208" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/customize-typography/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg" data-orig-size="1400,1835" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Customize-typography" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=229" data-large-file="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=781" loading="lazy" width="1400" height="1835" src="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg" alt="The typography palette on WordPress" class="wp-image-79208" srcset="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=114&h=150 114w, https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=229&h=300 229w, https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=768&h=1007 768w, https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg?w=781&h=1024 781w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Set your color palette and customize the colors for different elements, including text, background, links, and more. </p>
<p>Remember to follow accessibility guidelines and check the contrasts when designing your palette.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79207" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/set-a-color-palette/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg" data-orig-size="1400,2007" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Set-a-color-palette" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=209" data-large-file="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=714" loading="lazy" width="1400" height="2007" src="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg" alt="The color palette settings on WordPress" class="wp-image-79207" srcset="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=105&h=150 105w, https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=209&h=300 209w, https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=768&h=1101 768w, https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg?w=714&h=1024 714w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>You can also create reusable blocks for commonly used elements, like lists, call-to-action buttons, and quotes. This is great for making specific blocks look the same across every post or page. </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79209" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/create-custom-blocks/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg" data-orig-size="1400,2637" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Create-custom-blocks" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=159" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=544" loading="lazy" width="1400" height="2637" src="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg" alt="The block menu on WordPress" class="wp-image-79209" srcset="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=80&h=150 80w, https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=159&h=300 159w, https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=768&h=1447 768w, https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg?w=544&h=1024 544w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>One of the big benefits is that when your blog evolves and needs a rebrand, you can <strong>update your global styles</strong>, ensuring any updates are automatically applied throughout your entire site. </p>
<h3 class="wp-block-heading" id="3-design-easy-navigation-for-an-intuitive-experience">3. Design easy navigation for an intuitive experience</h3>
<p>People who can’t easily navigate your blog get frustrated and leave (unlikely to return). Good, intuitive navigation makes it easy for readers to explore your resources and find what they’re looking for.</p>
<p>Effective blog navigation typically includes:</p>
<ul class="wp-block-list">
<li>A main menu highlighting the core content pillars.</li>
<li>A search function or filters to find content on specific topics.</li>
<li>A related reading section linking to articles related to the topic.</li>
</ul>
<p>Look at how we display the core categories and search bar on the WordPress.com blog: </p>
<figure class="wp-block-image size-full"><img data-attachment-id="79211" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/blog-core-categories/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg" data-orig-size="1400,214" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="blog-core-categories" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=1024" loading="lazy" width="1400" height="214" src="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg" alt="An orange box around the WordPress.com blog categories" class="wp-image-79211" srcset="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=150&h=23 150w, https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=300&h=46 300w, https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=768&h=117 768w, https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg?w=1024&h=157 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>If you’re creating an in-depth content hub, you can generate breadcrumb menus to help readers navigate to other sections of this hub. For example, the Backlinko blog uses these menus for its content hubs.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79212" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/breadcrumb-menu/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg" data-orig-size="1400,305" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Breadcrumb-menu" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=1024" loading="lazy" width="1400" height="305" src="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg" alt="An orange box around the Backlinko blog breadcrumbs" class="wp-image-79212" srcset="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=150&h=33 150w, https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=300&h=65 300w, https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=768&h=167 768w, https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg?w=1024&h=223 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Once your navigation is set, you want to test the flow with actual users to see if it makes sense to people. Remember to pay attention to mobile navigation since navigating on smaller screens can be challenging. </p>
<h3 class="wp-block-heading" id="4-define-rules-for-a-clear-visual-hierarchy">4. Define rules for a clear visual hierarchy </h3>
<p>Visual hierarchy determines what your readers notice first, second, and third on your blog pages.</p>
<p>A consistent and clear hierarchy <strong>gives readers a rhythm to consume content effortlessly</strong>. It creates structural clarity and helps people process your content. But an inconsistent hierarchy can create friction in the reading experience. </p>
<p>To avoid that, start by building your typographic scale for your blog. It’s a set of font styles and sizes arranged in a logical progression in size and weight for different heading levels. </p>
<p>Here’s an example of a Typographic Scale:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79213" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/typographic-scale/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg" data-orig-size="1400,682" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Typographic-scale" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=1024" loading="lazy" width="1400" height="682" src="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg" alt="An example of a Typographic Scale for different headings on a purple background" class="wp-image-79213" srcset="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=150&h=73 150w, https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=300&h=146 300w, https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=768&h=374 768w, https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg?w=1024&h=499 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption">Image from <a href="https://creativemarket.com/blog/typographic-scale">Creative Market</a></figcaption></figure>
<p>Use color to reinforce this hierarchy. Pick your primary colors for important elements like headers, call-to-action buttons, and key insights, while using secondary colors for non-critical information.</p>
<p><a href="https://partnermarketinghub.withgoogle.com/brands/android-enterprise/visual-identity/color-palette/">Google’s visual identity guidelines</a> present a great example here. The brand defines its primary, accent, and supporting colors for all assets.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79215" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/google-color-palette/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg" data-orig-size="1400,1135" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Google-color-palette" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=1024" loading="lazy" width="1400" height="1135" src="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg" alt="Google’s visual identity guidelines" class="wp-image-79215" srcset="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=150&h=122 150w, https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=300&h=243 300w, https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=768&h=623 768w, https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg?w=1024&h=830 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Spacing and alignment also play a crucial role here. </p>
<p>You want constant margin and padding rules for headings, sidebars, and images to direct focus on important content. And maintain consistent alignment for most content, but strategically break it for elements you want to emphasize, like pull quotes or featured content.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79217" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/how-to-design-a-blog-dos-donts/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg" data-orig-size="1400,813" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="how-to-design-a-blog-dos-donts" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=1024" loading="lazy" width="1400" height="813" src="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg" alt="Three examples of the dos and don'ts website design spacing" class="wp-image-79217" srcset="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=150&h=87 150w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=300&h=174 300w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=768&h=446 768w, https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg?w=1024&h=595 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>This is where <a href="https://wordpress.com/themes/">WordPress.com themes</a> can do most of the heavy lifting for you. All of our themes follow a clear visual hierarchy to maintain readability and consistency across all screen sizes. </p>
<p>The <a href="https://wordpress.com/theme/memphoria?tab_filter=recommended">Memphoria theme</a>, for example, clearly designates a typographic scale for different types of text. It also follows consistent padding between paragraphs and images, while the margins differ for the text and images to focus on the latter.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79218" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/memphoria-theme/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg" data-orig-size="1400,878" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Memphoria-theme" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=1024" loading="lazy" width="1400" height="878" src="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg" alt="A yellow and black WordPress theme" class="wp-image-79218" srcset="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=150&h=94 150w, https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=300&h=188 300w, https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=768&h=482 768w, https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg?w=1024&h=642 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /><figcaption class="wp-element-caption"><a href="https://wordpress.com/theme/memphoria?tab_filter=recommended">Memphoria theme</a></figcaption></figure>
<p>Start by exploring our <a href="https://wordpress.com/themes">collection of themes</a> and pick a design system that resonates with your brand. Once you understand your chosen theme’s existing hierarchy, you can customize it to match your vision. </p>
<h3 class="wp-block-heading" id="5-focus-on-mobile-first-design-and-layout">5. Focus on mobile-first design and layout</h3>
<p>Mobile-first design is more than just “nice-to-have” for your blog because most of your readers will consume your content on mobile devices. </p>
<p>One approach is to <strong>design your blog for the smallest screen first</strong>, then work backward to expand your layout for larger displays. This way, you can prioritize what really matters and remove what doesn’t. </p>
<p>Here are a few things to consider when creating an intuitive mobile design:</p>
<ul class="wp-block-list">
<li><strong>Touch targets</strong>: Look at the mobile reading experience and find all possible touch targets, like menu items, links, and buttons. These should have an adequate size and spacing. Make them at least 44 x 44 pixels with sufficient spacing to prevent accidental taps.</li>
<li><strong>Content width</strong>: When lines are spaced too far apart and text is broken up, it disrupts the reading flow. If lines are too cramped, they can seem too cluttered. Aim for 30-40 characters per line to hit the sweet spot without constant scrolling.</li>
<li><strong>Typography</strong>: Resize your fonts for small screens and increase the line height by a few points to improve readability. As a best practice, avoid picking fonts with thin strokes that might not be easily visible on mobile displays.</li>
<li><strong>Visuals</strong>: You’ll also need to resize images for smaller screens, from hero images to inline graphics. Check how images load in spotty connections or when you switch between different apps—this is a good way to discover usability problems on your site.</li>
</ul>
<p>Besides creating a delightful reading experience, a responsive blog design can also improve your performance in search engines. </p>
<p>Since the majority of website traffic comes from mobile devices, search engines like <a href="https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing">Google use mobile-first indexing</a>, meaning they crawl your site’s mobile version <em>before</em> the desktop version to determine its rankings.</p>
<p class="has-primary-light-background-color has-background" style="border-radius:5px"><strong>Further reading: </strong>Need help designing the perfect layout for your blog website? Check out these <a href="https://wordpress.com/blog/2024/11/14/website-layout-examples/">11 layout examples</a> to make your pick.</p>
<h2 class="wp-block-heading" id="breaking-down-four-great-blog-design-examples">Breaking down four great blog design examples</h2>
<p>Ready to design (or redesign) your blog? Find some inspiration from these real-world examples to fuel your creativity. </p>
<h3 class="wp-block-heading" id="1-tonal">1. Tonal</h3>
<figure class="wp-block-image size-full"><img data-attachment-id="79220" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/tonal-blog-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg" data-orig-size="1400,665" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Tonal-blog-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=1024" loading="lazy" width="1400" height="665" src="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg" alt="A blog post from Tonal with the title and other post information on the left and an image on the right" class="wp-image-79220" srcset="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=150&h=71 150w, https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=300&h=143 300w, https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=768&h=365 768w, https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg?w=1024&h=486 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Tonal, a home gym equipment brand, features its products and customer stories <a href="https://www.tonal.com/blog">on its blog</a>. </p>
<p>The design features a detailed yet neat hero section. It includes the cover image, title, blog category, summary, author, publish date, and social sharing buttons.</p>
<p>The single-column layout with plenty of white space makes the content easy to consume. The font is also easy on the eyes, and each paragraph has enough breathing room to prevent visual clutter. Well-placed headings, visuals, and section breaks make the blog scannable. </p>
<p>Consistency is another win. The fonts, image framing, and color palette are uniform throughout the page, creating a polished look.</p>
<p><strong>Key highlights:</strong></p>
<ul class="wp-block-list">
<li>Inline visual breaks (like images and videos) and CTAs</li>
<li>Accessible colors and headings with <a href="https://wordpress.com/blog/2024/12/23/what-is-alt-text/">alt text</a> for images </li>
<li>No sticky menus to keep the focus entirely on the content</li>
<li>Well-spaced layout without any clutter, which is great for mobile users</li>
</ul>
<h3 class="wp-block-heading" id="2-walnut">2. Walnut</h3>
<figure class="wp-block-image size-full"><img data-attachment-id="79221" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/walnut-blog-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg" data-orig-size="1400,881" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Walnut-blog-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=1024" loading="lazy" width="1400" height="881" src="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg" alt="A screenshot of a Walnut blog post with a table of contents on the left and the article on the right" class="wp-image-79221" srcset="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=150&h=94 150w, https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=300&h=189 300w, https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=768&h=483 768w, https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg?w=1024&h=644 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Walnut is an interactive demo creation platform. <a href="https://www.walnut.io/blog/">Its blog</a> creatively uses many design elements to create a structured reading experience.</p>
<p>For starters, its single-column layout keeps the reader focused. And a sticky table of contents sidebar makes it easy to jump to any section. </p>
<p>Walnut’s blog design checks several boxes in terms of accessibility. The color contrast between the text and the background is strong. The visuals use a simple, on-brand style, and readers can <em>listen</em> to each blog post, which is a nice accessibility touch.</p>
<p><strong>Key highlights:</strong></p>
<ul class="wp-block-list">
<li>A sticky table of contents to navigate to any section</li>
<li>Search bar and list of core topics prominently placed on top</li>
<li>“Back to top” button to conveniently jump to the beginning of the article</li>
<li>Colors, fonts, and design signatures consistent with brand identity </li>
</ul>
<h3 class="wp-block-heading" id="3-qualtrics">3. Qualtrics </h3>
<figure class="wp-block-image size-large"><img data-attachment-id="79223" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/qualtrics-blog-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg" data-orig-size="1400,994" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="qualtrics-blog-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=1024" loading="lazy" width="1024" height="727" src="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=1024" alt="An example of a blog post from Qualtrics featuring an image, authors, title, and more" class="wp-image-79223" srcset="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=1024 1024w, https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=768 768w, https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p>Qualtrics is an experiment management SaaS platform. The brand has a massive content ecosystem with a special focus on design. </p>
<p><a href="https://www.qualtrics.com/blog/">The blog</a> uses generous white space to improve readability, and its typographic scale for headings, captions, links, and pull quotes makes the content easily skimmable. The design also follows an accessible color palette with a white background, black text, and blue links. </p>
<p>What makes this design unique is a built-in feedback tool where readers can rate the article with a thumbs up or down.</p>
<p><strong>Key highlights:</strong></p>
<ul class="wp-block-list">
<li>Core content categories highlighted at the top</li>
<li>A sticky sidebar with CTAs and social sharing buttons</li>
<li>Features eight resources in the “Related Articles” section</li>
<li>Contributor profiles are linked at the top with photos for added credibility</li>
</ul>
<h3 class="wp-block-heading" id="4-spotify">4. Spotify </h3>
<figure class="wp-block-image size-full"><img data-attachment-id="79225" data-permalink="https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/spotify-blog-example/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg" data-orig-size="1400,659" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Spotify-blog-example" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=1024" loading="lazy" width="1400" height="659" src="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg" alt="A Spotify blog post with an image on the left and the headline on the right" class="wp-image-79225" srcset="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=150&h=71 150w, https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=300&h=141 300w, https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=768&h=362 768w, https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg?w=1024&h=482 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p><a href="https://newsroom.spotify.com/">Spotify’s blog</a> has a clean, neatly spaced layout. The hero section opens with a big cover image, title, and publish date. </p>
<p>The blog reinforces Spotify’s visual identity using the same font and color palette you see in its app. It also follows the brand’s modern and sleek aesthetic.</p>
<p>Scannability is built into the blog layout through visual cues. You’ll see a few breakpoints with images and embedded playlists. While a table of contents could improve navigation further, the current design scores high on accessibility and consistency.</p>
<p><strong>Key highlights:</strong></p>
<ul class="wp-block-list">
<li>Monochrome background with heavy image layering</li>
<li>A big search bar in the top corner to support navigation </li>
<li>Bold, oversized headings contrasted with minimalist body text</li>
<li>Seamless flow without sticky CTAs for more immersive scrolling</li>
</ul>
<h2 class="wp-block-heading" id="over-to-you-you-re-all-set-to-design-your-blog">Over to you: you’re all set to design your blog </h2>
<p>Great design is a surefire way to build credibility for your blog. </p>
<p>And WordPress makes it a breeze to <strong>design the blog of your dreams</strong>, ticking all the boxes we covered in this guide. With customizable themes, responsive layouts, and global styling options, you have the flexibility and convenience to bring your creative vision to life. </p>
<p>WordPress.com combines everything you need—hosting, domains, performance, support, and more—<a href="https://wordpress.com/create-blog/?ref=blog">into one platform designed to scale with you</a>. Best of all? Maintenance is handled for you, so you can spend less time managing your blog and more time building it.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/create-blog/?ref=blog">Blog on WordPress.com</a></div>
</div>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/25/how-to-design-a-blog/feed/</wfw:commentRss>
<slash:comments>23</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog.jpg" medium="image">
<media:title type="html">how-to-design-a-blog</media:title>
</media:content>
<media:content url="https://0.gravatar.com/avatar/6a4af21dd8f25b7cfb7509e388c05e2ddb2249f4bb79ade021325e5f2dbfba33?s=96&d=retro" medium="image">
<media:title type="html">shreelekhasingh</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-key-principles.jpg" medium="image">
<media:title type="html">a circle highlighting the key principles of good blog design with the WordPress.com logo in the middle</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-effective-blog-design.jpg" medium="image">
<media:title type="html">The essential elements of effective blog design connected on a blue background</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-org-theme-repository.jpg" medium="image">
<media:title type="html">The WordPress.org theme repository with three themes showing</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-org-plugin-repository.jpg" medium="image">
<media:title type="html">The WordPress.org plugin repository showing two plugins</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-cms-editor.jpeg" medium="image">
<media:title type="html">A blog post about the art of connection in the WordPress post editor</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-style-editor.jpeg" medium="image">
<media:title type="html">The WordPress Style editor page with an orange rectangle around the different styles</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/customize-typography.jpeg" medium="image">
<media:title type="html">The typography palette on WordPress</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/set-a-color-palette.jpeg" medium="image">
<media:title type="html">The color palette settings on WordPress</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-custom-blocks.jpeg" medium="image">
<media:title type="html">The block menu on WordPress</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/blog-core-categories.jpeg" medium="image">
<media:title type="html">An orange box around the WordPress.com blog categories</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/breadcrumb-menu.jpeg" medium="image">
<media:title type="html">An orange box around the Backlinko blog breadcrumbs</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/typographic-scale.jpeg" medium="image">
<media:title type="html">An example of a Typographic Scale for different headings on a purple background</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/google-color-palette.jpeg" medium="image">
<media:title type="html">Google’s visual identity guidelines</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/how-to-design-a-blog-dos-donts.jpg" medium="image">
<media:title type="html">Three examples of the dos and don'ts website design spacing</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/memphoria-theme.jpeg" medium="image">
<media:title type="html">A yellow and black WordPress theme</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/tonal-blog-example.jpeg" medium="image">
<media:title type="html">A blog post from Tonal with the title and other post information on the left and an image on the right</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/walnut-blog-example.jpeg" medium="image">
<media:title type="html">A screenshot of a Walnut blog post with a table of contents on the left and the article on the right</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/qualtrics-blog-example.jpeg?w=1024" medium="image">
<media:title type="html">An example of a blog post from Qualtrics featuring an image, authors, title, and more</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/spotify-blog-example.jpeg" medium="image">
<media:title type="html">A Spotify blog post with an image on the left and the headline on the right</media:title>
</media:content>
</item>
<item>
<title>Optimizing WordPress Performance: How to Analyze and Improve Your Website Speed</title>
<link>https://wordpress.com/blog/2025/04/24/wordpress-performance/</link>
<comments>https://wordpress.com/blog/2025/04/24/wordpress-performance/#comments</comments>
<dc:creator><![CDATA[Rochi]]></dc:creator>
<pubDate>Thu, 24 Apr 2025 20:30:00 +0000</pubDate>
<category><![CDATA[Tips and Tutorials]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79178</guid>
<description><![CDATA[Improve WordPress performance with practical tips to test your site speed, optimize loading times, and deliver a faster experience for your visitors.]]></description>
<content:encoded><![CDATA[
<p>Imagine going to a party and waiting 10 minutes for the host to answer the door. It’s frustrating, annoying, and awkward. You keep wondering if you should just leave.</p>
<p>A slow website is no different. If your site is dragging its feet, not only does it dampen the user experience, but it can also hurt your search rankings. Google loves fast-loading websites, just like all of us.</p>
<p>There’s no denying it: A fast website speed isn’t just “nice to have;” it’s make-or-break. In this article, I’ll share how you can measure and improve the speed of your WordPress site.</p>
<h2 class="wp-block-heading">How do you measure the speed of your WordPress website?</h2>
<p>The good news<span style="margin: 0px;padding: 0px"> is that a dedicated <a href="https://make.wordpress.org/performance/" target="_blank">Core Performance team</a> supports the WordPress software and improves your website performance with every </span>update.</p>
<p>That said, there’s always room to make your website even faster. Just because your website loads quickly on <em>your</em> device doesn’t mean it’s optimized for blazing fast speed, especially as you add more content and plugins to your site.</p>
<p>This is why you should test your website’s speed using a free tool like <a href="https://wordpress.com/speed-test/">WordPress Page Speed Test</a>. Simply enter your page or post URL to check how fast that page loads on mobile and desktop.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79181" data-permalink="https://wordpress.com/blog/2025/04/24/wordpress-performance/wp-speed-test/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg" data-orig-size="1400,1115" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="WP-speed-test" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=1024" loading="lazy" width="1400" height="1115" src="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg" alt="a screenshot of the report from the WordPress.com Speed Test" class="wp-image-79181" srcset="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=150&h=119 150w, https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=300&h=239 300w, https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=768&h=612 768w, https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg?w=1024&h=816 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>You’ll get a detailed breakdown of your site’s speed with a rating out of 100. You’ll also see a breakdown of the Core Web Vitals that impact your score:</p>
<ul class="wp-block-list">
<li><strong>First Contentful Paint (FCP)</strong>: FCP measures how long it takes the first elements (text or images) to appear on screen. Aim for an FCP score below 1.8 seconds.</li>
<li><strong>Largest Contentful Paint (LCP</strong>): LCP is the time it takes for the largest piece of content (like images or a header) to appear on the screen. Aim for an LCP score below 2.5 seconds.</li>
<li><strong>Cumulative Layout Shift (CLS)</strong>: CLS tracks how things (like buttons or text) move on the screen while the page loads. Aim for a CLS score below 0.1.</li>
<li><strong>Time to First Byte (TTFB)</strong>: TTFB is how fast your website starts to load when someone clicks on it. Aim for a TTFB score of below 800 milliseconds.</li>
<li><strong>Total Blocking Time (TBT)</strong>: TBT measures how long it takes for your website to become responsive when it starts to load. Aim for a TBT score below 200 milliseconds.</li>
</ul>
<p><a href="https://wordpress.com/speed-test/">The WordPress Speed Test</a> doesn’t just give you a performance score—it also suggests ways you can improve each score. You can see personalized recommendations for optimizing your website speed for mobile and desktop devices.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79183" data-permalink="https://wordpress.com/blog/2025/04/24/wordpress-performance/wp-recommendations/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg" data-orig-size="1400,958" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="WP-recommendations" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=1024" loading="lazy" width="1400" height="958" src="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg" alt="recommendations from the WordPress.com speed test" class="wp-image-79183" srcset="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=150&h=103 150w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=300&h=205 300w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=768&h=526 768w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg?w=1024&h=701 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The best part? The tool highlights the recommendations that will impact your site’s speed the most. When you click on each recommendation, you’ll see specific information about:</p>
<ul class="wp-block-list">
<li>The reasons behind the recommendations</li>
<li>Various options to implement the recommendations</li>
<li>Potential speed savings you can expect if you implement the recommendations</li>
</ul>
<figure class="wp-block-image size-full"><img data-attachment-id="79184" data-permalink="https://wordpress.com/blog/2025/04/24/wordpress-performance/wp-recommendations-expanded/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg" data-orig-size="1400,1189" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="WP-recommendations-expanded" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=1024" loading="lazy" width="1400" height="1189" src="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg" alt="Expanded recommendations from the WordPress.com speed test" class="wp-image-79184" srcset="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=150&h=127 150w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=300&h=255 300w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=768&h=652 768w, https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg?w=1024&h=870 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>The best way to optimize your WordPress website is to work on these recommendations. After all, they are specifically tailored to <em>your</em> website. That said, you can also execute various best practices to ensure your website doesn’t snooze on the job. </p>
<h2 class="wp-block-heading">Nine ways to improve the speed of your WordPress website</h2>
<p>Because WordPress is open source, it gives you a flexible foundation upon which you can build a website. But like any website platform, performance depends on how your site is set up and managed. </p>
<p>Here are nine best practices to help you fine-tune your site for optimal speed:</p>
<h3 class="wp-block-heading">1. Choose a fast hosting service</h3>
<p>Your <a href="https://wordpress.com/blog/2025/04/11/types-of-web-hosting/">web hosting</a> sets the foundation for your website’s performance. You can have the fanciest theme, lightweight plugins, and all the proper optimizations, but your website will be slow if your hosting is slow.</p>
<p>A good hosting provider takes extra measures to ensure top-notch website performance and offers excellent support. If you are on a shared hosting plan, you share the server resources with various customers. If their website gets a lot of traffic or uses up too much bandwidth, it might slow down your website.</p>
<p>This is why it’s best to pick a WordPress hosting provider like <a href="https://wordpress.com/hosting/">WordPress.com</a>. Sites hosted on WordPress.com are <a href="https://wphostingbenchmarks.com/company/wordpress-com/">fast</a>, and they come with these speed-boosting features:</p>
<ul class="wp-block-list">
<li><strong>High-frequency CPUs</strong>: These processors handle tasks more quickly, which can reduce the time it takes for your site to process requests and deliver content. </li>
<li><strong>High-burst capacity</strong>: WordPress.com can handle sudden or seasonal spikes in traffic with no sweat. You never have to worry about your website suddenly getting too many visitors and being unable to capitalize on the opportunity. Plus, we don’t charge extra for bandwidth or traffic.</li>
<li><strong>Global edge caching and a CDN with 28+ locations</strong>: WordPress.com’s global edge cache and CDN ensure visitors get fast loading times, regardless of location. Edge caching stores static versions of your site at data centers close to your users (instead of sending every visitor’s request to the origin server).</li>
<li><a href="https://wp.cloud/"><strong>WP Cloud architecture</strong></a><strong> (which powers our Business and Commerce plans)</strong>: WP Cloud is a purpose-built infrastructure for WordPress, designed to deliver top-tier speed, uptime, and performance, without requiring any manual setup.</li>
</ul>
<p>When you combine the above capabilities with <a href="https://wordpress.com/blog/2024/12/27/jetpack-wordpress-com/">Jetpack</a>, which is included with all WordPress.com sites, your site is automatically optimized for speed and performance, no extra work required.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Host your site on WordPress.com</a></div>
</div>
<h3 class="wp-block-heading">2. Use a high-quality, lightweight theme</h3>
<p>While themes customize the appearance and functionality of your website, they also impact your website’s performance. A bloated theme with large graphics and excessive animations will slow down your website.</p>
<p>View the theme of your choice on desktop and mobile (or use <a href="https://wordpress.com/speed-test/">our Speed Test</a>) to check how fast the page elements load. If there’s a lot of lag, consider switching to another theme.</p>
<p>If you use <a href="http://wordpress.com/themes">themes in the WordPress.com repository</a>, you don’t need to worry about choosing a speedy theme. All of the themes in the repository are optimized for speed (and there are tens of thousands to choose from!).</p>
<figure class="wp-block-image size-full"><img data-attachment-id="78947" data-permalink="https://wordpress.com/blog/2025/04/17/wordpress-market-share/wordpress-com-themes/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg" data-orig-size="1400,726" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="wordpress.com-themes" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=1024" loading="lazy" width="1400" height="726" src="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg" alt="A screenshot of the WordPress.com theme repository" class="wp-image-78947" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=150&h=78 150w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=300&h=156 300w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=768&h=398 768w, https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg?w=1024&h=531 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>If you’re using a theme from a third-party provider, read reviews to ensure you choose one optimized for site speed and one with excellent support.</p>
<h3 class="wp-block-heading">3. Compress your images</h3>
<p>Large image files can negatively impact the speed of your website because they take longer to load. Compressing your pictures reduces their size without hurting the quality of the visual elements.</p>
<p>You can compress images <em>before</em> uploading them to your site using online compression tools like <a href="https://tinypng.com/">TinyPNG</a>, and you can install plugins like <a href="https://wordpress.org/plugins/wp-smushit/">Smush</a> to optimize your already-uploaded images directly from your WordPress dashboard.</p>
<p>You can also install the <a href="https://wordpress.com/plugins/jetpack-boost/">Jetpack Boost plugin</a> and enable the Site Accelerator to optimize your images automatically.</p>
<ol class="wp-block-list">
<li>Click on <strong>Jetpack</strong> in the left-hand menu.</li>
<li>Go to the <strong>Performance</strong> tab.</li>
<li>Enable the Site Accelerator under “<strong>Performance & speed</strong>.”</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79185" data-permalink="https://wordpress.com/blog/2025/04/24/wordpress-performance/jetpack-image-optimization/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg" data-orig-size="1400,861" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Jetpack-image-optimization" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=1024" loading="lazy" width="1400" height="861" src="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg" alt="The site accelerator options in the Jetpack Boost plugin" class="wp-image-79185" srcset="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=150&h=92 150w, https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=300&h=185 300w, https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=768&h=472 768w, https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg?w=1024&h=630 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>If you have a WordPress.com site <a href="https://wordpress.com/hosting/?ref=blog">on a Business or Commerce plan</a>, the <a href="https://developer.wordpress.com/docs/site-performance/site-accelerator-cdn/">Site Accelerator is automatically enabled</a>.</p>
<h3 class="wp-block-heading">4. Choose your plugins wisely</h3>
<p>Each plugin adds a bit of weight to your site’s load time. Use only what you need and deactivate the rest.</p>
<p>It’s worthwhile to periodically review the plugins activated on your site and deactivate and delete the ones you no longer use. It’s also a best practice to ensure the plugins you choose are actively maintained and have excellent support.</p>
<p>This is also where using a good hosting provider can come in handy. <a href="https://wordpress.com/pricing/?ref=blog">On WordPress.com</a>, for instance, you don’t have to install separate plugins for security, spam protection, caching, and backups because these functionalities are already taken care of for all sites without needing external plugins</p>
<h3 class="wp-block-heading">5. Clean your database and media library regularly</h3>
<p>If you’ve been running your WordPress site for a while, chances are you’ve accumulated content and files you no longer need, like old drafts, trashed posts, or spam comments.</p>
<p>Reducing this clutter from your database can improve your website speed. Plugins such as <a href="https://wordpress.com/plugins/wp-sweep/">WP Sweep</a> and <a href="https://wordpress.com/plugins/wp-optimize/">WP-Optimize</a> can quicken this process. They will comb through your database to find files and content you can delete.</p>
<p>You may also have unused images in your media library, and deleting them can help reduce clutter and improve performance. In that case, something like the <a href="https://wordpress.com/plugins/media-cleaner/">Media Cleaner plugin</a> can come in handy.</p>
<h3 class="wp-block-heading">6. Use a content delivery network (CDN) for faster global loading</h3>
<p>A content delivery network (CDN) helps your website load faster by distributing copies of your site’s static content (like images, scripts, and stylesheets) to servers worldwide. When someone visits your site, that content is served from the location closest to them, which significantly reduces load times.</p>
<p><a href="https://wordpress.com/pricing/?ref=blog">If you’re hosting with WordPress.com</a>, good news: a global CDN with 28+ edge locations is already built in. That means faster performance for your visitors, no matter where they are in the world—no extra setup or plugins required.</p>
<p>If you’re not on WordPress.com, you can use a third-party CDN provider like Cloudflare to get similar benefits.</p>
<h3 class="wp-block-heading">7. Add caching</h3>
<p>When a new visitor enters your site, each image, element, and piece of text needs to load. Caching saves a version of your site, which reduces load times and speeds up repeat visits. The next time the same visitor views your site, the load time will be much faster because your website pages aren’t rebuilding from scratch.</p>
<p>WordPress.com’s global edge cache makes your site load faster for visitors worldwide by taking advantage of our global network of data centers. Our caching system stores and delivers content from servers closer to your visitors, improving page load speed.</p>
<p>Many hosts charge extra for this kind of edge caching or require integration with a third-party provider. On WordPress.com, global edge caching <a href="https://wordpress.com/pricing/?ref=blog">is included on every plan</a> without any bandwidth restrictions.</p>
<p><a href="https://wordpress.org/plugins/w3-total-cache/">W3 Total Cache</a> is a popular caching plugin for WordPress sites if you’re hosted on a non-WordPress.com plan.</p>
<h3 class="wp-block-heading">8. Limit third-party scripts</h3>
<p>External scripts include everything that loads on your website from third-party sites or services, like Google Analytics, YouTube videos, ads, and social media feeds.</p>
<p>If you’re using too many of these scripts, it’ll compromise your site’s performance. Whenever your site needs to load an external script, it must reach out to a third-party server, wait for it to respond, download the file, and <em>then</em> render your page.</p>
<p>A plugin like <a href="https://wordpress.com/plugins/autoptimize/">Autoptimize</a> can help you identify and limit these external scripts wherever possible.</p>
<h3 class="wp-block-heading">9. Use lazy loading for faster performance on long pages</h3>
<p>Lazy loading helps your site load faster by only loading images, videos, and other elements when a user scrolls down to see them, rather than all at once when the page first loads. This reduces initial load time and improves performance, especially on pages with lots of media.</p>
<p>Lazy loading is already built into WordPress and supported by most modern browsers. In many cases, it’s enabled by default—no plugin required. WordPress.com goes even further by lazy loading images <a href="https://wordpress.com/support/jetpack/#optimized-performance">with Jetpack</a>, helping ensure smooth, fast performance for your visitors. </p>
<p>If you’re managing your own WordPress site and want more control or advanced options (like lazy loading background images or iframes), you can use a plugin like <a href="https://wordpress.com/plugins/rocket-lazy-load">Lazy Load</a> to fine-tune how it works on your site.</p>
<h2 class="wp-block-heading">Each second counts</h2>
<p>Depending on hosting and site setup, WordPress sites are reliable, fast, and secure, but executing the best practices above will ensure you improve your site’s user experience.</p>
<p>Optimizing your WordPress site for better performance is a constant maintenance task, but as your website grows, you want to spend less time doing (and worrying about) the admin work and more time creating.</p>
<p>WordPress.com combines what you need—hosting, domains, ecommerce, performance, and support—into one seamless platform that grows with you.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Get fast WordPress.com hosting</a></div>
</div>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/24/wordpress-performance/feed/</wfw:commentRss>
<slash:comments>10</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/optimizing-wordpress-performance.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/optimizing-wordpress-performance.jpg" medium="image">
<media:title type="html">optimizing-wordpress-performance</media:title>
</media:content>
<media:content url="https://1.gravatar.com/avatar/7391cf85a63f401a8cacd9e357ea06af5c85fc2052377a5d99b0730f5d0de578?s=96&d=retro" medium="image">
<media:title type="html">rochiz</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wp-speed-test.jpeg" medium="image">
<media:title type="html">a screenshot of the report from the WordPress.com Speed Test</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wp-recommendations.jpeg" medium="image">
<media:title type="html">recommendations from the WordPress.com speed test</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wp-recommendations-expanded.jpeg" medium="image">
<media:title type="html">Expanded recommendations from the WordPress.com speed test</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress.com-themes.jpg" medium="image">
<media:title type="html">A screenshot of the WordPress.com theme repository</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/jetpack-image-optimization.jpeg" medium="image">
<media:title type="html">The site accelerator options in the Jetpack Boost plugin</media:title>
</media:content>
</item>
<item>
<title>WordPress and Google Analytics: From Setup to Insights</title>
<link>https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/</link>
<comments>https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/#comments</comments>
<dc:creator><![CDATA[Rochi]]></dc:creator>
<pubDate>Wed, 23 Apr 2025 20:00:00 +0000</pubDate>
<category><![CDATA[Tips and Tutorials]]></category>
<guid isPermaLink="false">http://en.blog.wordpress.com/?p=79132</guid>
<description><![CDATA[Your website can’t grow without data. Learn how to connect WordPress and Google Analytics to improve your website performance.]]></description>
<content:encoded><![CDATA[
<p>If you’re not using data to guide your website strategy, you’re just guessing. Google Analytics is one of the most widely used tools for understanding how your site content performs.</p>
<p>In this post, we’ll show you how to connect Google Analytics to your WordPress site so that you can start uncovering actionable insights about your content and users.</p>
<h2 class="wp-block-heading">What is Google Analytics?</h2>
<p><a href="https://marketingplatform.google.com/about/analytics/">Google Analytics</a> is a free website analytics tool that helps you understand how visitors navigate and interact with your site. It’s easy to connect (more on that below) by adding a tracking code to your WordPress site. Once installed, it helps you better understand:</p>
<ul class="wp-block-list">
<li>Your website visitor demographics (like location, device type, and browser)</li>
<li>How people find your site (like Google search, social media, and direct visits)</li>
<li>Individual page interactions (like which pages are viewed most and how long your readers stay on your site)</li>
<li>Conversions (like purchases, signups, and downloads)</li>
</ul>
<p><strong>Installing Google Analytics on your site enables you to make data-driven decisions,</strong> like tailoring your website experience and marketing campaigns according to visitor preferences and behavior.</p>
<h2 class="wp-block-heading">Install Google Analytics on your WordPress site</h2>
<p>Ready to add Google Analytics to your site? Follow these steps to start collecting data:</p>
<h3 class="wp-block-heading">Step 1: Sign up for Google Analytics</h3>
<p>You’ll need to create a Google Analytics account if you don’t already have one.</p>
<ol class="wp-block-list">
<li>Go to the <a href="https://marketingplatform.google.com/about/analytics/">Google Analytics website</a> and click “<strong>Get started today.</strong>”</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79144" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-1/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg" data-orig-size="1400,544" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-1" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=1024" loading="lazy" width="1400" height="544" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg" alt="The Google Analytics homepage with the Get started today button higlighted" class="wp-image-79144" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=150&h=58 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=300&h=117 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=768&h=298 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg?w=1024&h=398 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="2" class="wp-block-list">
<li>Give your account a name by entering an “<strong>Account name</strong>” and customize your data sharing settings. These settings will allow you to control how much of your site data you share with Google.</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79145" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-2/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg" data-orig-size="1400,704" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-2" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=1024" loading="lazy" width="1400" height="704" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg" alt="The Create an account page in the Google Analytics signup flow" class="wp-image-79145" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=150&h=75 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=300&h=151 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=768&h=386 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg?w=1024&h=515 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="3" class="wp-block-list">
<li>The next step is to “<strong>Create a property</strong>,” which is the website Google will track. Enter the name of your business or website here. You will also choose your reporting time zone and local currency.</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79147" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-3/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg" data-orig-size="1400,822" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-3" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=1024" loading="lazy" width="1400" height="822" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg" alt="The Create a property page in the Google Analytics signup flow" class="wp-image-79147" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=150&h=88 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=300&h=176 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=768&h=451 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg?w=1024&h=601 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="4" class="wp-block-list">
<li>The final steps are about your business or website. Choose an industry that best matches your niche and your business size.</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79149" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-4/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg" data-orig-size="1400,1235" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-4" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=1024" loading="lazy" width="1400" height="1235" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg" alt="The Describe your business page in the Google Analytics signup flow with Books & Literature category selected and Small selected" class="wp-image-79149" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=150&h=132 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=300&h=265 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=768&h=677 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg?w=1024&h=903 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="5" class="wp-block-list">
<li>Choose the business objectives that fit your purpose of using Google Analytics. For example, if you want to <a href="https://wordpress.com/blog/2025/01/30/increase-blog-traffic/">increase blog traffic</a>, select “<strong>Understand web and/or app traffic</strong>.” You can choose multiple categories if you have more than one goal.</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79150" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-5/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg" data-orig-size="1400,1834" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-5" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=229" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=782" loading="lazy" width="1400" height="1834" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg" alt="The business objectives page in the Google Analytics signup flow with 'understand web and/or app traffic' selected" class="wp-image-79150" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=115&h=150 115w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=229&h=300 229w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=768&h=1006 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg?w=782&h=1024 782w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="6" class="wp-block-list">
<li>Click <strong>Create</strong> and accept Google’s Terms of Service Agreement.</li>
<li>Finally, choose your data streams. These sources will help Google collect information about your content’s performance to provide accurate analytics. Choose <strong>Web </strong>and type your URL. Enter your site name in “<strong>Stream Name</strong>.” Google Analytics turns on “<em>Enhanced Measurements</em>” by default, allowing it to measure interactions on your website. You can toggle this off if you just want to measure page views.</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79152" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-7/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg" data-orig-size="1400,603" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-7" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=1024" loading="lazy" width="1400" height="603" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg" alt="The Start Collecting Data page in the Google Analytics signup flow" class="wp-image-79152" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=150&h=65 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=300&h=129 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=768&h=331 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg?w=1024&h=441 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<figure class="wp-block-image size-full"><img data-attachment-id="79154" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/create-ga-account-step-8/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg" data-orig-size="1400,401" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="create-GA-account-step-8" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=1024" loading="lazy" width="1400" height="401" src="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg" alt="The enhanced measurement section in the Google Analytics signup flow" class="wp-image-79154" srcset="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=150&h=43 150w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=300&h=86 300w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=768&h=220 768w, https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg?w=1024&h=293 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="8" class="wp-block-list">
<li>Click “<strong>Create and continue</strong>” to finish setting up your Google Analytics account.</li>
</ol>
<h3 class="wp-block-heading">Step 2: Copy your Measurement ID</h3>
<p>Once you finish setting up your account, Google Analytics will provide you with your web stream details: your Stream Name, Stream URL, Stream ID, and Measurement ID.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79156" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/measurement-id/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg" data-orig-size="1400,304" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="measurement-ID" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=1024" loading="lazy" width="1400" height="304" src="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg" alt="the Measurement ID with an orange rectangle around it in the Stream Details section in Google Analytics" class="wp-image-79156" srcset="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=150&h=33 150w, https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=300&h=65 300w, https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=768&h=167 768w, https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg?w=1024&h=222 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>Click the copy icon next to your Measurement ID. This is the number you’ll need to connect to your WordPress site.</p>
<h3 class="wp-block-heading">Step 3: Add the Measurement ID to your WordPress website</h3>
<p>There are three ways to add your Measurement ID to your WordPress site:<br></p>
<ul class="wp-block-list">
<li>Use a plugin like <a href="https://wordpress.com/plugins/google-site-kit">Site Kit by Google</a> or <a href="https://wordpress.com/plugins/google-analytics-for-wordpress/">MonsterInsights</a></li>
<li>Add a code to your WordPress theme</li>
<li>Use Jetpack, which comes pre-installed on WordPress.com sites</li>
</ul>
<p>You only need to add your Google Analytics information to your website <em>once</em> using one of the methods above; adding your analytics measurement to your site more than once may result in inaccurate reporting.</p>
<p><strong>If you want to use a plugin,</strong> simply activate it and follow the step-by-step instructions. Each plugin has a slightly different process, but they should guide you through the connection process.</p>
<p><strong>If you want to add code to your theme manually</strong>, follow these steps:</p>
<ol class="wp-block-list">
<li>Go to your Google Analytics dashboard.</li>
<li>Click <strong>Admin</strong> in the bottom-left corner.</li>
<li>Under the <strong>Property</strong> column, click “<strong>Data Streams</strong>.”</li>
<li>Scroll down and click “<strong>View tag instructions</strong>.”</li>
<li>Copy the full tracking script under “<strong>Install manually</strong>.”</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79159" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/google-analytics-installation-instructions-install-manually/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg" data-orig-size="1400,914" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="google-analytics-installation-instructions-install-manually" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=1024" loading="lazy" width="1400" height="914" src="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg" alt="the Install Manually installation instructions from Google Analytics" class="wp-image-79159" srcset="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=150&h=98 150w, https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=300&h=196 300w, https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=768&h=501 768w, https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg?w=1024&h=669 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<ol start="6" class="wp-block-list">
<li>Log in to your WordPress dashboard.</li>
<li>Paste the code in your theme’s <code>header.php</code> file.</li>
</ol>
<p>We recommend only using the code method if you’re comfortable editing theme files. The plugin method works just fine if you aren’t confident in editing your website theme’s code. Moreover, when your theme updates or changes, this code may be overwritten.</p>
<p><strong>If you have a website on WordPress.com</strong>, you don’t need to use a plugin or code to integrate Google Analytics. Sites on our <a href="https://wordpress.com/pricing/?ref=blog">Premium, Business, Commerce</a>, or legacy Pro plans can use the pre-installed Jetpack plugin to easily connect your site to your Google Analytics account:</p>
<ol class="wp-block-list">
<li>Go to your WordPress.com dashboard.</li>
<li>Navigate to <em>Tools</em> → <em>Marketing </em>(or <em>Jetpack → Settings</em> if using <a href="https://wordpress.com/support/set-your-admin-interface-style/">WP Admin</a>).</li>
<li>Select the <strong>Traffic</strong> tab.</li>
<li>Find the Google section and enter your Measurement ID in the “<strong>Google Analytics Measurement ID</strong>” box.</li>
<li>Click “<strong>Save settings</strong>.”</li>
</ol>
<figure class="wp-block-image size-full"><img data-attachment-id="79160" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/wordpress-google-analytics/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg" data-orig-size="1400,604" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="wordpress-google-analytics" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=1024" loading="lazy" width="1400" height="604" src="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg" alt="The Google Analytics measurement ID field and section on WordPress.com" class="wp-image-79160" srcset="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=150&h=65 150w, https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=300&h=129 300w, https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=768&h=331 768w, https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg?w=1024&h=442 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>After following one of the three methods outlined above, Google Analytics will start capturing your website data in 48–72 hours.</p>
<h2 class="wp-block-heading">How to use Google Analytics to improve your site performance</h2>
<p>While Google Analytics has plenty of information and data for site owners, it’s only valuable if you know how to use it. Here are three use cases to make sense of the data you see in Google Analytics now that it’s connected to your WordPress site:</p>
<h3 class="wp-block-heading">1. Analyze the behavior of your website visitors</h3>
<p>Google Analytics tracks how your website visitors interact with your content. You can see:</p>
<ul class="wp-block-list">
<li>Clicks</li>
<li>Page views</li>
<li>Bounce rate</li>
<li>Average engagement time</li>
</ul>
<p>You’ll find this data under the <strong>Reports</strong> section in Google Analytics. If you open the <strong>“Life cycle”</strong> collection, you can dig into the <strong>Engagement</strong> reports, including the <strong>Pages and screens</strong> report, which summarizes content views and how long users stay:</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79161" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/ga4-website-pages-data/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg" data-orig-size="1400,745" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="GA4-website-pages-data" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=1024" loading="lazy" width="1400" height="745" src="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg" alt="The pages and screens report in Google Analytics" class="wp-image-79161" srcset="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=150&h=80 150w, https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=300&h=160 300w, https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=768&h=409 768w, https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg?w=1024&h=545 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>These metrics can help you understand how your website content is performing. For example, they can highlight pages with low views, minimal clicks, or high bounce rates and help you investigate why visitors aren’t engaging. Is the content missing the mark? Is the load time too slow? Is it just a seasonal dip?</p>
<p>You can use the insights here to improve the user experience on your website.</p>
<h3 class="wp-block-heading">2. Gain a deeper understanding of who your ideal visitors are</h3>
<p>How well do you think you know your website visitors? You likely had a certain target audience in mind while <a href="https://wordpress.com/blog/2025/01/29/how-to-make-a-website/">creating your website</a>; Google Analytics can help you verify whether or not you’re reaching them.</p>
<p>In <span style="margin: 0px;padding: 0px">Google Analytics’s “<strong>User attributes</strong>” section</span>, you can monitor the demographic details of your website visitors: location, gender, interests, and age.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79162" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/ga4-demographic-details/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg" data-orig-size="1400,758" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="GA4-demographic-details" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=1024" loading="lazy" width="1400" height="758" src="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg" alt="The demographic details under User attributes in Google Analytics" class="wp-image-79162" srcset="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=150&h=81 150w, https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=300&h=162 300w, https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=768&h=416 768w, https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg?w=1024&h=554 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>If you want to dive deeper, go to the <strong>Audiences</strong> section. It will show you the nitty-gritty details, such as the demographic information about your customers with high purchase activity, people with abandoned carts, and engaged visitors.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79163" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/ga4-audiences/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg" data-orig-size="1400,711" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="GA4-audiences" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=1024" loading="lazy" width="1400" height="711" src="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg" alt="The audiences report in Google Analytics showing new users, sessions, views per session and total revenue" class="wp-image-79163" srcset="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg 1400w, https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=150&h=76 150w, https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=300&h=152 300w, https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=768&h=390 768w, https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg?w=1024&h=520 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>These insights are especially valuable if you run a business using your website. For example, if you notice that most of the audience in your abandoned cart is on a mobile device, it might be a signal to make your design more mobile-friendly.</p>
<h3 class="wp-block-heading">3. Inform your SEO strategy</h3>
<p>If you’re working to <a href="https://wordpress.com/blog/2025/03/14/wordpress-seo/">improve your site’s search result rankings</a>, Google Analytics (especially <a href="https://support.google.com/analytics/answer/10737381?hl=en">the Search Console report</a>) can provide valuable data to inform your strategy.</p>
<p>You can monitor which keywords you rank for, click-through rates from Google search results, and how your ranking changes over time.</p>
<figure class="wp-block-image size-full"><img data-attachment-id="79171" data-permalink="https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/google-search-console-report-google-analytics/" data-orig-file="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg" data-orig-size="1400,435" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="google-search-console-report-google-analytics" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=1024" loading="lazy" width="1400" height="435" src="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg" alt="The Google Search Console report on Google Analytics showing landing page, search clicks, and more" class="wp-image-79171" srcset="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg 1400w, https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=150&h=47 150w, https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=300&h=93 300w, https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=768&h=239 768w, https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg?w=1024&h=318 1024w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>
<p>These insights can fuel your search engine optimization strategy to include more of the right keywords in the right places. Combining these SEO insights with the engagement metrics (also present in GA4) allows you to strategically make changes to ensure people stay on your site longer.</p>
<p>On websites powered by WordPress.com, you also get a host of <a href="https://wordpress.com/support/seo-tools/">additional SEO features</a> to boost your efforts, such as adding meta descriptions and customizing your titles for search results.</p>
<h2 class="wp-block-heading">Turn data into direction</h2>
<p>Once you have Google Analytics set up on your WordPress site, you’ll want to ensure you’re regularly checking in on its performance. Don’t let those numbers just collect dust; use them as your guideposts to understand what’s working on your site and what needs improvement.</p>
<p>And as your website grows, you’ll need reliable hosting and built-in tools to help you work more efficiently. <strong>WordPress.com brings everything together</strong>—hosting, domains, ecommerce tools, performance, and expert support—in one seamless platform that scales with you. <a href="https://wordpress.com/pricing/?ref=blog">Get started with WordPress.com</a> or <a href="https://wordpress.com/move/?ref=blog">migrate your existing WordPress site</a> today.</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button btn-primary text-color-white"><a class="wp-block-button__link wp-element-button" href="https://wordpress.com/pricing/?ref=blog">Get WordPress.com hosting</a></div>
</div>
]]></content:encoded>
<wfw:commentRss>https://wordpress.com/blog/2025/04/23/wordpress-and-google-analytics/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
<media:thumbnail url="https://en-blog.files.wordpress.com/2025/04/wordpress-and-google-analytics.jpg" />
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-and-google-analytics.jpg" medium="image">
<media:title type="html">wordpress-and-google-analytics</media:title>
</media:content>
<media:content url="https://1.gravatar.com/avatar/7391cf85a63f401a8cacd9e357ea06af5c85fc2052377a5d99b0730f5d0de578?s=96&d=retro" medium="image">
<media:title type="html">rochiz</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-1.jpeg" medium="image">
<media:title type="html">The Google Analytics homepage with the Get started today button higlighted</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-2.jpeg" medium="image">
<media:title type="html">The Create an account page in the Google Analytics signup flow</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-3.jpeg" medium="image">
<media:title type="html">The Create a property page in the Google Analytics signup flow</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-4.jpeg" medium="image">
<media:title type="html">The Describe your business page in the Google Analytics signup flow with Books & Literature category selected and Small selected</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-5.jpeg" medium="image">
<media:title type="html">The business objectives page in the Google Analytics signup flow with 'understand web and/or app traffic' selected</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-7.jpeg" medium="image">
<media:title type="html">The Start Collecting Data page in the Google Analytics signup flow</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/create-ga-account-step-8.jpeg" medium="image">
<media:title type="html">The enhanced measurement section in the Google Analytics signup flow</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/measurement-id.jpg" medium="image">
<media:title type="html">the Measurement ID with an orange rectangle around it in the Stream Details section in Google Analytics</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/google-analytics-installation-instructions-install-manually.jpg" medium="image">
<media:title type="html">the Install Manually installation instructions from Google Analytics</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/wordpress-google-analytics.jpeg" medium="image">
<media:title type="html">The Google Analytics measurement ID field and section on WordPress.com</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/ga4-website-pages-data.jpeg" medium="image">
<media:title type="html">The pages and screens report in Google Analytics</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/ga4-demographic-details.jpeg" medium="image">
<media:title type="html">The demographic details under User attributes in Google Analytics</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/ga4-audiences.jpeg" medium="image">
<media:title type="html">The audiences report in Google Analytics showing new users, sessions, views per session and total revenue</media:title>
</media:content>
<media:content url="https://en-blog.files.wordpress.com/2025/04/google-search-console-report-google-analytics.jpg" medium="image">
<media:title type="html">The Google Search Console report on Google Analytics showing landing page, search clicks, and more</media:title>
</media:content>
</item>
</channel>
</rss>
If you would like to create a banner that links to this page (i.e. this validation result), do the following:
Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src
attribute if necessary):
If you would like to create a text link instead, here is the URL you can use:
http://www.feedvalidator.org/check.cgi?url=https%3A//wordpress.com/blog/feed/