What’s New in 2.0

The Aggie UX Figma Component Library version 2.0 is a completely reconfigured Figma file optimized to better align with the options available in Storybook and CMS environments, ensuring consistency across our products.

Color coding across the file provides guidance on which controls are available for specific components and the use case for each Figma component. These changes are intended to make it easier to design mockups that reflect options available in official Aggie UX CMS implementations. We have also added some documentation to each component within this file to help orient new users to the design system.

In addition to these optimizations, we have also added a Figma component for mocking up mega menu panels.

Learn how to use our Figma files in the Aggie UX + Figma help center.

When to Start Using 2.0

The Aggie UX v1 file is still available on Figma, however we will no longer be making updates to this file.
You can continue working in the v1 Figma library if you’re mid-project. However, to take advantage of new optimizations and features, we recommend upgrading to the 2.0 Figma library when you’re ready, especially if you are using a paid Figma account.

How to Update Your Site

Always test new themes in a test environment before applying to your live site!

Test this update on a copy of your website that is running locally or on a development/staging environment before updating your production (live) website! Apply the theme to your production website only after you have confirmed the new theme doesn’t introduce issues to your site.

Please take extra care to review:

• Any pages with custom development or code copied from aggieux.tamu.edu. You’ll need to update any code to the 2.0 version (for Aggie UX components) and make sure your custom development works as desired.
• Any content controlled by third-party plugins. Especially if any third-party plugins are used for directory functionality.

How to Install the Aggie UX WordPress theme

Thank you for implementing Aggie UX on your websites and all you are doing to improve Texas A&M’s web presence.

Thank you to everyone who has reported a bug, submitted a feature request and helped us test! Many have contributed, but I want to give a special shout-out to Lindsey Norman at DSA, Cindy Mahoney at Mays, Mark Bennett at Engineering, Jennie Lamb at VetMed, Justin Romack at Disability Resources and Ryan Chadek from Inventive. They have each contributed in significant ways in recent months!

What’s New in the Theme

We have put a lot of effort into big new features such as the mega menu, AUX 2.0 components, the directory and the 150th anniversary banner. We’ve also made a bunch of improvements in smaller, less noticeable areas, like accessibility, user experience for site editors, improving page load speed and bug fixes.

Mega Menu Functionality

This release adds mega menu functionality to our site header and navigation options. Dropdown menus are also still available.

While we were modifying the navigation code, we also simplified the way we talk about the different options to focus on the site identity type: lockup identity or text identity.

Options to edit your navigation, site header and more are available in the WordPress Customizer.

Learn how to customize your theme

Directory and Profiles

The 2.0 release officially brings in the functionality to have profiles in a filterable directory. A directory cannot exist without profiles.

Our WordPress implementation allows site owners to determine what sections are available on profiles, control the headings across sections, and set a default location for each profile. 

Learn how to edit directory and profiles

Sitewide Alerts

This release adds the ability to set sitewide banner alerts that can display on every page of your site.

Learn how to set up a sitewide alert

Custom 404 Pages

You now have the ability to customize the messaging on your site’s 404 pages. You can either keep the default text and only update the site administrator’s title and email, or customize the entire message.

Learn how to customize your 404 page 

150th Celebration Banner

The Texas A&M 150th celebration banner is integrated directly into this theme.

Learn how to turn on the 150th Celebration banner

Improved Editor User Experience

A banner displays when you are previewing a private or unpublished page/post to help add clarity to what site visitors can see and what they cannot.

We have spent significant time updating labels and help text across components and templates to bring the Aggie UX WordPress theme into better alignment with our other Aggie UX products. 

Advanced Enhancements to Post Types

This release also includes several enhancements to post types, archives and search.

• Enhanced post type archive, post type search settings and functionality:
  • Archive pages are now more forgiving of missing/incomplete search and archive settings.
  • Less search configuration is now required. Default choices for search filter fields are provided and sorted by the selected input field type.
• Granular control of more AUX features for post-types:
  • Selectively turn on or off archive featured posts for each post type.
  • Selectively turn on or off posts in the recent posts selector fields for each post type.
  • Selectively turn on or off the archive search option for each post type.
  • Selectively turn on or off taxonomy/term/category tags on the page for each post type.

Optimized Code + Accessibility Improvements

This theme uses Aggie UX 2.0, which includes major changes and optimizations to our codebase (HTML, CSS and JavaScript) from Aggie UX 1.0. These optimizations:

• Speed up load times for sites using Aggie UX by making our CSS file 6x smaller and reducing the number of JavaScript files — even after adding functionality
• Eliminate reliance on external JavaScript libraries (jQuery)
• Improve accessibility through structural HTML updates across the system
• Increase consistency across class names, especially for component containers

Bug Fixes

This release also addresses several bugs found in earlier versions. Some notable fixes include:

• Removed the AUX Search Block and AUX Curated Collection blocks. These blocks were designed for the Stories site theme and were not functioning correctly in the parent theme.
• Fixed most of the bugs that have been reported since the last release. (THANK YOU to everyone who has helped us find and fix bugs!) We have also conducted user testing, extensive manual and automated testing which allowed us to identify and fix a number of additional potential issues.
  • List of squashed WordPress bugs
  • List of all Aggie UX bugs
  • Report a bug in Aggie UX

How to Update Your Site

Always test new themes in a test environment before applying to your live site.

You don’t need to install the Aggie UX v2 WordPress theme immediately when it is released. Choose the time that works best for your team to test the theme on a development or staging copy of your website. Update the theme to your production website after you have confirmed the new theme doesn’t introduce issues to your site.

Please take extra care to review:

• Any pages with custom development or code copied from aggieux.tamu.edu. You’ll need to update any code to the 2.0 version (for Aggie UX components) or make sure your custom development displays and functions as desired.
• Any content controlled by third-party plugins. Especially if any third-party plugins are used for directory functionality.

How to Install the Aggie UX WordPress theme

All Aggie UX Cascade sites will be upgraded to Aggie UX 2.0 on Monday, March 30 – Tuesday, March 31. Please don’t make any edits to your Aggie UX Cascade sites during this time.

Once Cascade maintenance is complete and upgrades are finished, we’ll notify the Aggie UX mailing list. At that point, site owners should review and republish their sites.

Site owners will be responsible for reviewing their sites after the upgrade to ensure nothing is missing or not working before republishing the entire site. This is especially important if you have done any custom development inside your site.

What Site Owners Need to Know

We are doing our best to make all 2.0 upgrades to Cascade in a lossless way, meaning you should not lose any data you have entered into your site navigation, accordions, or any other component. However, all site owners will need to edit their site navigation and review their sites to ensure everything functions and displays properly prior to republishing their site.

Step 1: Prepare for the upgrade

If you have any pages that are under development that you do not want to accidentally be published after the upgrade, we highly recommend turning off publishing for those pages and folders.

We also recommend that you communicate to any relevant stakeholders that you will be unable to make changes to your website during the maintenance window.

Step 2: Do not edit during maintenance window

Please do not go to Cascade during the maintenance window.

An email will be sent to the Aggie UX mailing list when the maintenance window is over and you can begin reviewing your website (step 3).

Step 3: Edit your website’s navigation

Before republishing your site, you will need to review your site’s navigation.

Any navigation items using the “button” functionality (linking directly to a page instead of opening a dropdown) will need to be modified and submitted. The change is simple — you’ll just need to toggle the Menu Item Style to “Use Button”. The data that was in your navigation prior to the upgrade should display after you toggle this setting.

While you’re in your navigation, you may choose to change your functionality from dropdown menu to mega menu.

Step 4: Review your website after maintenance window

After receiving the communication from the Aggie UX team notifying you that all Cascade sites have been upgraded to Aggie UX 2.0, you will need to review your site to ensure everything works and displays as expected. We highly recommend publishing your entire site to your dev environment and reviewing it there.

If you find any issues with your site from this upgrade, please email web@tamu.edu for assistance.

How to Review Your Site

1. Publish your site to a dev site by publishing the root folder to your development publishing destination.
   • Open the folder at the root of your site (the folder name starts with “DMC AUX”) in the preview pane
   • Click Publish
   • Check the destinations you want to publish to — you should have a development option
   • Click Publish
2. Review your site page by page to ensure everything appears and functions as expected.
   • Open your current live site and your development site in separate browser windows side-by-side.
   • Go page by page through the site to ensure everything looks and functions as expected.

Tip: You can use your site’s sitemap to help you check every page!

Step 5: Republish your website

Once you are satisfied with your review, you will need to republish your entire site to your production publishing destination.

Republishing your site may take longer than normal, as dozens of sites may be trying to republish at the same time. If possible, it may be worth scheduling time to republish 1) after hours and checking the site before bed, or 2) early in the morning and checking your site when you come into the office.

How to Republish Your Site

Republish your site by publishing the root folder:

• Open the folder at the root of your site (the folder name starts with “DMC AUX”) in the preview pane
• Click Publish
• Optionally select a date and time under “Optionally publish later” to have your site republish after hours
• Check the destinations you want to publish to — choose the production (live) option
• Click Publish

New Features Coming With This Upgrade

With this upgrade, we are adding additional options to our navigation and bringing three new components to our Cascade sites.

Mega Menu Functionality

As part of Aggie UX 2.0, we have made extensive changes to how our site headers and navigation work, including adding mega menu functionality.

New Navigation Behavior

Aggie UX 2.0 has two different behavior options for your navigation.

• The dropdown menu behavior is the same as the current behavior, where clicking on a drop down navigation item reveals a list of links.
• The mega menu behavior is similar to what is available on www.tamu.edu, where clicking on a mega menu item opens a panel of navigation options.

Both the dropdown and mega menu options allow for buttons that link directly to a page as an option within the menu.

Please note that you can have EITHER a dropdown or mega menu on your site; not both.

In Cascade, you can easily toggle between the dropdown and mega menu behavior without losing data.

How to Edit Your Navigation

• Open the navigation block currently in use on your site by opening any page in the preview pane and click on the red Edit Primary Navigation link in the top left corner of the preview pane.
• Fill out the content fields as desired
• Click Preview Draft
• Click Submit
• Enter version comments
• Click Submit again

Note: the mega menu functionality automatically adds a heading within the mega menu that matches the menu item that opens the mega menu. This heading is designed to link to a page, but you will have to set that link.

Contact Card Collection B

The Contact Card Collection B offers more robust display options for images and other enhancements than the existing Option A (both will be available).

In Cascade, you have two ways to add content to contact cards:

• Manually enter information, where this information is only displayed in one location, OR
• Link cards to profile pages, automatically displaying information from that profile on the contact card

Video Embed

The video embed component offers a new way to add videos to pages. This component features an embedded video with a heading and description, and optional share icons, CTA, and embeddable transcript.

Enhanced Accordion Groups

Our accordion groups now come with an “expand all / collapse all” functionality. The “slim” style is also available.

All accordions that are in the same group can be opened and closed using this functionality.

Note: you can add multiple accordions to a group by using the plus (+) button.

Aggie UX 2.0 includes major changes and optimizations to our codebase (HTML, CSS and JavaScript). These changes:

• Speed up load times for sites using Aggie UX by making our CSS file 6x smaller and reducing the number of JavaScript files — even after adding functionality
• Eliminate reliance on external JavaScript libraries (jQuery)
• Increase consistency across class names, especially for component containers
• Improve accessibility through structural HTML updates across the system that are difficult to implement outside of a major change

This release also adds mega menu functionality to our site header and navigation options. While we were modifying the navigation code, we also simplified the way we talk about the different options to focus on the site identity type: lockup identity or text identity.

More Aggie UX 2.0 Roll Out Information

• March 30–31 | Upgrade all Cascade AUX sites
• April 3 | Release Figma 2.0 file
• Late March / Early April | Beta test the WordPress 2.0 theme
• April | Release the WordPress 2.0 theme

For Cascade Site Owners

Aggie UX Cascade sites will be updated on Monday, March 30 – Tuesday, March 31. No edits will be able to be made to Aggie UX Cascade sites during this time.

If you’re planning to launch a website in Cascade using the Aggie UX theme or make critical content updates between March 30–31, please email us at web@tamu.edu. We’d like to connect to discuss a planned upgrade and any potential impacts to your timeline.

For WordPress Site Owners

WordPress beta testing will be in late March/early April. We are planning on releasing the Aggie UX v2 theme in April, date dependent on any issues discovered during testing. 

You will not have to install the Aggie UX v2 WordPress theme immediately when it is released. You are able to choose the time that works best for your team to test the theme in a testing environment, and then apply the theme to your production website after you have confirmed the new theme doesn’t introduce issues to your site.

For Custom Development

If you are working on custom development based on Aggie UX v1, you will still be able to reference our v1 code and documentation at aggieux.tamu.edu/v1/. However, Aggie UX v1 will no longer receive support from our team outside of critical security bug fixes.

If you are referring to any of our v1 code (CSS or JS), you will not need to update your ref links. All CDN links to v1 CSS and JS are remaining the same.

How to Update

Remember, you should always test a theme update on a local or development site before applying it to your live (production) site.

Learn how to update your theme →

Changelog

• CTA Feature now supports (optionally) opening a link in a new window.
• Fixed bug that output empty lists in contact card collections. Now, if you don’t fill out contact information, no list will be output.
• Fixed bug that resulted in duplicative images in shares via iMessage. Now, you should only see one image or preview when sharing links to an Aggie UX page, news post, or post.
• Fixed display issue with media feature with image on featured news posts.
• Fixed display issue with images in standalone block quote on featured news posts.
• Fixed the root cause that resulted in a PHP warning notice when activating a child theme.
• Fixed error when link list collections would not use the default number of columns.

How to Update

Remember, you should always test a theme update on a local or development site before applying it to your live (production) site.

Learn how to update your theme →

Changelog

Changed

• Upgraded the Aggie UX framework from version 1.13.1 to 1.13.2. This patch introduces some CSS fixes to Gravity Forms components, including hiding the honeypot and error validation styling.
• Hid “uncategorized” category tags. “Uncategorized” is now removed from the list of categories everywhere on the front-end of the website. Before, if a post was in the “Uncategorized” category, that was displayed in a few places.

Policy-driven Updates

• Added required Dublin Core meta data to comply with Texas law. 1 TAC 206.73 and 13 TAC §3.3 require the fields specified in Texas Records and Information Locator (TRAIL).

Changes to WP Admin

• Disabled suggested third-party blocks feature. This Gutenberg feature suggests block plugins to install to users when they are adding a block to a page or post. We disabled this because many third-party blocks are incompatible with our theme, inaccessible or security risks.
• Fixed bug that hid login button. The bug caused the login button to not appear when “Web team — local site login” was clicked. The login page now remembers if the local login or the login with NetID was used. The next time you visit the login page, it defaults to the method you used last time.
• Disabled Gravity Form themes. If enabled, they conflicted with AUX styling. Thank you to Mark Bennett at Engineering for identifying the problem and for providing the code!
• Allowed Gravity Forms Gutenberg block as a way to add a form to a page. Using a shortcode still works too.

Accessibility Fixes

• Fixed heading level issue on card groups with featured cards. In some situations, headings were incorrectly ordered.
• Removed title attribute from anchor links in cards. The title attribute was providing redundant information to screen readers.
• Added tab index to skip linked images in cards. This prevents screen readers from reading links in cards twice (in some situations, cards with images are linked in addition to a linked heading).
• Added a space between name and title in standalone blockquote. Some strings of text were separated with a <span> html tag. Visually, they were separated by a new line or a space but Siteimprove and other scanners viewed the text as not having a new line or space and was flagging combined words as misspellings.
• Removed target=”self” attribute from card links. This attribute was unnecessary. 

This update upgrades WordPress to the latest version of Aggie UX – 1.13.1. Highlights include new icons, improved support for Gravity Forms and numerous bug fixes in both the AUX framework and for the AUX WordPress theme. View the changelog below for more details.

How to test the update

On a local or development site that is already running the AUX WordPress parent theme:

1. Log in to WordPress and visit the Appearance > Themes page.
2. Click on the “New version available. Update now” link in the message above the AUX-WordPress theme.
3. If you are on WPEngine, clear the site cache.
4. Test your local/development site after the update. Visit important pages, add and modify content and make sure everything looks and works as expected.

How to update your live (production) website

After testing the update:

1. Schedule a time to update your live website. Notify WordPress editors and appropriate stakeholders. Items to communicate:
   1. When the update will happen.
   2. How it may impact them: better form support, new icons, bug fixes.
   3. The update should not result in an outage; however, editors should save their work and refrain from making changes while the site is being updated.
2. At the time you scheduled for the update, first make a backup checkpoint of your WordPress files and database.
3. After the backup has completed, install the theme update in WordPress. As with your local/development site, you will find the update option in the Appearance > Themes page in WordPress. Update, clear the site cache and test!

How to install the AUX WordPress theme on a new site

1. Install and activate the Advanced Custom Fields Pro plugin.
2. Note: The free version of Advanced Custom Fields will not work. We have purchased an unlimited license that you can use for any Texas A&M website. If you don’t have ACF Pro, email web@tamu.edu to request a download link and license key.
3. Install the AUX WordPress parent theme (aux-wordpress.zip)
4. Install and activate the AUX WordPress child theme (aux-wordpress-child.zip)

How to get help or ask questions 

Join our weekly office hour! We offer a come-and-go virtual office hour every Thursday from 10 a.m. until 11 a.m. to support Aggie UX, AUX Cascade and the AUX WordPress theme. These sessions are a great opportunity to ask questions, get guidance and troubleshoot challenges with web team members in real-time.

To streamline support and ensure everyone receives timely help, please use these office hours for Aggie UX, Cascade and WordPress-related questions rather than reaching out via Slack or email.

Stay in the know with Aggie UX

Stay up-to-date with all things Aggie UX by subscribing to the #aggie-ux Slack channel (available to Texas A&M University employees) and this email list.

Changelog

Changed

• Upgrade the Aggie UX framework from version 1.10.0 to 1.13.1.

Added

• Styling for all Gravity Forms field types (1.0.0 only styled some field types).
• Code for developers:
  • Getter functions for block name, block slug, raw block data – in /WP_AUX/Entities/AuxFramework/BlockHandlerEntity.php
  • Element attributes handler – Manage element attributes independent of an HTML element object: in /inc/WHOOP/Entities/ElementAttributes.php
  • Refactor – added service to create section and slab with reduced code. See code examples in /blocks/ for creating and customizing blocks.
  • More inline documentation and usage examples.
  • Support registering a plugin as an AUX plugin for seamless integration with parent theme code and file structure features. This will make it possible to show php documentation in the wp-admin UI and other future improvements.
  • CSS helper classes added to section html tag for the types of blocks in that section.

Fixed

• Utility navigation links in the top of the header now appear in the mobile navigation menu.
  • Note: currently, links in the “For You” and “Quicklinks” menus are not reproduced in the mobile menu. This will be fixed in a future release.
• Consistent labels in WordPress admin for custom post types.
• Prevent error condition if a media type (mime type) is not returned for a video embed from YouTube or any other video provider.
• Wrap shortcodes in a <section> html tag where applicable to fix layout issues.
• Do not put “internal” CSS class on non-component sections.
• Collection feature now has correct spacing and layout.
• Section html attributes: css class, data, name.
• Images not cropped now in the captioned media block; images should retain the aspect ratio of your image upload.
• Removed unused vertical-thumbnail image option.
• Caching issue for styles in the editor.

Additional updates:

• Enhanced the video preview within media features, media slabs, video embed and captioned media to display like a YouTube embed
• Fixed major issues with icons introduced in the previous update, ensuring icons are displaying at the correct sizes within components
• Addressed other minor bugs

Additionally, a story and documentation were created for the social media banner. This component currently exists in Figma and our CMS implementations.