1
00:00:00,420 --> 00:00:05,730
Let's take a tour of a WordPress site already installed so you can get a feel for the software and know

2
00:00:05,730 --> 00:00:10,190
what to expect from the different versions that you'll see throughout the course.

3
00:00:10,260 --> 00:00:16,530
The WordPress software is updated quite often adding security fixes and new features but it's also backward

4
00:00:16,530 --> 00:00:17,670
compatible.

5
00:00:17,670 --> 00:00:23,100
This means that whichever version you see me use in the lessons your practice site is likely to be slightly

6
00:00:23,100 --> 00:00:27,110
newer and May can't contain some differences in this lesson.

7
00:00:27,120 --> 00:00:32,420
I'll show you the newest release version 5.0 which includes a different editing system for posts and

8
00:00:32,430 --> 00:00:33,300
pages.

9
00:00:33,330 --> 00:00:38,850
I'll also show you how by installing a simple plug in we can keep all our WordPress sites working with

10
00:00:38,880 --> 00:00:44,600
older themes and plug ins even before they've been adapted for the new 5.0 and other.

11
00:00:44,740 --> 00:00:50,220
Let's just start out by taking a look at WordPress dot org and you can follow along if you like.

12
00:00:50,230 --> 00:00:53,310
Keep in mind that this is not WordPress dot com.

13
00:00:53,380 --> 00:00:57,400
The hosted solution that doesn't give you unlimited options.

14
00:00:57,400 --> 00:01:01,930
WordPress dot org is the version of WordPress that we're working with in this course.

15
00:01:01,930 --> 00:01:08,750
The open source version that is often called self-hosted WordPress on the home page there's a get WordPress

16
00:01:08,770 --> 00:01:14,110
button at the top right and on that page there is a download button you can see that the latest version

17
00:01:14,380 --> 00:01:17,290
is WordPress 5.0.

18
00:01:17,360 --> 00:01:19,570
There's also a number of options across the top.

19
00:01:19,570 --> 00:01:24,630
You can check out the showcase and themes and plug ins.

20
00:01:24,730 --> 00:01:27,910
The main things that we'll be using for now.

21
00:01:27,970 --> 00:01:34,510
I have a local environment set up where I have a WordPress site set up right here under attack.

22
00:01:34,790 --> 00:01:37,300
Now it doesn't look like anything special.

23
00:01:37,300 --> 00:01:39,700
This is just a blank theme.

24
00:01:39,700 --> 00:01:47,740
The new theme called 20:19 using WordPress 5.0 there's just not really any content or imagery in it

25
00:01:47,740 --> 00:01:48,680
yet.

26
00:01:48,850 --> 00:01:54,220
If I go to the administrator dashboard it'll prompt me to log in

27
00:01:59,210 --> 00:02:06,260
and when I do I'll go to the WordPress welcome screen or what might you what you might call the dashboard

28
00:02:06,540 --> 00:02:14,620
homescreen Now this is a brand new fresh WordPress installation just coming out of with all the default

29
00:02:14,710 --> 00:02:21,580
settings you can see here in the at a glance widget on the dashboard tells me that I'm running WordPress

30
00:02:21,580 --> 00:02:26,370
5.0 and it tells me that I'm using the 20:19 theme.

31
00:02:26,380 --> 00:02:30,740
Let's take a look under appearance and themes.

32
00:02:30,820 --> 00:02:38,160
There are three themes installed in the default installation here and one of them is active.

33
00:02:38,170 --> 00:02:42,160
The one at the top left is the one that shows as active.

34
00:02:42,160 --> 00:02:49,620
First thing I'm going to do is experiment with the 20:17 theme instead for this site.

35
00:02:49,690 --> 00:02:57,220
I think just by doing that and then going over to the site and hitting refresh that gives us a nice

36
00:02:57,220 --> 00:03:02,740
big home page image as well as a column on the right hand side.

37
00:03:02,770 --> 00:03:09,560
I do like the layout of this theme and we'll be using a variety of themes in the course now themes in

38
00:03:09,560 --> 00:03:16,660
wordpress are what determine the look and feel of the Web site itself and plug ins.

39
00:03:16,660 --> 00:03:19,430
I roll over plug ins and click install plug ins.

40
00:03:19,550 --> 00:03:21,790
I don't have any install plug ins at this time.

41
00:03:21,800 --> 00:03:26,930
Now depending on your environment your host may have installed some default plug ins to get you started

42
00:03:26,990 --> 00:03:30,090
to begin with but at this point we don't have any.

43
00:03:30,110 --> 00:03:37,550
Now while themes control the look and feel of WordPress website plug ins add functionality and so the

44
00:03:37,550 --> 00:03:44,990
first thing I want to do because WordPress 5.0 introduces a new editing system called the block editor.

45
00:03:44,990 --> 00:03:50,570
The first thing I'm going to do is add a new plug in by clicking add new and I'm going to look for the

46
00:03:50,570 --> 00:03:52,350
classic editor.

47
00:03:52,400 --> 00:03:57,710
Wordpress is keeping it near the top and they're going to keep this plug in supported for the next few

48
00:03:57,710 --> 00:04:01,420
years as everybody transitions over to the new block.

49
00:04:01,440 --> 00:04:07,880
Editor in development it was code named Gutenberg and lots of people have installed it and played with

50
00:04:07,880 --> 00:04:10,820
it previous to 5.0 being released.

51
00:04:11,030 --> 00:04:15,930
But I'm just going to click Install now next to the classic editor plug in.

52
00:04:16,040 --> 00:04:23,600
Once it's installed I can choose to activate it and when the classic editor is activated you can choose

53
00:04:23,600 --> 00:04:31,030
between the original editor that's been with wordpress for a long long time or the new block editor.

54
00:04:31,250 --> 00:04:37,360
The potential problem is that some themes and some plug ins might not be compatible with the new black

55
00:04:37,370 --> 00:04:38,890
editor at this point.

56
00:04:39,080 --> 00:04:46,580
And so by installing the classic editor plug in we can assure that any content that we bring in in terms

57
00:04:46,580 --> 00:04:49,670
of themes or plug ins will work.

58
00:04:49,670 --> 00:04:57,710
We can choose the default editor and whether we allow users to switch editors when they need to.

59
00:04:57,830 --> 00:05:03,950
So I'm going to click yes and then I'll do default editor as the classic classic editor and click save

60
00:05:03,950 --> 00:05:04,730
changes.

61
00:05:05,780 --> 00:05:10,430
Now the classic editor plug in adds a couple of settings to the settings.

62
00:05:10,460 --> 00:05:14,560
Writing screen and that's where I've made these adjustments.

63
00:05:14,690 --> 00:05:21,950
But the first thing I want to do because 20:17 the theme comes with some sample content.

64
00:05:21,950 --> 00:05:28,010
If you don't make any changes to your site or add any content initially you can allow the theme to add

65
00:05:28,010 --> 00:05:30,050
some sample content for you.

66
00:05:30,110 --> 00:05:32,960
So I'm going to do that right now to make sure it's in there.

67
00:05:33,020 --> 00:05:39,260
I'm going to under appearance click customize this opens what we call the customize or in Word Press.

68
00:05:39,260 --> 00:05:45,170
It shows a representation of what the site looks like on the right as well as some controls on the left

69
00:05:45,170 --> 00:05:46,010
side.

70
00:05:46,040 --> 00:05:53,120
Now under theme options if I haven't done anything to change the content of the site yet 20:17 theme

71
00:05:53,150 --> 00:05:58,290
will add certain pages and populate them here in the home page.

72
00:05:58,310 --> 00:06:05,750
This theme has a home page that shows some different sections with static background images behind like

73
00:06:05,750 --> 00:06:12,750
this and the theme has added an About page and contact page.

74
00:06:12,770 --> 00:06:14,500
Among several others.

75
00:06:14,540 --> 00:06:20,410
Now if I just click publish now I've saved those pages in my wordpress installation.

76
00:06:20,510 --> 00:06:26,990
Now if you go to pages all pages you can see that I have a number of pages here one called blog about

77
00:06:27,380 --> 00:06:35,690
a home page section contact and a page called home the privacy policies policy and the sample page are

78
00:06:35,720 --> 00:06:40,730
two default pages that are included with wordpress.

79
00:06:41,120 --> 00:06:45,200
Now you can see now that I have two kinds of editors installed.

80
00:06:45,200 --> 00:06:51,230
I have a reference here in black next to the title of each page whether it's the classic editor or whether

81
00:06:51,230 --> 00:06:53,400
it's using the block editor.

82
00:06:53,640 --> 00:06:56,630
Let's let's take a look at the difference.

83
00:06:56,660 --> 00:07:01,850
Let's just take a look at the about page by clicking the title of the page or either the classic or

84
00:07:01,850 --> 00:07:07,940
the block editor I can open up that page in a word press editing window.

85
00:07:07,940 --> 00:07:10,850
Now here's what the classic editor looks like.

86
00:07:10,850 --> 00:07:13,390
It is called the tiny MCE editor.

87
00:07:13,430 --> 00:07:19,820
That's a piece of software that sits inside of WordPress and gives us these controls here that are like

88
00:07:19,850 --> 00:07:25,760
editing a word processing document or an email everything from different paragraph and heading styles

89
00:07:26,050 --> 00:07:33,560
to bold and italic alignment and adding media are provided with all these controls then the content

90
00:07:33,560 --> 00:07:36,300
goes here inside the content window.

91
00:07:36,440 --> 00:07:39,880
And then you click Update to update the post.

92
00:07:39,980 --> 00:07:47,240
This is how WordPress has worked for many years and now there's a new black editor that makes it much

93
00:07:47,270 --> 00:07:55,490
easier to create custom and beautiful layouts within each page or post's content area to show you an

94
00:07:55,490 --> 00:08:03,140
example of how I might place an image next to the text here and its output would say we want to put

95
00:08:03,140 --> 00:08:10,190
an image to the left and have this text to the right of this main body text column I could click Add

96
00:08:10,190 --> 00:08:10,920
media.

97
00:08:11,330 --> 00:08:18,200
And if you click the media library there are three images that were pulled in as a part of the 20:17

98
00:08:18,200 --> 00:08:19,760
sample content.

99
00:08:19,760 --> 00:08:25,850
I could just choose one of the images and then on the right I could say the alignment should be left

100
00:08:26,330 --> 00:08:33,260
and let's choose a size maybe large and insert that into the page.

101
00:08:33,290 --> 00:08:40,820
Now since this is a pretty large image and the column which is limited the text has dropped down here

102
00:08:40,970 --> 00:08:41,800
to the bottom.

103
00:08:41,810 --> 00:08:48,080
What if I wanted to center that image it looks just about the same because this is the width of the

104
00:08:48,080 --> 00:08:49,210
column.

105
00:08:49,230 --> 00:08:56,470
Maybe if I click the edit button on there let's go to the small or medium size and click update.

106
00:08:56,480 --> 00:09:02,490
Now you can see the difference this image is centered on the page and the text is below.

107
00:09:02,660 --> 00:09:08,110
If I want the text to wrap around the image I could just align this image to the left.

108
00:09:08,250 --> 00:09:15,140
Then the text will go along right and if it were longer it would go down and wrap around the bottom

109
00:09:15,140 --> 00:09:15,410
there.

110
00:09:15,410 --> 00:09:19,710
I'm just copying and pasting a little bit more of the same text.

111
00:09:19,730 --> 00:09:23,440
You can see how that might look if I click update.

112
00:09:23,600 --> 00:09:28,460
Now I can right click on this link here which is for this page and open it in a new tab.

113
00:09:28,730 --> 00:09:32,950
And let's take a look at what this post or this page looks like.

114
00:09:32,960 --> 00:09:38,840
See there's the column that I'm working with and everything else is controlled in other places.

115
00:09:38,840 --> 00:09:47,530
This big image is what's called a featured image as we imported that sample content from the 20:17 theme.

116
00:09:47,530 --> 00:09:56,030
It used this picture for the featured image and that's the way 20:17 displays its pages a large image.

117
00:09:56,060 --> 00:09:58,830
And then the content of the page.

118
00:09:58,970 --> 00:10:05,570
Let's go back and take a look at what it might mean for us to use the block editor instead of the classic

119
00:10:05,570 --> 00:10:13,050
editor from here I'll go back to all pages and this time when I open the about page I'm going to click

120
00:10:13,230 --> 00:10:17,320
the block editor instead of the classic editor.

121
00:10:17,610 --> 00:10:22,110
It shows you a few tips that you can read when you first start out.

122
00:10:22,290 --> 00:10:28,470
And since we do have the classic editor plug in enabled we've got a little licked down here that says

123
00:10:28,470 --> 00:10:35,390
switch to classic editor but let's just take a look at the block editor here.

124
00:10:35,550 --> 00:10:43,290
You can see that the content area is on the left and this block is called a classic block.

125
00:10:43,290 --> 00:10:51,720
Even without the classic editor plug in installed the block includes a block called a classic block.

126
00:10:51,720 --> 00:10:58,980
Now we go over two more options over here we can say convert to blocks.

127
00:10:59,040 --> 00:11:06,670
Now what WordPress does is convert what was already in the classic editor into blocks.

128
00:11:06,780 --> 00:11:14,100
Now blocks are just building blocks like Legos that you can use to group some content into different

129
00:11:14,100 --> 00:11:14,740
places.

130
00:11:14,750 --> 00:11:22,730
It just gives a more modular approach and makes it easy to make unique layouts on each page.

131
00:11:22,740 --> 00:11:29,160
Now when I want to add more content below I can just click the plus button up here and there's a number

132
00:11:29,160 --> 00:11:31,230
of different types of blocks.

133
00:11:31,260 --> 00:11:40,860
Quite a few most used and there's common blocks formatting blocks all kinds of different layout elements

134
00:11:41,340 --> 00:11:44,750
widgets and things but all you do.

135
00:11:44,810 --> 00:11:46,840
You can even search for a block.

136
00:11:47,290 --> 00:11:50,160
Maybe I just want to do some paragraph text.

137
00:11:50,190 --> 00:11:58,230
I just paste some text in there that you can see that this now is a unique block of content called paragraph

138
00:11:58,380 --> 00:12:01,960
below the other paragraph content block.

139
00:12:02,160 --> 00:12:08,190
Now we placed an image inside of the paragraph content block just like we were able to do before but

140
00:12:08,190 --> 00:12:13,140
now we have the ability to add even more different kinds of blocks.

141
00:12:13,230 --> 00:12:20,940
Like Suppose we wanted an image gallery go to the media library maybe I'll put all three of these images

142
00:12:21,360 --> 00:12:29,340
in a gallery I could add a caption to each one and I could just say insert gallery and now that is a

143
00:12:29,340 --> 00:12:38,070
gallery block let's just click update and then we can click View page in a new tab up here and you can

144
00:12:38,070 --> 00:12:45,000
see that the content in the content column shows exactly what we had there.

145
00:12:45,000 --> 00:12:51,270
The big difference with the block editor versus the way that the classic editor looks is that when you're

146
00:12:51,270 --> 00:12:57,570
editing a page in the block editor the content generally looks exactly like it will look on the front

147
00:12:57,570 --> 00:13:01,470
end of the website or the actual website itself.

148
00:13:01,980 --> 00:13:08,340
That's a big difference from the classic editor where often we had to add some code or what's called

149
00:13:08,340 --> 00:13:15,210
a short code to take advantage of certain layout features of the theme or even to make certain plugins

150
00:13:15,210 --> 00:13:15,670
work.

151
00:13:16,780 --> 00:13:24,140
Now when I go back to all pages you can see that this page about is being controlled by the block editor

152
00:13:24,490 --> 00:13:30,580
and then the rest show the classic editor when you have the classic editor plug in installed and you

153
00:13:30,580 --> 00:13:36,610
have WordPress 5.0 or later you'll be able to switch between the two editors.

154
00:13:36,610 --> 00:13:38,230
Now why would we want to do this.

155
00:13:38,260 --> 00:13:45,190
It's because some themes and plug ins have yet to be updated to work with the block editor.

156
00:13:45,220 --> 00:13:50,590
Therefore all you need to do is install the classic editor plug in and those themes and plug ins that

157
00:13:50,590 --> 00:13:54,160
haven't caught up yet will still work.

158
00:13:54,160 --> 00:14:01,480
What I'd suggest is when you set up a new WordPress Web site and use 5.0 you don't have to set up the

159
00:14:01,480 --> 00:14:08,110
classic editor plugin necessarily because you're working from scratch but if you bring in a plug in

160
00:14:08,110 --> 00:14:16,030
or a theme that requires the classic editor you should just stall the classic editor or plug in at that

161
00:14:16,030 --> 00:14:17,080
point.

162
00:14:17,590 --> 00:14:25,860
If you do update an existing WordPress Web site however that is updating to the new WordPress 5 Puno

163
00:14:25,870 --> 00:14:33,370
version I would suggest installing the classic editor plug in first so that you don't have any issues

164
00:14:33,460 --> 00:14:41,850
once you upgrade to WordPress 5.0 in this lesson we talk a version of WordPress that uses the new block

165
00:14:41,850 --> 00:14:50,220
editor and you watched as I installed and activated the classic editor plug in I also activated the

166
00:14:50,220 --> 00:14:58,110

167
20:17 theme and imported the sample content pages and images by opening the customize or and theme option

168
00:14:58,110 --> 00:15:01,850
section and clicking publish in the next video.

169
00:15:02,010 --> 00:15:07,320
We'll get some of the tools you'll need outside of WordPress itself to create unique web sites of your

170
00:15:07,320 --> 00:15:08,700
own and for clients to.