1 00:00:00,650 --> 00:00:06,310 In the previous lesson you installed local by flywheel and started your first practice WordPress Web 2 00:00:06,310 --> 00:00:07,020 site. 3 00:00:07,190 --> 00:00:13,580 Now we'll do a little tour of both the Wordpress installation and how local by flywheel sets it up. 4 00:00:13,580 --> 00:00:18,530 You'll get your first idea about how WordPress works in general and how you can work with the files 5 00:00:18,560 --> 00:00:24,860 and database while using local other local development environments like map for example work in similar 6 00:00:24,860 --> 00:00:26,850 ways but have differences. 7 00:00:26,990 --> 00:00:32,600 By the end of this video you'll know where to find the files that WordPress uses as well as the database. 8 00:00:32,750 --> 00:00:38,920 Plus you'll start to get more familiar with how WordPress works as a CIMS or a content management system. 9 00:00:38,930 --> 00:00:43,860 Let's go while you have your first website open and running. 10 00:00:44,010 --> 00:00:50,220 Let's take a look at how adding content in the Wordpress dashboard affects what it looks like on the 11 00:00:50,220 --> 00:00:53,040 front end or on the live Web site. 12 00:00:53,040 --> 00:00:59,190 So with the dashboard open let's just take a look at a few of the different places we have content. 13 00:00:59,190 --> 00:01:07,420 One is posts posts are designed like a blog designed to be displayed in reverse chronological order. 14 00:01:07,590 --> 00:01:12,240 And this first post is a default post from WordPress. 15 00:01:12,390 --> 00:01:19,750 We look at it it's got a content area and a title and if we go back to the settings in the dashboard 16 00:01:20,100 --> 00:01:27,130 I just want to show you under how in settings and reading we have the Web site set so that the home 17 00:01:27,130 --> 00:01:30,930 page displays the latest posts. 18 00:01:30,930 --> 00:01:37,520 Now if we go back to pages WordPress also comes with a sample page. 19 00:01:37,650 --> 00:01:40,380 And if I click on the title of that page. 20 00:01:40,380 --> 00:01:41,490 Pages are different. 21 00:01:41,490 --> 00:01:48,030 They don't have categories and tags associated with them like posts do and they're designed to be more 22 00:01:48,030 --> 00:01:50,970 like static pages of a Web site. 23 00:01:51,600 --> 00:01:58,470 And so if we wanted the home page of the Web site to display not the latest blog posts but to display 24 00:01:58,470 --> 00:02:04,020 a particular static page like this sambil page we would do that in two different places. 25 00:02:04,020 --> 00:02:10,920 One is under settings and reading can see that if I click a static page and then I choose one of my 26 00:02:10,920 --> 00:02:19,290 pages for the home page and if I just click Save changes right there go back to the Web site itself 27 00:02:19,320 --> 00:02:20,770 and refresh. 28 00:02:20,880 --> 00:02:22,130 You'll see that as I scroll down. 29 00:02:22,140 --> 00:02:28,890 Now I have the contents of that sample page as the home page instead of the latest blog posts. 30 00:02:28,890 --> 00:02:34,580 As I mentioned there's one more place that you can edit what the actual Web site displays and that's 31 00:02:34,590 --> 00:02:40,470 in the customize or that's under appearance customize in the Wordpress dashboard. 32 00:02:40,620 --> 00:02:47,100 And if you go there it actually shows you a live representation of what the Web site could look like 33 00:02:47,430 --> 00:02:50,990 as you make changes over here in these items. 34 00:02:51,000 --> 00:02:58,830 So if we look at home page settings that's the same exact information as we have under settings and 35 00:02:58,890 --> 00:02:59,970 reading settings. 36 00:02:59,970 --> 00:03:05,580 So you could see it's reflected my change I have a static page and it's called home. 37 00:03:05,580 --> 00:03:08,030 Now that's a little bit different isn't it. 38 00:03:08,040 --> 00:03:14,810 And if you look this is a different layout than we had on the live site right here. 39 00:03:14,820 --> 00:03:21,030 I I've defined the sample page as the home page but over here under the homepage settings in the customize 40 00:03:21,030 --> 00:03:30,810 or a default layout for this 20:17 theme is that we can have a homepage that displays a bunch of different 41 00:03:30,810 --> 00:03:34,450 content with static images in the background. 42 00:03:34,470 --> 00:03:43,860 Now I'm scrolling down a homepage section and about page and a section of blog posts and you can see 43 00:03:43,860 --> 00:03:49,710 that this has a lot of sample content that wasn't there to begin with. 44 00:03:49,710 --> 00:03:57,390 Now if I click under home homepage and I click sample page that looks more like the web site looks right 45 00:03:57,390 --> 00:04:03,780 now that's the home page and then the Post's Page is a page called blague. 46 00:04:03,780 --> 00:04:09,430 Now let's leave it as the customized or as set up and click the publish button. 47 00:04:09,730 --> 00:04:13,920 And now let's go back to the Web site and refresh that page. 48 00:04:13,930 --> 00:04:21,780 You can see that the 20:17 theme allows you to use these homepage sections which have these big wide 49 00:04:21,780 --> 00:04:29,360 hero images and some sections using page content inside of the Web site. 50 00:04:29,580 --> 00:04:37,260 And this is a way that theme's not just 20:17 but all themes have an opportunity to give you kind of 51 00:04:37,260 --> 00:04:39,780 a starting point for your web site. 52 00:04:40,080 --> 00:04:47,580 So let's go back into the Wordpress dashboard because I've published under home page settings this static 53 00:04:47,580 --> 00:04:49,770 page and chose home and blog. 54 00:04:49,770 --> 00:04:57,090 Now if I just click the button on the left and I go under page and all pages you can see that the theme 55 00:04:57,090 --> 00:04:59,330 has added some default content. 56 00:04:59,340 --> 00:05:05,130 It defines our front page which is the home page is the one called home and that sample content just 57 00:05:05,130 --> 00:05:07,840 says Welcome to your site et cetera. 58 00:05:08,160 --> 00:05:15,510 When we go back to all pages now the blog page doesn't have any content at all. 59 00:05:15,510 --> 00:05:20,620 It tells you that oh you're currently editing the page that shows your latest posts. 60 00:05:20,730 --> 00:05:29,670 Ok so here's the you rl or the permalink for that part of the Web site it's the domain name slash blog. 61 00:05:29,730 --> 00:05:35,680 If I right click that and click open in a new tab I could take a look at what that would look like. 62 00:05:35,700 --> 00:05:40,150 It has part of the home page image at the top with the site title. 63 00:05:40,170 --> 00:05:41,910 It has some navigation. 64 00:05:41,910 --> 00:05:45,330 And then this is the reverse order posts. 65 00:05:45,320 --> 00:05:48,650 Of course we only have one in a list. 66 00:05:48,650 --> 00:05:51,660 And so that would be your blog page. 67 00:05:51,690 --> 00:05:57,840 Let's go back to the practice site and since we've made that change in the customized You can also see 68 00:05:58,200 --> 00:06:03,920 that the theme has given us a sample navigation menu that wasn't there before. 69 00:06:03,960 --> 00:06:09,600 One of the great things about this theme is how it sets up the sample content but also how it has this 70 00:06:09,600 --> 00:06:17,100 nice scrolling home page is right hand button with a little arrow in the navigation menu which starts 71 00:06:17,100 --> 00:06:18,900 at the bottom of the page. 72 00:06:19,110 --> 00:06:25,410 If you click it it rings you up to the next section and then the navigation stack sticks to the top 73 00:06:25,410 --> 00:06:28,750 of the page and all the content goes under it. 74 00:06:28,830 --> 00:06:35,160 So no matter where you are on the Web site you can go back and click one of these navigation items. 75 00:06:35,190 --> 00:06:43,010 Now I clicked contact and there's some sample page content on a particular page called contact. 76 00:06:43,020 --> 00:06:49,950 This gives you a nice starting point so that you can go ahead and start editing those existing pages 77 00:06:50,400 --> 00:06:56,520 in the pages section of the Wordpress dashboard and begin getting your theme and the look and feel of 78 00:06:56,520 --> 00:06:58,230 your web site together. 79 00:06:58,410 --> 00:07:04,560 You can stop the video now and start playing with your own site and figuring out how things work including 80 00:07:04,830 --> 00:07:09,720 pages post content and the menu items. 81 00:07:09,730 --> 00:07:15,600 Now I told you that the menu was already created from the sample content in this theme and if you want 82 00:07:15,600 --> 00:07:23,490 to edit the menu you can do that under appearance menus as well as in the customize or right here under 83 00:07:23,790 --> 00:07:24,730 menus. 84 00:07:26,000 --> 00:07:31,200 The top menu is the one that was created for us and you can play with changing that around a little 85 00:07:31,200 --> 00:07:32,670 bit on your own. 86 00:07:32,670 --> 00:07:38,760 Come on back here and we'll look at how the local development environment works with wordpress in the 87 00:07:38,760 --> 00:07:40,440 next section. 88 00:07:40,440 --> 00:07:48,100 Now let's take a look at how the local buy flywheel local development environment uses the Wordpress 89 00:07:48,180 --> 00:07:55,460 files and a mystical database to make WordPress into an effective content management system. 90 00:07:56,580 --> 00:08:02,620 First the Wordpress files or the Wordpress core files as they're sometimes referred to. 91 00:08:02,820 --> 00:08:10,930 These are the HP files that make up Wordpress and let it work in the browser to connect to the database. 92 00:08:11,250 --> 00:08:18,990 So if I go up to my browser I've navigated here to WordPress dot org the Web site for the open source 93 00:08:18,990 --> 00:08:21,030 WordPress software that we're using. 94 00:08:21,360 --> 00:08:27,090 And you can see that there's a download WordPress button at the top right and if you open that page 95 00:08:27,090 --> 00:08:33,060 you'll see the version of Wordpress which is the latest stable release and the ability to click on that 96 00:08:33,300 --> 00:08:36,030 to download the zip file. 97 00:08:36,030 --> 00:08:42,210 Now if you remember when we were in local buy flywheel when we hit the plus button and added a new site 98 00:08:42,510 --> 00:08:48,630 one of the messages we got across the bottom was downloading WordPress flywheel was downloading it from 99 00:08:48,720 --> 00:08:51,550 this very server on our behalf. 100 00:08:51,570 --> 00:09:00,120 It always gets the latest version of Wordpress and we don't have to then download these files because 101 00:09:00,210 --> 00:09:03,590 local by flywheel does that for us. 102 00:09:03,750 --> 00:09:10,170 Now on your own computer if you look at local buy flywheel I remember when we were setting it up we 103 00:09:10,170 --> 00:09:13,530 left all the files in the default location. 104 00:09:13,530 --> 00:09:20,550 So right now let's navigate on our computer to where those files are located for our practice site. 105 00:09:20,640 --> 00:09:28,740 If you ever was called practice site 1 and now whether you're on Windows or on a Mac it'll be slightly 106 00:09:28,740 --> 00:09:29,200 different. 107 00:09:29,210 --> 00:09:36,370 On a Mac you can use the Finder but in Windows I'll be using the File Explorer whether you're on Windows 108 00:09:36,460 --> 00:09:40,270 or a Mac the files are located in a similar location. 109 00:09:40,270 --> 00:09:46,660 I'm using File Explorer in Windows to navigate to the main hard drive on my computer and then under 110 00:09:46,670 --> 00:09:54,550 users and then my own username I go down to a folder called local sites that was created by local by 111 00:09:54,550 --> 00:10:00,770 flywheel and you can see the various folders associated with my local Web sites. 112 00:10:00,970 --> 00:10:02,920 Here's practice site 1. 113 00:10:03,190 --> 00:10:10,150 And then there's a folder called app for application and then the public folder is where the actual 114 00:10:10,280 --> 00:10:13,930 WordPress core files are located. 115 00:10:13,930 --> 00:10:20,410 These are all the core files that you would download if you went to WordPress darg and downloaded the 116 00:10:20,410 --> 00:10:27,930 file structure itself and we're going to be installing WordPress manually at a later time in the course. 117 00:10:28,070 --> 00:10:36,640 And if I go back to the file explorer and look at these this set of 19 or 20 files there's one particular 118 00:10:36,640 --> 00:10:41,680 one that we use to connect WordPress itself to the database. 119 00:10:41,680 --> 00:10:47,740 Now from WordPress darg the default comes with a file called W.P. config dash sample. 120 00:10:47,890 --> 00:10:54,520 And if you do install WordPress manually you're you're meant to rename or copy this file and rename 121 00:10:54,520 --> 00:10:58,020 it W.P. dash config dot THP. 122 00:10:58,030 --> 00:11:05,860 You can see that it's showing in my windows or file explorer that it's a Ph P file and so that file 123 00:11:06,010 --> 00:11:11,020 is already configured to connect to the database in local by flywheel. 124 00:11:11,020 --> 00:11:16,100 We'll be looking at the W.P. config file in pretty good detail later on. 125 00:11:16,540 --> 00:11:18,730 But that's where the files are located. 126 00:11:18,910 --> 00:11:25,430 And now let's take a look back into local buy flywheel and look at where the database is located. 127 00:11:27,020 --> 00:11:31,910 Local by flywheel comes with a database utility called admin. 128 00:11:32,210 --> 00:11:35,620 And it will install it the first time you click add Mynor. 129 00:11:35,840 --> 00:11:46,100 But if you connect the admin or software it opens up a database browser and editor in your browser whether 130 00:11:46,100 --> 00:11:49,330 it's Firefox or chrome or Safari on the Mac. 131 00:11:49,670 --> 00:11:57,680 If you look you can see that it's opened up the database associated with my web site. 132 00:11:57,830 --> 00:12:03,650 And so what I have here are the different tables inside of the database. 133 00:12:03,650 --> 00:12:07,090 And if I look at say let's look at the users table. 134 00:12:07,090 --> 00:12:15,270 Now if I click that table heading and then I go up and I hit the select data button. 135 00:12:15,470 --> 00:12:22,640 You can see that there is one user created in wordpress and there's my username name and of course my 136 00:12:22,640 --> 00:12:31,910 password it is hashed or it's encrypted so that it works properly with the Wordpress file structure. 137 00:12:31,980 --> 00:12:38,250 And there's one more table that I'd like to show you with some of the data that is in the database in 138 00:12:38,250 --> 00:12:41,560 wordpress and that's the W.P. options table. 139 00:12:41,760 --> 00:12:48,120 If I select that table and then click select data you can see that there's there's actually quite a 140 00:12:48,120 --> 00:12:56,920 bit of data in the W.P. options table and each of these rows is something that's defined by WordPress. 141 00:12:57,000 --> 00:13:05,070 But as you can see it's not stored inside of the actual file structure in wordpress it's stored separately 142 00:13:05,070 --> 00:13:06,270 in the database. 143 00:13:06,330 --> 00:13:12,780 And that's what makes WordPress a content management system with a database holding all of the content 144 00:13:12,780 --> 00:13:18,720 and all of the options none of the pages you create in wordpress where you're creating web sites are 145 00:13:18,720 --> 00:13:24,040 stored as new pages in the files they're stored in the database. 146 00:13:24,090 --> 00:13:30,040 And then WordPress puts it together as a web site directly from the server to the user's browser. 147 00:13:30,360 --> 00:13:39,000 And so in options the first two rows are called the site you are l and the home rows and you could see 148 00:13:39,000 --> 00:13:44,000 that's where the U R L is or the web address is for your web site. 149 00:13:44,340 --> 00:13:49,970 So that's a small tour of the database and the file structure in wordpress. 150 00:13:50,010 --> 00:13:56,520 Let me show you just one more thing and I'm going to go back to the file explorer in Windows and show 151 00:13:56,520 --> 00:14:00,540 you in one of the folders the WP content folder. 152 00:14:00,780 --> 00:14:07,050 This is where you would store any themes that you have installed in wordpress and there's three currently 153 00:14:07,230 --> 00:14:13,080 that come as default themes 2016 2017 and 2015. 154 00:14:13,770 --> 00:14:14,620 I go back. 155 00:14:14,700 --> 00:14:16,900 There's also the plug ins folder. 156 00:14:17,100 --> 00:14:21,790 There's no plug ins installed right now as a default plug in in my installation. 157 00:14:21,900 --> 00:14:23,960 And then the uploads folder. 158 00:14:24,030 --> 00:14:32,580 Now I have the year and the month but the only media or images that I have in that uploads folder are 159 00:14:32,640 --> 00:14:36,930 have been added by default from the theme itself. 160 00:14:37,080 --> 00:14:41,610 And so I showed you that to show you that inside of the Wordpress file structure. 161 00:14:41,670 --> 00:14:49,410 The only thing that's going to change in this file structure is when you upload themes or plug ins or 162 00:14:49,620 --> 00:14:58,110 media content into the media library and those are in the WP content folder all these other files never 163 00:14:58,170 --> 00:15:06,210 change and shouldn't change in terms of your Wordpress installation We'll get into more detail about 164 00:15:06,210 --> 00:15:10,590 playing with our WordPress site and how to add content and change content. 165 00:15:10,800 --> 00:15:13,390 Just using the Wordpress dashboard. 166 00:15:13,560 --> 00:15:20,490 But for now that gives you an idea of where the files are stored and how you manage the database using 167 00:15:20,490 --> 00:15:26,070 this particular local development environment local by flywheel. 168 00:15:26,130 --> 00:15:32,040 In this lesson we took a tour of how WordPress works as a content management system and also how to 169 00:15:32,040 --> 00:15:38,820 access the underlying file structure and the database using local by flywheel in the next video. 170 00:15:38,880 --> 00:15:43,890 I'll show you how I would install WordPress manually using local by flywheel. 171 00:15:44,220 --> 00:15:44,700 Let's go.