WordPressDesign to Development

Jason Yingling@jason_yingling

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

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

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

Theme Template• Underscores (_s)• Bones

• What are these?– Stripped down WordPress themes with just the

basics you need to start building your own theme.

Languages• HTML• CSS• PHP• Javascript

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

Optional (but recommended)

• SASS• Compiler / Task Runner– Grunt (Free)– Gulp (Free)– Codekit (Paid)

• Grid System– Bourbon (neat.buorbon.io)– Bootstrap (getbootstrap.com)

Designing a Site• Researching• Planning• Wireframing• Designing

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

Project DescriptionDefine what is being built.

Create a simple layout for showing some basic WordPress development practices.

Project GoalsSet a few goals for the project based on your

project description.

1. Use The Loop to pull in recent posts2. Register and pull in a WordPress menu

3. Pull in a sidebar and footer4. Pull in a template part for the post content

AudienceWho will this project be for?

Designers and developers looking to gain basic insight into building a WordPress theme.

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

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

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!

Developing for WordPressCustom 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

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.

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)

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.

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

The Loop• The Loop is PHP code used by WordPress to

display posts.

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/

Working with Menus• register_nav_menus()– Registers a menu theme location

• wp_nav_menu()– Displays a navigation menu created in the

Appearance → Menus panel.

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

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/

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

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