We end up with a really simple test which loads in an article from the blog to display if there is room:

// Load additional content if enough room
  .register("(min-width: 700px)", {
    match: function() {
      $("#home-article").load("/blog/ #main-article");

jQuery makes Ajax super easy, and even easier with the .load() function. The only little trick here is where we've added #main-article to the end up the URL which limits what it injects onto the page to that CSS selector. It would be more perfect if we engineered some solution to only return the content we need to add, but this is a such a quick and easy solution it's kind of beautiful.

Sorry about the not-great sound on this one =(.


  1. User Avatar
    Steve Vaughan
    Permalink to comment#

    Hey Chris,

    Great video. Do you have any recommendations for pulling in content that isn’t displayed elsewhere on a site? For example an extra section of markup or sidebar.



    • User Avatar
      Chris Coyier
      Permalink to comment#

      Content definitely doesn’t need to be displayed on the site in the “normal” way to be Ajax’d in. You could drop an .html file at the root of the site and hit that URL and bring it in. Since this is WordPress-land, the approach I’d probably take is to make a page template called Ajax and publish it at /ajax/ which takes query parameters and runs a DB query with them and returns whatever you want as (pretty raw) content.

    • User Avatar
      Steve Vaughan
      Permalink to comment#

      Thanks for the quick response Chris, that sounds like a simple way of doing it, I’ll go and try it out!

  2. User Avatar
    Permalink to comment#

    Great Video Chris, just a quick question.

    Using enquire, I understand as you enlarge the browser window, the content appears automatically, but if you reduce the browser window, is the content still there in the DOM? In your example it disappears but that is because you are using display: none. Is it still in the DOM?

    Secondly, why would you use this technique over this one… http://css-tricks.com/examples/ConditionalCSS/ – The technique on the link seems a lot more quicker and snappier.

  3. User Avatar
    Chris Coyier
    Permalink to comment#

    In the video I go over a number of different ways you can go about the testing. Conditional Content is another one. I stuck with Enquire here because I think it’s a great option for people who want a slightly more complex framework with callbacks for how to handle multiple scenarios.

    For instance, we do simply display: none; in this example because, frankly, it just isn’t that big of a deal. If we were concerned about the weight of the DOM as we might be on a larger site, we could then use Enquire’s unmatch callback to .remove() the content from the page.

  4. User Avatar
    Shawn Stringfield
    Permalink to comment#

    Is the homepage not in the WordPress system? I’m just trying to figure out why you are not including the latest blogpost using native wordpress queries vs Ajax. I kinda skipped around videos and did not watch them one by one so sorry if this was covered under some other previous video.

Leave 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.