Our goal is to modify high performant Generate press theme that would be:
running on design system css from combined-css component
using design system JavaScript from same combined-css component
Header and page section are using design system structure
WHY:
Generate Press theme proved to be fast, light, simple and high performant
Making Generate Press theme look like design system will give editors consistent visual experience. (Sites will look the same in WP environment as they will look live)
Progress Outline
Update CSS
Update JS
Update Structure elements (footer, header, main page, navigation)
After all theme adaptation process create public ready CAGov WP Generate press child theme add it to the public repository
Generate Press Child Theme customization:
REMOVE ALL GENERATE PRESS CSS. Add this code to functions.php
Load Design System stylesheets. Add this code to functions.php.
function theme_styles()
{
// Load all of the styles that need to appear on all pages
wp_enqueue_style( 'main', get_stylesheet_directory_uri(). '/style.css' );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri(). '/css/ds-cagov.css' );
// Conditionally load the FlexSlider CSS on the homepage
if(is_page('home')) {
wp_enqueue_style('flexslider');
}
}
add_action('wp_enqueue_scripts', 'theme_styles');
Add Design System CSS CDN import. Create css folder and add `ds-cagov.css' file with following CDN imports:
/* CAGOV COLOR SCHEME */
@import "https://california.azureedge.net/cdt/CAWeb/combined-css/1.0.3/dist/cagov.css";
/* CANNABIS COLOR SCHEME */
/* @import "https://california.azureedge.net/cdt/CAWeb/combined-css/1.0.3/dist/cannabis.css"; */
/* DROUGHT COLOR SCHEME */
/* @import "https://california.azureedge.net/cdt/CAWeb/combined-css/1.0.3/dist/drought.css"; */
Add Design System JS CDN to footer.php. Open footer.php and add this script before </body>:
<!--Adding CAGov Design System JavaScript-->
<script type="module" src='https://california.azureedge.net/cdt/CAWeb/combined-css/1.0.3/dist/index.js'></script>
UPDATE STATEWIDE HEADER. Add following code to functions.php
UPDATE AGENCY FOOTER. Add following functions to functions.php
if ( ! function_exists( 'generate_construct_footer_widgets' ) ) {
add_action( 'generate_footer', 'generate_construct_footer_widgets', 5 );
/**
* Build our footer widgets.
*
* @since 1.3.42
*/
function generate_construct_footer_widgets() {
// Get how many widgets to show.
$widgets = generate_get_footer_widgets();
if ( ! empty( $widgets ) && 0 !== $widgets ) :
// If no footer widgets exist, we don't need to continue.
if ( ! is_active_sidebar( 'footer-1' ) && ! is_active_sidebar( 'footer-2' ) && ! is_active_sidebar( 'footer-3' ) && ! is_active_sidebar( 'footer-4' ) && ! is_active_sidebar( 'footer-5' ) ) {
return;
}
// Set up the widget width.
$widget_width = '';
if ( 1 === (int) $widgets ) {
$widget_width = '100';
}
if ( 2 === (int) $widgets ) {
$widget_width = '50';
}
if ( 3 === (int) $widgets ) {
$widget_width = '33';
}
if ( 4 === (int) $widgets ) {
$widget_width = '25';
}
if ( 5 === (int) $widgets ) {
$widget_width = '20';
}
?>
<section aria-label="agency footer" class="agency-footer">
<div class="container">
<div class="footer-logo">
<?php generate_construct_logo(); ?>
</div>
<?php
if ( $widgets >= 1 ) {
generate_do_footer_widget( $widget_width, 1 );
}
if ( $widgets >= 2 ) {
generate_do_footer_widget( $widget_width, 2 );
}
if ( $widgets >= 3 ) {
generate_do_footer_widget( $widget_width, 3 );
}
if ( $widgets >= 4 ) {
generate_do_footer_widget( $widget_width, 4 );
}
if ( $widgets >= 5 ) {
generate_do_footer_widget( $widget_width, 5 );
}
?>
</div>
</div>
<?php
endif;
/**
* generate_after_footer_widgets hook.
*
* @since 0.1
*/
do_action( 'generate_after_footer_widgets' );
}
}
To add Agency Footer menus you will need to:
Create agency links menu: Go to Appearance > menus create new "agency footer" menu
Create social icons menu: Go Appearance > menus create new "social" menu. Important: if you want your social menu to display icons only in each menu item add specific social media icon class. Available social media icons classes are:
icon-facebook
icon-twitter
icon-instagram
icon-youtube
icon-pinterest
icon-snapchat
icon-linkedin
icon-email
icon-share
icon-vimeo
In Appearance > customize > widgets > Footer widget 1 > Add navigation menu block and select "agency footer" menu.
In Appearance > customize > widgets > Footer widget 2 > Add navigation menu block and select "social" menu.
UPDATE STATEWIDE FOOTER. Add following functions to functions.php
Our goal is to modify high performant Generate press theme that would be:
WHY:
Progress Outline
Generate Press Child Theme customization:
REMOVE ALL GENERATE PRESS CSS. Add this code to functions.php
REMOVE ALL UNNECESSARY GENERATE PRESS JS, AND JS LIBRARIES. Add this code to functions.php
Load Design System stylesheets. Add this code to functions.php.
Add Design System CSS CDN import. Create css folder and add `ds-cagov.css' file with following CDN imports:
Add Design System JS CDN to footer.php. Open footer.php and add this script before
</body>:UPDATE STATEWIDE HEADER. Add following code to functions.php
UPDATE BRANDING. Add following functions to functions.php
UPDATE NAVIGATION. Add following functions to functions.php
UPDATE AGENCY FOOTER. Add following functions to functions.php
UPDATE STATEWIDE FOOTER. Add following functions to functions.php
UPDATE MAIN CONTENT.
if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. }
?><!DOCTYPE html> <html <?php language_attributes(); ?>>
<body <?php body_class(); ?> <?php generate_do_microdata( 'body' ); ?>> <?php /**
@since 2.3 */ do_action( 'wp_body_open' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- core WP hook.
/**
@hooked generate_add_navigation_before_header - 5 */ do_action( 'generate_before_header' );
/**
@hooked generate_construct_header - 10 */ do_action( 'generate_header' );
/**
@hooked generate_featured_page_header - 10 */ do_action( 'generate_after_header' ); ?>
Was able to adapt design system locally, now I need to create child theme and put it into the some repo:
Archiving / closing.
We did a lot of work on this and created an alternate theme in order to help validate what needs to go forward into the CAWeb theme.
Work is starting to pick up on this by CDT and expect this effort to be rescoped, so closing.