{"id":103619,"date":"2024-02-06T10:47:58","date_gmt":"2024-02-06T10:47:58","guid":{"rendered":"\/tutorials\/?p=103619"},"modified":"2026-03-10T10:05:19","modified_gmt":"2026-03-10T10:05:19","slug":"wordpress-twenty-twenty-four-theme","status":"publish","type":"post","link":"\/my\/tutorials\/wordpress-twenty-twenty-four-theme","title":{"rendered":"Exploring Twenty Twenty-Four: A WordPress Theme for Any Website"},"content":{"rendered":"<p>Every year, the WordPress Community, led by the Automatic theme team, releases a new default theme showcasing the features of the latest WordPress version.&nbsp;<\/p><p>This was the case in November 2023 when WordPress 6.4 came with Twenty Twenty-Four, which many felt was the best default theme ever released by the team.<\/p><p>As with all recent default WordPress themes, Twenty Twenty-Four is a block theme that provides the ability to create every element of a website with blocks.<\/p><p>Twenty Twenty-Four lets you make a wide variety of websites, limited only by your imagination. However, its strength is in creating three types of sites, which I will explore in detail later on.&nbsp;<\/p><p>Let&rsquo;s have a look at what makes Twenty Twenty-Four special.&nbsp;<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-patterns\">Patterns<\/h2><p>A <a href=\"\/my\/tutorials\/wordpress-block-patterns\">WordPress pattern<\/a> is a curated collection of logically oriented blocks that suggest the page layout. Any element in a pattern can be changed without any coding. Therefore, these patterns provide an easy way to begin your design process, ensure consistency, and speed up your workflow.&nbsp;&nbsp;<\/p><p>Twenty Twenty-Four comes packed with more patterns than any other previously released default theme. They include full and partial page patterns, like:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/gallery-page-pattern.png\"><img decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/gallery-page-pattern.png\" alt=\"Block patterns available on the Twenty Twenty-Four theme\" class=\"wp-image-103620\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/gallery-page-pattern.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/gallery-page-pattern-300x160.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/gallery-page-pattern-150x80.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/gallery-page-pattern-768x410.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>The theme&rsquo;s 37 patterns are organized into these categories:<\/p><ul class=\"wp-block-list\">\n<li>About&nbsp;<\/li>\n\n\n\n<li>Banner<\/li>\n\n\n\n<li>Call to Action<\/li>\n\n\n\n<li>Featured&nbsp;<\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>Gallery<\/li>\n\n\n\n<li>Pages<\/li>\n\n\n\n<li>Portfolio<\/li>\n\n\n\n<li>Posts<\/li>\n\n\n\n<li>Services<\/li>\n\n\n\n<li>Team<\/li>\n\n\n\n<li>Testimonials<\/li>\n\n\n\n<li>Text<\/li>\n<\/ul><p>As with any WordPress theme, you can create custom patterns that can be used anywhere on your site.<\/p><h2 class=\"wp-block-heading\" id=\"h-style-variations\">Style Variations<\/h2><p>The theme has eight style variations, which are sets of pre-defined styles that you can modify to suit your needs.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/style-variations.png\"><img decoding=\"async\" width=\"792\" height=\"139\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/style-variations.png\" alt=\"Style variations available on the Twenty Twenty-Four\" class=\"wp-image-103626\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-variations.png 792w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-variations-300x53.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-variations-150x26.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-variations-768x135.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/a><\/figure><\/div><p>When you change the styling for your site, use any one of the variations that best match how you&rsquo;d like your site to appear. Then, customize the color, typography, and similar settings as you like.<\/p><h2 class=\"wp-block-heading\" id=\"h-fonts\">Fonts<\/h2><p>No matter which style variation you choose, you will find the following fonts waiting for you by default:<\/p><h3 class=\"wp-block-heading\" id=\"h-cardo\">Cardo<\/h3><p>Cardo is a font that represents a bridge between traditional and modern typefaces. It has a solid, time-honored, and scholarly appearance.&nbsp;<\/p><p><strong>Main Features<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Serif design&nbsp;<\/li>\n\n\n\n<li>OpenType<\/li>\n\n\n\n<li>Extended character set<\/li>\n\n\n\n<li>Historical inspiration<\/li>\n\n\n\n<li>Open source<\/li>\n<\/ul><p>Because of these properties, Cardo is ideal for use as web page headings for all devices.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-inter\">Inter<\/h3><p>The Inter font was specifically designed to be highly legible and visually pleasing on both desktop and mobile devices, making it an excellent choice for web design.<\/p><p><strong>Main Features&nbsp;<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Multiple weights and styles<\/li>\n\n\n\n<li>Versatility<\/li>\n\n\n\n<li>Modern design<\/li>\n\n\n\n<li>Localization-friendly<\/li>\n<\/ul><p>This sans serif font is ideal for paragraphs, lists, links, or any type of body copy.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/sample-page.png\"><img decoding=\"async\" width=\"1024\" height=\"346\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/sample-page.png\" alt=\"An example of sans serif font used for a paragraph\" class=\"wp-image-103627\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/sample-page.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/sample-page-300x101.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/sample-page-150x51.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/sample-page-768x259.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>In the above example, &ldquo;Sample Page&rdquo; is set to Cardo with the body copy using Inter.<\/p><h3 class=\"wp-block-heading\" id=\"h-system-sans-serif-and-system-serif-nbsp\">System Sans Serif and System Serif&nbsp;<\/h3><p>You also have the option to set your fonts to either a system default sans serif or serif font. Which font is used will depend upon the user&rsquo;s operating system. For example, many Apple devices use Roboto as the default sans-serif font.&nbsp;<\/p><p>What about using fonts not included in Twenty Twenty-Four? You can still bring in other fonts into your WordPress projects, such as Google Fonts or Adobe Fonts.<\/p><p>By late March 2024, with the release of WordPress 6.5, selecting fonts from the WordPress Font Library will be as easy as choosing an image from the Media Library.<\/p><h3 class=\"wp-block-heading\" id=\"h-setting-fonts\">Setting Fonts<\/h3><p>As has been the case since the adoption of the <a href=\"\/my\/tutorials\/wordpress-blocks\">Gutenberg block<\/a> system, fonts can be set across the entire site or on a per-block basis.&nbsp;<\/p><p><strong>Global Fonts<\/strong><\/p><p>The Style Book, part of the Design section within the Site Editor, provides an ideal way to <a href=\"\/my\/tutorials\/how-to-add-custom-fonts-to-wordpress\">change your font<\/a> selections from the pre-set selections found within every Style Variation.&nbsp;<\/p><p>Fonts for Text, Links, Headings, Captions, and Buttons are set using these choices in the right sidebar.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/style-book.png\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/style-book.png\" alt=\"The style book panel, shoring the typography options\" class=\"wp-image-103628\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-book.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-book-300x169.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-book-150x84.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/style-book-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p><strong>Per Block<\/strong><\/p><p>You can change a font for any single block to override Global Style settings. Here, the Heading is set to Cardo by default. To change it to Inter, click the three dots button next to Typography in the right sidebar to open a view that gives you the option to set the Font Family.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/font-family.png\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/font-family.png\" alt=\"Opening the font family in the block editor\" class=\"wp-image-103629\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/font-family.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/font-family-300x169.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/font-family-150x84.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/font-family-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Then, click outside of the Typography window but inside the right sidebar (it&rsquo;s tricky) to display font options. Here, I make the change to Inter.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/inter-font.png\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/inter-font.png\" alt=\"Selecting Inter font in the block editor\" class=\"wp-image-103630\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/inter-font.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/inter-font-300x169.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/inter-font-150x84.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/inter-font-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-templates\">Templates<\/h2><p>The theme comes with these eleven templates from which any type of page can be built:<\/p><h3 class=\"wp-block-heading\" id=\"h-templates-for-blogging\">Templates for Blogging<\/h3><ul class=\"wp-block-list\">\n<li>Singe Posts<\/li>\n\n\n\n<li>Blog Home&nbsp;<\/li>\n\n\n\n<li>* Post with Sidebar<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-templates-for-pages\">Templates for Pages<\/h3><ul class=\"wp-block-list\">\n<li>Pages<\/li>\n\n\n\n<li>* Page with Sidebar<\/li>\n\n\n\n<li>Page without Title&nbsp;<\/li>\n\n\n\n<li>* Page with Wide Image<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-templates-for-specialty-pages\">Templates for Specialty Pages<\/h3><ul class=\"wp-block-list\">\n<li>Index<\/li>\n\n\n\n<li>404 Page<\/li>\n\n\n\n<li>Search Page<\/li>\n\n\n\n<li>Archive Page<\/li>\n<\/ul><p>(* = unique to TwentyTwenyFour)<\/p><h3 class=\"wp-block-heading\" id=\"h-working-with-the-page-with-wide-image-template\">Working With the Page With Wide Image Template<\/h3><p>Here&rsquo;s an example of how I used one of Twenty Twenty-Four&rsquo;s unique templates to fashion two pages.&nbsp;<\/p><p>As I preferred to have the featured image stretch across the width of the screen, I changed the width from Normal To Full Screen. This was the only change I made to this template.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-with-wide-image.png\"><img decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-with-wide-image.png\" alt=\"The page with wide image template in the block editor\" class=\"wp-image-103631\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-with-wide-image.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-with-wide-image-300x180.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-with-wide-image-150x90.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-with-wide-image-768x461.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>The essence of the template is a group block sandwiched between header and footer blocks. (For clarity, I removed the default header and footer blocks and replaced them with my placeholder blocks).<\/p><p>Within the group block are the featured image, title, and content block placeholders. These will be populated when I use the template in the two examples below.&nbsp;<\/p><p>To use the template, I changed the default page template to Page With Wide Image and then added my feature image.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/pattern-with-wide-image-editor.png\"><img decoding=\"async\" width=\"1024\" height=\"877\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/pattern-with-wide-image-editor.png\" alt=\"Changing the template for a page to the page with wide image\" class=\"wp-image-103632\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-with-wide-image-editor.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-with-wide-image-editor-300x257.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-with-wide-image-editor-150x129.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-with-wide-image-editor-768x658.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>The result is this page.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/pattern-wide-image-rainbow.png\"><img decoding=\"async\" width=\"740\" height=\"1200\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/pattern-wide-image-rainbow.png\" alt=\"An example of a page with the page with wide image template\" class=\"wp-image-103633\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-wide-image-rainbow.png 740w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-wide-image-rainbow-185x300.png 185w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-wide-image-rainbow-631x1024.png 631w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/pattern-wide-image-rainbow-92x150.png 92w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/a><\/figure><\/div><p>Using the same template, I made this page.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-wide-image.png\"><img decoding=\"async\" width=\"767\" height=\"1200\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-wide-image.png\" alt=\"An example of a page with the page with wide image template\" class=\"wp-image-103634\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-wide-image.png 767w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-wide-image-192x300.png 192w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-wide-image-655x1024.png 655w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-wide-image-96x150.png 96w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/a><\/figure><\/div><p>What is the difference between a pattern and a template? Patterns are collections of pre-designed parts of pages that you can easily adapt for your use. Think of patterns as design starters. A template sets the layout of a given page. Any page you see on a WordPress site is set by a single template.<\/p><p>Patterns are used within a template to generate a web page.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-3-examples-of-using-patterns-to-build-custom-sites\">3 Examples of Using Patterns to Build Custom Sites<\/h2><p>In all three of the following examples, I chose the default style variation.<\/p><h3 class=\"wp-block-heading\" id=\"h-using-a-page-pattern-to-build-a-base-page-for-a-business\">Using a Page Pattern to Build a Base Page for a Business<\/h3><p>Most websites use a generic pattern that is repeatedly used for typical pages. A good way to start is by choosing a Page Pattern and then modifying it for a design that can be used throughout the site.&nbsp;<\/p><p>Here, I start with a Page pattern that I will use to build a business site. This pattern features&nbsp;six horizontal sections (Group blocks), some of which have two or more columns within a section.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern.png\"><img decoding=\"async\" width=\"380\" height=\"1024\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern-380x1024.png\" alt=\"A pattern with six horizontal sections \" class=\"wp-image-103635\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-380x1024.png 380w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-111x300.png 111w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-56x150.png 56w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern.png 445w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/a><\/figure><\/div><p>This being a base (all-purpose) page by necessity, it needs to be barebones as it will be used for these interior pages and more:<\/p><ul class=\"wp-block-list\">\n<li>About, Services, Testimonial, Team, Landing, and Contact pages<\/li>\n\n\n\n<li>Search Results page<\/li>\n\n\n\n<li>404 page<\/li>\n<\/ul><p>Here&rsquo;s how I created this minimalist base pattern from which other blocks can be added as needed for different pages.<\/p><ol class=\"wp-block-list\">\n<li>Removed all horizontal (row) sections except for the third one. Then, I removed the two columns within, leaving me an empty, gray background group.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern-in-progress.png\"><img decoding=\"async\" width=\"1024\" height=\"426\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern-in-progress.png\" alt=\"Creating a pattern in the block editor\" class=\"wp-image-103636\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-in-progress.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-in-progress-300x125.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-in-progress-150x62.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-in-progress-768x320.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>I renamed the group Outer Container, added a group block within that, and renamed it Inner Container set to a white background. Inside that, I added two paragraphs of Lorem text as placeholders. Lastly, I removed the columns block as it was not needed.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern-text.png\"><img decoding=\"async\" width=\"1024\" height=\"844\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/page-pattern-text.png\" alt=\"Creating a pattern in the block editor\" class=\"wp-image-103637\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-text.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-text-300x247.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-text-150x124.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/page-pattern-text-768x633.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>As for the widths and heights of the Containers, here are the important settings:<\/li>\n<\/ol><p>Because some of the settings of the outer and inner containers are not default, here they are:<\/p><p><strong>Outer Container<\/strong><\/p><ol class=\"wp-block-list\">\n<li>The inner container inherits the width of this container.<\/li>\n\n\n\n<li>The left and right padding slider is set to 3 positions from the left.&nbsp;<\/li>\n<\/ol><p><strong>Inner Container&nbsp;<\/strong><\/p><p>The left and right padding is set to 10%.<\/p><p>The result is this multi-purpose pattern that I renamed &ldquo;Base Pattern&rdquo;.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/base-pattern.png\"><img decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/base-pattern.png\" alt=\"The end result of the custom pattern, utilizing inner and outer containers\" class=\"wp-image-103638\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/base-pattern.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/base-pattern-300x145.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/base-pattern-150x73.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/base-pattern-768x372.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Could I have dispensed with creating this simple pattern from a more elaborate pattern and just started from scratch? Yes, so let&rsquo;s look at this next and more challenging example where I used image placeholders to make a <a href=\"\/my\/tutorials\/wordpress-gallery\">gallery<\/a> pattern.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-using-placeholders-to-build-a-portfolio-site\">Using Placeholders to Build a Portfolio Site<\/h3><p>One of the new features in WordPress 6.4 is the use of image placeholders, which fully utilize the ability to create patterns.<\/p><p>By design, Twenty Twenty-Four has seven image placeholder patterns onboard, but as you will see, you are not limited to those patterns.<\/p><p>Here, I started from scratch using a blank page to build a Gallery Pattern that I can use anywhere on my site.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-gallery.png\"><img decoding=\"async\" width=\"745\" height=\"1024\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-gallery-745x1024.png\" alt=\"A custom gallery pattern, showing image placeholders used to indicate spaces\" class=\"wp-image-103639\" style=\"width:685px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-gallery-745x1024.png 745w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-gallery-218x300.png 218w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-gallery-109x150.png 109w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-gallery-768x1056.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-gallery.png 873w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><\/a><\/figure><\/div><p>How is the placeholder created? <a href=\"\/my\/tutorials\/how-to-add-images-wordpress\">Insert the image block<\/a> where you plan on having an image, but don&rsquo;t add the image like you normally would.&nbsp;<\/p><p>The diagonal lines represent where images can be placed; hence, those are the placeholders. I also added areas for text descriptions adjacent to each image.&nbsp;<\/p><p>In the image settings (right sidebar), you have these options to set the dimensions of an image.&nbsp;<\/p><ul class=\"wp-block-list\">\n<li>Original Size<\/li>\n\n\n\n<li>Square 1:1<\/li>\n\n\n\n<li>Standard 4:3<\/li>\n\n\n\n<li>Portrait 3:4<\/li>\n\n\n\n<li>Classic 3:2<\/li>\n\n\n\n<li>Classic Portrait 2:3<\/li>\n\n\n\n<li>Wide 16:9<\/li>\n\n\n\n<li>Tall 9:16<\/li>\n<\/ul><p>The most important setting is when you save the pattern. Here is the setting I used. Note that I used two categories where my pattern will be stored and that the Sync option is toggled off.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-pattern-dialogue.png\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-pattern-dialogue.png\" alt=\"The pop up to create a pattern in the block editor, showing the synced toggle disabled and selected categories\" class=\"wp-image-103640\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-pattern-dialogue.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-pattern-dialogue-300x169.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-pattern-dialogue-150x84.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-pattern-dialogue-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>With my pattern saved, I then used it to build these two Gallery pages. In the Inserter, I selected Patterns and found my Pattern in the My Patterns Category as well as the Gallery and Portfolio categories.&nbsp;<\/p><figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/2-row-gallery.png\"><img decoding=\"async\" width=\"801\" height=\"1200\" data-id=\"103641\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/2-row-gallery.png\" alt=\"The first example of the gallery pages\" class=\"wp-image-103641\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-row-gallery.png 801w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-row-gallery-200x300.png 200w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-row-gallery-683x1024.png 683w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-row-gallery-100x150.png 100w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-row-gallery-768x1151.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/2-column-gallery.png\"><img decoding=\"async\" width=\"801\" height=\"1200\" data-id=\"103642\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/2-column-gallery.png\" alt=\"The second example of the gallery pages\" class=\"wp-image-103642\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-column-gallery.png 801w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-column-gallery-200x300.png 200w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-column-gallery-683x1024.png 683w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-column-gallery-100x150.png 100w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/2-column-gallery-768x1151.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/a><\/figure>\n<\/figure><h3 class=\"wp-block-heading\" id=\"h-building-a-blog-archive-pattern-nbsp\">Building a Blog Archive Pattern&nbsp;<\/h3><p>Not surprisingly, Twenty Twenty-Four is ideally suited for bloggers. It comes with seven patterns that can be used for the blog home (archive page).&nbsp;<\/p><p>However, I chose to create a blog archive pattern that can be used anywhere as needed.&nbsp;<\/p><p>I started from scratch in the Site Editor and created a two-column layout wrapped inside a group block. The left column contains the all-important query look block, pulling in dynamic content depending on how the pattern is used.<\/p><p>I arranged the dynamic elements of the <a href=\"\/my\/tutorials\/the-loop-wordpress\">loop<\/a> (Title, Featured Image, Date, Excerpt, and Pagination as desired). The right column includes three blocks, two of which display dyadic content (Recent Posts and Calendar).&nbsp;<\/p><p>Here is the Archive Pattern.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-archive-pattern.png\"><img decoding=\"async\" width=\"944\" height=\"1200\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/custom-archive-pattern.png\" alt=\"The custom archive pattern for blog websites\" class=\"wp-image-103643\" style=\"width:722px;height:auto\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern.png 944w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern-236x300.png 236w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern-806x1024.png 806w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern-118x150.png 118w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern-768x976.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/custom-archive-pattern-1209x1536.png 945w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><\/a><\/figure><\/div><p>Like in the previous Gallery pattern, I saved my pattern without syncing. So, I won&rsquo;t alter the original master pattern whenever I use it.<\/p><p>Using the pattern, I made this very clean and elegant blog home page.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/blog-home.png\"><img decoding=\"async\" width=\"1024\" height=\"918\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/blog-home.png\" alt=\"The example of using the custom archive pattern for the blog homepage\" class=\"wp-image-103644\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/blog-home.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/blog-home-300x269.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/blog-home-150x134.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/blog-home-768x688.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>The second time I used this pattern was for a <a href=\"\/my\/tutorials\/wordpress-category-page\">Category Archive page<\/a> that displays only posts with the &ldquo;People&rdquo; Category.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/category-people.png\"><img decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/category-people.png\" alt=\"The example of using the custom archive pattern for the people category page\" class=\"wp-image-103645\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/category-people.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/category-people-300x249.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/category-people-150x124.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/category-people-768x637.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Here, I made just a few adjustments to my design using my Archive Pattern.&nbsp;<\/p><p>When you have a design that repeats throughout your site, patterns will save you a lot of time and be fun to build.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/my\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/06\/New-WP_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Twenty Twenty-Four is a fun and flexible theme that was introduced with WordPress 6.4. While its core strength is for business, <a href=\"\/my\/tutorials\/how-to-make-an-online-portfolio\">portfolio<\/a>, and blogging sites, it can be used for any website.&nbsp;<\/p><p>You don&rsquo;t need to use a block theme such as Twenty Twenty-Four to make patterns.&nbsp; For my three examples, the gallery and archive patterns were made within the Site Editor. For the basic page pattern, I used the Page Editor.&nbsp;<\/p><p>In that case, I used the three dots option in the Inserter like this:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/create-pattern.png\"><img decoding=\"async\" width=\"1024\" height=\"394\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/create-pattern.png\" alt='The block options menu in the block editor, with the \"Create pattern\" option highlighted' class=\"wp-image-103646\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/create-pattern.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/create-pattern-300x115.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/create-pattern-150x58.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2024\/02\/create-pattern-768x295.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Every year, the WordPress Community, led by the Automatic theme team, releases a new default theme showcasing the features of the latest WordPress version.&nbsp; This was the case in November 2023 when WordPress 6.4 came with Twenty Twenty-Four, which many felt was the best default theme ever released by the team. As with all recent [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/my\/tutorials\/wordpress-twenty-twenty-four-theme\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":431,"featured_media":91093,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Twenty Twenty-Four: A WordPress Theme for Any Website","rank_math_description":"Twenty Twenty-Four is one of WordPress default block themes. Read this article to discover its flexibility and design possibilities.","rank_math_focus_keyword":"wordpress twenty twenty four","footnotes":""},"categories":[1],"tags":[],"class_list":["post-103619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/103619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/users\/431"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/comments?post=103619"}],"version-history":[{"count":12,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/103619\/revisions"}],"predecessor-version":[{"id":123062,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/103619\/revisions\/123062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/media\/91093"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/media?parent=103619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/categories?post=103619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/tags?post=103619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}