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:
- Create a new Custom Post Type (“Meetups”) with this plugin.
- Attach exactly the custom fields you want to that CPT (date, time, venue, etc).
- 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:
- Display all the information we needed just how we want it.
- Display upcoming meetups in date order.
- 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.
I wish I had seen this article before.. Very good to understand much of what WordPress does and how it can be customized.
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.
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.
Same here. On Safari iPhone 6
You should get posts once, and then split them after so you only have one query :)
ACF is very userful. I don’t live without it in my projects, thanks for video Chris.
I like to plugin Types too (https://wordpress.org/plugins/types/screenshots/). This plugin combine, CTP with Custom Fields.
@Vitor – I agree with you on “Types.” I’ve found that to be a much better plugin than the ACF/CPT UI combo.
Great Post! This is similar to Views for Drupal.
I guess that’s basically what it is…
There is no need for WP-plugins like AFC or Pods when using a modern CMS like Craft or Processwire. Just say’in…
Yep, awesome. Love it. Thanks Chris!