Working with WordPress at UCLA

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

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

.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

/* 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

Advanced Custom Fields

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

<?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

<?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

<?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

CSS, HTML, PHP and WordPress

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

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

Working with WordPress at UCLA

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57