#136: Moving Things to a CMS as Needed

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.

Comments

  1. User Avatar
    Tiago
    Permalink to comment#

    I wish I had seen this article before.. Very good to understand much of what WordPress does and how it can be customized.

  2. User Avatar
    Matt edwards
    Permalink to comment#

    Hey Chris,

    Just a heads up. I’m not sure where the issue lies but I can’t get the video embed to play in chrome on an iPad. It just doesn’t respond to touch.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      It’s just a YouTube embed, so I dunno. Do other YouTube embeds work for you? I’m burying this just because it doesn’t have anything to do with the content for this video, but we can keep talking it out if you like.

    • User Avatar
      Todd
      Permalink to comment#

      Same here. On Safari iPhone 6

  3. User Avatar
    shaneisme
    Permalink to comment#

    You should get posts once, and then split them after so you only have one query :)

  4. User Avatar
    Vitor Melo
    Permalink to comment#

    ACF is very userful. I don’t live without it in my projects, thanks for video Chris.

  5. User Avatar
    Vitor Melo
    Permalink to comment#

    I like to plugin Types too (https://wordpress.org/plugins/types/screenshots/). This plugin combine, CTP with Custom Fields.

    • User Avatar
      Jeff Stone
      Permalink to comment#

      @Vitor – I agree with you on “Types.” I’ve found that to be a much better plugin than the ACF/CPT UI combo.

  6. User Avatar
    Bryn Howlett
    Permalink to comment#

    Great Post! This is similar to Views for Drupal.

  7. User Avatar
    Zabba
    Permalink to comment#

    There is no need for WP-plugins like AFC or Pods when using a modern CMS like Craft or Processwire. Just say’in…

  8. User Avatar
    Ben MacAdam
    Permalink to comment#

    Yep, awesome. Love it. Thanks Chris!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag