This is an extra special EMPIRE STRIKES BACK themed episode of the v10 redesign series!

Everything starts out just fine. We start moving some things over to our WordPress template from our static mockup. We have the header working in our static mockup, so we start with that. That's always a great place to start because we do all that foundational work like getting the site section CSS loading conditionally and all that.

We then look at what markup already exists for the Alamanc. Pretty much the entire page is wrapped in <nav> since this homepage of the Almanac is essentially just navigation to actual content.

Then we start tinkering away with layout and building the two-page spread layout we designed in Photoshop. We use CSS gradients here to get the shadowing job done, using Compass mixins of course. Things start going a little downhill here as we struggle with getting the gradient just right.

Around the 20 minute mark in this video we start trying to output all the stuff we need to output here. Essentially, using wp_list_pages() a bunch to spit out child pages of the Almanac.

And then the world explodes! For totally inexplicable reasons, it won't output the right stuff for us. This is an extremely frustrating moment. I like sharing this kind of thing because it's very real-world. You know this kind of thing happens! Troubleshooting through it is part of the job.

We try Googling things. We try resetting the query. We try double checking the code. We try manipulating the parameters. We try different functions. Nothing.

We try setting define('WP_DEBUG', true); in our wp-config.php file to try and get more information. This works once we can read the text it outputs. It doesn't help much though, until we find the out of memory error! We know the problem now, but how do we fix it?

We end this screencast totally defeated like Luke Skywalker. You might as well just tell me <table>s are my father.

Comments

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:

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

We have a pretty good* newsletter.