design todevelop
TRANSCRIPT
![Page 1: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/1.jpg)
WordPressDesign to Development
Jason Yingling@jason_yingling
![Page 2: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/2.jpg)
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
![Page 3: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/3.jpg)
What You Will Need• Design Software– Photoshop– Sketch– Illustrator– WebFlow
![Page 4: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/4.jpg)
What You Will Need• Text Editor– Coda (Mac - Paid)– Sublime Text (Mac - Free and Paid )– Atom by Github (Mac - Free)– Notepad++ (Windows - Free)
![Page 5: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/5.jpg)
Theme Template• Underscores (_s)• Bones
• What are these?– Stripped down WordPress themes with just the
basics you need to start building your own theme.
![Page 6: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/6.jpg)
Languages• HTML• CSS• PHP• Javascript
![Page 7: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/7.jpg)
Dev Environment• MAMP Pro OR Vagrant• phpMyAdmin• Sequel Pro
![Page 8: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/8.jpg)
Optional (but recommended)
• SASS• Compiler / Task Runner– Grunt (Free)– Gulp (Free)– Codekit (Paid)
• Grid System– Bourbon (neat.buorbon.io)– Bootstrap (getbootstrap.com)
![Page 9: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/9.jpg)
Designing a Site• Researching• Planning• Wireframing• Designing
![Page 10: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/10.jpg)
Researching• Always be researching• Resources– Dribbble– Behance– Awwwards– ThemeForest (top sellers)
![Page 11: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/11.jpg)
Project DescriptionDefine what is being built.
Create a simple layout for showing some basic WordPress development practices.
![Page 12: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/12.jpg)
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
![Page 13: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/13.jpg)
AudienceWho will this project be for?
Designers and developers looking to gain basic insight into building a WordPress theme.
![Page 14: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/14.jpg)
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
![Page 15: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/15.jpg)
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
![Page 16: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/16.jpg)
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!
![Page 17: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/17.jpg)
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
![Page 18: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/18.jpg)
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.
![Page 19: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/19.jpg)
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)
![Page 20: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/20.jpg)
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.
![Page 21: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/21.jpg)
Common WordPress Page• Typically consists of 3-4 parts– Header– Content– Sidebar– Footer
![Page 22: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/22.jpg)
The Loop• The Loop is PHP code used by WordPress to
display posts.
![Page 23: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/23.jpg)
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/
![Page 24: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/24.jpg)
Working with Menus• register_nav_menus()– Registers a menu theme location
• wp_nav_menu()– Displays a navigation menu created in the
Appearance → Menus panel.
![Page 25: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/25.jpg)
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
![Page 26: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/26.jpg)
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/
![Page 27: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/27.jpg)
Setup WordPress• Open wp-config-sample.php• Edit Database name• Edit Database user• Edit Database password• Save as wp-config.php
![Page 28: Design todevelop](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee4dcb1a28ab8d488b467f/html5/thumbnails/28.jpg)
Additional Resources• Smashing WordPress• Up and Running WP• The Essential Web Design Handbook• WP Beginner• Tuts+