---
title: "You've got style(guide)"
date: 2025-04-16T12:20:12Z
modified: 2025-04-16T12:20:13Z
permalink: "https://dgw.ltd/2025/04/16/youve-got-styleguide/"
type: post
status: publish
excerpt: ""
wpid: 538
categories:
  - Code
featured_image: "https://dgw.ltd/wp-content/uploads/2025/04/CleanShot-2025-04-16-at-13.18.52@2x-e1744806123310.png"
featured_image_alt: Screengrab of the color palette from this website
---

One of the pages on this site is a style guide(book) that I tend to include on most of my projects. I find it useful for the client and sometimes designs to see clearly how the core styles for the site are set up. Sometimes I receive a style guide as part of the design handover and sometimes I don’t. Either way it can be useful for team members to see how I have translated the design into code (and let’s be clear we don’t export designs to html, they are translated into code, code we have to maintain).

The stylebook uses a custom template, called [template-stylebook.php](https://github.com/dogwonder/dgwltd-theme/blob/f8824e108ca9f3e603caa634cbae135ddab27d74/template-stylebook.php)

Here is the stylebook (not stye guide as this is the terminology WordPress uses) for this site [https://dgw.ltd/stylebook/](https://dgw.ltd/stylebook/)

Given we are setting most of our design tokens in theme.json it makes sense we’ll want to use this as the source of truth (again debatable where this is, sometimes this might be a well maintained figma file with some form of tokenisation pipeline, but in many of my cases this is usually theme.json). 

So the main driver in our page template is this core WordPress class


```php
$settings = WP_Theme_JSON_Resolver::get_theme_data()->get_settings();
```

For example if we want to get the color palette we can traverse the json like so:


```php
if (isset($settings["typography"]["fontFamilies"]["theme"])) {
    $font_families = $settings["typography"]["fontFamilies"]["theme"];
}

foreach ($color_palette as $color) {
  echo '<div class="item"><div style="background-color:' .
      $color["color"] .
      ';" class="swatch" data-hex="' .
      $color["color"] .
      '"></div><span>' .
      $color["name"] .
      "<br/>" .
      $color["color"] .
      "</span></div>";
}
```

or the Fonts used on the site


```php
foreach ($font_families as $family) {
  //If the font has the fontFace property, use it
  if (isset($family["fontFace"])) {
      echo '<div class="dgwltd-text-l" style="font-family:' .
          $family["fontFace"]["0"]["fontFamily"] .
          ";font-weight:" .
          $family["fontFace"]["0"]["fontWeight"] .
          '">' .
          $family["name"] .
          "</div>";
  } else {
      echo '<div class="dgwltd-text-l" style="font-family:' .
          $family["fontFamily"] .
          ';">' .
          $family["name"] .
          "</div>";
  }
}
```

And so on.

This means any changes we make to our core theme.json are reflected on our style guide keeping everything nice and up to date.

I also have our old friend the loop on here:


```php
<?php while (have_posts()):
  the_post();
  the_content();
endwhile;
?>
```

Meaning we can manually add core blocks to the page template after we have gone through the core styles, enabling further documentation of the components used on the site.