Now that we're running a custom local domain, we can use PHP. The "P" in MAMP is for "PHP" =). Using PHP means that we can use includes. For instance:

<?php include("header.php"); ?>

Our goal is to make a static "blog post" page to start messing around with. We could do that by duplicating our index.html page (now index.php), but we'd have lots of repeated code in that file if we did that. Remember, we're trying to stay as DRY (Don't Repeat Yourself) as possible.

We make a folder called "parts" in which to stick little reusable bits that are common to all pages. Like putting the DOCTYPE and head stuff into a part, the navigation, and the footer (for now just some closing tags) as well.

Now our index.php page and our blogpost.php both use several includes and only differ where it actually matters: the content.

We expand the possibilities of our grid a little bit by making a 2/3 1/3 setup, which we'll use more commonly on article-like pages.

We don't include the body tag, in case we need to change classes on it to use for styling page differently if it becomes useful to style based on a hierarchically high-up class.

We set up blogpost.php with real HTML from a real blog post. Because, as ever, it's better to design around real content than fake content. It's going to need a lot of work, but we have a great foundation to work from.


    Permalink to comment#

    Hey Chris,

    You can right click the tab area inside Sublime text 2 on an open file. It gives you the option to close all other files. It’s handy! Really enjoying watching the videos. Learning so much goodness!

  2. Darfuria
    Permalink to comment#

    I found your workflow really odd at this point. It seems pointless to break things into PHP files that you’re only going to have to move into WordPress template files later. You could’ve just started putting things into WordPress and had the same functionality and consolidations. Plus you wouldn’t have had to mess around with blog post formatting, as you could’ve posted the blog into a new post on the local server WordPress install.

    Nevertheless, I’m enjoying the series, and it’s great to watch somebody else build websites from the ground up. I’ve learned some great little code snippets thus far!

    I didn’t like that the modules didn’t line up with the right edge of the nav at the lower resolution.

    • Chris Coyier
      Permalink to comment#

      Fair point for sure. Couple reasons:

      1) It’s how I actually work, for better or worse.

      2) The jump to WordPress requires a bunch of setup and explanation and stuff. We’re going to get to all that for sure, but I thought it might derail some of these earlier screencasts if things got too complex too early.

      3) If people don’t care about WordPress, this series stays useful longer.

      4) The parts that we are breaking into (e.g. header.php and footer.php) map very nicely over to the WordPress includes later (literally named header.php and footer.php) – so that will be pretty easy when we get there.

    • Darfuria
      Permalink to comment#

      Interesting that you work like that. Is that a result of coming from a PHP background prior to working with any content management system so it’s just habit, or do you prefer to work like that?

      All fair points though. I hadn’t actually considered somebody viewing this screencast without the intent of using/learning about WordPress, so that was somewhat narrow-minded of me!

  3. jecabrac
    Permalink to comment#

    I get a 404 error where the video should be.

    • jecabrac
      Permalink to comment#

      it’s ok now, maybe had something to do with Sandy, the hurricane.

  4. Vyachseslav Kurochkin
    Permalink to comment#

    Hi Chris, after I been moved project to WAMP and update index.html, to index.php half of my menu icons gone. Any suggestion please.

  5. Sino
    Permalink to comment#

    Has anyone been using Prepros Pro whilest following along? I am having trouble switching the index.html to index.php such that it will show my homepage in a local URL. Instead all I get asked from the live browser mode is whether I want to save my index.php file which already has been done.

    I know this might be confusing to read but if you even have a good suggestion of a place I can read up on using prepros with .php files that would be a big help! Cheers!

  6. Thach Pham
    Permalink to comment#

    3:38, nice voice =).
    Thanks for these tips.

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:

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

We have a pretty good* newsletter.