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.

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