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.
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!
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.
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.
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!
I get a 404 error where the video should be.
it’s ok now, maybe had something to do with Sandy, the hurricane.
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.
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!
3:38, nice voice =).
Thanks for these tips.