Skip to main content

Retrofit an Old Theme With a New Component

Note: This applies mainly to older themes (pre 1.3.0) where all theme templates could accept components into “slots”. These templates have since been replaced, and only one template (the Super Template) can now accept slots.

Sometimes you want to use a new component with your theme, or a new version of an existing component, but you can’t, because your site is using a copy of our core theme files that do not know a new component exists, or still references an older version of the component. Check the version number of your theme (found in your site’s package.json file) and compare it with the version listed with the component on this site to see if your theme is compatible. If not, no problem. It is easy to retrofit an old theme.

Note this only applies to sites built with the WVU Design System. You cannot retrofit an older (pre-Design System) version with the code from the Design System.

The way your theme “knows” what components to use is through custom data in each of your templates. There is data for each “slot,” including the names of the available components. It looks like this:

- slot_1:
    type: select
    title: Slot 1
    options:
      - [Action Hero, action-hero]
      - [Action Hero Card, action-hero-card]
      - [Action Hero Two Column, action-hero-two-column]
      - [Agenda Item, agenda-item]
      - [Back Page, backpage]
      - [Big Search, big-search]
      - [Big Search Results, big-search-results]
      - [Blog Archive, blog-archive]
      - [Blog Article, blog-article]
      - [Blog Index, blog-index]
      - [Contact Info, contact-info]
      - [Directory, directory]
      - [Editable Region, editable-region]
      - [Event Agenda, event-agenda]
      - [Faculty Profile, faculty-profile]
      - [Featurettes, featurettes]
      - [Featurettes Card Columns, featurettes-card-columns]
      - [Full Bleed Photo, full-bleed-photo]
      - [Hero, hero]
      - [Lede Text, lede-text]
      - [Photo Gallery, photo-gallery]
      - [Profile, profile]
      - [Profiles, profiles]
      - [Quicklinks, quicklinks]
      - [Stat Sheet, stat-sheet]
      - [Subnav, subnav]
      - [Twitter Widget, twitter-widget]

This chunk of code is repeated 10 times, one for each slot.

To allow your theme to accept a new component, just add the component into the custom data in your templates. Let’s say I want to add a new component called my-new-component, and also add a new version of the Hero component, called hero-v2. I would just add these to the list, giving them each a new name as well, like this:

- slot_1:
    type: select
    title: Slot 1
    options:
      - [Action Hero, action-hero]
      - [Action Hero Card, action-hero-card]
      - [Action Hero Two Column, action-hero-two-column]
      - [Agenda Item, agenda-item]
      - [Back Page, backpage]
      - [Big Search, big-search]
      - [Big Search Results, big-search-results]
      - [Blog Archive, blog-archive]
      - [Blog Article, blog-article]
      - [Blog Index, blog-index]
      - [Contact Info, contact-info]
      - [Directory, directory]
      - [Editable Region, editable-region]
      - [Event Agenda, event-agenda]
      - [Faculty Profile, faculty-profile]
      - [Featurettes, featurettes]
      - [Featurettes Card Columns, featurettes-card-columns]
      - [Full Bleed Photo, full-bleed-photo]
      - [Hero, hero]
      - [Hero v2, hero-v2]
      - [Lede Text, lede-text]
      - [My New Component, my-new-component]
      - [Photo Gallery, photo-gallery]
      - [Profile, profile]
      - [Profiles, profiles]
      - [Quicklinks, quicklinks]
      - [Stat Sheet, stat-sheet]
      - [Subnav, subnav]
      - [Twitter Widget, twitter-widget]

You may also want to grab the Sass files from the newest version of the Design System, re-compile your Sass, and always be sure to test your theme locally in Hammer to make sure everything works.

When you are ready to use the new component on your live site, perhaps make the new component display in Edit Mode only at first by checking the “Edit mode only?” box associated with the new component in your page properties/slots. Once you know it is working, you can unselect this option.