Want ultimate design power and freedom? If you have a good reason to break usability - and you can register some widget areas - you can make a site look like anything that makes sense for your site.

1. Ultimate
power!

2. Ultimate
freedom!
Register a few widget areas and make your site look like anything!

3. I’ve been beating that horse for a while.

4. It’s definitely a skill worth developing. And we will - in a few minutes.

5. But let’s take a step back.

6. Here’s a slide from last summer, complaining about phone views that look too much alike.
Should we change things up every time we get a hankering to try something new?

7. Not if you follow the gospel of the heat map. Where the eyeballs go, so must the content.

8. Oh really?
Where are the eyeballs going now?

9. How bout now?

10. We’re designers.
We can make the eyeball go wherever we please!

11. We can make the
eyeballs go where WE
want.
We’re designers.
We can make the eyeball go wherever we please!
Which is great if the situation calls for a new approach.

12. We can make the
eyeballs go where WE
want.
If our users are looking for visual stimulation. Inspiration. Excitement.

13. But sometimes, they’re just filling out a form for a car loan. Or paying a bill.

14. In which case, a little more attention to the heat maps might be a good idea.
This is my young friend Jimminy, a developer who splits his time between West Virginia and the Bay area. He spends a lot of time around regular people - who are
actually just like the rest of us when we’re trying to get stuff done.

15. I saw this tweet of his a couple days ago - just as I was thinking about how we have all this power - the power to direct the eye.

16. Now, sometimes we do need to break away. We’re building something new. (My poor husband. He sees these tennis balls every damn day, practically.)
As a home page goes, this site - a Genesis site, btw, is pretty out there. No header. No footer. Main navigation around the ball.

17. But it didn’t come from nowhere. There was this folder, first.

23. So. How do we execute this in Genesis? Or any other theme?

24. Widget. Areas.

25. Here’s a demo from a talk I did last year.

26. So. How do we execute this in Genesis? Or any other theme?

27. What’s
the difference?
Like I said.
Ultimate power.
90% of the basis of layout flexibility, I think, is widget areas.

28. 1
2 3 4
And these FOUR widget areas.

29. Underscores.
How would we do this in Underscores?

30. Step 1. The
markup.

31. Before.2
3
4
1
Let’s start with the markup.
This is a home page, but it could be any page - a blog page, a special page you’ve created for a reason - even an archive page.
But this happens to be an Underscores home page.
We’ve got our main content area, with the Loop and then two sidebar widgets.

32. markup - before
Let’s start with the markup.

33. After.
1
2 3 4
And these FOUR widget areas.

34. front-page.php

35. Step 2.
From boxes to
widgets.

36. Register sidebar.

37. And, finally . . .

38. Let's dress ’em up!
And get ’em dressed.
See what I mean about floating everything left?

39. Mary Baum
racquetpress.com
@marybaum

40. Genesis.
Same three files.
It looks more complicated and codey, but it’s really not.
For one thing, there’s about a million people writing code snippets we can just drop in.

41. Again, our demo.

42. So with Genesis - I saw there was a sticky header menu already hard-coded in the Minimum Pro theme, so I decided to leave it. So let’s go through the process one
more time.

43. The visual reference.
Now let’s take the clothes off these divs.

44. And here are the asides we’re going to make…

45. and move.
And here they are in place. K - let’s code it up!

46. The code to make the asides is pretty much identical to the Underscores code.
You can add markup, like …

47. Underscores:Widgeted area with markup.
Underscores, if you want. Generally, I only add it when I’m changing the style of the widget title. I mean, really - h4?
But the only arguments you really need are those first three: id, name and description.
(Now, this is not a CSS id - I’m not big on those. I greatly prefer classes, and in fact I make these IDs class names, or parts of class names.)
If you want more control, you can add the before-widget and after-widget arguments, and give them some markup too. Again, just like Underscores.

48. front-page.php
Laying out the widgets is pretty straightforward. I just found a recent article that showed you can do it without the action hook - almost exactly like Underscores. But I
KNOW this works.
I commented out the loop, but I could just as easily have blown it away. If I wanted a bunch of post excerpts above or below the widgets, the loop will bring ’em in.

49. style.css
Now let’s make them match the Underscores widgets.

50. Widgets panel.
Now let’s add the Featured Posts … without rewriting the markup, I might add, the way I did with the plugin we used with Underscores.