Basic overview of the tools and process of converting a Photoshop design into a WordPress theme.

1. WordPress
Design to Development
Jason Yingling
@jason_yingling

2. Objectives
• Review the tools needed to design and
develop WordPress sites
• Briefly cover some common steps for
designing WordPress themes
• Overview of WordPress template hierarchy
• Introduce common WordPress functions
• Convert HTML into a WordPress template

3. What You Will Need
• Design Software
– Photoshop
– Sketch
– Illustrator
– WebFlow

4. What You Will Need
• Text Editor
– Coda (Mac - Paid)
– Sublime Text (Mac - Free and Paid )
– Atom by Github (Mac - Free)
– Notepad++ (Windows - Free)

5. Theme Template
• Underscores (_s)
• Bones
• What are these?
– Stripped down WordPress themes with just the
basics you need to start building your own theme.

6. Languages
• HTML
• CSS
• PHP
• Javascript

7. Dev Environment
• MAMP Pro OR Vagrant
• phpMyAdmin
• Sequel Pro

8. Optional (but recommended)
• SASS
• Compiler / Task Runner
– Grunt (Free)
– Gulp (Free)
– Codekit (Paid)
• Grid System
– Bourbon (neat.buorbon.io)
– Bootstrap (getbootstrap.com)

9. Designing a Site
• Researching
• Planning
• Wireframing
• Designing

10. Researching
• Always be researching
• Resources
– Dribbble
– Behance
– Awwwards
– ThemeForest (top sellers)

11. Project Description
Define what is being built.
Create a simple layout for showing some basic
WordPress development practices.

12. Project Goals
Set a few goals for the project based on your
project description.
1. Use The Loop to pull in recent posts
2. Register and pull in a WordPress menu
3. Pull in a sidebar and footer
4. Pull in a template part for the post content

13. Audience
Who will this project be for?
Designers and developers looking to gain basic
insight into building a WordPress theme.

14. Final Planning
• Specified Research
• Sketch ideas
• Sitemap / Template List
• Create a list of
deliverables
– Wire frames
– PSD Designs
– Theme files
• Set milestones for
completing project

15. Wireframing
• Let’s you quickly put
together a layout
without having to spend
too much time getting
into details of site
• Doesn’t have to be the
final design
• Keep it quick
• Wireframing Tools
– Balsamiq
– InVision

16. Designing
• Select Fonts
– Try to stick to 1 or 2
fonts
• Select Colors
– Don’t use too many
colors
• Start designing
– Stick to the grid!

17. Developing for WordPress
Custom Theme
• Best when building a completely custom
theme when using a boilerplate
– i.e. underscores (_s) or Bones
Child Theme
• Best when building on top of an existing
theme

18. Template Hierarchy
• index.php
– The main template file. It is required in all themes. Commonly
used for the main loop. Fallback for other templates.
• header.php
– The header template file usually contains your site’s document
type, meta information, links to style sheets, and other data.
• footer.php
– Used for generating the footer of the site. Typically includes the
wp_footer() option.
• sidebar.php
– Used for generating site’s sidebars.

19. Template Hierarchy
• single.php
– The single post template is used when a visitor
requests a single post.
• archive.php
– Template used for displaying categories, post
types, etc. unless otherwise specified.
• archive-news.php
– Template used for displaying the news post type
(if that post type exists)

20. Template Hierarchy
• functions.php
– Used for adding feature and functionality to sites.
– i.e. register sidebars and menu locations
• style.css
– The main stylesheet. It is required in all themes
and contains the information header for your
theme.

21. Common WordPress Page
• Typically consists of 3-4 parts
– Header
– Content
– Sidebar
– Footer

22. The Loop
• The Loop is PHP code used by WordPress to
display posts.

23. Breaking Down The Loop
• if ( have_posts() ) :
– Checks with WordPress to see if we even have any posts to
return.
• while ( have_posts() ) :
– Now that we have posts we need to know what to do with
them while we’ve got them.
• the_post();
– This function iterates the post index and grabs the next
post, sets up the post data, and let’s WordPress know that
we are within The Loop.
• More information
– https://jasonyingling.me/loop-there-it-is/

24. Working with Menus
• register_nav_menus()
– Registers a menu theme location
• wp_nav_menu()
– Displays a navigation menu created in the
Appearance → Menus panel.

25. Using Template Parts
• get_template_part( $slug, $name );
– Let’s you compartmentalize portions of your
WordPress theme
– Great for returning different layouts for post-
formats or reusing code in multiple places
• get_sidebar( $name );
– Pulls in the sidebar
• get_footer( $name );
– Pulls in the footer

26. Setting up a Dev Environment
• MAMP
– https://codex.wordpress.org/Installing_WordPress
_Locally_on_Your_Mac_With_MAMP
• Vagrant
– https://jasonyingling.me/setting-up-a-local-
wordpress-environment-with-vagrant/

27. Setup WordPress
• Open wp-config-sample.php
• Edit Database name
• Edit Database user
• Edit Database password
• Save as wp-config.php

28. Additional Resources
• Smashing WordPress
• Up and Running WP
• The Essential Web Design Handbook
• WP Beginner
• Tuts+