How to create a theme with underscores (_s)

In this presentation, I first talk about setting up a good development environment with WordPress, then I explain how to use underscore (_s) to create your theme, with step by step instructions. This is the first part of a serie of 2 presentations.

For more articles and tutorials about WordPress, check out my blog at: http://julienklepatch.com/blog

Transcript

1. How to create a theme with Underscores Taipei WordPress Meetup - November 2014 Julien Klepatch - julienklepatch.com
2. Summary • Preparing Development environment • How WordPress works? • Setting up theme basic features
3. Summary • Preparing Development environment – Installing WordPress on localhost – Installing Underscores – Importing Dummy Data – Installing Developer Plugin • How WordPress works? • Setting up theme basic features
4. Installing WordPress on localhost (1) 1. Installing server-side • Server (Apache) • Database (MySQL) • PHP • Integrated solution: Xampp / Wamp (Windows) / Mamp (Mac) 2. Download WordPress (wordpress.org/latest.zip) 3. Create Database (localhost/phpmyadmin) 4. Running WordPress Install (localhost/my_site/)
5. Installing WordPress on localhost (2)
7. What is Underscores? • Starter Theme • Meant to be extended • Created by WordPress core developers • Using as a boilerplate for WordPress default themes (twentythirteen, etc..)
8. Installing Underscores (1) 1. Go to underscores.me 2. Name your version of underscores 3. Click on ‘generate’
9. Installing Underscores (2) 1. Unzip the folder 2. Copy paste into /my_site/wp-content/themes 3. Activate the theme (appearance=>themes)
10. Installing Underscores (3)
12. Dummy data (1) • What is dummy data ? – “fake” Data already created – Used for testing theme • How to download it? 1. Install WordPress Importer Plugin 2. Import dummy data
13. Dummy Data (2) • Install WordPress Importer Plugin (tools => Import => WordPress)
14. Dummy Data (3)
15. Dummy Data (4) • Import Dummy Data 1. Download dummy data (http://codex.wordpress.org/Theme_Unit_Test @setup=>1) 2. Import xml file into WordPress (tools=>import=>WordPress)
16. Dummy Data (5)
17. Dummy Data (6) Imported menu Imported post
18. Dummy Data (7) Imported pages
20. Installing Developer Plugin (1) • Plugin to help for theme/plugin development • Install process – Download – Setup – Install components
21. Installing Developer Plugin (2) • Download
22. Installing Developer Plugin (3) • Setup
23. Installing Developer Plugin (4) • Install components
24. Installing Developer Plugin (5) • Queries tab
25. Installing Developer Plugin (6) • WP Query tab
27. Summary • Preparing Development environment • How WordPress works? – Typical request – Template Hierarchy – Template Tags • Setting up theme basic features
28. Typical Request (1) http://julienklepatch.com/my-projects/ http://julienklepatch.com/p?=43
29. theme Typical Request (2) ?p=43 Database Template1.php Template2.php Template{n}.php HTML Response client server
30. Typical Request (3) Header.php Content.php Sidebar.php Footer.php Single.php get_header() get_template(‘content’) get_sidebar() get_footer()
31. Typical Request (3) Header.php Content.php Footer.php page.php get_header() get_template(‘content’) get_footer()
33. Template Hierarchy (1)
34. Post Template Hierarchy (2) single-post.php single.php index.php Page {custom}.php page- {slug}..php page-{id}.php page.php index.php
35. Template tags • Template tags are php functions • Template tags are defined by WordPress • Template tags are used in templates • Ex: – the_content() – the_title() – The_permalink()
37. Summary • Preparing Development environment • How WordPress works? • Setting up theme basic features – Anatomy of Underscores – Setting up theme features – Adding custom fonts – Adding custom icons – Global styles – Basic Layout – Responsive Layout
38. Anatomy of Underscores (1) Functions.php (optional) index.php (required) Style.css (required)
39. Anatomy of Underscores (2) • Style.css Theme Name Description
40. Anatomy of underscore (3) • Index.php Get_header() Get_sidebar() Get_footer() Content here Get_template_part()
41. Anatomy of Underscores (4) • Functions.php Register menu Register post-format Register custom bg
43. Setting up theme features (1) • functions.php > my_theme_setup() – add support for post-thumbnails – Remove unused post-formats
44. Setting up theme features (2) • functions.php > my_theme_setup() (continued) – Remove support for custom background • Add support for custom header
46. Adding Custom fonts (1) 1. Go to google.com/fonts 2. Select ‘lato’ and ‘pt serif’
47. Adding Custom text(2) 3) Select Normal (400) and bold (700) 4) Copy link in function.php > my_theme_enqueue_scripts()
48. Adding Custom fonts (3) • Paste link into functions.php {my_theme}_scripts() > wp_enqueue_style: wp_enqueue_style( handler, link )
50. Adding Custom icons (1) • We will use font awesome 1. Go to fortawesome.github.io/Font-Awesome/get-started/ 2. Copy the cdn link
51. Adding Custom icons (2) 3. Paste the link into functions.php: {my_theme}_scripts() > wp_enqueue_style:
53. Global Styles (1) • Let’s explore style.css • Reset:  Used to remove browser rendering inconsistencies  Better not to change it
54. Global Styles (2) • Typography:  Set font-family to ‘PT Serif’  Set font-size to 18px  Set font-family to ‘Lato’  Set font-weight to 700
55. Global Styles (3)
57. Basic Layout (1) • In layouts/ – Content-sidebar.css – Sidebar-content.css • In functions.php enqueue content-sidebar.css
58. Basic Layout (2) Content Sidebar
59. Basic Layout (3) • Make the sidebar fixed-width  Set margin-left and padding-left with px units (% Unit before)  Set background to a gray color  Set sidebar width with px unit
60. Basic Layout (4)
61. Basic Layout (5) • Let’s add style for posts Set max-width Set padding Center horizontally
62. Basic Layout (6)
64. Responsive Layout (1) • Let’s wrap .content-area with a media query Media query is activated only on big screen (i.e screen > 1160px)
65. Responsive Layout (2)
66. Responsive Layout (3) • Let’s add new media query rule for .content-area Set width to auto Set margin
69. Conclusion (1) • We have learned how to setup our developing environment – Stack Apache + PHP + mysql – WordPress + Underscores install – Developer plugin – Dummy data • We have also learned the basics of WordPress – A typical request result in a query in the database, then results are sent to a php template – The template hierarchy determines which template is used – Template tags are WordPress functions that can (and should) be used when developing a theme
70. Conclusion (2) • Finally, we have setup the basic features of our theme: – Custom fonts – Custom icons – Global styles – Basic & Responsive layout
71. Questions ?