This document discusses converting a custom WordPress theme into a Genesis child theme. It begins by explaining the original theme's design, which included elements from various other themes. It then covers translating the widgets, menus, and other elements into the Genesis framework by registering widgets and modifying CSS and HTML. The goal is to recreate the original design using Genesis for improved performance, security, and ease of maintenance.

1. From a Fireworks Comp
to a Genesis Child Theme
Linda Shum & Sallie Goetsch
7/24/11

2. What’s Fireworks?

3. Why Some People Like Fireworks
Better Than Photoshop
• Multiple Pages • Grouping
• Symbols • Interactive
• Styles Gradients
• Vector Objects • Web Layers
• Libraries • Slice-Scaling
• Easy to Learn
http://boagworld.com/design/fireworks-vs-photoshop/

4. What’s Genesis?

5. Why Genesis?
• Genesis is Search • Genesis Lets You
Engine Optimized Update Your Site
• Genesis Offers Great- Instantly
Looking Turn-key • Genesis Makes
Designs Customizing Your Site
• Genesis Gives You Incredibly Easy
Unlimited Everything • Genesis has Custom
• Genesis Gives You Widgets and Layout
State-of-the-Art Options
Security

6. Theme Options

7. Custom Widgets

8. Original Design

9. Challenges With This Design
• Header and Footer Menus
• Graphite outlines around boxes
• Asymmetric drop shadows behind boxes
• Tabbed slider with rotating images
• Exact spacing

10. Pillaging Child Themes

11. What Came from Where
• Top and Bottom menus from News Theme
• Main menu from Mocha Theme
• Tabbed slider from Venture Theme
• Four-widget home page layout from Executive
Theme
• Large widgeted footer from Platinum Theme

12. News Theme Header Menu

13. News Theme Header Menu Code
Don’t ask ME what this is doing in functions.php. I didn’t
write it that way.

14. Mocha Menu

15. Venture Theme Slider

16. Executive Theme Widgets

17. Platinum Theme Footer

18. Contents of Theme Folder

19. Theme Images Folder

20. Theme Lib Folder

21. Style.css (Key to a Child Theme)

22. Functions.php

23. Registering Widgets
Remember this: we’re going to need to make some changes here.

24. THE ORIGINAL HOME PAGE

25. Home.php: Tabbed Slider

26. Home.php Top Right

27. Home.php Mission Statement

28. Home.php Middle Right

29. Home.php Bottom
Add three more just like this. Note the box classes for the
backgrounds. We’re going to have to change those, too.

30. End of Home.php

31. SO WHAT’S UP WITH THESE
WIDGETS?

32. Close-Up of Widget Design

33. Widget Sliced for Site

34. Test CSS for Widgets
/* JUST SOMETHING TO HOLD THE BOX TOGETHER IN A FLOATING AREA */
.box-area {
float: left;
margin: 0 15px 0 0;
}
/* THE ACTUAL BOX, HEAD ON TOP, BOX WITH BACKGROUND, AND A BOTTOM */
.box-header-blue {
background: #FFFFFF url(box-head-blue.png) no-repeat;
width: 235px;
height: 45px;
color: #FFFFFF;
}
.box {
background: #FFFFFF url(box-back.png) no-repeat;
background-position: bottom right;
width: 235px;
}
.box-bottom {
background: #FFFFFF url(box-bottom.png) no-repeat;
width: 235px;
}

35. Test HTML for Widgets
<div class="box-area">
<div class="box-header-blue"><div
class="head-text">BOX HEADER TEXT</div></div>
<div class="box">
<div class="content">
The box and its
contents.<br><br>
And another line of text.<br>
And some more.<br>
Just to fill things up a
bit.<br><br>
And something to end with.
</div>
</div>
<div class="box-bottom">&nbsp;</div>
</div>

36. What This Looks Like

37. Original Genesis Widget Code
<div id="home-bottom-bg">
<div id="home-bottom">
<div class="home-bottom-1">
<?php if (!dynamic_sidebar('Home Bottom #1')) : ?>
<div class="widget">
<h4><?php _e("Home Bottom #1 Widget", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home
Bottom #1. It is using the Genesis - Featured Post widget
to display what you see on the Executive child theme demo
site. To get started, log into your WordPress dashboard,
and then go to the Appearance > Widgets screen. There you
can drag the Genesis - Featured Post widget into the Home
Bottom #1 widget area on the right hand side. To get the
image to display, simply upload an image through the media
uploader on the edit post screen and publish your post.
The Featured Post widget will know to display the post
image as long as you select that option in the widget
interface.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-bottom-1 -->

38. Translating CSS Test to Genesis
This looked great at first. Who can see the problem with this
solution?

39. So Where Can We Put the CSS?
In the functions.php file

40. The Final Home Page
Look, Ma! No Tabs.

41. Final Home Page, 2

42. Locations Page

43. Success Stories

44. Where to Find Us
Sallie Goetsch Linda Shum
wpfangirl.com shumdesign.com