Learn Web Design and Development Via WordPress - WordCamp Phoenix 2014

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
January 17, 2014

Learn Web Design and Development Via WordPress - WordCamp Phoenix 2014

This is the slide deck from the talk I did at WordCamp Phoenix 2014. It covered how to learn HTML, CSS, PHP and JS/jQuery by using WordPress.

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

January 17, 2014
Tweet

Transcript

  1. Learn Web Design & Development Via WordPress

  2. WordPress is a great platform for learning web design and

    development
  3. Begin to Identify as a 
 WordPress Theme Developer

  4. So many advanced programmers learned their skills using WordPress

  5. Learn Web Design Via WordPress @zgordon Tools PHP CSS HTML

    Talk Overview JS/jQuery Hosting
  6. Zac Gordon

  7. Learn Web Design Via WordPress @zgordon About Zac Gordon I

    teach WordPress
  8. Learn Web Design Via WordPress @zgordon About Zac Gordon I

    build $975 WP sites
  9. Learn Web Design Via WordPress @zgordon About Zac Gordon I

    host student sites
  10. Learn Web Design Via WordPress @zgordon About Zac Gordon User

    since WP 2.1
  11. Learn Web Design Via WordPress @zgordon About Zac Gordon I

    blog at wp.zacgordon.com
  12. Tools

  13. Web Inspector

  14. Learn Web Design Via WordPress @zgordon Web Inspector Look at

    the code behind a web page
  15. Learn Web Design Via WordPress @zgordon Web Inspector

  16. Learn Web Design Via WordPress @zgordon Web Inspector

  17. Learn Web Design Via WordPress @zgordon Web Inspector

  18. Text Editors

  19. Learn Web Design Via WordPress @zgordon Text Editors View file

    structure Advanced search Autocomplete Extendable
  20. Learn Web Design Via WordPress @zgordon Text Editors

  21. Learn Web Design Via WordPress @zgordon Text Editors

  22. Learn Web Design Via WordPress @zgordon Text Editors

  23. Learn Web Design Via WordPress @zgordon Text Editors Advanced search

    (and replace) Autocomplete (extendable)
  24. File & Database Access

  25. Learn Web Design Via WordPress @zgordon File & Database Access

  26. Learn Web Design Via WordPress @zgordon FTP Software - Ability

    to view file architecture - Easily work locally and push live - OR why not edit live? - Save common directories
  27. Learn Web Design Via WordPress @zgordon Version Control and DB

    - Can’t FTP databases - Version control is great, but remember DB! - There are plugin options
  28. Learn Web Design Via WordPress @zgordon Sequal Pro

  29. HTML

  30. Learn Web Design Via WordPress @zgordon HTML - HyperText Markup

    Language ! Identifies the structure of your content: HTML <h1> Header tags ! <title> Title tags ! <a> Links
  31. Learn Web Design Via WordPress @zgordon Header Tags <h1>Header 1</h1>

    <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 3</h4> <h5>Header 3</h5> <h6>Header 3</h6> Major headings for page and content
  32. Learn Web Design Via WordPress @zgordon Header Tags How many

    H1s can you have on a page?
  33. Learn Web Design Via WordPress @zgordon Header Tags A heading

    element briefly describes the topic of the section it introduces. ~ w3.org
  34. Learn Web Design Via WordPress @zgordon Header Tags

  35. Learn Web Design Via WordPress @zgordon Header Tags

  36. Learn Web Design Via WordPress @zgordon Header Tags

  37. Learn Web Design Via WordPress @zgordon Header Tags With HTML5,

    this is valid
  38. Learn Web Design Via WordPress @zgordon Header Tags Demo: From

    h2 to h1
  39. Learn Web Design Via WordPress @zgordon Title Tag <title>Page Name

    - Site Name</title> Display at top of browser and as search engine headings
  40. Learn Web Design Via WordPress @zgordon Title Tag Title tag

    in search results
  41. Learn Web Design Via WordPress @zgordon Title Tag Where's the

    description?
  42. Learn Web Design Via WordPress @zgordon Title Tag WordPress SEO

    Plugin
  43. Learn Web Design Via WordPress @zgordon Anchor Tag <a href="http://site.com/link">Link</a>

    Create links to pages
  44. Learn Web Design Via WordPress @zgordon Anchor Tag A “forced”

    example
  45. Learn Web Design Via WordPress @zgordon Anchor Tag

  46. Learn Web Design Via WordPress @zgordon Anchor Tag WYSIWYG Text

    Widget
  47. Learn Web Design Via WordPress @zgordon Anchor Tag

  48. CSS

  49. Learn Web Design Via WordPress @zgordon CSS - Cascading Style

    Sheets ! Identifies the presentation of your content CSS h2 {font-size: 18px} ! body {background: #ddd} ! a:hover {color: #0074a2}
  50. Learn Web Design Via WordPress @zgordon CSS Font Size

  51. Learn Web Design Via WordPress @zgordon CSS Font Size

  52. Learn Web Design Via WordPress @zgordon CSS Background

  53. Learn Web Design Via WordPress @zgordon CSS Background

  54. Learn Web Design Via WordPress @zgordon CSS Background

  55. Learn Web Design Via WordPress @zgordon CSS Background

  56. Template Hierarchy

  57. Learn Web Design Via WordPress @zgordon Template Hierarchy wp-content >

    themes > themename
  58. Learn Web Design Via WordPress @zgordon Template Hierarchy

  59. Learn Web Design Via WordPress @zgordon Test if content is

    available then displays it all File Structure
  60. Learn Web Design Via WordPress @zgordon Template Hierarchy

  61. Learn Web Design Via WordPress @zgordon Template Hierarchy

  62. Learn Web Design Via WordPress @zgordon Template Hierarchy

  63. Child Theme

  64. Learn Web Design Via WordPress @zgordon Child Theme

  65. Learn Web Design Via WordPress @zgordon Child Theme

  66. PHP

  67. Learn Web Design Via WordPress @zgordon PHP: Hypertext Preprocessor -

    Use for dynamic coding and database interactions PHP - Functions - Loops and Conditionals - File Structure
  68. Learn Web Design Via WordPress @zgordon Functions - Call a

    bunch of code PHP Functions <h1><?php the_title(); ?></h1> ! <?php the_content(); ?>
  69. Learn Web Design Via WordPress @zgordon Test if content is

    available then displays it all PHP Loops and Conditionals <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> ! <h1><?php the_title(); ?></h1> ! <?php endwhile; endif; ?>
  70. JS and jQuery

  71. Learn Web Design Via WordPress @zgordon JS and jQuery JavaScript

    determines the front-end behavior of your site. - Mostly done through plugins - Can do yourself - Trick to loading JavaScript
  72. Learn Web Design Via WordPress @zgordon WordPress Plugins w jQuery

  73. Learn Web Design Via WordPress @zgordon Add Your Own jQuery

    Plugins
  74. Learn Web Design Via WordPress @zgordon The wrong ways to

    load JS in WordPress is via the header or footer files Loading JavaScript Files <script src=“/wp-content/themes/themename/js/ theme.js”></script> ! <script src=“<?php echo get_template_directory_uri(); ?>/js/theme.js"></script>
  75. Learn Web Design Via WordPress @zgordon The correct way is

    ! - Via the functions.php file - Using the wp_enqueue_script() function - Gives dependency options - In footer or header Loading JavaScript Files
  76. Learn Web Design Via WordPress @zgordon Can autoload jQuery for

    your plugins Loading JavaScript Files function theme_js() { wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true ); } add_action( 'wp_enqueue_scripts', 'theme_js' );
  77. Learn Web Design Via WordPress @zgordon jQuery in Templates <div

    id="featured" class="clearfix flexslider"> <ul class="slides"> <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->t <li> <h2><?php the_title(); ?></h2> <p><?php the_field('description'); ?></p> </li> <?php endwhile; ifelse; ?> </ul> </div> jQuery(document).ready(function($) { $('.flexslider').flexslider(); })
  78. Learn Web Design Via WordPress @zgordon jQuery in Templates jQuery

    no conflict ! - The $ does not work by default - Allows WP to work with multiple JS libraries - Can setup WP to have $ work with jQuery jQuery(document).ready(function($) { $('.flexslider').flexslider(); })
  79. Hosting

  80. Learn Web Design Via WordPress @zgordon Hosting Hosting - Stores

    the content, files and database for your site - Hosting provider - FTP - Database Transfer - GitHub
  81. Learn Web Design Via WordPress @zgordon Hosting Provider webhostingforstudents.com

  82. Zac Gordon zacgordon.com email@zacgordon.com @zgordon