Tammy Hart is a design engineer at 10up, a distributed web agency. The document outlines the process for designing and prototyping a WordPress theme, detailing what tools and assets are needed, as well as specific coding practices to follow and avoid. It concludes with an encouragement to build a website and provides links for further resources.

1. Tammy Hart
Design Engineer at 10up
tammyhartdesigns.com
@tammyhart
Hi

2. What is 10up?
Distributed Full Service Web Agency
Always hiring!
10up.com
@10up

3. What is a Design Engineer?
Design Front-End
Me
WordPress

4. in the Browser
Designing a Theme

5. What’s in a name?

6. Design
Creative
Mockup
Prototype

7. Category One Another Category Cats are Helpful Last One Company
Child Item Child Item Child Item Child Item History
Child Item Child Item Child Item Child Item Team
Child Item Child Item Child Item Child Item Locations
Child Item Child Item Child Item Child Item
© 2014 Gracie’s Things, LLC
 
Reduce Waste
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
JOIN THE EFFORT
Shop Locally
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
FIND A STORE
Give Grace
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
BUY GIFT CARDS
CATEGORY ONE ANOTHER CATEGORY CATS ARE HELPFUL LAST ONE

GRACIE’S THINGS

10. with WordPress
Prototyping Design

11. What you’ll need:
• WordPress
• Local
• Staging
• Creative Assets
• Style Tiles
• Mockups
• Wireframes
• Full Page Comps
• Development Tools
• Code Editor
• Browser
• Mobile Emulators and/or
Devices

12. What you’ll produce:
• WordPress Theme

13. Do use:
• Templates
• header.php
• footer.php
• sidebar.php
• searchform.php
• index.php
• page.php
• single.php
• front-page.php
• home.php
• Functions
• get_header(), et al.
• wp_enqueue_scripts()
• get_template_part()

14. Do not use:
• Templates
• archive.php, et al.
• single-{cpt}.php
• Functions
• the_title()
• the_content()
• get_permalink()
• wp_nav_menu()
• dynamic_sidebar()
• In General
• Custom Post Types
• Widgets
• Post Thumbnails
• the Loop
• Plugins
• Comments

15. /**
* Template Name: Some layout’s name
**/

16. <?php
/**
* Template Name: Product Archive Page
*/
get_header();
?>
<section class="main">
<h1>Product Page Title</h1>
<article class="product"> ... </article>
<?php get_template_part( 'parts', 'pagination' ); ?>
</section>
<?php get_sidebar( 'filter' ); ?>
<?php get_footer(); ?>

17. Do you wanna build a website?
bit.ly/ibdwwp

18. What’s Included:
• ibdwwp-layout.pdf/psd
• homepage layout comp
• product page wireframe
• ibdwwp-theme
• index.php
• functions.php
• style.css

19. Instructions:
• Prototype
• Break the index up into the correct template parts
• Create new template for products page
• Make design decisions
• color
• vertical and horizontal spacing
• typography
• layout
• strategy
• interactions
• responsive

20. Let’s Code Design!

21. Thanks! Questions?
tammyhartdesigns.com / @tammyhart
10up.com / @10up