1 00:00:00,680 --> 00:00:06,260 In this chapter we're going to be building a new website from scratch a simple brochure type site that 2 00:00:06,260 --> 00:00:08,550 you might build for a small local business. 3 00:00:08,780 --> 00:00:14,300 We'll start fresh by installing WordPress again locally or at your site Ground server and preparing 4 00:00:14,300 --> 00:00:19,610 the default 20:16 theme for customization in this new WordPress installation. 5 00:00:19,610 --> 00:00:24,380 You'll be working on your local computer as a staging environment as if you were going to transfer the 6 00:00:24,380 --> 00:00:26,140 site to a live server. 7 00:00:26,150 --> 00:00:31,520 You can also use your live environment at site ground for this developing of the site at a new staging 8 00:00:31,520 --> 00:00:32,390 domain. 9 00:00:32,840 --> 00:00:36,140 Here's your challenge for this first video of chapter 3. 10 00:00:36,170 --> 00:00:42,320 Make sure you've downloaded the latest version of Wordpress and then start map and install WordPress 11 00:00:42,380 --> 00:00:45,170 in your local development environment. 12 00:00:45,170 --> 00:00:51,050 Then go into the settings area and get the site ready as we did in the last chapter. 13 00:00:51,080 --> 00:00:54,430 Pause the video now and get it set up. 14 00:00:54,580 --> 00:00:57,720 If you're using the site Ground server instead. 15 00:00:57,850 --> 00:01:03,760 Your challenge is to set up a fresh WordPress installation manually instead of using the auto installer 16 00:01:04,450 --> 00:01:05,320 to do this. 17 00:01:05,320 --> 00:01:11,680 You'll have to use the C panel file manager to upload the files manually into a new subdirectory or 18 00:01:11,680 --> 00:01:15,370 folder that you'll create under your student domain. 19 00:01:16,990 --> 00:01:23,950 Use the file manager and your code editor as well as the database section of the panel to manually install 20 00:01:23,980 --> 00:01:30,150 WordPress paused the video now and I'll show you how to do both processes. 21 00:01:30,150 --> 00:01:31,500 When you come back. 22 00:01:31,500 --> 00:01:34,120 Good luck OK. 23 00:01:34,120 --> 00:01:35,650 Hope you got on well with that. 24 00:01:35,670 --> 00:01:40,030 The first thing I'm going to do is make sure that I have the latest version of Wordpress by going to 25 00:01:40,030 --> 00:01:46,360 WordPress dot org and hitting the download WordPress button making sure that I have the latest version 26 00:01:46,690 --> 00:01:56,300 and if I open windows explorer and open my wordpress folder you'll see that I do have WordPress 4 5 27 00:01:56,330 --> 00:02:01,790 1 and I did download the zip file and then unzipped it. 28 00:02:02,720 --> 00:02:06,200 And here are my wordpress files. 29 00:02:06,260 --> 00:02:13,250 Now I'll go into Seacole and map in another Windows Explorer folder. 30 00:02:13,250 --> 00:02:20,810 Open H.T. docs and I'm going to create a new folder here called brochure say 31 00:02:26,230 --> 00:02:27,100 open data. 32 00:02:27,310 --> 00:02:33,070 Select all the files and hold down control and copy them over 33 00:02:36,950 --> 00:02:39,750 all right now that those files are copied over. 34 00:02:39,760 --> 00:02:46,660 I know that they're in a folder called brochure Dasch site and I'm going to go ahead and start map and 35 00:02:47,290 --> 00:02:51,080 get myself ready to look. 36 00:02:51,080 --> 00:02:54,650 So I'll say ok and I'm going to open the start page. 37 00:02:54,800 --> 00:03:00,760 That's going to open the map start page in my browser so that I can easily connect with the database 38 00:03:03,100 --> 00:03:11,560 DHP my admin is available up at the top menu or down in the content area there and I'm going to create 39 00:03:11,560 --> 00:03:16,500 a new database for this new WordPress installation. 40 00:03:16,570 --> 00:03:18,130 I'm going to call it brochure site 41 00:03:21,400 --> 00:03:24,210 and hit create. 42 00:03:24,240 --> 00:03:30,330 Great now that that's been created I can go ahead and connect the Wordpress WP dash config file 43 00:03:34,700 --> 00:03:37,860 and we are ok inside of brochures site. 44 00:03:37,860 --> 00:03:44,760 I'm going to go ahead and rename the WP config dash sample to just W.P. config 45 00:03:47,580 --> 00:03:56,760 and then if I double click that it will open inside of my text and code editor there it is right that 46 00:03:56,760 --> 00:04:02,810 BP can dash config that P inside of the brochure site folder. 47 00:04:03,000 --> 00:04:05,730 I know that database name is the same 48 00:04:14,820 --> 00:04:22,350 if you remember the user name and the password are both in our local installation and the local host 49 00:04:22,440 --> 00:04:25,860 needs to identify the port. 50 00:04:26,220 --> 00:04:27,650 And so let's go back. 51 00:04:27,850 --> 00:04:37,670 Let's see we go back into the start page of map I can see that the sequel port is 33 0 6 and this is 52 00:04:37,670 --> 00:04:45,860 also visible inside the database appear at the top the server is localhost Colan 33 0 6. 53 00:04:45,860 --> 00:04:55,610 So I can define the host inside of the W.P. config file as localhost Colan 33 or 6. 54 00:04:55,680 --> 00:05:06,280 Just going to hit control as to save it and now I can just open a new window new tab in my browser localhost 55 00:05:07,070 --> 00:05:15,920 slash brochure Dasch site. 56 00:05:16,120 --> 00:05:22,720 If everything is connected properly it should recognize that WordPress isn't quite installed yet and 57 00:05:22,720 --> 00:05:24,060 I'll choose my language. 58 00:05:26,560 --> 00:05:29,130 And go ahead and set up the Web site. 59 00:05:29,410 --> 00:05:33,730 If you do use a password that you can remember for your local computer you have to confirm the use of 60 00:05:33,730 --> 00:05:36,880 a weak password and install WordPress 61 00:05:44,570 --> 00:05:44,850 great. 62 00:05:44,850 --> 00:05:51,990 I hope that work as smoothly as it did for me and now we'll go ahead and get started setting up inside 63 00:05:51,990 --> 00:05:52,900 of the Settings tab. 64 00:05:53,740 --> 00:05:56,980 The last few things that I want to do is under settings general 65 00:06:07,880 --> 00:06:19,770 set up a few things like the tag line or else the same email address lets choose my time zone those 66 00:06:19,990 --> 00:06:22,300 I can leave as the default and save changes. 67 00:06:25,680 --> 00:06:33,360 Next under writing I don't think I'll have to change any of these for now but under reading I am going 68 00:06:33,360 --> 00:06:41,970 to go ahead and make a static page for now the sample page one of my my front page display I know that 69 00:06:41,970 --> 00:06:47,680 under discussion in media I'm going to leave that as is for now and under Permalink. 70 00:06:47,770 --> 00:06:51,540 I'm definitely going to choose post name and then save changes. 71 00:06:52,840 --> 00:06:54,120 Nice job. 72 00:06:54,130 --> 00:06:56,320 Now I'm going to open them to the new site. 73 00:06:57,650 --> 00:06:58,740 In a new tab. 74 00:06:59,000 --> 00:07:00,110 Take a look. 75 00:07:00,110 --> 00:07:04,160 There we go the sample page is my home page. 76 00:07:04,340 --> 00:07:05,620 One more thing. 77 00:07:05,630 --> 00:07:10,570 I still got the admin bar up at the top of the site here. 78 00:07:10,700 --> 00:07:15,590 I'm going to remember to go ahead and go back under my profile and turn that off so that I can look 79 00:07:15,590 --> 00:07:16,180 at the site 80 00:07:19,500 --> 00:07:20,950 as the public will see it. 81 00:07:23,210 --> 00:07:23,540 Great. 82 00:07:23,540 --> 00:07:28,610 Now if I refresh here I think that Edmund Barr should disappear this is what the site will really look 83 00:07:28,610 --> 00:07:29,090 like. 84 00:07:30,570 --> 00:07:36,300 Now for those of you that are using site ground and your live server environment let's manually set 85 00:07:36,300 --> 00:07:40,620 up WordPress inside of site ground using the C panel. 86 00:07:40,770 --> 00:07:47,770 So log in to your site Ground hosting account and then click go to see panel up at the top left. 87 00:07:47,900 --> 00:07:55,460 First we have to go into the file manager and create a fresh clean folder and we can call it brochure 88 00:07:55,460 --> 00:07:56,930 Dasch site. 89 00:07:56,990 --> 00:08:03,410 Usually I'll dismiss this button for the file manager by clicking show hidden files and also skip this 90 00:08:03,410 --> 00:08:07,420 question and open this directory when I hit the file manager. 91 00:08:07,430 --> 00:08:13,470 So here I am in my public HTL mail original WordPress installation area. 92 00:08:13,760 --> 00:08:21,170 What I'm going to do is add another folder right inside of public h DML by going up here and clicking 93 00:08:21,320 --> 00:08:23,020 new folder. 94 00:08:23,210 --> 00:08:29,970 I'm going to call it Rosher dash site and I'll create new folder. 95 00:08:30,070 --> 00:08:32,870 So now I have a new folder called brochure site. 96 00:08:32,890 --> 00:08:37,100 If I double click that folder you can see that the directory is empty. 97 00:08:37,160 --> 00:08:45,410 But what I'm going to do is just go to upload and I can hit browse at the top here and here is where 98 00:08:45,410 --> 00:08:53,090 I can go into my computer and I can find my wordpress folder and the latest version of Wordpress that 99 00:08:53,090 --> 00:08:54,260 I have saved. 100 00:08:56,220 --> 00:09:03,280 So that will click that folder I had and open up the folder that I had unzipped and inside the Wordpress 101 00:09:03,280 --> 00:09:07,150 folder I have all of these files right here. 102 00:09:07,510 --> 00:09:12,040 Now one thing you may have found is by uploading using the file manager. 103 00:09:12,160 --> 00:09:21,320 You can't select multiple items and upload them all at once and so there is a solution here. 104 00:09:21,400 --> 00:09:26,460 I'll cancel out of that for now and I'm going to open the windows explorer. 105 00:09:26,530 --> 00:09:32,950 I've navigated to that WordPress folder and one way to do is select everything inside of it right click 106 00:09:32,980 --> 00:09:39,400 anywhere in there and I'm going to go send to compressed or zipped folder. 107 00:09:39,400 --> 00:09:45,130 Now this will compress everything into one dot zip file that I'll be able to quickly upload using the 108 00:09:45,130 --> 00:09:51,550 file manager and then I can unzip using the file manager right on the server. 109 00:09:51,590 --> 00:09:56,890 So now I have a zip file which is named whatever I had right clicked up here. 110 00:09:56,900 --> 00:09:59,200 If you are on a Mac it'll be called archive. 111 00:09:59,260 --> 00:09:59,650 Zip. 112 00:09:59,690 --> 00:10:00,700 By default. 113 00:10:00,860 --> 00:10:07,880 I'm just going to click that once and then a second time and I'm going to rename it w. 114 00:10:08,150 --> 00:10:14,420 Doesn't matter what we call it just so that we know what it is and so it is a compressed zipped folder 115 00:10:14,750 --> 00:10:22,460 and when we go back to the uploading screen for the file manager we can go over there and find it and 116 00:10:22,490 --> 00:10:25,110 upload it as one file. 117 00:10:32,380 --> 00:10:39,230 There we go a pause the video while this uploads gives me a success message down at the right hand side. 118 00:10:39,380 --> 00:10:45,530 If I just click go back it closes that tab in my browser and I go back and see it right here in the 119 00:10:45,530 --> 00:10:46,310 file manager. 120 00:10:46,310 --> 00:10:52,400 If you highlight that file you can click the extract button up at the top right and then extract files 121 00:10:52,850 --> 00:10:55,020 and it quickly extracts everything. 122 00:10:55,190 --> 00:11:02,090 Then you can say reload right here you can see that I got all my Word Press Corps files right inside 123 00:11:02,150 --> 00:11:07,640 of my folder which is called brochure Dasch site. 124 00:11:07,810 --> 00:11:11,780 It basically made a copy of all the files that were within the zip file. 125 00:11:11,800 --> 00:11:18,460 So if I highlight that zip file I can save a little bit of space by deleting that file. 126 00:11:18,580 --> 00:11:25,390 Now I can highlight the WP dash config dash sample that PSP file and click rename. 127 00:11:25,390 --> 00:11:28,330 Up here I can go right here. 128 00:11:29,560 --> 00:11:37,490 And just rename it W.P. dash config dot ph P and click rename file and now we have the WP config file 129 00:11:37,730 --> 00:11:39,010 ready to go. 130 00:11:39,260 --> 00:11:46,800 If I double click this file I can download it to my computer edit it in my code editor and then upload 131 00:11:46,800 --> 00:11:49,280 it back to the server. 132 00:11:49,290 --> 00:11:55,980 However there's a feature directly inside the file manager where you can open up a file inside of a 133 00:11:56,190 --> 00:12:03,100 browser based code editor you click code editor with that file highlighted and click Edit. 134 00:12:03,130 --> 00:12:10,410 Now I can see my whole W.P. the ash config dot ph P file inside of the browser and I can go up here 135 00:12:10,410 --> 00:12:15,030 and save it once I've made my edits. 136 00:12:15,250 --> 00:12:22,680 I know I'm going to need a database name a username password and a host name however. 137 00:12:22,680 --> 00:12:31,470 So I do need to go back into the seat panel and go down to the database's area and click My sequel database. 138 00:12:31,660 --> 00:12:38,260 I'm going to create a new database and I'm just going to call this one brochure and the whole name is 139 00:12:38,260 --> 00:12:41,670 going to be my account name underscore. 140 00:12:41,860 --> 00:12:45,230 And then the name that I place here. 141 00:12:45,400 --> 00:12:52,330 So I create the database and it's added the database so I can click go back and you do need to create 142 00:12:52,330 --> 00:13:00,230 a user for the database so that the Wordpress config file can log in as that user. 143 00:13:00,520 --> 00:13:06,400 And so here are my current databases and if I go down a little bit further you can see I can add a new 144 00:13:06,400 --> 00:13:07,100 user. 145 00:13:07,180 --> 00:13:12,000 So I'm just going to use the same name for this user. 146 00:13:12,010 --> 00:13:18,730 It only lets me use 7 character so I'm missing the E on the end for the username and I'm going to type 147 00:13:18,730 --> 00:13:20,860 a password that I can remember 148 00:13:24,430 --> 00:13:32,380 and type it again so that it knows that we are using the same password and I can click create a user 149 00:13:36,620 --> 00:13:38,210 could go back one more time. 150 00:13:38,390 --> 00:13:45,080 And now there's one more step I need to give this user permissions to use the certain database so if 151 00:13:45,080 --> 00:13:53,870 I want this user to be able to access this database I can just select these two items and click add 152 00:13:55,260 --> 00:14:01,320 and I want to click the all privileges button click make changes and now I've granted privileges to 153 00:14:01,320 --> 00:14:04,810 this database for the user that I created. 154 00:14:05,130 --> 00:14:11,000 So if I just clicked go back here and I can actually get right back to the see panel home. 155 00:14:11,010 --> 00:14:13,820 Now I know what those credentials were. 156 00:14:13,830 --> 00:14:20,340 So I can go back into my W.P. config file and enter them here. 157 00:14:20,380 --> 00:14:26,530 Now I've entered those three credentials and I know that when we're creating databases using the C panel 158 00:14:26,770 --> 00:14:30,320 we use localhost as the hostname. 159 00:14:30,370 --> 00:14:36,520 And so I can go up and click save at the top right and then I can just close that code editor and I 160 00:14:36,520 --> 00:14:45,250 know my W.P. config file is set up that should be all I need to do inside of the file manager so I can 161 00:14:45,250 --> 00:14:46,590 go ahead and close that. 162 00:14:46,750 --> 00:14:54,700 And inside of the C panel I can just grab my main domain and then hit control-C to copy open a new tab 163 00:14:54,700 --> 00:14:57,800 in my browser and I'll paste that right there. 164 00:14:57,940 --> 00:15:04,030 But I'm going to add the name of the folder that I created right at the end there and it looks like 165 00:15:04,030 --> 00:15:08,130 I've had an error establishing a database connection. 166 00:15:08,170 --> 00:15:09,960 No worries this is very common. 167 00:15:09,970 --> 00:15:15,970 I can tell that WordPress is trying to see the database and so something is working. 168 00:15:15,970 --> 00:15:19,340 Probably I mistyped the credentials when I was setting it up. 169 00:15:19,510 --> 00:15:27,010 So let's look at the databases section of the C panel and it looks like it's Greg D 11 not Greg. 170 00:15:27,010 --> 00:15:33,950 The one that I was typing inside of my file manager in the WP config file. 171 00:15:34,000 --> 00:15:37,720 Very common error which may have happened to you as well. 172 00:15:37,720 --> 00:15:43,840 So I'll go back into the file manager I know and open the brochure Dasch site folder and then go to 173 00:15:43,870 --> 00:15:51,910 W.P. config Doppie HP and I'll go up and click the code editor and click Edit. 174 00:15:51,980 --> 00:15:59,160 Now as I look at the database credentials I can see that I'm just missing a number one here and a number 175 00:15:59,160 --> 00:16:00,630 one here. 176 00:16:00,750 --> 00:16:05,710 I'll just click save and then close and I can close the file manager now. 177 00:16:05,730 --> 00:16:11,220 Now if I go back to this address and hit refresh great. 178 00:16:11,220 --> 00:16:13,820 I've got my wordpress install happening. 179 00:16:13,830 --> 00:16:19,900 I can click continue and now I'll fill in my credentials and set up my wordpress site. 180 00:16:20,000 --> 00:16:22,180 I filled in all my credentials here. 181 00:16:22,190 --> 00:16:25,800 I used a password that I could easily remember which was a weak one. 182 00:16:25,880 --> 00:16:28,620 So I had to click confirm use of weak password again. 183 00:16:28,720 --> 00:16:32,300 But in my email address and I'll click install WordPress. 184 00:16:32,300 --> 00:16:32,650 Great. 185 00:16:32,660 --> 00:16:34,520 I love that success message. 186 00:16:34,530 --> 00:16:38,680 I'll click log in just to go ahead and make sure everything is working. 187 00:16:38,970 --> 00:16:42,790 I think my is remembering my password. 188 00:16:42,920 --> 00:16:45,290 It's one I often use and great. 189 00:16:45,290 --> 00:16:52,070 I've got a new WordPress installation if I right click on visit site and go over into my new tab I've 190 00:16:52,070 --> 00:16:57,660 got a beautiful new WordPress installation that I installed manually. 191 00:16:57,910 --> 00:17:04,030 You can see that that takes quite a few more steps than it does to go into your C panel and use the 192 00:17:04,090 --> 00:17:06,270 Wordpress installer. 193 00:17:06,490 --> 00:17:12,290 But hopefully that gives you a good understanding of how WordPress works and connects to the database. 194 00:17:13,400 --> 00:17:19,460 In this video you set up a new WordPress installation either on your local computer using map or your 195 00:17:19,460 --> 00:17:22,540 site Ground live server completely manually. 196 00:17:22,550 --> 00:17:25,320 Maybe you even did them both in the next video. 197 00:17:25,400 --> 00:17:31,850 You'll make one more edit to the WP dash config file to make sure your site is using best practices 198 00:17:31,850 --> 00:17:33,100 for security. 199 00:17:33,140 --> 00:17:38,330 Plus you'll install for plugins that will be using to customize the site see their