In the previous lesson you installed local by flywheel and started your first practice WordPress Web
site.
Now we'll do a little tour of both the Wordpress installation and how local by flywheel sets it up.
You'll get your first idea about how WordPress works in general and how you can work with the files
and database while using local other local development environments like map for example work in similar
ways but have differences.
By the end of this video you'll know where to find the files that WordPress uses as well as the database.
Plus you'll start to get more familiar with how WordPress works as a CIMS or a content management system.
Let's go while you have your first website open and running.
Let's take a look at how adding content in the Wordpress dashboard affects what it looks like on the
front end or on the live Web site.
So with the dashboard open let's just take a look at a few of the different places we have content.
One is posts posts are designed like a blog designed to be displayed in reverse chronological order.
And this first post is a default post from WordPress.
We look at it it's got a content area and a title and if we go back to the settings in the dashboard
I just want to show you under how in settings and reading we have the Web site set so that the home
page displays the latest posts.
Now if we go back to pages WordPress also comes with a sample page.
And if I click on the title of that page.
Pages are different.
They don't have categories and tags associated with them like posts do and they're designed to be more
like static pages of a Web site.
And so if we wanted the home page of the Web site to display not the latest blog posts but to display
a particular static page like this sambil page we would do that in two different places.
One is under settings and reading can see that if I click a static page and then I choose one of my
pages for the home page and if I just click Save changes right there go back to the Web site itself
and refresh.
You'll see that as I scroll down.
Now I have the contents of that sample page as the home page instead of the latest blog posts.
As I mentioned there's one more place that you can edit what the actual Web site displays and that's
in the customize or that's under appearance customize in the Wordpress dashboard.
And if you go there it actually shows you a live representation of what the Web site could look like
as you make changes over here in these items.
So if we look at home page settings that's the same exact information as we have under settings and
reading settings.
So you could see it's reflected my change I have a static page and it's called home.
Now that's a little bit different isn't it.
And if you look this is a different layout than we had on the live site right here.
I I've defined the sample page as the home page but over here under the homepage settings in the customize
or a default layout for this 20:17 theme is that we can have a homepage that displays a bunch of different
content with static images in the background.
Now I'm scrolling down a homepage section and about page and a section of blog posts and you can see
that this has a lot of sample content that wasn't there to begin with.
Now if I click under home homepage and I click sample page that looks more like the web site looks right
now that's the home page and then the Post's Page is a page called blague.
Now let's leave it as the customized or as set up and click the publish button.
And now let's go back to the Web site and refresh that page.
You can see that the 20:17 theme allows you to use these homepage sections which have these big wide
hero images and some sections using page content inside of the Web site.
And this is a way that theme's not just 20:17 but all themes have an opportunity to give you kind of
a starting point for your web site.
So let's go back into the Wordpress dashboard because I've published under home page settings this static
page and chose home and blog.
Now if I just click the button on the left and I go under page and all pages you can see that the theme
has added some default content.
It defines our front page which is the home page is the one called home and that sample content just
says Welcome to your site et cetera.
When we go back to all pages now the blog page doesn't have any content at all.
It tells you that oh you're currently editing the page that shows your latest posts.
Ok so here's the you rl or the permalink for that part of the Web site it's the domain name slash blog.
If I right click that and click open in a new tab I could take a look at what that would look like.
It has part of the home page image at the top with the site title.
It has some navigation.
And then this is the reverse order posts.
Of course we only have one in a list.
And so that would be your blog page.
Let's go back to the practice site and since we've made that change in the customized You can also see
that the theme has given us a sample navigation menu that wasn't there before.
One of the great things about this theme is how it sets up the sample content but also how it has this
nice scrolling home page is right hand button with a little arrow in the navigation menu which starts
at the bottom of the page.
If you click it it rings you up to the next section and then the navigation stack sticks to the top
of the page and all the content goes under it.
So no matter where you are on the Web site you can go back and click one of these navigation items.
Now I clicked contact and there's some sample page content on a particular page called contact.
This gives you a nice starting point so that you can go ahead and start editing those existing pages
in the pages section of the Wordpress dashboard and begin getting your theme and the look and feel of
your web site together.
You can stop the video now and start playing with your own site and figuring out how things work including
pages post content and the menu items.
Now I told you that the menu was already created from the sample content in this theme and if you want
to edit the menu you can do that under appearance menus as well as in the customize or right here under
menus.
The top menu is the one that was created for us and you can play with changing that around a little
bit on your own.
Come on back here and we'll look at how the local development environment works with wordpress in the
next section.
Now let's take a look at how the local buy flywheel local development environment uses the Wordpress
files and a mystical database to make WordPress into an effective content management system.
First the Wordpress files or the Wordpress core files as they're sometimes referred to.
These are the HP files that make up Wordpress and let it work in the browser to connect to the database.
So if I go up to my browser I've navigated here to WordPress dot org the Web site for the open source
WordPress software that we're using.
And you can see that there's a download WordPress button at the top right and if you open that page
you'll see the version of Wordpress which is the latest stable release and the ability to click on that
to download the zip file.
Now if you remember when we were in local buy flywheel when we hit the plus button and added a new site
one of the messages we got across the bottom was downloading WordPress flywheel was downloading it from
this very server on our behalf.
It always gets the latest version of Wordpress and we don't have to then download these files because
local by flywheel does that for us.
Now on your own computer if you look at local buy flywheel I remember when we were setting it up we
left all the files in the default location.
So right now let's navigate on our computer to where those files are located for our practice site.
If you ever was called practice site 1 and now whether you're on Windows or on a Mac it'll be slightly
different.
On a Mac you can use the Finder but in Windows I'll be using the File Explorer whether you're on Windows
or a Mac the files are located in a similar location.
I'm using File Explorer in Windows to navigate to the main hard drive on my computer and then under
users and then my own username I go down to a folder called local sites that was created by local by
flywheel and you can see the various folders associated with my local Web sites.
Here's practice site 1.
And then there's a folder called app for application and then the public folder is where the actual
WordPress core files are located.
These are all the core files that you would download if you went to WordPress darg and downloaded the
file structure itself and we're going to be installing WordPress manually at a later time in the course.
And if I go back to the file explorer and look at these this set of 19 or 20 files there's one particular
one that we use to connect WordPress itself to the database.
Now from WordPress darg the default comes with a file called W.P. config dash sample.
And if you do install WordPress manually you're you're meant to rename or copy this file and rename
it W.P. dash config dot THP.
You can see that it's showing in my windows or file explorer that it's a Ph P file and so that file
is already configured to connect to the database in local by flywheel.
We'll be looking at the W.P. config file in pretty good detail later on.
But that's where the files are located.
And now let's take a look back into local buy flywheel and look at where the database is located.
Local by flywheel comes with a database utility called admin.
And it will install it the first time you click add Mynor.
But if you connect the admin or software it opens up a database browser and editor in your browser whether
it's Firefox or chrome or Safari on the Mac.
If you look you can see that it's opened up the database associated with my web site.
And so what I have here are the different tables inside of the database.
And if I look at say let's look at the users table.
Now if I click that table heading and then I go up and I hit the select data button.
You can see that there is one user created in wordpress and there's my username name and of course my
password it is hashed or it's encrypted so that it works properly with the Wordpress file structure.
And there's one more table that I'd like to show you with some of the data that is in the database in
wordpress and that's the W.P. options table.
If I select that table and then click select data you can see that there's there's actually quite a
bit of data in the W.P. options table and each of these rows is something that's defined by WordPress.
But as you can see it's not stored inside of the actual file structure in wordpress it's stored separately
in the database.
And that's what makes WordPress a content management system with a database holding all of the content
and all of the options none of the pages you create in wordpress where you're creating web sites are
stored as new pages in the files they're stored in the database.
And then WordPress puts it together as a web site directly from the server to the user's browser.
And so in options the first two rows are called the site you are l and the home rows and you could see
that's where the U R L is or the web address is for your web site.
So that's a small tour of the database and the file structure in wordpress.
Let me show you just one more thing and I'm going to go back to the file explorer in Windows and show
you in one of the folders the WP content folder.
This is where you would store any themes that you have installed in wordpress and there's three currently
that come as default themes 2016 2017 and 2015.
I go back.
There's also the plug ins folder.
There's no plug ins installed right now as a default plug in in my installation.
And then the uploads folder.
Now I have the year and the month but the only media or images that I have in that uploads folder are
have been added by default from the theme itself.
And so I showed you that to show you that inside of the Wordpress file structure.
The only thing that's going to change in this file structure is when you upload themes or plug ins or
media content into the media library and those are in the WP content folder all these other files never
change and shouldn't change in terms of your Wordpress installation We'll get into more detail about
playing with our WordPress site and how to add content and change content.
Just using the Wordpress dashboard.
But for now that gives you an idea of where the files are stored and how you manage the database using
this particular local development environment local by flywheel.
In this lesson we took a tour of how WordPress works as a content management system and also how to
access the underlying file structure and the database using local by flywheel in the next video.
I'll show you how I would install WordPress manually using local by flywheel.
Let's go.