I thought we could scoot by Events which what we talked about in the last video, but as I fleshed out the Events area enough code had to be written I thought it was worth a wrap-up video.

In some cases, we have to check for the presence of a custom field before outputting it. Namely if the field isn't required. It may be best practice to do this all the time since the required-ness of a field may change. Anyway, you can test if any particular custom field has data in it like:

if (get_field("date_of_opening")) {
  // will be true and do this if there is data
}

Styling of events, as always, is handled in an partial (_events.scss), so it's modular but still together.

Comments

  1. Marcus Burnette
    Permalink to comment#

    Interesting to see that you switched to rems on this one. As someone that’s really just starting to get comfortable with the idea of ems, what’s the best thing to do with rems? Should I set my body font size to “62.5%” and then treat everything as base-10? Without IE7 and 8 support, what’s the best fallback/polyfill?

    Loving this series and interested to see how you take this to a desktop layout!

    • Chris Coyier
      Permalink to comment#

      I was in a weird tweener state there. At some point on the original site I just decided to go for it and use all REMs. But this series is mostly EMs so I switched back.

      REMs are actually much easier to understand, because they always reference the root. So you don’t need to consider the inheritance like you do with EMs.

      The 62.5% thing is a neat trick, but I rarely use it. I’m trying to cleanse my mind from thinking in pixels, since it’s all arbitrary anyway, and there are advantages to working in relative units.

      That trick would make REM sizing easier for a fallback though… If it’s 10-to-1 (like this), then we could do…

      @mixin rem($size) {
        font-size: $size*10 + px;
        font-size: $size + rem;
      }
      
      h1 {
        @include rem(1.5);
      }

      But that’s just for font-size and it assumes the multiplier is 10. Perhaps it could be made into a function to be more general purpose.

      Also, falling back to PX isn’t great. This suggests there is a better way: http://seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback

      And this can definitely get more fancy:

  2. Christian Tysklind
    Permalink to comment#

    Is there a simple way of adding a drop down menu that will filter through the content. Say you only want to display events at “The Joint”.

  3. Stephen Emlund
    Permalink to comment#

    How would you make the events disappear from the page after the event has passed? I think in a real-world situation it would be great if they would become drafts or otherwise become hidden from the page after the event has passed. This way the website admin doesn’t have to manually remove events.

    • Chris Coyier
      Permalink to comment#

      I think I’d try and approach that through the query itself. WP_Query allows for querying based on meta values, even with comparisons, so something like:

      $query = new WP_Query( array( 'meta_key' => 'date', 'meta_value' => 'TODAY-DATESTAMP', 'meta_compare' => '>=' ) );
      
  4. vee_k

    Related to Stephen’s question:
    I have a friend who has events on his website , so this tut came perfectly timed!!! – concerts in his case – and I understand the WP_Query answer you gave;
    but now I am confused at how I should approach my task:

    My friend wants an Archive of his events.
    So do I try and use the bits of Archives.php template code for an extra Events archive page – but then does it work with posts generated by a plugin?

    Or should I use the WP_Query with meta values and use that to “show all the events till today” or something like that?

    Thanks, love The Lodge!!!!

    • Chris Coyier

      I would think if you’re using a plugin for Events, then it likely has more robust features than what we’re doing here, and offers some kind of way to display an archive of events. If not, there is surely some way it’s storing event data that you can query to display your own custom archive, and that way it stores that data is almost surely custom fields.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.