{"id":1845,"date":"2024-01-24T07:05:26","date_gmt":"2024-01-24T07:05:26","guid":{"rendered":"https:\/\/thoth.dk\/?p=1845"},"modified":"2024-09-10T18:00:34","modified_gmt":"2024-09-10T18:00:34","slug":"how-to-create-a-custom-wordpress-block-theme","status":"publish","type":"post","link":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/","title":{"rendered":"How to Create a Custom WordPress Block Theme"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-82936891 wp-block-group-is-layout-flex\"><div class=\"is-default-size is-style-rounded is-style-rounded--1 wp-block-site-logo\"><a href=\"https:\/\/thoth.dk\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"926\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2026\/03\/thoth-skrivekunstens-opfinder.png\" class=\"custom-logo\" alt=\"Logoet p\u00e5 et site om WordPress skal selvf\u00f8lgelig v\u00e6re den \u00e6gyptiske gud Thoth, der blandt andet opfandt den magiske skrivekunst. Tegning: CoPilot.\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2026\/03\/thoth-skrivekunstens-opfinder.png 920w, https:\/\/thoth.dk\/wp-content\/uploads\/2026\/03\/thoth-skrivekunstens-opfinder-298x300.png 298w, https:\/\/thoth.dk\/wp-content\/uploads\/2026\/03\/thoth-skrivekunstens-opfinder-150x150.png 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2026\/03\/thoth-skrivekunstens-opfinder-768x773.png 768w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/a><\/div>\n\n<h2 class=\"has-text-align-center wp-block-post-title\">How to Create a Custom WordPress Block Theme<\/h2><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center is-image-fill\" style=\"grid-template-columns:auto 30%\"><div class=\"wp-block-media-text__content\">\n<p class=\"has-contrast-2-color has-text-color has-link-color has-large-font-size wp-elements-58c5585184cd30cbefe67ff98d0f75bc wp-block-paragraph\">In this step by step tutorial you will develop a block based WordPress theme from scratch!<\/p>\n<\/div><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04.jpeg);background-position:97% 50%\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04.jpeg\" alt=\"\" class=\"wp-image-710 size-full\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04-150x150.jpeg 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure><\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Why create your own theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>There are more than 6000 themes for WordPress, why should you then attempt to make your own?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As a Multimedia Designer you must be able to develop themes in WordPress. <\/li>\n\n\n\n<li>When you know the code, you can modify anything.<\/li>\n\n\n\n<li>You are not caught in the nasty <em>&#8220;free-but-in-the-PRO-version-you-can<\/em>&#8221; trap.<sup data-fn=\"70462f4c-b304-4360-9632-2cbd28055984\" class=\"fn\"><a href=\"#70462f4c-b304-4360-9632-2cbd28055984\" id=\"70462f4c-b304-4360-9632-2cbd28055984-link\">1<\/a><\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1) Create the theme via a theme generator or boiler plate<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This will give you a fast track devolopment, since most of the files are ready. I recommend <em>Carolina Nymarks<\/em> excellent Block Theme Generator. Click the button below to get started. If this is your first time, use the <em>basic theme<\/em>. It is a very good starting point.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/fullsiteediting.com\/block-theme-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\"><i class=\"fas fa-gear\"><\/i>  Block Theme Generator<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial you will learn the basics of block theme creation in WordPress, but if you want to study the subject in depth Carolina Nymark&#8217;s tutorials and documentation on <a href=\"https:\/\/fullsiteediting.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress full site editing<\/a> is among the best sources about block theme development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can install the theme by the zip-file. This will create a directory in your WordPress installation:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>WORDPRESS\/wp_content\/themes\/<strong>YOUR-THEME-HERE<\/strong>\/<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Unzip<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">As soon as the zip is downloaded, unzip it somewhere convenient. Open the directory in Visual Studio Code (or another editor) and have a look at the files. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Open: style.css<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You will not see a lot of CSS here. There are some comments. They will tell WordPress the name of your theme, and give the texts for the descriptions that you see in the Dashboard &gt; Appearance &gt; Themes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2) Add a blank template for your design experiments<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In your favorite editor, say Atom, Visual Studio Code or whatever, create a file named <strong>blank.html <\/strong>with this markup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- wp:post-content \/--&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now save <strong>blank.html<\/strong> and upload the file to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(theme)\/templates\/blank.html<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you want a page with no design whatsoever you can asign the blank template to the page. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now you know how to add tempates to a block theme.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">theme.json<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">As a web designer you might expect that the CSS styles should be found in <strong>style.css<\/strong>. But in a block theme most styles are defined in the more advanced theme.json file. <\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-image-fill has-accent-background-color has-background\" style=\"grid-template-columns:auto 34%\"><div class=\"wp-block-media-text__content\">\n<p class=\"has-text-align-center has-large-font-size wp-block-paragraph\"><i class=\"fas fa-skull-crossbones\"><\/i> Bugs Warning!<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>In JSON it is sooo easy to make errors.<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><em>&#8211; So make sure to have a back up of your theme.json.<\/em><br>&#8211; Edit your code in e.g. VSC or Atom.<br>&#8211; Bugs will cause weird behaviors in the theme.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn.jpg);background-position:12% 42%\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"1300\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn.jpg\" alt=\"Staghorn beetle drawing, bug vintage\" class=\"wp-image-1877 size-full\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn.jpg 1300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn-300x300.jpg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn-1024x1024.jpg 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn-150x150.jpg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3Ni0wNDEuanBn-768x768.jpg 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the following steps we will add colors, gradients and even web fonts and also use them to style some of the blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s open <strong>theme.json<\/strong> in our editor and begin with some colors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3) Colors<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">More than often designers choose five or more colors for their design. You&#8217;ll probably know several color pickers, like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/duckduckgo.com\/?q=color+picker&amp;atb=v314-1&amp;ia=answer\" target=\"_blank\" rel=\"noreferrer noopener\">Color Picker<\/a> (DuckDuckGo)<\/li>\n\n\n\n<li><a href=\"https:\/\/color.adobe.com\/create\/color-wheel\" target=\"_blank\" rel=\"noreferrer noopener\">Color Adobe<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\">W3 Schools Color Picker<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">During the creation of the theme you already selected a five colors. You can select these colors in the Dashboard, for instance when you select the color of a text. You can add more colors for the Dashboard in <strong>theme.json<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64b9b7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64b9b7\" class=\"wp-block-image alignwide size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"972\" height=\"642\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/colors.png\" alt=\"\" class=\"wp-image-1863\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/colors.png 972w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/colors-300x198.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/colors-768x507.png 768w\" sizes=\"auto, (max-width: 972px) 100vw, 972px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The color picker from a theme. But we want more options!<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But you&#8217;d probably want more colors. In theme.json you can add more colors like this:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Color Palette<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In theme.json the color palette is placed under <strong>settings.color.palette<\/strong>. <\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L46-L73\" target=\"_blank\" rel=\"noreferrer noopener\">Sample code<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Since the colors are in sharp brackets, it&#8217;s an array. And you can add more colors to this palette. Let&#8217;s say that I want to add a green grass color:<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>\"palette\": &#091;\n{\n\"color\": \"#ffffff\",\n\"name\": \"Base\",\n\"slug\": \"base\"\n},\n{\n\"color\": \"#000000\",\n\"name\": \"Contrast\",\n\"slug\": \"contrast\"\n},\n{\n\"color\": \"#89CFF0\",\n\"name\": \"Primary\",\n\"slug\": \"primary\"\n}<strong>,\n{\n\"color\": \"#5DFCC1\",\n\"name\": \"Green grass\",\n\"slug\" : \"greenGrass\"\n}<\/strong>\n]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the CSS the color <strong>#5DFCC1<\/strong> will be assigned to the variable:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var(--wp--preset--color--<strong>greenGrass<\/strong>)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can use this variable in additonal CSS or when you style the blocks (see: &#8220;<em>Modify the blocks<\/em>&#8220;). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the Dashboard the color will be visible too. So you can of course also use your colors when your work in the editor.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-accent-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-5f0e0ff3 wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-right:0;padding-left:0\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Exercise<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add one or more colors to your <strong>theme.json<\/strong>.<\/li>\n\n\n\n<li>In the Stylebook: add your new color to one or more selected elements.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Duotones<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Duotone can be used to tint images with two color hues. By Duotone you can create a consistent design, where images are toned. You can add more duotone filters here:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64c1e2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64c1e2\" class=\"wp-block-image size-full wp-duotone-purple-green wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"712\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/34868121082_d6ae62f40a_b-1.jpg\" alt=\"Dragon Spacecraft Prepared to Resupply International Space Station\" class=\"wp-image-1867\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/34868121082_d6ae62f40a_b-1.jpg 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/34868121082_d6ae62f40a_b-1-300x209.jpg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/34868121082_d6ae62f40a_b-1-768x534.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.flickr.com\/photos\/28634332@N05\/34868121082\" rel=\"nofollow\">Duotone applied to an image. Source: Dragon Spacecraft Prepared to Resupply International Space Station<\/a> by <a href=\"https:\/\/www.flickr.com\/photos\/28634332@N05\" rel=\"nofollow\">NASA&#8217;s Marshall Space Flight Center<\/a> is licensed under <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/2.0\/\" rel=\"nofollow\">CC-BY-NC 2.0<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">settings.color.<strong>duotones<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>\"color\": {\n  \"duotone\": &#091;\n<strong>{\n  \"colors\": &#091;\n  \"#6c5513\",\n  \"#067f0a\"\n],\n\"name\": \"Secondary and primary\",\n\"slug\": \"secondary-primary\"\n},<\/strong>\n{\n  \"colors\": &#091;\n  \"#067f0a\",\n  \"#f0f0f0\"\n  ],\n  \"name\": \"Primary and Contrast\",\n  \"slug\": \"primary-contrast\"\n}\n]\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the sample above you see how the color pair is defined. It has a name and a slug. The name will be visible when you hover over the duotone in the WP editor. The slug can be used as a CSS variable or when you write additional CSS.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L16-L33\" target=\"_blank\" rel=\"noreferrer noopener\">theme.json : Duotone sample<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Exercise<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add one or more duotones to your <strong>theme.json<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gradients<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Duotones use a two-color array. The gradients may use many more colors. They are also added to the color section:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">settings.color.<strong>gradients<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L34-L45\" target=\"_blank\" rel=\"noreferrer noopener\">theme.json : gradients<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A single gradient may look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>{\n\"gradient\": \"linear-gradient(#067f0a 49.9%,#fff 50%)\",\n\"name\": \"Primary color to white\",\n\"slug\": \"primary-white\"\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Again the name is what you see in the editor. The slug will be used in CSS as above mentioned.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4) Fonts<\/h2>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"708\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/font.png\" alt=\"\" class=\"wp-image-1870 size-full\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/font.png 1020w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/font-300x208.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/font-768x533.png 768w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">Add fonts, and select them in the editor.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You can use several standard fonts or choose to add web fonts from files. Fontfamilies are added here:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">settings.typografy.<strong>fontfamilies<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See the sample here:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L91-L107\" target=\"_blank\" rel=\"noreferrer noopener\">theme.json : fontfamilies<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In this way you can add standard web fonts.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>{\n\"fontFamily\": \"\\\"Times New Roman\\\",\\\"New York\\\",Times,\\\"Noto Serif\\\",serif\",\n\"name\": \"Serif\",\n\"slug\": \"serif\"\n},<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In additional CSS you can then use the font via the slug:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var( --wp--preset--font-family--primary )\n<\/pre>\n\n\n\n<div class=\"wp-block-group alignwide has-accent-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Exercise<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add one webfont to theme.json. <\/li>\n\n\n\n<li>Use the font on a paragraph or headline<\/li>\n\n\n\n<li>In the Stylebook: add the font to a selected element.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Add a Webfont<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Webfonts are font files downloaded from the web. You can place the fonts in the theme in:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(theme)\/assets\/<strong>fonts<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">and then create a directory for each font. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In general it is recommended to use the .woff2 file format. If you download the fonts from google or other sources you can convert the files with this tool:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/cloudconvert.com\/woff2-converter\" target=\"_blank\" rel=\"noreferrer noopener\">woff2 convert<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Addding webfonts will take a few more codelines, see:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/Gutenberg-Blocks-Cheat-Sheet\/blob\/main\/themeJson.md#web-fonts\" target=\"_blank\" rel=\"noreferrer noopener\">theme.json : webfont<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You link to the font file like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"fontFace\": &#091;\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"fontFamily\": \"Open Sans\",\n\t\t\t\t\t\t\t\"fontWeight\": \"300 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontStretch\": \"normal\",\n\t\t\t\t\t\t\t<strong>\"src\": &#091; \"file:.\/assets\/fonts\/open-sans.woff2\" ]<\/strong>\n\t\t\t\t\t\t}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now try to add a webfont (and yes, you have to write &#8220;<strong>file:.\/<\/strong>&#8221; before the path to the file \ud83d\ude09 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5) Use CSS variables with elements and blocks in theme.json<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are two samples<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L152-L158\" target=\"_blank\" rel=\"noreferrer noopener\">theme.json : modify elements<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/theme.json#L280-L310\" target=\"_blank\" rel=\"noreferrer noopener\">do. : buttons<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In <strong>theme.json<\/strong> you can modify the styling of these elements and blocks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>button<\/strong>: Applied to&nbsp;<code>&lt;button&gt;<\/code>&nbsp;elements and button-like links, such as that used for the Button block.<\/li>\n\n\n\n<li><strong>caption<\/strong>: Applied to media captions, which are wrapped in a&nbsp;<code>&lt;figcaption&gt;<\/code>&nbsp;element.<\/li>\n\n\n\n<li><strong>cite<\/strong>: Applied to the&nbsp;<code>&lt;cite&gt;<\/code>&nbsp;element when used for citations, such as<\/li>\n\n\n\n<li><strong>heading<\/strong>: Applied to all heading elements from&nbsp;<code>&lt;h1&gt;<\/code>&nbsp;through&nbsp;<code>&lt;h6&gt;<\/code>, but these can be overridden for individual headings.<\/li>\n\n\n\n<li><strong>h1 &#8211; h6<\/strong>: Each of the&nbsp;<code>&lt;h1&gt;<\/code>&nbsp;through&nbsp;<code>&lt;h6&gt;<\/code>&nbsp;elements can be individually styled.<\/li>\n\n\n\n<li><strong>link<\/strong>: Applied to the&nbsp;<code>&lt;a&gt;<\/code>&nbsp;tag, which is used to create links<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">From the styles you created so far you know, that the slug will create a CSS variable that may be used by an element or a blog.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is done in this section of <strong>theme.json<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">settings.<strong>styles<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is how you style a typical block, in this case tha <em>code block<\/em>. Note how the variable is invoked:<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>\"styles\": {\n  \"blocks\": {\n     \"core\/code\": {\n        \"color\": {\n           \"text\": <strong>\"var(--wp--preset--color--contrast)\"<\/strong>\n}\n}, \n... etc ...<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8) Define your frontpage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can assign a page as a frontpage in several ways.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set the frontpage in Settings<\/h3>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"715\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/frontpage.png\" alt=\"\" class=\"wp-image-1905 size-full\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/frontpage.png 1020w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/frontpage-300x210.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/frontpage-768x538.png 768w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">In the Dashboard click:<br>Settings &gt; Read<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the dropdown menu you can choose the <strong>Page<\/strong> that vill be your frontpage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You may also want to choose a <strong>Page<\/strong>, that will be the placeholder for your blog posts (i.e. news flow)<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set the frontpage via a template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If one of your templates is named frontpage this template will define what your frontpage looks like.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 9) Add Static Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now the work in <em>Visual Studio Code<\/em> is probably done. However, sometimes you may want to add more features to pages and templates. But for now we&#8217;re done.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we will add some pages, like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>My frontpage<\/li>\n\n\n\n<li>About Us<\/li>\n\n\n\n<li>Contact<\/li>\n\n\n\n<li>Blog (as a placeholder for the menu)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10) Add Navigation Menus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the navigation menu. Follow the steps from the previous tutorial:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/thoth.dk\/index.php\/mimic-design-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Navigation<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 11) Add Posts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you have made a page named blog add it to the menu (if it is not there by now). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can add posts &#8211; so whats going on in your life?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 12) Theme Modifications in the Style Book<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Stylebook is a cool feature in WordPress. Here you can see &#8211; and even modify &#8211; all the components in your style. In the Dashboard you find it in:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Appeacrance &gt; Editor &gt; Edit<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then click on the eye-looking symbol:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64ce8c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64ce8c\" class=\"wp-block-image alignwide size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"526\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/stylebook-1024x526.png\" alt=\"\" class=\"wp-image-1907\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/stylebook-1024x526.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/stylebook-300x154.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/stylebook-768x394.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/stylebook.png 1523w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Stylebook with all the styles.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to edit one of the styles, click on it. Then you can style the components:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64d2be&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64d2be\" class=\"wp-block-image alignwide size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/component-styles-1024x520.png\" alt=\"\" class=\"wp-image-1908\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/component-styles-1024x520.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/component-styles-300x152.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/component-styles-768x390.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/component-styles.png 1519w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Here the component Headings is styled by one of the theme colors. You can also change the size, typograpy and more.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 13) Export the theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And now your blog begins to come alive. But if you added changes via the Stylebook you may want a copy of your theme. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the Stylebook click the kebab menu on the top right. Then you&#8217;ll see the following menu:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64d6f9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64d6f9\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export-theme-1024x516.png\" alt=\"\" class=\"wp-image-1911\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export-theme-1024x516.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export-theme-300x151.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export-theme-768x387.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export-theme.png 1509w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Export Theme &#8211; click on Export.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then this menu will pop up:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64da76&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64da76\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export2-1024x523.png\" alt=\"\" class=\"wp-image-1912\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export2-1024x523.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export2-300x153.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export2-768x392.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/export2.png 1506w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Export menu. Name your file.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can name your zip file. And now you&#8217;re in for a treat. Because if you created additional colors in the Stylebook, styled something &#8211; or even created template or template parts  &#8211; they will be part of your theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you unzip the file you&#8217;ll have a complete theme &#8211; with an updated theme.json.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><i class=\"fab fa-github\"><\/i> Upload your theme to your Github repository!<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yeah!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 14) Add Styles and Scripts [optional]<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The last step is optional: but sometime you might want to add libraries and additional stylesheets to your WordPress. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Perhaps you want to add animation libraries like <a href=\"https:\/\/dixonandmoe.com\/rellax\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rellax.js<\/a>, or features like jQuery or Bootstrap. You can add such scripts in functions.php.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enqueue scripts in functions.php<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/asathoor\/wordpress-mega-menu\/blob\/main\/wp-theme-mega-menu\/functions.php#L31-L37\" target=\"_blank\" rel=\"noreferrer noopener\">Enqueue Script funciton<\/a><\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>function petj_mega_menu() {\n  \/\/ a css file\n  <strong>wp_enqueue_style<\/strong>( 'CSS_Mega_Menu', \n    get_template_directory_uri() \n    . '\/assets\/css\/css.css' );\n    \/\/ below a script\n    <strong>wp_enqueue_script<\/strong>( 'JS_Mega_Menu', get_template_directory_uri() . '\/assets\/js\/js.js', array(), '1.0.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'petj_mega_menu' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here you can see that a CSS is added via the function <em>wp_enqueue_style<\/em> and a JavaScript is added to the theme via <em>wp_enqueue_script<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The path to the script or file is creates by get_template_directory_uri():<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>get_template_directory_uri() . '\/assets\/js\/js.js'<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In PHP a dot will glue two strings together so the last part is simply the part from the theme folder to the JavaScript: <em>&#8216;\/assets\/js\/js.js&#8217;<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-accent-background-color has-background\" style=\"grid-template-columns:24% auto\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw.png);background-position:49% 38%\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"1300\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw.png\" alt=\"Allergy crying eye png sticker\" class=\"wp-image-1894 size-full\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw.png 1300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw-300x300.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw-1024x1024.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw-150x150.png 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjcyLTA0Ny1wLWwxbXY3OHh1LnBuZw-768x768.png 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-accent-3-color has-text-color has-link-color has-large-font-size wp-elements-7da5b093bb6fc948191cb3ed95dcfb68 wp-block-paragraph\">Real men do not back up.<br>They cry!<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 15) Backup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>This part is not strictly part of theme creation, but you need to backup your work on a regular basis. Your content is not part of the theme. You need a backup of both your files and of your database. <\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Backup A) All Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Copy all files from the WordPress directory. Save them on your computer. After download you may want to zip the files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Backup B) The Database<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Export the database in PhpMyAdmin on your webhost. Here is what it looks like on my webhost Simply.com:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3155c64df96&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3155c64df96\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"549\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/sql.png\" alt=\"\" class=\"wp-image-1920\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/sql.png 996w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/sql-300x165.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2024\/01\/sql-768x423.png 768w\" sizes=\"auto, (max-width: 996px) 100vw, 996px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Exporting SQL from PhpMyAdmin on Simply.com. Most web hosts have PhpMyAdmin. Export all tables connected to your wordpress installation.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save your files and the SQL file somewhere secure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Restore a Backup<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Often the webhost has a backup system. Before you panic and try to restore your backup &#8211; see if you can restore your website on the webhost.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If not the last option is this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open PhpMyAdmin and select import. Then import your SQL-file. <\/li>\n\n\n\n<li>Then upload all the WordPress files via Filezilla or the file administration of your webhost.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"70462f4c-b304-4360-9632-2cbd28055984\">More than often such themes or plugins may block something that should be free and easy to do. As an example Astra once blocked custom HTML, so test themes before they fool you! <a href=\"#70462f4c-b304-4360-9632-2cbd28055984-link\" aria-label=\"Hop til fodnote-reference 1\">\u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>In this step by step tutorial you will develop a block based WordPress theme from scratch! Why create your own theme? There are more than 6000 themes for WordPress, why should you then attempt to make your own? Step 1) Create the theme via a theme generator or boiler plate This will give you a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":"[{\"content\":\"More than often such themes or plugins may block something that should be free and easy to do. As an example Astra once blocked custom HTML, so test themes before they fool you!\",\"id\":\"70462f4c-b304-4360-9632-2cbd28055984\"}]"},"categories":[31,24,23,20],"tags":[73,74],"class_list":["post-1845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimediedesign","category-programming","category-tutorials","category-eng","tag-custom-block-theme","tag-theme"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"In this step by step tutorial you will develop a block based WordPress theme from scratch! Why create your own theme? There are more than 6000 themes for WordPress, why should you then attempt to make your own? Step 1) Create the theme via a theme generator or boiler plate This will give you a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-24T07:05:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T18:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Per Thykj\u00e6r Jensen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Per Thykj\u00e6r Jensen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/\"},\"author\":{\"name\":\"Per Thykj\u00e6r Jensen\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"headline\":\"How to Create a Custom WordPress Block Theme\",\"datePublished\":\"2024-01-24T07:05:26+00:00\",\"dateModified\":\"2024-09-10T18:00:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/\"},\"wordCount\":1962,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/witch-03.jpeg\",\"keywords\":[\"custom block theme\",\"Theme\"],\"articleSection\":[\"Multimediedesign\",\"Programming\",\"Tutorials\",\"\ud83c\uddec\ud83c\udde7 English Tutorials\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/\",\"name\":\"How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/witch-03.jpeg\",\"datePublished\":\"2024-01-24T07:05:26+00:00\",\"dateModified\":\"2024-09-10T18:00:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/witch-03.jpeg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/witch-03.jpeg\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2024\\\/01\\\/24\\\/how-to-create-a-custom-wordpress-block-theme\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Custom WordPress Block Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\",\"url\":\"https:\\\/\\\/thoth.dk\\\/\",\"name\":\"Wordpress og WooCommerce\",\"description\":\"Syv kreative dage med WordPress og WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thoth.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\",\"name\":\"Per Thykj\u00e6r Jensen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"caption\":\"Per Thykj\u00e6r Jensen\"},\"description\":\"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.\",\"sameAs\":[\"https:\\\/\\\/thoth.dk\"],\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/author\\\/per\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce","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:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/","og_locale":"da_DK","og_type":"article","og_title":"How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce","og_description":"In this step by step tutorial you will develop a block based WordPress theme from scratch! Why create your own theme? There are more than 6000 themes for WordPress, why should you then attempt to make your own? Step 1) Create the theme via a theme generator or boiler plate This will give you a [&hellip;]","og_url":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/","og_site_name":"Wordpress og WooCommerce","article_published_time":"2024-01-24T07:05:26+00:00","article_modified_time":"2024-09-10T18:00:34+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg","type":"image\/jpeg"}],"author":"Per Thykj\u00e6r Jensen","twitter_card":"summary_large_image","twitter_misc":{"Skrevet af":"Per Thykj\u00e6r Jensen","Estimeret l\u00e6setid":"11 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#article","isPartOf":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/"},"author":{"name":"Per Thykj\u00e6r Jensen","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"headline":"How to Create a Custom WordPress Block Theme","datePublished":"2024-01-24T07:05:26+00:00","dateModified":"2024-09-10T18:00:34+00:00","mainEntityOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/"},"wordCount":1962,"commentCount":0,"image":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg","keywords":["custom block theme","Theme"],"articleSection":["Multimediedesign","Programming","Tutorials","\ud83c\uddec\ud83c\udde7 English Tutorials"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/","url":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/","name":"How to Create a Custom WordPress Block Theme - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg","datePublished":"2024-01-24T07:05:26+00:00","dateModified":"2024-09-10T18:00:34+00:00","author":{"@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-03.jpeg","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/2024\/01\/24\/how-to-create-a-custom-wordpress-block-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"How to Create a Custom WordPress Block Theme"}]},{"@type":"WebSite","@id":"https:\/\/thoth.dk\/#website","url":"https:\/\/thoth.dk\/","name":"Wordpress og WooCommerce","description":"Syv kreative dage med WordPress og WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thoth.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Person","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06","name":"Per Thykj\u00e6r Jensen","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","caption":"Per Thykj\u00e6r Jensen"},"description":"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.","sameAs":["https:\/\/thoth.dk"],"url":"https:\/\/thoth.dk\/index.php\/author\/per\/"}]}},"_links":{"self":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1845"}],"version-history":[{"count":80,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1845\/revisions"}],"predecessor-version":[{"id":2490,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1845\/revisions\/2490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/705"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/categories?post=1845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/tags?post=1845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}