Intro to WordPress Custom Themes Dev!

Rafi Yagudin - @rafiki_rafi

Quick background check...

Hail from Boston, MA (Go Pats!)

Hacking WP since 2010

Author of two plugins: SmartPost & QuickPost

I have a fear of Mr. Potato Head

Thankful to not be in Boston right now

Your turn...

WordPress Novices? (zero-experience)

WordPress intermediates?

(You know the difference between Pages and Posts, but what the heck is a custom field?)

WordPress Experts? (devs, admins, etc.)

What are you looking to get out this meetup?

Stuff I'll be going over:

Extras: Hooks & Filters (time-dependent)

Overview of Themes - what is a theme?

Customizing - why should we customize?

What's a theme?

Let's explore the 2015 theme!

  • index.php - the theme's "goto"
  • style.css - How WP knows your theme exists, styling
  • functions.php - the theme's data "workhorse"
  • sidebar.php, single.php, content.php, etc.
  • Every template follows the template hierarchy!

Important files to consider:

Talk custom to me baby

Why customize?

  • Change Theme Layout - i.e. add an extra sidebar
  • Add custom features - i.e. add a profile pic uploader on the author page
  • Cuz it's fun

Theme customization methods:

bad & good

  • Hack away source file (eek)
  • Bad! Future updates will erase your customizations!
  • Use a Child Theme! 
  • ...
  • Wait... child what?

Bad way to customize:

Good way to customize:

What's a child theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.

Child themes are the recommended way of modifying an existing theme.

2015 Child Theme

Important steps in creating a child theme:

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  • The child theme directory
  • style.css
  • functions.php
  • Font style - Lord of the Ring's "Fantasy"?
  • Full-width page

Let's make some Child Theme modifications...

Extras: Hooks & Filters!

What's an action hook?

What's a filter?

Actions vs. Filters

Actions are triggered by specific events that take place in WordPress, such as publishing a post, changing themes, or displaying an administration screen. An Action is a custom PHP function defined in your plugin (or theme) and hooked, i.e. set to respond, to some of these events.

Filters are functions that WordPress passes data through, at certain points in execution, just before taking some action with the data (such as adding it to the database or sending it to the browser screen). Filters sit between the database and the browser (when WordPress is generating pages), and between the browser and the database (when WordPress is adding new posts and comments to the database); most input and output in WordPress passes through at least one filter. WordPress does some filtering by default, and your plugin can add its own filtering.

Extras: Hooks & Filters

Example: Lets add a gravatar to the left of each post title using the 'post_title' filter:

Read up!

Reading and understanding WP's documentation will help with customizations!

¡Muchas Gracias!

 

ryagudin@gmail.com

@rafiki_rafi

linkedin.com/in/rafiyagudin

Lets get some burritos!

Intro to WP Theme Development

By Rafi Yagudin

Intro to WP Theme Development

Child theme allow you to customize the HTML, CSS, and PHP in an update friendly way (meaning future theme updates shouldn't break your site. yay!). Extras on how to hook and how to unhook things and rehook them in later. You can unhook just about anything in WordPress so once you understand the basics you should be able to move anything around the page where ever you want.

  • 1,992