Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build WordPress Themes

Build WordPress Themes

WordPress skeleton themes


Alison Foxall

November 21, 2015


  1. @alisonmf THEME BUILD For Front-End Web Workers

  2. @alisonmf AGENDA • Vocabulary • Pre-Planning • Child Themes •

    Skeleton Themes • More Planning • Template Hierarchy • Template Tags
  3. @alisonmf Vocabulary • Posts vs Pages vs Custom Post (Content)

 The only difference is one column in the database. It’s easier to think of posts as relevant to time and chronological order and pages are outside of that. Both posts and pages can have comments but comments are normally disabled on posts. You can create additional custom post types for anything (e.g. “people, movies, songs, etc”).
 https:/ /wordpress.org/plugins/pods/
 https:/ /wordpress.org/plugins/custom-post-type-ui/
 (or implement programatically) • Custom Fields
 Fields you can add to post types to manage additional data. Very popular for web developers to use these for clients to manage additional content on complex page layouts. Custom fields are native to WordPress but there are plugins to make the admin UI more user-friendly for the content manager.
 https:/ /wordpress.org/plugins/advanced-custom-fields/ • Taxonomies
 Taxonomies are a way to organize things. One type of taxonomy that comes pre-installed with WordPress are “Categories”, and another one is “Tags”. You can add additional ones like “Services” or “Generes” – anything you’d like.
 https:/ /wordpress.org/plugins/pods/
  4. @alisonmf Vocabulary • Post Formats
 9 post formats are available

    for themes to support. This support must be built into it. The post formats allow for different post layouts in your blog. • Template Tags
 These tags are available to theme developers to use to query and display data easily. They are mostly plug-in-play. • WP_Query
 A query to use for getting posts out of the database. Very useful when you need to grab specific posts or manipulate output. • Widgets
 Widgets add extra functionality or content to specific areas that a theme developer defines. • Slug
 I don’t mean the slimy creature. Slugs are the alpha-numeric name assigned to a post or page, usually based off what you named it in the title.
  5. @alisonmf Planning • Make Decisions
 Will you use a child

    theme and base styles off an existing theme or will you use a Skeleton theme or totally start from scratch? • Decision based off your design
 Is your design simple or complex? Can it fit within the parameters of an existing theme just with a few modifications? • Choose your theme
 If doing a child theme, most of your work will be complete, sans styles and additional functionality. If you are using a skeleton theme, there are several route to go.
  6. @alisonmf Themes the best part

  7. @alisonmf Free Themes • WordPress.org Theme Repository
 https:/ /wordpress.org/themes/ •

    Search Google “free WordPress themes” • Very popular to use a “twenty” default theme and create a child theme
  8. @alisonmf Warning

  9. @alisonmf Warning about
 repo themes • Any theme in the

    WordPress repository can be updated by its owner automatically. • Don’t modify these theme files, create a child theme instead! • If you’ve made changes to the theme and receive an update from the theme author, your changes will be overwritten!
  10. @alisonmf Child Themes • Create when you like the theme

    you are using but need to make a few modifications to the styles, layout, or functionality. • The new style.css file you use in your child theme will overwrite what’s in your parent theme. • The functions.php will load in addition to your parent theme functions file, and will not overwrite. It will load first, before your parent functions. https:/ /codex.wordpress.org/Child_Themes
  11. @alisonmf Skeleton Themes what we really want to sink our

    teeth in
  12. @alisonmf Skeleton Themes • These are starter themes, meant to

    be forked and crafted into your own creation, some-what of a “boilerplate” for WordPress themes. • There are a handful of skeleton themes that are currently maintained. Some popular ones: • Underscores • Roots / Sage • Bones • We use “Gobble Blank 2” - a starter theme authored by us, using the Bourbon/Neat framework (uses scss).
 https:/ /github.com/gobblelogic/GobbleBlank2
  13. @alisonmf How Templates Function

  14. @alisonmf How Templates Work • PHP files work together to

    create the design and functionality a user experiences • Sections of the site would be housed in separate files like the header, footer, sidebar, etc. You would plan which parts go in which files. • WordPress determines which template file to use based on what type of page the user is viewing like a post, page, home page, blog page, category, etc. This is called the template hierarchy!
  15. @alisonmf Plan the Execution

  16. @alisonmf Template Hierarchy

  17. @alisonmf Template Hierarchy index.php style.css index.php page.php single.php style.css index.php

    category.php page.php page-home.php single.php single-team.php style.css All of these are legit themes 1 2 3
  18. @alisonmf Demo The 2 File Theme

  19. @alisonmf Template Tags • Used within your templates to easily

    display dynamic information that is being fed by the user • WordPress offers functions (or template tags) to display or return data (e.g. the_author(); vs. get_the_author();). https:/ /codex.wordpress.org/Template_Tags
  20. @alisonmf Custom Home Page • Go to Settings -> Reading

    - > Front page displays -> A static page (selection)
  21. @alisonmf Other Custom Pages • Place “Template Name: My Custom

    Page Name” on top of your php pages as a comment. • Select the template on an individual page you’re editing. • This page will now use that template file https:/ /codex.wordpress.org/Page_Templates
  22. @alisonmf Native Functions • Use the native navigation functions so

    your admin’s can edit the nav. Generally built into most skeleton themes and regular themes. • Featured image field, edit background and edit color fields can all be activated by the use of these functions as well. • Customizer for template changes. https:/ /codex.wordpress.org/Navigation_Menus
  23. @alisonmf Plugins Matter • Gravity Forms, or other form plugin

    • Advanced Custom Fields or PODS • WooCommerce These plugins will sometime require you to modify styles or edit/create theme files so they fit your branding and styles.
  24. @alisonmf Dev Specific Stuff

  25. @alisonmf Dev & Vagrant VVV - Varying Vagrant Vagrants

    Vagrant Vagrants is an evolving Vagrant configuration focused on WordPress dev. https:/ /github.com/Varying-Vagrant-Vagrants/VVV VV - By Bradp
 Site wizard for VVV. The easiest way to set up WordPress sites automatically. https:/ /github.com/bradp/vv
  26. @alisonmf WordCamp Tampa 2016 Sept 9 thru 11 • Conference

    just for WordPress • 400 Tickets Being Sold • USF Marshall Student Center, Tampa • 2 Full Days of Conferencing • Saturday - 3 Tracks for Design, Development, Internet Marketing & Publishing • Sunday - 2 Additional Tracks for Business & Entrepreneurial Topics • 1 Full Day for the Beginner Workshop on Friday • 1 Full Day of Developer Workshops on Sunday • Happiness Bar! Get all your questions answered.
  27. @alisonmf Thank You Thank you for having me! Connect with

    me on Twitter - @alisonmf Search for “WordPress Tampa” on Facebook & Join Our Group!