Working with WordPress at UCLA

A presentation at [West LA] WordPress meetup in August 2019 in Santa Monica, CA, USA by Scott Gruber

Working with WordPress at UCLA speaking.scottgruber.me @ West LA WordPress

speaking.scottgruber.me @ West LA WordPress

Web design ethics. speaking.scottgruber.me @ West LA WordPress

A11y speaking.scottgruber.me @ West LA WordPress

Performance speaking.scottgruber.me @ West LA WordPress

Aesthetics speaking.scottgruber.me @ West LA WordPress

Sites must work for everybody, load fast and look good. speaking.scottgruber.me @ West LA WordPress

How do we get there? speaking.scottgruber.me @ West LA WordPress

Structured content Advanced Custom Fields CSS Layouts speaking.scottgruber.me @ West LA WordPress

HTML Semantic markup and microformats. speaking.scottgruber.me @ West LA WordPress

<nav class=”ucla-c-topic-nav”> <ul> <li><a href=”#climate-change”>Climate Change</a></li> <li><a href=”#energy”>Energy</a></li> <li><a href=”#policy-law-regulation”>Policy</a></li> <li><a href=”#sustainability”>Sustainability</a></li> </ul> </nav> speaking.scottgruber.me @ West LA WordPress

Flexbox speaking.scottgruber.me @ West LA WordPress

.ucla-c-topic-nav ul { display: flex; flex-direction: column; list-style: none; } @media screen and (min-width: 30em) { .ucla-c-topic-nav ul { display: flex; flex-direction: row; flex-wrap: wrap; } } speaking.scottgruber.me @ West LA WordPress

<h2><a id=”climate-change”></a>Climate Change</h2> <div class=”ucla-c-faculty-advisors”> <ul> <li><a href=”#”>Alan Barreca</a></li> <li><a href=”#”>Alex Hall</a></li> <li><a href=”#”>Peter Kareiva</a></li> <li><a href=”#”>Liz Koslov</a></li> <li><a href=”#”>…</a></li> <li><a href=”#”>…</a></li> </ul> </div> speaking.scottgruber.me @ West LA WordPress

Multi-Column speaking.scottgruber.me @ West LA WordPress

@media screen and (min-width: 30em) { .ucla-c-faculty-advisors > ul { column-count: 3; column-gap: 1em; } } @media screen and (min-width: 60em) { .ucla-c-faculty-advisors > ul { column-count: 5; column-gap: 1em; } } speaking.scottgruber.me @ West LA WordPress

HTML5 & Microformats speaking.scottgruber.me @ West LA WordPress

<div class=”ucla-c-people-grid”> <article class=”h-card”> <a class=”u-url” href=”#”> <figure> <img class=”u-photo” src=”https://placekitten.com/300/400” alt=”kitten photo” /> <figcaption> <h2 class=”fn p-name”>Kitty Doe</h2> <p class=”p-job-title”>Assistant Professor</p> <small class=”p-org”>Institute of the Environment and Sustainability</small> </figcaption> </figure> </a> </article> </div> speaking.scottgruber.me @ West LA WordPress

CSS Grid speaking.scottgruber.me @ West LA WordPress

.ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; } speaking.scottgruber.me @ West LA WordPress

RWD responsive by default with no media queries speaking.scottgruber.me @ West LA WordPress

/* fall back if no grid support */ .ucla-c-people-grid > article { display: inline-block; margin: 1em; vertical-align: top; width: 300px; } .ucla-c-people-grid > img { height: auto; width: 200px; } speaking.scottgruber.me @ West LA WordPress

@supports (display: grid) { .ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; } /* reset properties */ .ucla-c-people-grid > article { margin: initial; width: initial; } speaking.scottgruber.me @ West LA WordPress

Editors speaking.scottgruber.me @ West LA WordPress

PHP speaking.scottgruber.me @ West LA WordPress

<?php $count = count(get_field(‘ioes-l-repeater-list-people-by-topic’)); if ( have_rows(‘ioes-l-repeater-list-people-by-topic’) && $count > 1 ): ?> <nav class=”topic-nav”> <ul> <?php while ( have_rows(‘ioes-l-repeater-list-people-by-topic’) ) : the_row(); $posts = get_sub_field(‘ioes-l-people-list-group’); if( $posts ): $ioes_l_people_list_heading = esc_html( get_sub_field(‘ioes-l-people-list_heading’) ); if( get_sub_field(‘ioes-l-people-list_heading’) ): ?> <li> <a href=”#<?php echo sanitize_title($ioes_l_people_list_heading); ?>”> <?php echo $ioes_l_people_list_heading; ?></a></li> <?php … ?> </ul> </nav>
speaking.scottgruber.me @ West LA WordPress

<div class=”ioes-l-people-group-grid”> <?php foreach ( $posts as $post ): // variable must be called $post (IMPORTANT) ?> <article class=”h-card”> <?php setup_postdata($post); ?> <a class=”u-url” href=”<?php the_permalink(); ?>”> <div class=”u-photo”> <?php the_post_thumbnail( ‘3x4’ ); ?> </div> <h4 class=”fn p-name”><?php the_title(); ?></h4> </a> <?php if( get_field(‘people_title’) ): ?> <p class=”p-job-title”><?php echo esc_html( get_field( ‘people_title’ ) ); ?></p> <?php endif; ?> <?php if( get_field(‘people-entity-department’) ): ?> <small class=”p-org”><?php echo esc_html( get_field( ‘people-entity-department’ ) ); ?></small> <?php endif; ?> </article> <?php endforeach; ?> speaking.scottgruber.me @ West LA WordPress

What did we cover? speaking.scottgruber.me @ West LA WordPress

What are you working on? speaking.scottgruber.me @ West LA WordPress

Thank you. speaking.scottgruber.me @ West LA WordPress

Scott Gruber
@scottgruber

1 / 57

During this demo presentation, we’ll go through the steps to build a people directory on an academic site. We’ll see how Advanced Custom Fields, WordPress custom post types, CSS Grid, Flexbox, and CSS Multi-column layouts are combined in a real-world example. We’ll take a look at WordPress admin screens, functions.php, front end templating and semantic HTML to develop a solution in production today.

Scott Gruber is building with WordPress, Advanced Custom Fields and CSS layouts at the UCLA Institute of the Environment and Sustainability.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/scottgruber/pen/qzeLGO

Flexbox nav
https://codepen.io/scottgruber/pen/WqVPgB

Multicolumn Layout
https://codepen.io/scottgruber/pen/rEXRyw

CSS Grid layout

Includes support queries, minmax and fallback for browsers that don’t support CSS Grid.

Buzz and feedback

Here’s what was said about this presentation on social media.

You're invited https://t.co/nvaYY9PRf4 workshop on CSS Grid on July 31 Meetup at Black Tux: RSVP https://t.co/EkiEpwRtGV #Meetup #SantaMonica via @Meetup HT @postmarkapp @LearnToCodeLA
— CSS.la (@cssdotla) July 13, 2019

Working with WordPress at UCLA

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Art direction for the web by Andy Clarke

Content in a Zombie Apocalypse

[West LA] WordPress

Why we stopped using Bootstrap

Grid by Example: Grab & Go Patterns

Layout Land

Learning Web Design

Mozilla Developer Network: CSS Grid Layout

Art direction for the Web

How I remember CSS Grid properties

W3C CSS Grid Layout Module Level 1

Rachel Andrew on Smashing Magazine

Get Started with Grid Layout

Feature queries

Using Feature Queries in CSS

Super-powered Layouts with CSS Grid and CSS Variables

A Complete Guide to Grid on CSS Tricks

The New CSS Layout

Code

Flexbox nav

Multicolumn Layout

CSS Grid layout

Buzz and feedback