The Next Generation

The newest UA WordPress Theme, Harper, is now available on a limited basis to web developers at The University of Alabama. Harper is built on the new WordPress Gutenberg editor with styling based on the new UA.edu.

Harper is the next generation of our easy-to-use, UA-branded WordPress themes. It empowers UA content creators from all professional backgrounds with the ability to build a modern, accessible, and responsive UA website without having to write any code.

For UA web developers, Harper offers the opportunity to build, collaborate on, and contribute new blocks and functionalities through the Web Developers Network.

Web Communications is currently working on a refactor of the Harper editor and front-end visual design. Updates on our progress will be posted to this page as they are available. 
Examples of pages built in Harper

New Features and Development Roadmap

Harper is available for download here.

  • Added some capabilities to the news custom post type. More fix than feature because it was an oversight.
  • Fixed some oversized headings in the post advanced settings UI.

What’s new in Harper (UA Theme 2.0)

  • Support for Gutenberg block editor
  • Introduction of new theme-specific gutenberg blocks
    • Info section block
    • Highlight section block
    • Events feed block
    • Call to action section block
    • Featurebox list block
    • Feature navigation block
    • Featurebox block
    • modified image block
    • modified quotebox block
    • modified table block
    • Customizable organization footer
    • People Directory block
  • Introduction of new theme-specific gutenberg blocks system
    • Sections category
    • Group category
    • General category
    • Text category
  • Editor support for tables (via new gutenberg blocks)
  • Ability to clone pages
  • Configurable events from calendar.ua.edu API (via new gutenberg blocks)
  • New page templates (top-level, second-level, third-level)
  • Removal of support for Customizer in favor of Site Config page
  • Removal of support for in-theme widgets in favor of blocks
  • Removal of support for default Posts post type in favor of custom post types
  • Removal of using <i> element for fontawesome font icons in favor of <span>
  • Removal of shortcode layout creation
  • Escalate menu editing privileges for Editors
  • Removal of Bootstrap
  • Removal of jQuery
  • Semantic HTML structure
  • CSS Grid + Flex for layout
  • New contextually bound CSS specificity
  • CSS now follows a modified version of SMACSS
  • Overall codebase now follows Semantic Versioning
  • Vanilla JS throughout and limited in use
  • Assets no longer require CodeKit compilation
  • New Visual Design
  • Introduction of context driven component based system of design (wilson)
  • Introduction of new navigational structure
  • New brandbar
  • New universal header
  • New universal footer
  • Page template specific content settings
  • Per page and/or global sidebars for page templates that support sidebar menus
  • Better baseline security defaults and adjustments
  • Accessibility improvements throughout
  • Better handling of images as content in an accessibility context
  • Better responsive handling of page and site elements overall
  • Introduction of new singular responsive nav system (rather than split duplicated)
  • Introduction of new documentation website
  • New hero area for homepage and second-level templates
  • New header image area for tertiary-level page templates
  • Buttons now have customizable ids for analytics

2.7

  • Wilson Realignment (Visual Design) related changes and prep continued
  • Rework stats block
  • Rework Link List Block
  • Compatibility with WordPress Gutenberg Patterns

2.x Horizon

  • New stuff on more stable Wilson (Visual System of Design)
  • New initial page templates as decided by Wilson Realignment
  • Icon system rework and baseline inclusion
  • New steps cards block (as decided by Wilson)
  • Revision and inclusion of new Tabs Area block
  • Revision and inclusion of new FAQ block area
  • Navigational System Rework
  • New header inclusion
  • Secondary Unit Specific Nav
  • Tertiary Unity Specific Nav
  • Icon system expansion
  • Featurebox icon variants
  • Baked in Analytics commons into Site Config
  • Split and refactor functions.php to be broken into modularized files
  • New Universal Search System Layer 1
  • Inclusion of Photoshelter API for image selection
  • Inclusion of Campus wide Alerts via API
  • Inclusion of Org level Notices/Announcements (not alerts)
  • Universal Static Data blocks inclusion
  • Documentation Page Template
  • Document/Download formatting/block
  • Forms block + system
  • Advanced meta tag and SEO options
  • Documentation Template inclusion

Known Issues/Concerns

  • The initial version 2.0.0 of Harper was not built to accommodate sites with a high level of in-page content density. Subsequent releases have gradually expanded the levels of density that can be utilized within pages. However, there is still an ongoing progression to continually expand to higher levels of density.
  • Not all gutenberg blocks were built to work with all page templates, presently there is no mechanism to restrict them within the editor, and one should follow documentation on block usage per page template.

Known WP Core Issues

  • Order placement issues for blocks. Sometimes inserting a block will result in it inserting above rather than below the relevant block. This is a known Core issue that has yet to be fixed by the WP core team.

FAQ

Web Developers on campus have access to Harper through the Web Developers Network. An open release to other professional groups and non-technical users will come later this year.

The release of Harper is currently limited to technical users because of certain technical requirements for the hosting server. Harper requires PHP 7.2 and WordPress 5.7. Users who are not able to directly affect their hosting servers should not be using Harper at this time. We are working with OIT to provide more hosting that meets these requirements.

Updates on the availability of Harper will be posted on this page and communicated through web and communications professional organizations and communities of practice.

No, Harper (ua-harper) is considered an entirely new theme by WordPress. To utilize Harper it will have to be installed as a new theme within the site either manually via server access, or through the WordPress Admin UI.

Yes. The 1.x theme (ua-theme) utilizes the WordPress Classic Editor, whereas the 2.x theme (Harper) makes use of the new Gutenberg Editor. There are other major differences between how each editor composes content and as such there may be some opportunities for content import and rearrangement, but such opportunities would be very limited.

First, check out the WDN introductory page and apply to join the Web Developers Network. Once your membership has been reviewed and approved you’ll be given access to the Harper project repository.