dxw / govuk-theme

A WordPress theme implementing the GOV.UK design system

GOV.UK Design System WordPress theme

A WordPress theme built by dxw that implements the GOV.UK Design System, via GOV.UK Frontend.

Currently, the theme applies v3 of GOV.UK Frontend.

Developing the theme

Install the dependencies:

npm install
composer install

Compile the assets:

npm run build

Run the tests:

vendor/bin/kahlan spec

Run the linter:

vendor/bin/php-cs-fixer fix

Extending the theme

This is intended to be used as a parent theme, which is then extended/re-skinned via a child theme.

You can use the govuk_theme_class filter to help with this. It is applied to all govuk- prefixed classes, so you can use this to either append a custom class to specific instances where those classes are applied, append a custom class to all instances, or replace those classes completely.

You can also replace any of the individual template components, up to and including the overall layout template, in the child theme as required.

Note that the GDS Transport theme is only licensed for use on gov.uk domains, so if you're developing a theme for use elsewhere, you'll need to replace it with a suitable alternative.

govuk-theme's Issues

Fix minor security issue

https://github.com/dxw/govuk-theme/security/dependabot/yarn.lock/minimist/open

Add a filter for all govuk-prefixed classes

This should allow people to amend/override default govuk styles via e.g. a child theme.

Add an appropriate licence

Add phase banner support

https://design-system.service.gov.uk/components/phase-banner/

This is a component that makes more sense to control at a theme level rather than in the components plugin, as it's not something that would be added within main content.

Tidy the SASS files

There's a number of empty unused files at the moment.

Fix pagination

We're currently using an old approach to pagination, which could be simplified. We should probably remove the dependency on dxw/pagination, which is old and basically unsupported.

Complete README

Things it might include:

• Advice on where the GDS Transport font is licensed for used
• What version of GOVUK Frontend this currently runs
• How to develop the theme
• How to add things like class overrides (see #7)

Extend with child theme

Hi, I am currently trying to extend this theme with a child one, and although I am following all the requirements to create and extend a parent theme, this does not work with this theme.

My child style.css looks like:

/*
 * Theme Name: GovukTheme Child
 * Author: Someone
 * Version: 0.0.1
 * License: MIT
 * Template: govuk-theme-main
 * Text domain: govuk-theme-child
 */

This is my folder structure:

and what I get in the WP dashboard (themes section) is:

I've tried extending other parent themes, and that works just fine.

I wonder if it is mainly due to the fact that this theme structure is a bit different from other WP themes, in fact, the style.css file in the govuk-theme is in the templates folder, not in the root.

Allow more complex footer navigation

See https://design-system.service.gov.uk/components/footer/

Currently we only support the basic "Footer with links to meta information" type.

Add black banner functionality

A toggled banner, to appear at the very top of each page with editable text including links.

Upgrade to govuk frontend v4

v4 if govuk frontend has been available since December 2021.

To ensure forward compatibility, we should upgrade (latest version currently 4.0.1). Details of how to upgrade are in the frontend changelog.

Add changelog and versioning

As per https://github.com/dxw/tech-team-rfcs/blob/main/rfc-019-use-changelogs-to-track-changes.md

Style tables

Currently, the default table HTML has no styling applied.

Instructions on how to add as a theme in wordpress

Hi, is there any instructions ( or a working example ) on how to add this theme to wordpress please, once I have downloaded the zip file. I am new to Wordpress so would appreciate a "step-by-step" guide so i can view the look and feel - would be really useful for me. Thanks in advance.