Slide 1
Slide 1 text
Learn Web Design
& Development
Via WordPress
Slide 2
Slide 2 text
WordPress is a great
platform for learning
web design and development
Slide 3
Slide 3 text
Begin to Identify as a
WordPress Theme Developer
Slide 4
Slide 4 text
So many advanced
programmers learned their
skills using WordPress
Slide 5
Slide 5 text
Learn Web Design Via WordPress @zgordon
Tools PHP
CSS
HTML
Talk Overview
JS/jQuery
Hosting
Slide 6
Slide 6 text
Zac Gordon
Slide 7
Slide 7 text
Learn Web Design Via WordPress @zgordon
About Zac Gordon
I teach WordPress
Slide 8
Slide 8 text
Learn Web Design Via WordPress @zgordon
About Zac Gordon
I build $975 WP sites
Slide 9
Slide 9 text
Learn Web Design Via WordPress @zgordon
About Zac Gordon
I host student sites
Slide 10
Slide 10 text
Learn Web Design Via WordPress @zgordon
About Zac Gordon
User since WP 2.1
Slide 11
Slide 11 text
Learn Web Design Via WordPress @zgordon
About Zac Gordon
I blog at wp.zacgordon.com
Slide 12
Slide 12 text
Tools
Slide 13
Slide 13 text
Web Inspector
Slide 14
Slide 14 text
Learn Web Design Via WordPress @zgordon
Web Inspector
Look at the code behind a web page
Slide 15
Slide 15 text
Learn Web Design Via WordPress @zgordon
Web Inspector
Slide 16
Slide 16 text
Learn Web Design Via WordPress @zgordon
Web Inspector
Slide 17
Slide 17 text
Learn Web Design Via WordPress @zgordon
Web Inspector
Slide 18
Slide 18 text
Text Editors
Slide 19
Slide 19 text
Learn Web Design Via WordPress @zgordon
Text Editors
View file structure
Advanced search
Autocomplete
Extendable
Slide 20
Slide 20 text
Learn Web Design Via WordPress @zgordon
Text Editors
Slide 21
Slide 21 text
Learn Web Design Via WordPress @zgordon
Text Editors
Slide 22
Slide 22 text
Learn Web Design Via WordPress @zgordon
Text Editors
Slide 23
Slide 23 text
Learn Web Design Via WordPress @zgordon
Text Editors
Advanced search (and replace)
Autocomplete (extendable)
Slide 24
Slide 24 text
File & Database
Access
Slide 25
Slide 25 text
Learn Web Design Via WordPress @zgordon
File & Database Access
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Learn Web Design Via WordPress @zgordon
Sequal Pro
Slide 29
Slide 29 text
HTML
Slide 30
Slide 30 text
Learn Web Design Via WordPress @zgordon
HTML - HyperText Markup Language
!
Identifies the structure of your content:
HTML
Header tags ! Title tags ! <a> Links
Slide 31
Slide 31 text
Learn Web Design Via WordPress @zgordon
Header Tags
Header 1
Header 2
Header 3
Header 3
Header 3
Header 3
Major headings for page and contentSlide 32
Slide 32 text
Learn Web Design Via WordPress @zgordon
Header Tags
How many H1s can you
have on a page?
Slide 33
Slide 33 text
Learn Web Design Via WordPress @zgordon
Header Tags
A heading element briefly
describes the topic of the
section it introduces.
~ w3.org
Slide 34
Slide 34 text
Learn Web Design Via WordPress @zgordon
Header Tags
Slide 35
Slide 35 text
Learn Web Design Via WordPress @zgordon
Header Tags
Slide 36
Slide 36 text
Learn Web Design Via WordPress @zgordon
Header Tags
Slide 37
Slide 37 text
Learn Web Design Via WordPress @zgordon
Header Tags
With HTML5, this is valid
Slide 38
Slide 38 text
Learn Web Design Via WordPress @zgordon
Header Tags
Demo: From h2 to h1
Slide 39
Slide 39 text
Learn Web Design Via WordPress @zgordon
Title Tag
Page Name - Site Name
Display at top of browser and as search
engine headings
Slide 40
Slide 40 text
Learn Web Design Via WordPress @zgordon
Title Tag
Title tag in search results
Slide 41
Slide 41 text
Learn Web Design Via WordPress @zgordon
Title Tag
Where's the description?
Slide 42
Slide 42 text
Learn Web Design Via WordPress @zgordon
Title Tag
WordPress SEO Plugin
Slide 43
Slide 43 text
Learn Web Design Via WordPress @zgordon
Anchor Tag
Link
Create links to pages
Slide 44
Slide 44 text
Learn Web Design Via WordPress @zgordon
Anchor Tag
A “forced” example
Slide 45
Slide 45 text
Learn Web Design Via WordPress @zgordon
Anchor Tag
Slide 46
Slide 46 text
Learn Web Design Via WordPress @zgordon
Anchor Tag
WYSIWYG Text Widget
Slide 47
Slide 47 text
Learn Web Design Via WordPress @zgordon
Anchor Tag
Slide 48
Slide 48 text
CSS
Slide 49
Slide 49 text
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}
Slide 50
Slide 50 text
Learn Web Design Via WordPress @zgordon
CSS Font Size
Slide 51
Slide 51 text
Learn Web Design Via WordPress @zgordon
CSS Font Size
Slide 52
Slide 52 text
Learn Web Design Via WordPress @zgordon
CSS Background
Slide 53
Slide 53 text
Learn Web Design Via WordPress @zgordon
CSS Background
Slide 54
Slide 54 text
Learn Web Design Via WordPress @zgordon
CSS Background
Slide 55
Slide 55 text
Learn Web Design Via WordPress @zgordon
CSS Background
Slide 56
Slide 56 text
Template Hierarchy
Slide 57
Slide 57 text
Learn Web Design Via WordPress @zgordon
Template Hierarchy
wp-content > themes > themename
Slide 58
Slide 58 text
Learn Web Design Via WordPress @zgordon
Template Hierarchy
Slide 59
Slide 59 text
Learn Web Design Via WordPress @zgordon
Test if content is available then displays it all
File Structure
Slide 60
Slide 60 text
Learn Web Design Via WordPress @zgordon
Template Hierarchy
Slide 61
Slide 61 text
Learn Web Design Via WordPress @zgordon
Template Hierarchy
Slide 62
Slide 62 text
Learn Web Design Via WordPress @zgordon
Template Hierarchy
Slide 63
Slide 63 text
Child Theme
Slide 64
Slide 64 text
Learn Web Design Via WordPress @zgordon
Child Theme
Slide 65
Slide 65 text
Learn Web Design Via WordPress @zgordon
Child Theme
Slide 66
Slide 66 text
PHP
Slide 67
Slide 67 text
Learn Web Design Via WordPress @zgordon
PHP: Hypertext Preprocessor - Use for
dynamic coding and database interactions
PHP
- Functions
- Loops and Conditionals
- File Structure
Slide 68
Slide 68 text
Learn Web Design Via WordPress @zgordon
Functions - Call a bunch of code
PHP Functions
!
Slide 69
Slide 69 text
Learn Web Design Via WordPress @zgordon
Test if content is available then displays it all
PHP Loops and Conditionals
!
!
Slide 70
Slide 70 text
JS and jQuery
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
Learn Web Design Via WordPress @zgordon
WordPress Plugins w jQuery
Slide 73
Slide 73 text
Learn Web Design Via WordPress @zgordon
Add Your Own jQuery Plugins
Slide 74
Slide 74 text
Learn Web Design Via WordPress @zgordon
The wrong ways to load JS in WordPress is via
the header or footer files
Loading JavaScript Files
!
/js/theme.js">
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
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' );
Slide 77
Slide 77 text
Learn Web Design Via WordPress @zgordon
jQuery in Templates
jQuery(document).ready(function($) {
$('.flexslider').flexslider();
})
-
have_posts() ) : $the_query->t
Slide 78
Slide 78 text
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();
})
Slide 79
Slide 79 text
Hosting
Slide 80
Slide 80 text
Learn Web Design Via WordPress @zgordon
Hosting
Hosting - Stores the content, files and
database for your site
- Hosting provider
- FTP
- Database Transfer
- GitHub
Slide 81
Slide 81 text
Learn Web Design Via WordPress @zgordon
Hosting Provider
webhostingforstudents.com