#136: Moving Things to a CMS as Needed

Avatar of Chris Coyier
Chris Coyier on

In this video, I prattle on about a particular “real world” situation I was in involving how I handle the CodePen Meetups page.

At the very beginning days of CodePen Meetups, we just had a single one planned. It was to be the first ever CodePen Meetup in Austin, Texas. So I made a page for it as part of the main CodePen website (a Rails project) at the URL /meetups/. There, I got to design it however I wanted. I was figuring out what kind of information needed to be on that page and how to present it. (In the video, we dug up a copy of the site at that time, through Cached Pages (screenshot)).

Time went on. I added a few meetups to it, and the form of displaying multiple meetups on the page took shape. I figured out what bits of information were common among all meetups and how to show that. At the same time, updates were getting tedious. Adding new ones is work. It easy to forget to remove old ones. And it kinda sucks just deleting HTML like that, knowing that’s potentially useful information you’re destroying. I was just straight up editing an HTML template here.

The time came that this really needed to be systematized and moved into a Content Management System. Fortunately, the move was fairly easy, as I knew exactly what I needed and I knew I had tools to pull it off. We’ve actually done this kind of thing before several times. For instance here and here.

It comes something like this:

  1. Create a new Custom Post Type (“Meetups”) with this plugin.
  2. Attach exactly the custom fields you want to that CPT (date, time, venue, etc).
  3. Publish away!

We set has_archive to true for our CPT, so we got the URL /meetups/ for free, which uses the template `archive-meetups.php` automatically. We needed to do serious custom work on that template though, as we had to:

  1. Display all the information we needed just how we want it.
  2. Display upcoming meetups in date order.
  3. Automatically move old meetups to a “Past meetups” section.

All totally doable. First let’s query for the meetups we want (after today’s date). We do that by running a custom query involving the proper custom field

<?php
  $today = date('Ymd');
  $myposts = get_posts(array(
    'post_type' => 'meetups',
    'posts_per_page'  => -1,

    'meta_key' => 'date',
    'orderby' => 'meta_value_num',
    'order' => 'ASC',

    'meta_query' => array(
      array(
        'key'   => 'date',
        'compare' => '>=',
        'value'   => $today
    ))
  ));

  foreach ($myposts as $post) : setup_postdata($post);

  // The loop! Output stuff!

  endforeach;
  wp_reset_postdata();

?>

Outputting custom fields is very easy with Advanced Custom Fields. It gives you a function you can use like this, just name the field:

<?php the_field('location'); ?>

We just put that kind of output into the existing HTML we were already using in this new template. Then we run another loop, only with inversed date comparison, for the past meetups.

Nothing hugely revelatory here, I just get excited about this kind of thing because:

  • It feels highly productive, for such a small amount of work (I did it while laying on the couch one night).
  • I can do it without needing to bug the team to develop something fancy, I can use my front-end developer skills to do it. (I consider tinkering with WordPress themes and basic functionality a front-end skill).

And of course, WordPress isn’t required for this. I’m sure it’s possible in any CMS. That’s what CMS’s are. I just like and know WordPress best.