How to create a theme with underscores (_s)

Slide 1

Slide 1 text

How to create a theme with Underscores Taipei WordPress Meetup - November 2014 Julien Klepatch - julienklepatch.com

Slide 2

Slide 2 text

Summary • Preparing Development environment • How WordPress works? • Setting up theme basic features

Slide 3

Slide 3 text

Summary • Preparing Development environment – Installing WordPress on localhost – Installing Underscores – Importing Dummy Data – Installing Developer Plugin • How WordPress works? • Setting up theme basic features

Slide 4

Slide 4 text

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/)

Slide 5

Slide 5 text

Installing WordPress on localhost (2)

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

What is Underscores? • Starter Theme • Meant to be extended • Created by WordPress core developers • Using as a boilerplate for WordPress default themes (twentythirteen, etc..)

Slide 8

Slide 8 text

Installing Underscores (1) 1. Go to underscores.me 2. Name your version of underscores 3. Click on ‘generate’

Slide 9

Slide 9 text

Installing Underscores (2) 1. Unzip the folder 2. Copy paste into /my_site/wp-content/themes 3. Activate the theme (appearance=>themes)

Slide 10

Slide 10 text

Installing Underscores (3)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Dummy Data (2) • Install WordPress Importer Plugin (tools => Import => WordPress)

Slide 14

Slide 14 text

Dummy Data (3)

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

Dummy Data (5)

Slide 17

Slide 17 text

Dummy Data (6) Imported menu Imported post

Slide 18

Slide 18 text

Dummy Data (7) Imported pages

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Installing Developer Plugin (1) • Plugin to help for theme/plugin development • Install process – Download – Setup – Install components

Slide 21

Slide 21 text

Installing Developer Plugin (2) • Download

Slide 22

Slide 22 text

Installing Developer Plugin (3) • Setup

Slide 23

Slide 23 text

Installing Developer Plugin (4) • Install components

Slide 24

Slide 24 text

Installing Developer Plugin (5) • Queries tab

Slide 25

Slide 25 text

Installing Developer Plugin (6) • WP Query tab

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Summary • Preparing Development environment • How WordPress works? – Typical request – Template Hierarchy – Template Tags • Setting up theme basic features

Slide 28

Slide 28 text

Typical Request (1) http://julienklepatch.com/my-projects/ http://julienklepatch.com/p?=43

Slide 29

Slide 29 text

theme Typical Request (2) ?p=43 Database Template1.php Template2.php Template{n}.php HTML Response client server

Slide 30

Slide 30 text

Typical Request (3) Header.php Content.php Sidebar.php Footer.php Single.php get_header() get_template(‘content’) get_sidebar() get_footer()

Slide 31

Slide 31 text

Typical Request (3) Header.php Content.php Footer.php page.php get_header() get_template(‘content’) get_footer()

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Template Hierarchy (1)

Slide 34

Slide 34 text

Post Template Hierarchy (2) single-post.php single.php index.php Page {custom}.php page- {slug}..php page-{id}.php page.php index.php

Slide 35

Slide 35 text

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()

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Anatomy of Underscores (1) Functions.php (optional) index.php (required) Style.css (required)

Slide 39

Slide 39 text

Anatomy of Underscores (2) • Style.css Theme Name Description

Slide 40

Slide 40 text

Anatomy of underscore (3) • Index.php Get_header() Get_sidebar() Get_footer() Content here Get_template_part()

Slide 41

Slide 41 text

Anatomy of Underscores (4) • Functions.php Register menu Register post-format Register custom bg

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Setting up theme features (1) • functions.php > my_theme_setup() – add support for post-thumbnails – Remove unused post-formats

Slide 44

Slide 44 text

Setting up theme features (2) • functions.php > my_theme_setup() (continued) – Remove support for custom background • Add support for custom header

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Adding Custom fonts (1) 1. Go to google.com/fonts 2. Select ‘lato’ and ‘pt serif’

Slide 47

Slide 47 text

Adding Custom text(2) 3) Select Normal (400) and bold (700) 4) Copy link in function.php > my_theme_enqueue_scripts()

Slide 48

Slide 48 text

Adding Custom fonts (3) • Paste link into functions.php {my_theme}_scripts() > wp_enqueue_style: wp_enqueue_style( handler, link )

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Adding Custom icons (1) • We will use font awesome 1. Go to fortawesome.github.io/Font-Awesome/get-started/ 2. Copy the cdn link

Slide 51

Slide 51 text

Adding Custom icons (2) 3. Paste the link into functions.php: {my_theme}_scripts() > wp_enqueue_style:

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Global Styles (1) • Let’s explore style.css • Reset:  Used to remove browser rendering inconsistencies  Better not to change it

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Global Styles (3)

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Basic Layout (1) • In layouts/ – Content-sidebar.css – Sidebar-content.css • In functions.php enqueue content-sidebar.css

Slide 58

Slide 58 text

Basic Layout (2) Content Sidebar

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Basic Layout (4)

Slide 61

Slide 61 text

Basic Layout (5) • Let’s add style for posts Set max-width Set padding Center horizontally

Slide 62

Slide 62 text

Basic Layout (6)

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Responsive Layout (1) • Let’s wrap .content-area with a media query Media query is activated only on big screen (i.e screen > 1160px)

Slide 65

Slide 65 text

Responsive Layout (2)

Slide 66

Slide 66 text

Responsive Layout (3) • Let’s add new media query rule for .content-area Set width to auto Set margin

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Conclusion (2) • Finally, we have setup the basic features of our theme: – Custom fonts – Custom icons – Global styles – Basic & Responsive layout

Slide 71

Slide 71 text

Questions ?