Let's take a tour of a WordPress site already installed so you can get a feel for the software and know
what to expect from the different versions that you'll see throughout the course.
The WordPress software is updated quite often adding security fixes and new features but it's also backward
compatible.
This means that whichever version you see me use in the lessons your practice site is likely to be slightly
newer and May can't contain some differences in this lesson.
I'll show you the newest release version 5.0 which includes a different editing system for posts and
pages.
I'll also show you how by installing a simple plug in we can keep all our WordPress sites working with
older themes and plug ins even before they've been adapted for the new 5.0 and other.
Let's just start out by taking a look at Wordpress dot org and you can follow along if you like.
Keep in mind that this is not WordPress dot com.
The hosted solution that doesn't give you unlimited options.
WordPress dot org is the version of Wordpress that we're working with in this course.
The open source version that is often called self-hosted WordPress on the home page there's a get WordPress
button at the top right and on that page there is a download button you can see that the latest version
is WordPress 5.0.
There's also a number of options across the top.
You can check out the showcase and themes and plug ins.
The main things that we'll be using for now.
I have a local environment set up where I have a WordPress site set up right here under attack.
Now it doesn't look like anything special.
This is just a blank theme.
The new theme called 20:19 using WordPress 5.0 there's just not really any content or imagery in it
yet.
If I go to the administrator dashboard it'll prompt me to log in
and when I do I'll go to the Wordpress welcome screen or what might you what you might call the dashboard
homescreen Now this is a brand new fresh WordPress installation just coming out of with all the default
settings you can see here in the at a glance widget on the dashboard tells me that I'm running WordPress
5.0 and it tells me that I'm using the 20:19 theme.
Let's take a look under appearance and themes.
There are three themes installed in the default installation here and one of them is active.
The one at the top left is the one that shows as active.
First thing I'm going to do is experiment with the 20:17 theme instead for this site.
I think just by doing that and then going over to the site and hitting refresh that gives us a nice
big home page image as well as a column on the right hand side.
I do like the layout of this theme and we'll be using a variety of themes in the course now themes in
wordpress are what determine the look and feel of the Web site itself and plug ins.
I roll over plug ins and click install plug ins.
I don't have any install plug ins at this time.
Now depending on your environment your host may have installed some default plug ins to get you started
to begin with but at this point we don't have any.
Now while themes control the look and feel of WordPress website plug ins add functionality and so the
first thing I want to do because WordPress 5.0 introduces a new editing system called the block editor.
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
classic editor.
Wordpress is keeping it near the top and they're going to keep this plug in supported for the next few
years as everybody transitions over to the new block.
Editor in development it was code named Gutenberg and lots of people have installed it and played with
it previous to 5.0 being released.
But I'm just going to click Install now next to the classic editor plug in.
Once it's installed I can choose to activate it and when the classic editor is activated you can choose
between the original editor that's been with wordpress for a long long time or the new block editor.
The potential problem is that some themes and some plug ins might not be compatible with the new black
editor at this point.
And so by installing the classic editor plug in we can assure that any content that we bring in in terms
of themes or plug ins will work.
We can choose the default editor and whether we allow users to switch editors when they need to.
So I'm going to click yes and then I'll do default editor as the classic classic editor and click save
changes.
Now the classic editor plug in adds a couple of settings to the settings.
Writing screen and that's where I've made these adjustments.
But the first thing I want to do because 20:17 the theme comes with some sample content.
If you don't make any changes to your site or add any content initially you can allow the theme to add
some sample content for you.
So I'm going to do that right now to make sure it's in there.
I'm going to under appearance click customize this opens what we call the customize or in Word Press.
It shows a representation of what the site looks like on the right as well as some controls on the left
side.
Now under theme options if I haven't done anything to change the content of the site yet 20:17 theme
will add certain pages and populate them here in the home page.
This theme has a home page that shows some different sections with static background images behind like
this and the theme has added an About page and contact page.
Among several others.
Now if I just click publish now I've saved those pages in my wordpress installation.
Now if you go to pages all pages you can see that I have a number of pages here one called blog about
a home page section contact and a page called home the privacy policies policy and the sample page are
two default pages that are included with wordpress.
Now you can see now that I have two kinds of editors installed.
I have a reference here in black next to the title of each page whether it's the classic editor or whether
it's using the block editor.
Let's let's take a look at the difference.
Let's just take a look at the about page by clicking the title of the page or either the classic or
the block editor I can open up that page in a word press editing window.
Now here's what the classic editor looks like.
It is called the tiny MCE editor.
That's a piece of software that sits inside of Wordpress and gives us these controls here that are like
editing a word processing document or an email everything from different paragraph and heading styles
to bold and italic alignment and adding media are provided with all these controls then the content
goes here inside the content window.
And then you click Update to update the post.
This is how WordPress has worked for many years and now there's a new black editor that makes it much
easier to create custom and beautiful layouts within each page or post's content area to show you an
example of how I might place an image next to the text here and its output would say we want to put
an image to the left and have this text to the right of this main body text column I could click Add
media.
And if you click the media library there are three images that were pulled in as a part of the 20:17
sample content.
I could just choose one of the images and then on the right I could say the alignment should be left
and let's choose a size maybe large and insert that into the page.
Now since this is a pretty large image and the column which is limited the text has dropped down here
to the bottom.
What if I wanted to center that image it looks just about the same because this is the width of the
column.
Maybe if I click the edit button on there let's go to the small or medium size and click update.
Now you can see the difference this image is centered on the page and the text is below.
If I want the text to wrap around the image I could just align this image to the left.
Then the text will go along right and if it were longer it would go down and wrap around the bottom
there.
I'm just copying and pasting a little bit more of the same text.
You can see how that might look if I click update.
Now I can right click on this link here which is for this page and open it in a new tab.
And let's take a look at what this post or this page looks like.
See there's the column that I'm working with and everything else is controlled in other places.
This big image is what's called a featured image as we imported that sample content from the 20:17 theme.
It used this picture for the featured image and that's the way 20:17 displays its pages a large image.
And then the content of the page.
Let's go back and take a look at what it might mean for us to use the block editor instead of the classic
editor from here I'll go back to all pages and this time when I open the about page I'm going to click
the block editor instead of the classic editor.
It shows you a few tips that you can read when you first start out.
And since we do have the classic editor plug in enabled we've got a little licked down here that says
switch to classic editor but let's just take a look at the block editor here.
You can see that the content area is on the left and this block is called a classic block.
Even without the classic editor plug in installed the block includes a block called a classic block.
Now we go over two more options over here we can say convert to blocks.
Now what WordPress does is convert what was already in the classic editor into blocks.
Now blocks are just building blocks like Legos that you can use to group some content into different
places.
It just gives a more modular approach and makes it easy to make unique layouts on each page.
Now when I want to add more content below I can just click the plus button up here and there's a number
of different types of blocks.
Quite a few most used and there's common blocks formatting blocks all kinds of different layout elements
widgets and things but all you do.
You can even search for a block.
Maybe I just want to do some paragraph text.
I just paste some text in there that you can see that this now is a unique block of content called paragraph
below the other paragraph content block.
Now we placed an image inside of the paragraph content block just like we were able to do before but
now we have the ability to add even more different kinds of blocks.
Like Suppose we wanted an image gallery go to the media library maybe I'll put all three of these images
in a gallery I could add a caption to each one and I could just say insert gallery and now that is a
gallery block let's just click update and then we can click View page in a new tab up here and you can
see that the content in the content column shows exactly what we had there.
The big difference with the block editor versus the way that the classic editor looks is that when you're
editing a page in the block editor the content generally looks exactly like it will look on the front
end of the website or the actual website itself.
That's a big difference from the classic editor where often we had to add some code or what's called
a short code to take advantage of certain layout features of the theme or even to make certain plugins
work.
Now when I go back to all pages you can see that this page about is being controlled by the block editor
and then the rest show the classic editor when you have the classic editor plug in installed and you
have WordPress 5.0 or later you'll be able to switch between the two editors.
Now why would we want to do this.
It's because some themes and plug ins have yet to be updated to work with the block editor.
Therefore all you need to do is install the classic editor plug in and those themes and plug ins that
haven't caught up yet will still work.
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
classic editor plugin necessarily because you're working from scratch but if you bring in a plug in
or a theme that requires the classic editor you should just stall the classic editor or plug in at that
point.
If you do update an existing WordPress Web site however that is updating to the new WordPress 5 Puno
version I would suggest installing the classic editor plug in first so that you don't have any issues
once you upgrade to WordPress 5.0 in this lesson we talk a version of Wordpress that uses the new block
editor and you watched as I installed and activated the classic editor plug in I also activated the
20:17 theme and imported the sample content pages and images by opening the customize or and theme option
section and clicking publish in the next video.
We'll get some of the tools you'll need outside of Wordpress itself to create unique web sites of your
own and for clients to.