Theming WordPress Beth Tucker Long Who am I? Beth - - PowerPoint PPT Presentation

theming wordpress
SMART_READER_LITE
LIVE PREVIEW

Theming WordPress Beth Tucker Long Who am I? Beth - - PowerPoint PPT Presentation

Theming WordPress Beth Tucker Long Who am I? Beth Tucker Long (@e3betht) PHP Developer Stay-at-home mom User group leader


slide-1
SLIDE 1

Theming ¡ WordPress ¡

Beth ¡Tucker ¡Long ¡

slide-2
SLIDE 2

Who ¡am ¡I? ¡ Beth ¡Tucker ¡Long ¡ ¡ ¡(@e3betht) ¡

  • PHP ¡Developer ¡ ¡
  • Stay-­‑at-­‑home ¡mom ¡
  • User ¡group ¡leader ¡
  • Mentor ¡& ¡ApprenIce ¡

¡

slide-3
SLIDE 3

Audience ¡ParIcipaIon? ¡

  • Completely ¡fine. ¡Ask ¡me ¡quesIons ¡any ¡Ime. ¡
slide-4
SLIDE 4

¡ ¡

Why? ¡

slide-5
SLIDE 5

Once ¡upon ¡a ¡Ime… ¡

slide-6
SLIDE 6

Once ¡upon ¡a ¡Ime… ¡

slide-7
SLIDE 7

Then ¡one ¡day… ¡

slide-8
SLIDE 8

Then ¡one ¡day… ¡

slide-9
SLIDE 9

27 ¡"quick" ¡changes ¡later… ¡

slide-10
SLIDE 10

We ¡need ¡this ¡security ¡patch ¡applied… ¡

slide-11
SLIDE 11

Hey! ¡What ¡happened? ¡

slide-12
SLIDE 12

Other ¡Benefits ¡

  • Don't ¡have ¡to ¡code ¡everything ¡from ¡scratch ¡
  • Someone ¡else ¡is ¡also ¡building ¡new ¡features ¡
  • Another ¡set ¡of ¡eyes ¡on ¡security ¡
  • Help ¡with ¡meeIng ¡accessibility ¡and ¡mobile ¡

guidelines ¡

slide-13
SLIDE 13

Other ¡Benefits ¡

  • Page ¡templates ¡
  • Post ¡types ¡and ¡taxonomies ¡
  • Menus, ¡sidebars, ¡and ¡widgets ¡
  • Shortcodes ¡
  • Different ¡image ¡sizes ¡
slide-14
SLIDE 14

¡ ¡

Ge\ng ¡Started ¡

slide-15
SLIDE 15

Find ¡a ¡Parent ¡Theme ¡

This ¡is ¡a ¡child ¡theme ¡

  • f… ¡
slide-16
SLIDE 16

If ¡you ¡already ¡have ¡a ¡theme… ¡

Make ¡sure ¡to ¡start ¡with ¡a ¡clean ¡copy ¡of ¡the ¡ latest ¡version. ¡

slide-17
SLIDE 17

Create ¡a ¡child ¡theme ¡directory ¡

wp-­‑content/themes/child-­‑theme-­‑name ¡

slide-18
SLIDE 18

¡ ¡

style.css ¡

slide-19
SLIDE 19

How ¡it ¡works ¡ ¡

  • Your ¡stylesheet ¡is ¡loaded ¡last ¡
  • Overwrites ¡any ¡styles ¡with ¡the ¡same ¡name ¡in ¡

the ¡parent ¡stylesheet ¡

slide-20
SLIDE 20

Create ¡style.css ¡

/* ¡ Theme ¡Name: ¡My ¡Theme ¡Child ¡ Theme ¡URI: ¡http://example.com/my-­‑theme-­‑child/ ¡ Description: ¡My ¡Theme ¡Child ¡Theme ¡ Author: ¡Your ¡Name ¡ Author ¡URI: ¡http://example.com ¡ Template: ¡myTheme ¡ Version: ¡1.0.0 ¡ License: ¡GNU ¡General ¡Public ¡License ¡v2 ¡or ¡later ¡ License ¡URI: ¡http://www.gnu.org/licenses/gpl-­‑2.0.html ¡ Tags: ¡two-­‑columns, ¡right-­‑sidebar, ¡responsive-­‑layout, ¡accessibility-­‑ready ¡ Text ¡Domain: ¡myTheme-­‑child ¡ */ ¡ ¡

slide-21
SLIDE 21

Create ¡style.css ¡

Theme ¡Name: ¡My ¡Theme ¡Child ¡ Theme ¡URI: ¡http://example.com/my-­‑theme-­‑child/ ¡ Description: ¡My ¡Theme ¡Child ¡Theme ¡ Author: ¡Your ¡Name ¡ Author ¡URI: ¡http://example.com ¡

slide-22
SLIDE 22

Create ¡style.css ¡

Template: ¡myTheme ¡ ¡

This ¡must ¡match ¡the ¡directory ¡name ¡of ¡the ¡parent ¡theme ¡ you ¡are ¡using. ¡

slide-23
SLIDE 23

Create ¡style.css ¡

Version: ¡1.0.0 ¡ License: ¡GNU ¡General ¡Public ¡License ¡v2 ¡or ¡later ¡ License ¡URI: ¡http://www.gnu.org/licenses/ gpl-­‑2.0.html ¡

slide-24
SLIDE 24

Create ¡style.css ¡

Tags: ¡two-­‑columns, ¡right-­‑sidebar, ¡responsive-­‑layout, ¡ accessibility-­‑ready ¡ ¡

List ¡of ¡approved ¡tags: ¡

haps://make.wordpress.org/themes/handbook/review/required/theme-­‑tags/ ¡

slide-25
SLIDE 25

Create ¡style.css ¡

Text ¡Domain: ¡myTheme-­‑child ¡ ¡

slide-26
SLIDE 26

¡ ¡

funcIons.php ¡

slide-27
SLIDE 27

How ¡it ¡works ¡ ¡

  • Your ¡file ¡is ¡loaded ¡in ¡addiIon ¡to ¡the ¡parent ¡

funcIons ¡file ¡and ¡is ¡loaded ¡first ¡

  • Make ¡sure ¡your ¡funcIons ¡have ¡unique ¡names ¡
  • r ¡they ¡will ¡be ¡overwriaen ¡
slide-28
SLIDE 28

Create ¡functions.php ¡

<?php ¡ ¡ funcIon ¡my_theme_enqueue_styles() ¡{ ¡ ¡ ¡ ¡ ¡ ¡$parent_style ¡= ¡'parent-­‑style'; ¡ ¡ ¡ ¡ ¡ ¡wp_enqueue_style( ¡$parent_style, ¡get_template_directory_uri() ¡. ¡'/style.css' ¡); ¡ ¡ ¡ ¡ ¡wp_enqueue_style( ¡'child-­‑style', ¡get_stylesheet_directory_uri() ¡. ¡'/style.css', ¡array( ¡$parent_style ¡), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_get_theme()-­‑>get('Version'), ¡$media ¡= ¡'all' ¡); ¡ } ¡ add_acIon( ¡'wp_enqueue_scripts', ¡'my_theme_enqueue_styles' ¡); ¡ ¡ ?> ¡

slide-29
SLIDE 29

functions.php ¡

funcIon ¡my_theme_enqueue_styles() ¡{ ¡

slide-30
SLIDE 30

functions.php ¡

¡ ¡$parent_style ¡= ¡'parent-­‑style'; ¡

slide-31
SLIDE 31

functions.php ¡

¡wp_enqueue_style( ¡$parent_style, ¡get_template_directory_uri() ¡. ¡'/style.css' ¡); ¡ ¡

slide-32
SLIDE 32

functions.php ¡

¡wp_enqueue_style( ¡'child-­‑style', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡get_stylesheet_directory_uri() ¡. ¡'/style.css', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡array( ¡$parent_style ¡), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_get_theme()-­‑>get('Version'), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$media ¡= ¡'all' ¡ ¡ ¡ ¡ ¡); ¡

slide-33
SLIDE 33

functions.php ¡

¡wp_enqueue_style( ¡'child-­‑style', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡get_stylesheet_directory_uri() ¡. ¡'/style.css', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡array( ¡$parent_style ¡), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_get_theme()-­‑>get('Version'), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$media ¡= ¡'all' ¡ ¡ ¡ ¡ ¡); ¡

slide-34
SLIDE 34

functions.php ¡

¡wp_enqueue_style( ¡'child-­‑style', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡get_stylesheet_directory_uri() ¡. ¡'/style.css', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡array( ¡$parent_style ¡), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_get_theme()-­‑>get('Version'), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$media ¡= ¡'all' ¡ ¡ ¡ ¡ ¡); ¡

slide-35
SLIDE 35

functions.php ¡

¡wp_enqueue_style( ¡'child-­‑style', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡get_stylesheet_directory_uri() ¡. ¡'/style.css', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡array( ¡$parent_style ¡), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_get_theme()-­‑>get('Version'), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$media ¡= ¡'all' ¡ ¡ ¡ ¡ ¡); ¡

slide-36
SLIDE 36

¡ ¡

That's ¡it! ¡

slide-37
SLIDE 37

Activate! ¡

slide-38
SLIDE 38

Add ¡a ¡Preview ¡Image ¡

/wp-­‑content/themes/child-­‑theme/screenshot.png ¡

slide-39
SLIDE 39

¡ ¡

Aker ¡AcIvaIng ¡

slide-40
SLIDE 40

Making ¡Changes ¡

Style ¡changes: ¡ /wp-­‑content/themes/child-­‑theme/style.css ¡ ¡ FuncIonality ¡changes: ¡ /wp-­‑content/themes/child-­‑theme/funcIons.php ¡

slide-41
SLIDE 41

Making ¡Changes ¡

Template ¡changes: ¡ /wp-­‑content/themes/child-­‑theme/templateName.php ¡ ¡ New ¡templates: ¡ /wp-­‑content/themes/child-­‑theme/newName.php ¡ ¡

slide-42
SLIDE 42

Custom ¡template ¡

<?php ¡ ¡ /* ¡ ¡ Template ¡Name: ¡Special ¡Pages ¡ */ ¡ ¡ ?> ¡ ¡

slide-43
SLIDE 43

Path ¡for ¡Files ¡

get_stylesheet_directory() ¡ ¡ ¡ get_template_directory() ¡

slide-44
SLIDE 44

Adding ¡JavaScript ¡

  • Place ¡in ¡a ¡separate ¡file ¡
  • Enqueue ¡the ¡file ¡
slide-45
SLIDE 45

Adding ¡JavaScript ¡

wp_enqueue_script( ¡ ¡ ¡ ¡ ¡'scriptName', ¡ ¡ ¡ ¡ ¡get_template_directory_uri() ¡. ¡'/js/script.js', ¡ ¡ ¡ ¡ ¡array ¡( ¡'jquery' ¡), ¡ ¡ ¡ ¡ ¡1.1, ¡ ¡ ¡ ¡ ¡true ¡ ); ¡

slide-46
SLIDE 46

Before ¡Including ¡a ¡Library… ¡ ¡

Check ¡to ¡make ¡sure ¡it ¡isn't ¡already ¡included: ¡ ¡ haps://developer.wordpress.org/themes/basics/ including-­‑css-­‑javascript/#default-­‑scripts-­‑included-­‑and-­‑ registered-­‑by-­‑wordpress ¡

slide-47
SLIDE 47

Removing ¡Scripts/Styles ¡

wp_deregister_script() ¡ wp_deregister_style() ¡ ¡ wp_dequeue_script() ¡ wp_dequeue_style() ¡

slide-48
SLIDE 48

Upgrading ¡the ¡Parent ¡

  • 1. Back ¡up ¡parent ¡and ¡child ¡themes ¡
  • 2. Compare ¡the ¡upgrade ¡notes ¡to ¡your ¡documentaIon ¡
  • 3. Run ¡a ¡diff ¡on ¡the ¡old ¡versus ¡new ¡parent ¡theme ¡

template ¡files ¡for ¡any ¡that ¡are ¡in ¡the ¡child ¡theme ¡

slide-49
SLIDE 49

AddiIonal ¡Tips ¡

  • Document ¡everything ¡really ¡well ¡
  • Give ¡everything ¡consistent, ¡but ¡unique ¡names ¡
  • Do ¡not ¡use ¡@import ¡

https://konstantin.blog/2014/child-­‑ themes-­‑import/ ¡ ¡

slide-50
SLIDE 50

Starter ¡Themes ¡

  • FoundaIon ¡Press ¡

haps://foundaIonpress.olefredrik.com/ ¡

  • Divi ¡

haps://www.eleganahemes.com/gallery/divi/ ¡

slide-51
SLIDE 51

AutomaIng ¡Child ¡Themes ¡

  • Childify ¡Me ¡

haps://wordpress.org/plugins/childify-­‑me/ ¡

  • Child ¡Theme ¡Creator ¡by ¡Orbisius ¡

haps://wordpress.org/plugins/orbisius-­‑child-­‑theme-­‑ creator/ ¡

  • Child ¡Theme ¡Configurator ¡

hap://www.childthemeconfigurator.com/ ¡

slide-52
SLIDE 52

Outdated ¡Helpful ¡Plugins ¡

  • One ¡Click ¡Child ¡Theme ¡

haps://wordpress.org/plugins/one-­‑click-­‑child-­‑ theme/ ¡

  • Child ¡Theme ¡Check ¡

haps://wordpress.org/plugins/child-­‑theme-­‑check/ ¡ ¡

slide-53
SLIDE 53

¡ ¡

Child ¡of ¡a ¡Child ¡ Theme? ¡

slide-54
SLIDE 54

Grandchild ¡Plugin ¡

  • Find ¡a ¡unique ¡name ¡for ¡your ¡plugin ¡
  • Create ¡a ¡dir ¡for ¡your ¡grandchild ¡theme ¡in: ¡

/wp-­‑content/plugins/ ¡

  • Create ¡a ¡PHP ¡file ¡and ¡a ¡CSS ¡file ¡named ¡for ¡your ¡

unique ¡name ¡

slide-55
SLIDE 55

Grandchild ¡Plugin ¡

Plugin ¡Name: ¡ ¡My ¡Cool ¡Grandchild ¡Theme ¡Plugin ¡ Plugin ¡URI: ¡ ¡ ¡https://example.com/my-­‑plugin ¡ Description: ¡ ¡Grandchild ¡theme ¡of ¡My ¡Child ¡Theme ¡ Version: ¡ ¡ ¡ ¡ ¡ ¡1 ¡ Author: ¡ ¡ ¡ ¡ ¡ ¡ ¡Author's ¡Name ¡ Author ¡URI: ¡ ¡ ¡https://example.com/ ¡ License: ¡ ¡ ¡ ¡ ¡ ¡GPL2 ¡ License ¡URI: ¡ ¡https://www.gnu.org/licenses/gpl-­‑2.0.html ¡ Text ¡Domain: ¡ ¡grandchild27 ¡ Domain ¡Path: ¡ ¡/text-­‑domain-­‑path ¡

slide-56
SLIDE 56

Grandchild ¡Plugin ¡

function ¡myGrandChildName_add_styles() ¡{ ¡ ¡ ¡ ¡ ¡wp_register_style( ¡'myGrandChildName_add_styles-­‑style', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡plugins_url( ¡'myGrandChildName_styles.css', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡__FILE__ ¡), ¡array(), ¡'1.0' ¡); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡wp_enqueue_style( ¡'myGrandChildName_add_styles-­‑style' ¡); ¡ } ¡ ¡ add_action( ¡'wp_print_styles', ¡'myGrandChildName_add_styles' ¡); ¡ ¡

slide-57
SLIDE 57

Grandchild ¡Templates ¡

  • Create ¡a ¡dir ¡for ¡your ¡templates ¡in ¡your ¡plugin ¡dir ¡
  • Copy ¡over ¡the ¡templates ¡you ¡want ¡to ¡change ¡
slide-58
SLIDE 58

Grandchild ¡Plugin ¡

function ¡myGrandChildName_template_include( ¡$template ¡) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡( ¡file_exists( ¡untrailingslashit( ¡plugin_dir_path( ¡__FILE__ ¡) ¡) ¡. ¡'/ templates/' ¡. ¡basename( ¡$template ¡) ¡) ¡) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$template ¡= ¡untrailingslashit( ¡plugin_dir_path( ¡__FILE__ ¡) ¡) ¡. ¡'/ templates/' ¡. ¡basename( ¡$template ¡); ¡ ¡ ¡ ¡ ¡ ¡ ¡return ¡$template; ¡ } ¡ add_filter( ¡'template_include', ¡'myGrandChildName_template_include' ¡); ¡ ¡

slide-59
SLIDE 59

Resources ¡

  • haps://codex.wordpress.org/Theme_Development ¡
  • hap://themeshaper.com/modify-­‑wordpress-­‑themes/ ¡
  • hap://wpsites.net/wordpress-­‑themes/how-­‑to-­‑make-­‑your-­‑own-­‑child-­‑

theme-­‑for-­‑wordpress-­‑beginners-­‑guide/ ¡(screencasts) ¡

  • haps://code.tutsplus.com/arIcles/how-­‑to-­‑modify-­‑the-­‑parent-­‑theme-­‑

behavior-­‑within-­‑the-­‑child-­‑theme-­‑-­‑wp-­‑31006 ¡

  • haps://www.hongkiat.com/blog/accessibility-­‑ready-­‑wordpress-­‑themes/ ¡
  • haps://docs.appthemes.com/tutorials/creaIng-­‑grandchild-­‑themes/ ¡
  • haps://www.wp-­‑code.com/wordpress-­‑snippets/wordpress-­‑grandchildren-­‑

themes/ ¡

  • haps://wordpress.tv/2016/02/18/bobbie-­‑wilson-­‑grandchild-­‑themes-­‑for-­‑

framework-­‑child-­‑themes/ ¡

slide-60
SLIDE 60

Find ¡Me ¡

  • Twiaer: ¡e3betht ¡

¡

  • Madison ¡PHP ¡User ¡Group ¡(Meetup) ¡ ¡

hap://www.madisonphp.com ¡ ¡

  • Slides ¡Available ¡on: ¡ ¡

hap://www.TreelineDesign.com/slides ¡ ¡

slide-61
SLIDE 61

Feedback ¡

haps://joind.in/talk/56e3b ¡ E-­‑mail: ¡

Beth@TreelineDesign.com ¡ ¡