Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,910 --> 00:00:04,720
Hello, everyone, and welcome to the course.
2
00:00:05,210 --> 00:00:10,400
In this video, I want to give you a bird's eye view so you know what to expect.
3
00:00:10,800 --> 00:00:11,770
Big picture.
4
00:00:11,900 --> 00:00:18,830
The goal of this course is for you to learn how to code completely custom websites with WordPress.
5
00:00:19,110 --> 00:00:23,360
We are going to build the site together for a fictional university.
6
00:00:23,630 --> 00:00:28,800
And along the way, we will slowly but surely become a WordPress developer.
7
00:00:29,150 --> 00:00:35,060
First, I will have you install WordPress on your personal computer so that you have a private playground
8
00:00:35,060 --> 00:00:38,810
copy of WordPress that you can practice and experiment with.
9
00:00:39,320 --> 00:00:44,510
Next, we will take our first look at the programming language.
10
00:00:45,070 --> 00:00:47,570
This is what powers the core of WordPress.
11
00:00:47,930 --> 00:00:51,740
But don't worry, you don't need any prior experience with PHP.
12
00:00:52,160 --> 00:00:56,510
After that, we will learn how to code and create a brand new theme.
13
00:00:56,840 --> 00:01:00,600
After that, we will learn how to create custom post types.
14
00:01:01,160 --> 00:01:06,090
There is an entire world of WordPress beyond just posts and pages.
15
00:01:06,440 --> 00:01:11,780
For example, let me show you the admin dashboard for our finished product in this course.
16
00:01:12,230 --> 00:01:18,380
In my sidebar, we see posts and pages just like in a normal WordPress installation.
17
00:01:18,680 --> 00:01:27,380
But I've also got campuses and events, programs, professors, notes, likes, and each of these post
18
00:01:27,380 --> 00:01:33,820
types has its own unique set of fields instead of just a generic title and body field.
19
00:01:34,280 --> 00:01:41,390
So, for example, if I click on professors and then if I click to edit, my professor named Dr. Barks
20
00:01:41,390 --> 00:01:41,840
a lot.
21
00:01:42,950 --> 00:01:50,600
Yes, we do have the generic title and body field, but we also have page, banner, subtitle and page
22
00:01:50,600 --> 00:01:57,620
banner background image, which if we view this post on the front end, those fields control this background
23
00:01:57,620 --> 00:02:00,110
image that is unique to just this Prof.
24
00:02:00,110 --> 00:02:00,710
Page.
25
00:02:00,950 --> 00:02:04,760
Here we see the page banner subtitle just for this one, professor.
26
00:02:05,300 --> 00:02:10,479
And also if we scroll down a bit, we see this related programs field.
27
00:02:10,880 --> 00:02:15,620
So in this left hand column, you can choose from the different programs or majors that are available
28
00:02:15,620 --> 00:02:21,710
at this school and you move them over here to say which one this particular professor teaches.
29
00:02:22,190 --> 00:02:28,150
And then this relationship between professor and program gets reflected on our front end.
30
00:02:28,550 --> 00:02:33,760
So on this Prof page, if I scroll down, we see subjects taught biology.
31
00:02:34,250 --> 00:02:41,000
This allows us to create relationships between different pieces of content and this opens up all sorts
32
00:02:41,000 --> 00:02:42,140
of possibilities.
33
00:02:42,470 --> 00:02:49,580
So, for example, if I click on campuses up in the header, we've got this interactive Google map with
34
00:02:49,580 --> 00:02:53,570
pins on it and each pin is a campus post.
35
00:02:53,900 --> 00:02:57,050
So, for example, we've got our downtown west campus.
36
00:02:57,050 --> 00:02:58,340
And if I click on that.
37
00:02:59,450 --> 00:03:06,800
It takes me to that detail screen for just this one campus, and if I scroll down, we can see programs
38
00:03:06,800 --> 00:03:09,250
available at this campus math.
39
00:03:10,100 --> 00:03:18,110
So long story short, custom post types and custom fields allow us to programmatically relate different
40
00:03:18,110 --> 00:03:21,230
content together in really compelling ways.
41
00:03:21,560 --> 00:03:26,870
OK, after that section of the course, we will move on to learn about JavaScript.
42
00:03:27,110 --> 00:03:33,350
Our first big JavaScript project in this course is to power our live search results.
43
00:03:33,740 --> 00:03:40,250
So, for example, I can either press the esky on my keyboard, ask for search, or just click this
44
00:03:40,250 --> 00:03:41,780
search icon up in the top.
45
00:03:41,780 --> 00:03:42,140
Right.
46
00:03:43,430 --> 00:03:46,850
And that opens up this full screen transparent overlay.
47
00:03:47,030 --> 00:03:53,270
And my cursor is automatically placed in this search field so I can just start typing for whatever I'm
48
00:03:53,270 --> 00:03:54,110
searching for.
49
00:03:54,440 --> 00:03:58,790
And on the fly in real time, we get our search results.
50
00:03:59,060 --> 00:04:02,890
And not only that, but they are organized by the content type.
51
00:04:03,140 --> 00:04:05,360
So I searched for biology here.
52
00:04:05,360 --> 00:04:14,150
We have any related blog posts or pages, programs, professors, related campuses and even any upcoming
53
00:04:14,150 --> 00:04:16,620
events that have to do with biology.
54
00:04:17,060 --> 00:04:20,410
Now, there's really two main aspects to the JavaScript here.
55
00:04:20,839 --> 00:04:25,280
Part one is the JavaScript to power the actual user interface.
56
00:04:25,580 --> 00:04:31,820
Right, opening and closing the overlay and responding to click events, things like that.
57
00:04:32,090 --> 00:04:38,960
And then the other aspect of the JavaScript is actually communicating with the WordPress server on the
58
00:04:38,960 --> 00:04:40,670
fly in real time.
59
00:04:41,180 --> 00:04:41,510
Right.
60
00:04:41,510 --> 00:04:47,030
Because when someone searches for something, we need to send that search string to the server.
61
00:04:47,330 --> 00:04:52,940
And then on the other hand, we also need to receive this incoming data from the server.
62
00:04:53,180 --> 00:04:56,140
And all of this needs to happen in real time.
63
00:04:56,360 --> 00:05:00,080
So this is a great exercise to learn all about JavaScript.
64
00:05:00,210 --> 00:05:02,450
I think you're going to love this portion of the course.
65
00:05:02,690 --> 00:05:04,100
Just a bit of a spoiler.
66
00:05:04,250 --> 00:05:10,540
The WordPress rest API is what makes all of this possible and very elegant to set up.
67
00:05:10,940 --> 00:05:17,300
OK, then in the next section of the course, we will learn about user roles and permissions.
68
00:05:17,660 --> 00:05:23,390
So if you want to have multiple people help maintain the website, you do not need to give everyone
69
00:05:23,390 --> 00:05:25,150
administrator access.
70
00:05:25,310 --> 00:05:30,860
So, for example, if you wanted to invite a friend or a co-worker and the only thing you wanted them
71
00:05:30,860 --> 00:05:37,310
to be able to do is manage the event post type, you could set that up, or if you wanted someone to
72
00:05:37,310 --> 00:05:44,360
be a campus manager, you could restrict them to only be able to change those type of posts or you can
73
00:05:44,360 --> 00:05:46,400
mix and match different permissions.
74
00:05:46,700 --> 00:05:52,360
Maybe someone should be able to post into the blog and manage programs, but that's it.
75
00:05:52,610 --> 00:05:59,570
The possibilities are endless and learning about roles and permissions will really open up new collaboration
76
00:05:59,570 --> 00:06:00,110
doors.
77
00:06:00,440 --> 00:06:05,930
Moving on, in the next section of the course, we will allow open registration.
78
00:06:06,530 --> 00:06:12,380
So, for example, if I log out, I'm currently signed in with my admin account, but I can click log
79
00:06:12,380 --> 00:06:18,230
out and then if I visit the website again, you can see that if a stranger visits the website, they
80
00:06:18,230 --> 00:06:20,930
can log in or even sign up.
81
00:06:21,350 --> 00:06:26,270
So with open registration, any random visitor can sign up for a basic account.
82
00:06:26,540 --> 00:06:32,150
And once someone with a basic account signs in that gives them access to two new features.
83
00:06:32,510 --> 00:06:34,520
The first feature is my notes.
84
00:06:36,110 --> 00:06:42,360
And in this portion of the course, we really sink our teeth into the word press rest API.
85
00:06:42,770 --> 00:06:46,600
We basically create our own mini single page application.
86
00:06:46,790 --> 00:06:53,420
So if a student brings their laptop into a lecture hall, they can take a note biology, note number
87
00:06:53,420 --> 00:06:55,970
five and take a few notes.
88
00:06:55,970 --> 00:06:59,450
Write Lorem ipsum class was amazing.
89
00:07:01,670 --> 00:07:02,930
Click create note.
90
00:07:04,360 --> 00:07:09,910
On the fly, it gets added here and saved into the database, they are free to create another note.
91
00:07:10,840 --> 00:07:18,180
Mark, note number one, did you know that two plus two equals four?
92
00:07:18,790 --> 00:07:19,520
That's true.
93
00:07:20,170 --> 00:07:20,920
Go ahead and click.
94
00:07:20,920 --> 00:07:21,430
Create.
95
00:07:22,830 --> 00:07:27,990
OK, and then from their existing notes, they're free to make edits, they can click this to change
96
00:07:27,990 --> 00:07:36,030
the title click save all of this gets saved into the database on the fly and they can also delete one
97
00:07:36,030 --> 00:07:36,810
of their notes.
98
00:07:38,320 --> 00:07:45,000
In real time, the other feature that basic logged in users did has to do with liking a professor.
99
00:07:45,790 --> 00:07:49,030
So maybe if I navigate to the doctor barks a lot.
100
00:07:49,030 --> 00:07:52,350
Professor Page, you'll notice this little heart box.
101
00:07:52,780 --> 00:07:58,960
Currently it says one to indicate that one other person has liked doctor barks a lot and notice the
102
00:07:58,960 --> 00:07:59,940
heart is hollow.
103
00:07:59,950 --> 00:08:01,330
But if I click on it.
104
00:08:03,170 --> 00:08:09,320
The heart fills in to indicate that I personally have liked this professor and you can see their light
105
00:08:09,320 --> 00:08:16,720
count went up by one and thanks to JavaScript and the rest API, all of this happens on the fly.
106
00:08:17,000 --> 00:08:23,450
So if I immediately decide that actually I don't like this professor, you can just click it again to
107
00:08:23,450 --> 00:08:25,670
toggle or remove your like.
108
00:08:26,030 --> 00:08:30,200
And all of this data is getting saved into the WordPress database.
109
00:08:30,500 --> 00:08:36,679
After this section of the course, I show you how to push or deploy your website, live up on to the
110
00:08:36,679 --> 00:08:39,530
web so that the entire world can view it.
111
00:08:39,890 --> 00:08:44,190
And if you don't have a Web hosting account to practice with, that's OK.
112
00:08:44,420 --> 00:08:50,510
This course gives you access to a free three month educational hosting plan, and it really is free
113
00:08:50,510 --> 00:08:52,220
in the truest sense of the word.
114
00:08:52,580 --> 00:08:56,240
You do not even need to enter a credit card or any form of payment.
115
00:08:56,570 --> 00:09:00,770
So there's no way they can automatically bill you at the end of the three months.
116
00:09:01,340 --> 00:09:08,270
So that way everyone has access to a Web post so you can practice deploying a site live and it's not
117
00:09:08,270 --> 00:09:08,990
mandatory.
118
00:09:08,990 --> 00:09:15,420
But if you're familiar with the git version control system, you are really going to love the automatic
119
00:09:15,420 --> 00:09:18,260
get deployment set up that I can show you.
120
00:09:18,620 --> 00:09:23,000
And finally, we end the course with a few extra credit challenges.
121
00:09:23,420 --> 00:09:25,420
So there's the bird's eye view of the course.
122
00:09:25,700 --> 00:09:28,060
I'm really excited to get things rolling.
123
00:09:28,400 --> 00:09:35,450
My goal for this course is to give you lots and lots of small victories each time we finish a small
124
00:09:35,450 --> 00:09:39,390
little feature or section and things work the way we want them to.
125
00:09:39,620 --> 00:09:45,830
I want you to relish that small victory, because each time we write code and accomplish something with
126
00:09:45,830 --> 00:09:49,130
it, we are moving closer to our career goals.
127
00:09:49,400 --> 00:09:51,130
And that's something to feel good about.
128
00:09:51,410 --> 00:09:53,180
So let's get some momentum rolling.
129
00:09:53,430 --> 00:09:54,650
Let's get things started.
130
00:09:54,800 --> 00:09:58,760
And most importantly, let's become a WordPress developer.
13393
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof