{"id":4793,"date":"2022-09-27T07:37:00","date_gmt":"2022-09-27T13:37:00","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4793"},"modified":"2023-04-14T09:57:41","modified_gmt":"2023-04-14T15:57:41","slug":"semantic-patterns","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/semantic-patterns\/","title":{"rendered":"What are Semantic Patterns in WordPress?"},"content":{"rendered":"\n<p>Welcome to the third and final article in our series on advanced block patterns in WordPress. Throughout this series, we uncovered the nuances of pattern development and how you can take your theme or client project to the next level.<\/p>\n\n\n\n<p>In part one, we discussed ways to improve user workflow with contextual patterns. We then learned how to help users build pages quickly and consistently with page creation patterns in part two. This article will dive into the Site Editor and use &#8220;semantic&#8221; patterns to provide layout options for header and footer template parts. Let&#8217;s dive in.<\/p>\n\n\n\n<p><em>Feel free to watch the video version of this article or continue reading. <\/em><\/p>\n\n\n\n<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\">\n<iframe loading=\"lazy\" title=\"What are Semantic Patterns in WordPress?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-6uU8knHrCM?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>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-2c003d4a wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#overview\">Overview<\/a><\/li>\n\n\n\n<li><a href=\"#registration\">Pattern Registration<\/a> <\/li>\n\n\n\n<li><span style=\"color: var(--wp--preset--color--mirage); font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--regular);\"><a href=\"#pattern-example\">Pattern Example<\/a><\/span><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Every website needs a header and footer, but why not include multiple options for users to choose from? The experimental block theme <a href=\"https:\/\/frostwp.com\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">Frost<\/a>, developed by the WP Engine Developer Relations team, does just that. The theme includes multiple headers and footer patterns, which are also all &#8220;semantic.&#8221; <\/p>\n\n\n\n<p>Semantic patterns are standard block patterns that are designed explicitly for block themes and are also assigned to the Template Part block. This block type serves as a container and displays headers, footers, and other content areas used repeatedly throughout a website. <\/p>\n\n\n\n<p>Each template part has a designated template part <strong>area<\/strong>. A template part can have one of three areas: uncategorized (general), header, and footer. WordPress may add additional areas in the future, but for now, we can only use semantic patterns in header or footer template parts.<\/p>\n\n\n\n<p>When a pattern is designated as semantic, it will appear as an option to choose from when creating template parts. The example below shows the selection modal when creating a footer template part. Don&#8217;t need a pattern? You can always choose &#8220;Start blank&#8221; to build a template part from scratch. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1389\" height=\"799\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-footer-compressed.gif\" alt=\"\" class=\"wp-image-4822\"\/><\/figure>\n\n\n\n<p>Semantic blocks also show up when replacing an existing template part. Below, we can see this in action. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1389\" height=\"799\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-frost-compressed.gif\" alt=\"The semantic pattern modal when replacing a footer template part in the Frost theme.\" class=\"wp-image-4821\"\/><figcaption class=\"wp-element-caption\">The semantic pattern modal when replacing a footer template part in the Frost theme.<\/figcaption><\/figure>\n\n\n\n<p>It&#8217;s important to note that semantic patterns can be inserted into posts and pages just like any other typical pattern. Yet when working with template parts in the Site Editor, they also provide a quick and easy way for users to personalize the theme&#8217;s default header and footer with a more appealing design. <\/p>\n\n\n\n<p>Now that we have seen what semantic patterns can do, we must discuss how to register this type of pattern. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"registration\">Pattern Registration<\/h2>\n\n\n\n<p>This article does not cover all the nuances of pattern registration, only those specific to semantic patterns. For general information, you can learn more by visiting the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook<\/a>. <\/p>\n\n\n\n<p>Registering a semantic pattern is virtually the same as any standard block pattern. You just need to apply an additional property. However, there are two ways of registering patterns in WordPress, and the implementation of pattern properties is slightly different depending on your method.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Function Method<\/h3>\n\n\n\n<p>The first method uses the function <code>register_block_pattern()<\/code> and can be applied in both themes and plugins. To build a semantic pattern, you must include the property <code>blockTypes<\/code>, which accepts an array of block names. As discussed in the <a href=\"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/\">contextual patterns<\/a> article, the <code>blockTypes<\/code> property tells WordPress that the pattern is associated with the provided blocks. <\/p>\n\n\n\n<p>In the case of semantic patterns, in addition to associating them with the Template Part block, we also need to assign each pattern to a specific template part area, either <code>header<\/code> or <code>footer<\/code>. This means we must append the block name with the area resulting in either <code>core\/template-part\/header<\/code> or <code>core\/template-part\/footer<\/code>. Below is an example implementation of a header semantic pattern. <\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>functions.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>register_block_pattern(\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-string\">'example-theme\/semantic-pattern'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-string\">'title'<\/span>      =&gt; __( <span class=\"hljs-string\">'A semantic pattern.'<\/span>, <span class=\"hljs-string\">'example-theme'<\/span> ),\n<\/span><\/span><mark class='shcb-loc'><span>        <span class=\"hljs-string\">'blockTypes'<\/span> =&gt; <span class=\"hljs-keyword\">array<\/span>( <span class=\"hljs-string\">'core\/template-part\/header'<\/span> ),\n<\/span><\/mark><span class='shcb-loc'><span>        <span class=\"hljs-string\">'content'<\/span>    =&gt; <span class=\"hljs-string\">'&lt;!-- Insert Pattern Content --&gt;'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    )\n<\/span><\/span><span class='shcb-loc'><span>);\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Folder Method<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/02\/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0\/\" target=\"_blank\" rel=\"noreferrer noopener\">second method<\/a> is explicitly designed for block themes where patterns can be automatically registered by WordPress if placed in the <code>patterns\/<\/code> folder in a theme&#8217;s root directory. With this implementation, you represent each pattern by its own PHP file, and the property syntax is slightly different.<\/p>\n\n\n\n<p>Instead of an array structure, we use the property <code>Block Types<\/code> and a comma-separated list of block names that the pattern is used with, for example, <code>core\/paragraph, core\/header<\/code>. Again, for semantic patterns, we only need to specify <code>core\/template-part\/header<\/code> or <code>core\/template-part\/footer<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>patterns\/semantic-pattern.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\">\/**<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Title: A semantic pattern.<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Slug: example-theme\/semantic-pattern<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Block Styles: core\/template-part\/header<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> *\/<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- Insert Pattern Content --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Both methods of pattern registration are valid, but we will use the folder method for the remainder of this article. We might as well let WordPress handle the registration for us.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pattern-example\">Pattern Example<\/h2>\n\n\n\n<p>The Frost theme includes two header patterns and ten footer patterns. Now that we know how semantic patterns are registered let&#8217;s build a couple more headers. One header will incorporate the Social Icons block, and the second will feature the Search block. <\/p>\n\n\n\n<p>After some design work in the Editor, we have created two relatively simple headers. Both have a blue background using the &#8220;secondary&#8221; color in the Frost color palette. The blocks used to build each layout are presented in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1299\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom.png\" alt=\"\" class=\"wp-image-4814\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom.png 1920w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom-300x203.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom-1024x693.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom-768x520.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom-1536x1039.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Two new semantic patterns for the header template part area in Frost.<\/figcaption><\/figure>\n\n\n\n<p>After designing our patterns in the Editor, we need to create the pattern files in the Frost theme folder and copy over the block content. Each pattern file will be located in the <code>patterns\/<\/code> folder. The folder structure will look something like this. <\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>frost\/<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">frost<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">assets<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502   \u2514\u2500\u2500 ...\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">parts<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502   \u2514\u2500\u2500 ...\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">patterns<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502   \u251c\u2500\u2500 ...\n<\/span><\/span><mark class='shcb-loc'><span>\u2502   \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">header-blue-search<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\u2502   \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">header-blue-social<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>\u2502   \u2514\u2500\u2500 ...\n<\/span><\/span><span class='shcb-loc'><span>\u2514\u2500\u2500 ...\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Both patterns must be assigned to the header template part area. Therefore, we apply the <code>core\/template-part\/header<\/code> property to each. Note the <code>Block Types<\/code> property in the example below.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code><strong>frost\/patterns\/header-blue-search<\/strong>.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\">\/**<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Title: Blue Header with Search Field<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Slug: frost\/header-blue-search<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Categories: frost-header<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Block Types: core\/template-part\/header<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Viewport Width: 1280<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> *\/<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- Blue Header Pattern Content --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>When a user goes to replace the header Template Part block in the Site Editor, the new patterns appear as choices in the modal. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1389\" height=\"799\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-custom-compressed.gif\" alt=\"\" class=\"wp-image-4815\"\/><figcaption class=\"wp-element-caption\">Replacing the existing header with our new semantic pattern.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Semantic patterns are quite simplistic. They allow users to easily add patterns to header and footer template parts and replace the design of existing template parts\u2014just another way to improve user workflow in WordPress. If you have designed a theme with patterns but have not employed this technique, consider if any can become semantic patterns. <\/p>\n\n\n\n<p>That&#8217;s all for now. External links referenced in this article and other related resources are listed below. In case you missed the previous articles in the series, make sure to check out <a href=\"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/\">contextual patterns<\/a> and <a href=\"https:\/\/wpengine.com\/builders\/page-creation-patterns\/\">page creation patterns<\/a>. <\/p>\n\n\n\n<p>If you have questions or comments on building patterns in WordPress, feel free to reach out on Twitter <a href=\"https:\/\/twitter.com\/nickmdiego\" target=\"_blank\" rel=\"noreferrer noopener\">@nickmdiego<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-2c003d4a wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<p class=\"has-large-font-size\"><strong><strong>External Resources<\/strong><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/frostwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Frost Website<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.tv\/2022\/06\/13\/nick-diego-builder-basics-everything-you-need-to-know-about-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress TV video on block patterns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/02\/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0\/\" target=\"_blank\" rel=\"noreferrer noopener\">Developer Note for pattern registration in block themes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook article on patterns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook article on block themes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_pattern\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Code Reference on pattern registration<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Create custom block patterns for header and footer template parts.<\/p>\n","protected":false},"author":5,"featured_media":4809,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What are Semantic Patterns in WordPress?<\/title>\n<meta name=\"description\" content=\"Learn how to build &quot;semantic&quot; patterns in part three of our three-part series on advanced patterns in WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/semantic-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are Semantic Patterns in WordPress?\" \/>\n<meta property=\"og:description\" content=\"Learn how to build &quot;semantic&quot; patterns in part three of our three-part series on advanced patterns in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/semantic-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-27T13:37:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T15:57:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-opengraph.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nick Diego\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to build &quot;semantic&quot; patterns in part three of our three-part series on advanced patterns in WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-opengraph.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@nickmdiego\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Diego\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/\"},\"author\":{\"name\":\"Nick Diego\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\"},\"headline\":\"What are Semantic Patterns in WordPress?\",\"datePublished\":\"2022-09-27T13:37:00+00:00\",\"dateModified\":\"2023-04-14T15:57:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/\"},\"wordCount\":1075,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/semantic-pattern-featured-image-2.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/\",\"name\":\"What are Semantic Patterns in WordPress?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/semantic-pattern-featured-image-2.jpg\",\"datePublished\":\"2022-09-27T13:37:00+00:00\",\"dateModified\":\"2023-04-14T15:57:41+00:00\",\"description\":\"Learn how to build \\\"semantic\\\" patterns in part three of our three-part series on advanced patterns in WordPress.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/semantic-pattern-featured-image-2.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/semantic-pattern-featured-image-2.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/semantic-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are Semantic Patterns in WordPress?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\",\"name\":\"Nick Diego\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"caption\":\"Nick Diego\"},\"description\":\"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/nickmdiego\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/nick-diego\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are Semantic Patterns in WordPress?","description":"Learn how to build \"semantic\" patterns in part three of our three-part series on advanced patterns in WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/semantic-patterns\/","og_locale":"en_US","og_type":"article","og_title":"What are Semantic Patterns in WordPress?","og_description":"Learn how to build \"semantic\" patterns in part three of our three-part series on advanced patterns in WordPress.","og_url":"https:\/\/wpengine.com\/builders\/semantic-patterns\/","og_site_name":"Builders","article_published_time":"2022-09-27T13:37:00+00:00","article_modified_time":"2023-04-14T15:57:41+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-opengraph.jpg","type":"image\/jpeg"}],"author":"Nick Diego","twitter_card":"summary_large_image","twitter_description":"Learn how to build \"semantic\" patterns in part three of our three-part series on advanced patterns in WordPress.","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-patterns-opengraph.jpg","twitter_creator":"@nickmdiego","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Nick Diego","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/"},"author":{"name":"Nick Diego","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b"},"headline":"What are Semantic Patterns in WordPress?","datePublished":"2022-09-27T13:37:00+00:00","dateModified":"2023-04-14T15:57:41+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/"},"wordCount":1075,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-pattern-featured-image-2.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/semantic-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/","url":"https:\/\/wpengine.com\/builders\/semantic-patterns\/","name":"What are Semantic Patterns in WordPress?","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-pattern-featured-image-2.jpg","datePublished":"2022-09-27T13:37:00+00:00","dateModified":"2023-04-14T15:57:41+00:00","description":"Learn how to build \"semantic\" patterns in part three of our three-part series on advanced patterns in WordPress.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/semantic-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-pattern-featured-image-2.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/semantic-pattern-featured-image-2.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/semantic-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"What are Semantic Patterns in WordPress?"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b","name":"Nick Diego","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","caption":"Nick Diego"},"description":"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.","sameAs":["https:\/\/x.com\/nickmdiego"],"url":"https:\/\/wpengine.com\/builders\/author\/nick-diego\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=4793"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4809"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=4793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=4793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=4793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}