The great move into WordPress is underway! We finish up the header.php file and move into index.php. index.php is in charge of our homepage. The first line of that file is a PHP function get_header() which essentially just gets the header.php file in plops it in there, which is why we started there.

We stay in our split screen layout comparing files left and right and moving things from our static mockup into WordPress.

We reference PHP date parameters to get our <time> element correct.

By the end of the video we can see the design coming together a lot further than we have so far.


  1. ryandolankayak
    Permalink to comment#

    Hi Chris, What is the tumblr post() ? I tried this and it didnt work, I went back to using the_permalink and my content reappeared

    • Chris Coyier
      Permalink to comment#

      Check out the code in the functions.php file. Essentially if I set a particular custom field on a post, it uses that value (a URL) instead of the permalink. That’s how I do the “Hot Links” posts. The titles link right to the source (on the site and in the RSS feed).

      See more.

  2. Seth Hall
    Permalink to comment#

    Unfortunately this section of videos presumes that the viewer understands WP php code, loops, functions etc… Although I have built WordPress sites, I am unfamiliar with all the specifics of these. I have been meaning to familiarize myself with WP php, so this will be the catalyst.

  3. slefkaditis
    Permalink to comment#

    Why didn’t you use the wp_nav_menu to create your nav? I’m converting a site over to wordpress(noob level) and I’m having trouble making the default menu output Link

    • Chris Coyier
      Permalink to comment#

      wp_nav_menu() is great, but my menu is pretty much set in stone in this design. I don’t need a programatic declaration of the menu in which to control it through the admin. I’m just as comfortable or perhaps more comfortable controlling it through the markup.

      If you’re building a site in which to turn over control to non coders, coding menus with wp_nav_menu() is perfect for giving them that control.

    • Kelvin Alfonso
      Permalink to comment#

      If you are going through the wp_nav menu this is the code I used on The Cool House

      First I included the icon-font through the CSS:

      /* FontAwesome font for social icons. Full source at */
      @import url(FontAwesome/css/font-awesome.css);

      The Menu Walker code can be found here (put it in a plugin or file with the later pastebin code):

      Call that walker

      wp_nav_menu( array('container' => 'nav', 'container_class' => 'main-menu', 'theme_location' => 'main','walker'=> new Description_Walker ) ); 

      The code to allow for an additional menu page option can be found here:

      What all that does is first add the icon-font to the page through CSS, then create the Menu Walker function, call it up, and add an option to the Menus page that can be seen once you click the arrow next to a menu item.

      It’ll read Custom Icon and you’ll want to put in something like


      in there with the example of font-awesome.

      Sidebar: the way I rendered the icon isn’t the most semantic, so you can swap the tags for tags and add aria things to it. Chris has a few good posts on this.

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.