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.