Builing a WordPress Theme

808 views

Published on

Get started with building your first theme. We will cover the necessary files to get started, key functions to know, as well as some other solutions to jump start your development.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
808
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Builing a WordPress Theme

  1. 1. Building a WordPress Theme
  2. 2. Not too difficult
  3. 3. A little harder
  4. 4. #*&%@#!
  5. 5. why build a theme? • better understanding of how WordPress works • self-sufficiency to fix or change theme aspects • empowerment ( yourself, a career ) • move beyond the WordPress dashboard • world domination…results may vary
  6. 6. World 1-1 Templates
  7. 7. template terminology • template files - files that control how your site content is displayed • template tags - WordPress functions that grab content from the database (get_header, get_sidebar(‘someparameter’)) • page templates - type of template that is only applied to pages in your theme
  8. 8. • files to display your data - WordPress template files (php) • files for theme information and styles - style.css • files to add/remove functionality (functions.php) • other files used can include javascript, images, svg, sass/less and more! theme files
  9. 9. index.phpstyle.css Required Theme Files create a folder, place these two files and you’ll soon have your theme
  10. 10. style.css • file header - provides details about theme in the form of comments • can house css styles for your site
  11. 11. style.css /* Theme Name: Twenty Fifteen Theme URI: https://wordpress.org/themes/twentyfifteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar,featured-images, microformats, post-formats Text Domain: twentyfifteen` */
  12. 12. Dashboard - Theme Details
  13. 13. style.css /* Theme Name: Twenty Fifteen */ // begin theme styles
  14. 14. index.php https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924 <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
  15. 15. index.php https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><?php the_title(); ?></h3> <?php the_content(); ?> <?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?>
  16. 16. index.php https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924 <?php wp_footer(); ?> </body> </html>
  17. 17. most themes include these files header.php index.php sidebar.php footer.php
  18. 18. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
  19. 19. footer.php <?php wp_footer(); ?> </body> </html>
  20. 20. sidebar.php <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?>
  21. 21. working index.php <?php get_header() ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><?php the_title(); ?></h3> <?php the_content(); ?> <?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?> <?php get_sidebar() ?> <?php get_footer() ?>
  22. 22. page reference content header.php sidebar.php footer.php
  23. 23. the loop
  24. 24. • used to display posts, page content, comments, custom post types, custom fields • when you read about certain functions that list only working in the loop, this is where it goes • https://codex.wordpress.org/The_Loop
  25. 25. Blog Archive <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_post_thumbnail(); ?> <?php the_excerpt(); ?> <?php endwhile; else: ?> <?php _e('Sorry, no posts matched your criteria.'); ?> <?php endif; ?>
  26. 26. Individual Post <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <?php _e('Sorry, no pages matched your criteria.'); ?> <?php endif; ?>
  27. 27. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <?php _e('Sorry, no pages matched your criteria.'); ?> <?php endif; ?>
  28. 28. Template Tags World 2-1
  29. 29. template tags • a piece of php code that tells WordPress “do” or “get” something • they separate the theme into smaller, more understandable, sections. • some tags can only be used in specific areas • values can be passed through tags to display specific content
  30. 30. working index.php <?php get_header() ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title(‘<h3>’, ‘</h3>’); ?> <?php the_content(); ?> <?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?> <?php get_sidebar() ?> <?php get_footer() ?>
  31. 31. General collect them all: https://codex.wordpress.org/Template_Tags get_header() get_footer() get_sidebar() Author wp_list_authors() the_author() the_author_link() Bookmark wp_list_bookmarks() get_bookmark() Category Comment Link the_permalink() home_url() site_url() Post the_content() the_excerpt() the_title() Post Thumbnail the_post_thumbnail() has_post_thumbnail() Navigation wp_nav_menu() template tag categories comment_author() comment_date() get_avatar() the_category() the_tags() the_terms()
  32. 32. Conditionals
  33. 33. conditionals if ( is_user_logged_in() ) { echo 'Welcome, registered user!'; } else { echo 'Welcome, visitor!'; } https://developer.wordpress.org/themes/basics/conditional-tags/ if ( is_front_page() ) { // do something }
  34. 34. Template Hierarchy World 3-1
  35. 35. • Query strings (data from page links) determine which template or set of templates to display page content • Templates are selected in the order determined by the template hierarchy • If a template file cannot be matched, index.php will be used
  36. 36. query string - http://example.com/ template flow front-page.php home.php page.php index.php
  37. 37. query string - http://example.com/blog/category/luigi/ template flow category-luigi.php category-6.php category.php archive.php index.php
  38. 38. template hierarchy http://wphierarchy.com/ - Rami Abraham, Michelle Schulp
  39. 39. expanded theme header.php index.php sidebar.php footer.php 404.php single.php page.php
  40. 40. page templates • only apply to pages • used to change the look and feel of a page • can be applied to a single page, page section or class of pages • custom pages with template names give users control by enabling template switching
  41. 41. page template flow $custom.php page-$slug.php page-id.php page.php page query
  42. 42. Custom Page Template /** * Template Name: Two Columns Template * * Description: A page template that provides a key component of WordPress as * a CMS by meeting the need for a carefully crafted introductory page. * * @package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 */
  43. 43. Theme Folder Structure World 4-1
  44. 44. folder setup • main theme template files are in the root directory • no required folders in themes at this time • page-templates folder, languages folder are auto recognized
  45. 45. archive.php comments.php image.php content.php index.php page.php header.php sidebar.php screenshot.png search.php single.php style.css footer.php css inc images languages page- templates Twenty Fifteen Theme Structure 404.php author-bio.php content-*.php functions.php rtl.css
  46. 46. Functions and Hooks World 5-1
  47. 47. functions file • adds/removes features and functionality to your theme • acts like a plugin • automatically loaded for both admin and external pages • “put it in your functions file” location
  48. 48. • enqueuing stylesheets and scripts • enable theme features, including: sidebars, post formats, custom headers/backgrounds • enable options for the theme customizer • define functions for your theme to use • and more
  49. 49. functions.php if ( ! function_exists( 'themename_setup' ) ) : function themename_setup() { register_nav_menus( array( 'primary' => __( 'Primary Menu', 'theme_name' ), 'secondary' => __( 'Secondary Menu', 'theme_name' ) ) ); add_theme_support( 'post-thumbnails' ); }
 endif; add_action( 'after_setup_theme', 'themename_setup' );
  50. 50. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
  51. 51. functions.php function twentyfifteen_scripts() { // Load our main stylesheet. // hooks into wp_head(); wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() ); // hooks into wp_footer(); wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150330', true ); } add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
  52. 52. <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <?php wp_head(); ?> </head> <?php wp_footer(); ?> </body> </html> // header.php // footer.php
  53. 53. hooks
  54. 54. power of hooks • two types: actions and filters • part of the plugin api • gives the ability to customize, extend, and enhance WordPress • used heavily throughout WordPress, plugins and themes
  55. 55. filters http://codex.wordpress.org/Plugin_API/Filter_Reference
  56. 56. filter hook info • Use when you want to manipulate data coming from the database to the browser, or vice versa • Change the content by adjusting what is outputted • Filtered content is always returned http://codex.wordpress.org/Plugin_API/Filter_Reference
  57. 57. filter hooks add_filter( 'the_content', 'theme_add_call_number' ); function theme_add_call_number ( $content ) { if ( is_page() ) { $content .= '<div>Call for more info! - 555-555-5555</div>'; } return $content; } // functions.php
  58. 58. actions http://codex.wordpress.org/Plugin_API/Action_Reference
  59. 59. action hook info • when queries are ran, actions (hooks in general) are executed during the WordPress page creation life cycle. • we can hook into when these are ran and run our own functions http://codex.wordpress.org/Plugin_API/Action_Reference
  60. 60. action hooks <body> <?php do_action ( ‘themename_before_header' ); ?> add_action( 'themename_before_header', ‘themename_page_alert’, 5 ); function themename_page_alert() { if ( is_front_page() ) { echo ‘<div>Alert! We have an important message!</div>’; } } // header.php // functions.php
  61. 61. Local Development Crash Course Warp Level
  62. 62. MAMP or Wamp, Xampp, DesktopServer, etc
  63. 63. Using MAMP • Download and install the software
 - https://www.mamp.info/en/downloads/ • Setup your document root 
 - where your sites will be stored • Start the Mamp Server, create database • Install WordPress, connect database • Profit $$$$ https://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP
  64. 64. startutorial.com “First, solve the problem. Then, write the code.”
  65. 65. Justin Tucker @certainstrings certainstrings.com resources • developer.wordpress.org/themes/basics • developer.wordpress.org • wordpress.tv • teamtreehouse.com • pippinsplugins.com • tommcfarlin.com slides: bit.ly/wp-theme-building

×