Multimusen.dk

Thoth.dk CheatSheet

How to use the WP block editor when you edit the entire site layout or the actual content.

From Style Tile to WordPress

As a designer you often start out with a Style tile, a Figma or similar.

How can you transfer the “LoFi” ideas from your style tile to the “HiFi” WordPress theme?

Style tile from http://opendesignkit.org/methods/style-tiles/ Licence: CC 4.0.

The Styles

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.

Open Appearance > Editor > Styles
Click the pencil logo
In the right column this dialog will open:

The WordPress Styles

Typography

In the dialog click “Typography”.

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.

Font options.

Colors

From your Style Tile or Figma you can add the colors where you want them to appear.

Color options.

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.

If you open the Stylebook you can edit any block in the editor.

Exercise: Develop your Stylebook

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.

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

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.

When you are satisfied you can go on create real content. You can allways return to the Stylebook and make changes.

Theme Handbook

This tutorial will link to WordPress features. Of course the first button will link to the official documentation.

The Theme Handbook

Layout with the Block Builder

Block: Site Logo

Block: Title

WordPress Cheat Sheet

The Grid Block

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:

About the Block Editor

The Block Editor: Gutenberg

WordPress Playground

Everything in WP is designed and created in the block editor. In the editor you can create:

Templates will define the layout.
One template can be assigned to many pages and posts.
Templates that will define the look and feel of all pages, posts.
Templates for the index and special pages like 404.
Templates for the frontpage.
Content for pages and posts.
Patterns, like: headers, footers and special patterns.

What is a Block?

In Atomic Design we would say that a single block, like a h1-heading or a paragraph is an “atom”. A paragraph is an object with attributes like the color of text and background, font-family, fontsize and more. Of course you can style each and every paragraph – but in the long run that’s cumbersome.

At the bottom of the style editor you see Blocks. This is where you define the look and feel of all the blocks in the editor.

The smart approach is to define the look and feel of all the paragraphs. You can do this in Appearance > Editor > Style. Here you can define the look of all paragraphs.

Now click on Blocks, and find Paragraph in the list:

In my case the Paragraph “atom” is on the top.

Click on the block – now you can define the typical settings of any paragraph in your theme.

Now you can edit the look and feel of all the paragraphs.

Under Advanced you can add “Additional CSS Classes”. When you have these classes you can add whatever CSS you want to.

You can also add a “HTML Anchor”. In practise this is an Id that you can use in a one-pager navigation situation. If the anchor i called Clemens, you’ll add this custom link to a menu item, a link or a button:

#Clemens

The Stylebook

A nice shortcut in order to edit any of the blocks is the Stylebook. Click on the Eye icon, and click on the block that you want to change.

Templates

What is a Template?

Behind every block page or post there is a template. Several pages or posts can use the same template. Here is sort of a parallel to CSS files.

The content and presentation layers must be separated. The template must define where you want to see something.

If you want to work free and experimentatl it’s a good idea to use a blank canvas. Make your blank template in the Template Editor.

Create a new layout in a blank template

The only block on a blank template is Content. And that’s why you can see the content …

If you need to filter content or create a more advanced content section the query loop should be used.

Template Editor

Template Parts

Edit Templates

If you open > Apearance > Edit
> Templates

You’ll see this dialog with the present templates in the theme.

Templates, here in a list view.

Here you can edit the templates or create new ones. Note that we see some of the standard templates here:

Index – this is the fall back standard design of any page.
Blog home – what your blog page will look like.
Page 404 – the error or “not found page”

WordPress has several standard templates. Knowing them is the key to a good design in WP.

Exercise: Create a Blank Template

First create a new template with just one block in it: content. So we have no headers, footers or anything. If you create one or more new pages and assign this template to it, you’ll have a blank canvas. Which is nice for a designer.

Create a page or post. In the settings column to the right under Page click on template. Now select the blank template for your page.

You can use this blank tempate on any page or post that you want.

Block: Cover

Image in full screen width and height

For heroimages and similar – use a cover block!

You can use the cover block for hero images and text over any image. For example when you use the vh option for the height, a full browser window hero image is made by a vh = 100 and a width 100%.

That’s how this cover image is made.

Width: 100%
Height: 100vh

Block: Cover

Block: Buttons

Block: Cover – video background

Upload your video to the Media Library.
When you add “Media” select your video.

Layout

In the editor you can create any layout by blocks that will stack, row, grop or create columns.

Add Whitespace

Add whitespace by the Spacer block. You can also add whitespace via padding and margin settings in the different blocks.

Block: Spacer

Rows, Stacks and Columns

Row:

Stack

The columns are made by the column block. Should you need another row, just add one more column block. In this case I’ve used a two column row followed by a three column row.

Below a row with a stack inside:

You can also use blocks like row and stack in order to place things in a flexbox flex or block.

Block: Columns

Block: Row

Block: Stack

Text overlay

Style Images

There are many creative options in the Image Settings. Add: borders or rounded effects.

Block: Image

Block: Gallery

Add a Gallery

You can add a gallery by the gallery block.

Kadence blocks will give you more options.

The Navigation Block

Block: Navigation

Perhaps this block is the hardest to master. Be patient here, and follow the instructions. However, the navigation block is one of the most important blocks to master. Navigation blocks can link to:

a Page
a Post
a Category / tag
a URL
Onepager navigation to elements with named anchors
Social Media (icons are built in here, a cool feature)
etc.

Create several menus in the Navigation section under appearance. You can create vertical and horisontal oriented menus. The page must exist before you can add it to the menu.

The navigation block is not just for headers in template parts or for the header section.

You can create navigation menus anywhere on template, a post or a page.

A Vertical Menu

A Horizontal Menu (Burger Only)

In the block settings you can define the behaviors of the navigation block. Below you see a navigation bar:

How to use the Navigation Block

Fonts

Fonts will sort of set the tone of voice of your solution. Selecting the correct fonts is one of the major design tasks. You’ll have to select two – three major fonts. Then you can assign the fonts to the different blocks in the style editor of WP.

Get Cool Fonts

A new and most wanted feature was added during the summer ’24. Integration with Google fonts. You can also upload your own fonts. Now you can use virtually any font you fancy.

Font Plugins

Kadence Blocks
Font Awesome
Simple Custom CSS and JavaScript

Custom Code

In all projects at the Multimedia Design Programme you have to demonstrate your ability to add custom code.

Under Appearance > Editor > Styles you can add additional CSS to your theme. This is the most easy way if you just need a little extra CSS. You can also edit the look and feel of the typography, headings, links – and indeed all the blocks in Gutenberg.

Style any Block

Gutenbergs components can be styled in many ways.

Block: Custom HTML

If you know how to do certain things in ordinary web code, then use the Custom HTML block. Here you may add elements, and even styles and scripts. By this block you can implement any code or script in WordPress.

Block: Custom HTML

Always use this order:

Styles
HTML
Script

<style>
  h2 { color:red; }
</style>
<article>
  <h2> Hello World! </h2>
</article>
<script>
   console.log("JavaScript is up and running")
</script>

How to Integrate APIs

Maps, videos, or something stunning from a CodePen

Sample A) Spotify Share

Via the HTML block you can share maps, playlists, etc. in an iframe. Many online services and Social Media have share buttons, where you can <iframe> or similar markup.

Here is a Spotify sample – the iconic album “Ziggy Stardust” by David Bowie.

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/48D1hRORqJq52qsnUYZX56?utm_source=generator" width="100%" height="600" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Sample B) Maps

Here it’s an iframe from OpenStreetMaps, but you can share Google’s maps too. If you want a marker on the map, just add is by a search on the map – and then share the map.

<iframe width="90%" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=10.147716701030733%2C56.11615146699165%2C10.151954591274261%2C56.11780231047794&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=19/56.11698/10.14983">View Larger Map</a></small>

View Larger Map

Design Patterns

Are patterns the same as components?

The short answer is yes. Any block is a component. In the parlé of Atomic Design a WP pattern is a molecule.

Create your own patterns
Use online patterns
This card is a pattern
You can save such components as template parts in the Full Site Editor

Block: Patterns

Free Premade WordPress Patterns