We have the gallery area set up in WordPress it's spitting out what we need it to spit out, but there is almost no styling at all on the page yet.

We start by going over the code in the functions.php file that sets up the custom post type that "Screenshots" are built from on this site. It's a little involved, since there is no only a the custom post type and all the custom verbiage and whatnot that goes with that, but also a custom taxonomy and all the custom verbiage for that. This is so I can tag screenshots but not infest the global "tags" taxonomy.

For the record, that stuff should be in a functionality plugin not my functions.php file, but I'll get to that eventually.

For the rest of the video we do what we've been doing on other pages: go line by line through out static mockup and move the relevant stuff over into the WordPress template file. There is some stuff in the WordPress area that we keep around because we'll need it later, like where it outputs tags and where each image is wrapped in a link instead of a div.


  1. vanmen
    Permalink to comment#

    Hi Chris,

    Since you have added a lot more videos I cannot view them on my iphone nor ipad anymore…??? The browser just crashes whenever I click the “Go to the video list” button. This used to work fine before you had over 80 video’s in the list.

    Maybe you can paginate the video pages in stead of loading the 120 plus posts in one row?? Am I the only one here??

    • Chris Coyier
      Permalink to comment#

      I just pushed out some pagination stuff. Lemme know if it’s still a problem by emailing me at chriscoyier@gmail.com

      I’m going to bury this just because it’s a specific technical issue not related to this particular video.

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 triple backtick fences like this:

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

We have a pretty good* newsletter.