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. 12.
  2. 19.

    Learn Web Design Via WordPress @zgordon Text Editors View file

    structure Advanced search Autocomplete Extendable
  3. 23.
  4. 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
  5. 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
  6. 29.
  7. 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
  8. 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
  9. 33.

    Learn Web Design Via WordPress @zgordon Header Tags A heading

    element briefly describes the topic of the section it introduces. ~ w3.org
  10. 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
  11. 48.

    CSS

  12. 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}
  13. 59.

    Learn Web Design Via WordPress @zgordon Test if content is

    available then displays it all File Structure
  14. 66.

    PHP

  15. 67.

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

    Use for dynamic coding and database interactions PHP - Functions - Loops and Conditionals - File Structure
  16. 68.

    Learn Web Design Via WordPress @zgordon Functions - Call a

    bunch of code PHP Functions <h1><?php the_title(); ?></h1> ! <?php the_content(); ?>
  17. 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; ?>
  18. 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
  19. 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>
  20. 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
  21. 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' );
  22. 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(); })
  23. 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(); })
  24. 79.
  25. 80.

    Learn Web Design Via WordPress @zgordon Hosting Hosting - Stores

    the content, files and database for your site - Hosting provider - FTP - Database Transfer - GitHub