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. User Avatar
    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!

    • User Avatar
      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:
      https://gist.github.com/GeneLocklin/2420777

  2. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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!!!!

    • User Avatar
      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.

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-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag