{"id":1659,"date":"2024-01-22T09:51:19","date_gmt":"2024-01-22T09:51:19","guid":{"rendered":"https:\/\/thoth.dk\/?page_id=1659"},"modified":"2026-04-11T01:55:08","modified_gmt":"2026-04-11T01:55:08","slug":"mimic-design-2","status":"publish","type":"page","link":"https:\/\/thoth.dk\/index.php\/mimic-design-2\/","title":{"rendered":"WordPress Cheat Sheet"},"content":{"rendered":"\n\n\n

From Style Tile to WordPress<\/h2>\n\n\n\n
\n
\n

As a designer you often start out with a Style tile, a Figma or similar.<\/p>\n\n\n\n

How can you transfer the “LoFi” ideas from your style tile to the “HiFi” WordPress theme?<\/p>\n<\/blockquote>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Style tile from http:\/\/opendesignkit.org\/methods\/style-tiles\/<\/a> Licence: CC 4.0.<\/figcaption><\/figure>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

The Styles<\/h3>\n\n\n\n

Before your work in WordPress you will probably have a Style Tile, a Figma or something similar. Above you see a typical style tile from Opendesignkit.org. The question is: how do we get from the rough design idea to a WordPress solution. <\/p>\n\n\n\n

    \n
  1. Open Appearance > Editor > Styles<\/li>\n\n\n\n
  2. Click the pencil logo<\/li>\n\n\n\n
  3. In the right column this dialog will open:<\/li>\n<\/ol>\n\n\n\n
    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    The WordPress Styles<\/figcaption><\/figure>\n\n\n\n

    Typography<\/h3>\n\n\n\n

    In the dialog click “Typography”.<\/p>\n\n\n\n

    Now you can enter the colors, fonts, &c. from Figma or your Style Tile to relevant design elements. If the font you need is not available for the theme, you can add more fonts from Google Fonts, or fonts that you upload. <\/p>\n\n\n\n

    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Font options.<\/figcaption><\/figure>\n\n\n\n

    Colors<\/h3>\n\n\n\n

    From your Style Tile or Figma you can add the colors where you want them to appear.<\/p>\n\n\n\n

    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Color options. <\/figcaption><\/figure>\n\n\n\n

    As you can see we add the colors to the text, background, links, captions, buttons and headings here. If the colors you need are not present, then you can add them in the palette.<\/p>\n\n\n\n

    If you open the Stylebook you can edit any block in the editor.<\/p>\n\n\n\n

    Exercise: Develop your Stylebook<\/h3>\n\n\n\n

    Use your Style Tile \/ Figma and add the relevant colors and fonts to your theme. If the fonts you need are not present in the theme add them – or perhaps a substitute font from Google fonts, that looks like the one you had in Figma og the Style Tile.<\/p>\n\n\n\n

      \n
    1. Change the fonts to something similar to the fonts in your Style Tile \/ Figma.<\/li>\n\n\n\n
    2. Assign the correct fonts in text, links, headings, captions and buttons.<\/li>\n\n\n\n
    3. Colors: edit the palette, so that the colors from your Style Tile \/ Figma are present.<\/li>\n\n\n\n
    4. Assign colors to text, background, links, captions, buttons and headings. <\/li>\n\n\n\n
    5. Open the stylebook and edit all blocks so that the main ideas from your Style Tile \/ Figma become part of your design.<\/li>\n\n\n\n
    6. Develop your stylebook so that the content will look similar to the elements from your Figma \/ Stylebook.<\/li>\n<\/ol>\n\n\n\n

      Sometimes you need to add extra CSS, scripts or HTML. Here I recomend that you install the plugin Simple Custom CSS & Js. Then you’ll be able to add custom code.<\/p>\n\n\n\n

      When you are satisfied you can go on create real content. You can allways return to the Stylebook and make changes. <\/p>\n\n\n\n

      Theme Handbook<\/h2>\n\n\n\n

      This tutorial will link to WordPress features. Of course the first button will link to the official documentation. <\/p>\n\n\n\n

      \n
      <\/i> The Theme Handbook<\/a><\/div>\n<\/div>\n\n\n\n
      <\/div>\n\n\n\n

      Layout with the Block Builder<\/h2>\n\n\n\n
      <\/div>\n\n\n\n
      \"Logoet<\/a><\/div>\n\n\n
      \n
      Block: Site Logo<\/a><\/div>\n\n\n\n
      Block: Title<\/a><\/div>\n<\/div>\n\n\n

      WordPress Cheat Sheet<\/h3><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \n
      \n

      The Grid Block<\/h3>\n\n\n\n
      The Grid Block<\/span><\/a><\/div>\n<\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n

      The Grid block is a new feature (2024). By the Grid Block you can create galleries in a “Flexbox wrap” style. Here’s a sample grid block:<\/p>\n\n\n\n

      \n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
      Hexia Foo<\/figcaption><\/figure>\n\n\n\n
      \n
      <\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
      \n
      <\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
      \n
      <\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \n

      About the Block Editor<\/h3>\n\n\n\n
      \n
      <\/i> The Block Editor: Gutenberg<\/a><\/div>\n\n\n\n
      <\/i> WordPress Playground<\/a><\/div>\n<\/div>\n\n\n\n

      Everything in WP is designed and created in the block editor. In the editor you can create:<\/p>\n\n\n\n