0:00
hope everyone's doing fantastic um let's uh make sure that we get um yeah
0:07
make sure we're getting some audio and visuals good so i did work on um getting this mic set
0:14
up so my audio wasn't like going up and down um [Music]
0:19
mr chris powers told me that i tested with him this morning he says everything uh sounded good to
0:25
him so um if there are any issues it's all his fault okay so just so we're clear it's
0:31
all chris's fault actually if there's any problems at all today it's just chris's fault
0:37
so um yeah blame him
0:44
sound is great sweet okay i think i finally finally dialed in the audio the
0:49
new audio setup man now just don't touch it um so today
0:57
i thought it would be um a good time to uh revisit some basics i guess
1:03
um you know i do have a a very popular video um you know blog in 30 minutes
1:10
that i i think that was a live stream as well i don't remember actually to be honest with you but um
1:15
you know over the years hey there's maybe some settings tweaks and browsers behave a little bit differently for some
1:21
things so um yeah i thought i thought it would be fun to completely implement a new blog
1:28
from scratch um i'm not even gonna start with dummy data we're just gonna completely start
1:33
from scratch um so yeah before we get started though um
1:39
just want to say that i i've been populating uh the summit with talks so if you head over to summit.weavers.space
1:47
i'll plop that in the chat if you haven't gotten your ticket yet this year um it is a
1:54
amazing three-day virtual conference um for you guys
2:00
right um and i know you guys are sick and tired of hearing from me i mean you guys get me at least once a week if you
2:07
hang out if you join the hangouts on fridays it's twice a week and you're like joe why do i want an entire
2:12
three-day weekend of you well you're not getting of me you're hearing from your fellow rap weaver users um i've
2:19
gotten some really great talks and guess what isaiah is going to be joining us again this year so that's super exciting
2:26
um i'm glad isaiah is going to be uh be able to join us he wasn't able to join us last year but this year he's good to
2:31
go so i'm excited about that and we have some really good talks lined
2:37
up from some really amazing pros and uh and
2:43
a lot of users so we have uh 15 talks lined up so far
2:48
we're still working on some of them are still tbd uh we're kind of discussing and coming up with ideas and good
2:54
synopsises for those talks um so yeah check it out and go get your ticket it's
3:00
99 for a full three-day weekend with me and your fellow rap weaver users
3:06
um we do a lot of cool stuff it's not just like sitting in front of your computer like this um we have um
3:13
three hangouts every day now man we do a before the conference hangout a midday
3:18
hangout and then like a post day hangout like so you get like full access to chit chat and talk with
3:25
other rapid ever users and stacks users and and um have to have a lot of fun so um
3:31
if if you guys if you're here and you're you're watching and you've joined the previous year just post in the chat let
3:37
everyone know how much you enjoyed it that'd be great um yeah we're trying to um
3:43
see if we can get more users this year more attendees that would be awesome so please go ahead go to the
3:48
summit.weavers.space get yourself a ticket it is october 22nd to 24th
3:54
um and yeah hopefully we'll see you there cool um so without further ado um let's
4:01
jump on in to total cms
4:07
okay boom oh um let's close this project out
4:13
i guess here i'll i'll show you a cool did i show this off on a live stream i don't remember if i did or not
4:20
cool uh new version of quick flip quick flip four is uh coming out
4:25
and with just some really upscaled animations and um you can actually if
4:31
you notice here um there's three different size you can actually have unlimited sides now so it could just
4:37
flip and flip and flip guess what it works with blog too so you can like flip through blog posts and all
4:44
kinds of stuff um so yeah quick flip four um coming very soon
4:52
cool okay we are going to start with a completely blank project file
5:04
october 22nd is that caps lock day i did do you know that was a day there is seriously a caps lock day
5:12
i don't even say so just let you i don't even i've disabled caps lock the caps lock key on my keyboard doesn't actually
5:18
perform caps lock um i use it as the quote unquote old school
5:23
hyper key um so it's like allows me to do a bunch of automations and stuff so
5:28
um so anyway yeah um didn't know that caps lock day interesting
5:34
is that an international thing i don't know never heard of it before um okay let's go ahead and start with a
5:40
new project file actually gaston he is going to be uh one
5:46
of the speakers at the conference this year and uh man he he's done some pretty
5:52
pretty slick stuff with foundation in total cms and foundation six and uh man
5:58
he's gonna show off what he's been doing and it's gonna blow your mind it's really cool stuff
6:04
okay anyway um am i sharing my screen yes i am cool new project file brand
6:10
spanking new um let's go ahead and just do some just some initial setup so we're gonna add in a
6:16
stacks page okay
6:21
um we're gonna publish this to my sandbox um sandbox we'll just go there oops https
6:29
there we go and just so that we can do publishing setup
6:34
oh um save this to my desktop let's do blog
6:40
30 min okay and do publishing setup
6:49
um we'll do you know i gotta talk to real mac i wish there was a way to add from bookmarks
6:54
here so we're just gonna say next okay um and then i'm going to add from
7:00
bookmarks i'm going to add this one yes that's what i want i'm gonna remove
7:07
this one we're gonna publish
7:13
just that we have a brand spanking new project file oh uh one thing i do i do want to do
7:19
oh shoot um hold on let's do this really quick um one thing i always change my new
7:25
project files is default extension is going to be php okay that's just to save
7:31
me some headaches going forward all right and i accidentally
7:37
published with the html file and now i have the php file out there so i'm going to go and delete that oh boy
7:44
so um in case you didn't know you shouldn't have index.html and index.php on your server um i always use
7:51
php files just if i make it the default page in my projects okay so i'm just
7:56
going to go ahead and delete that bad boy there okay i'll leave this open i might need
8:02
it in the future okay actually um just to make sure we're completely clean
8:08
um i'm going to take the cmsi cms data folder that's on my server and i'm just going to rename it to
8:15
old i guess okay so now i have completely it's a completely new server
8:21
no total cms data at all so um you don't think i'm trying to fool you or trick
8:26
you that i pre-did anything okay we're doing this from scratch everybody all right let's go ahead and uh publish this
8:33
uh oh i wanted to also do i also have my default theme set to foundation six
8:38
um i wanna keep this just with total cms today um so i'm actually going to go ahead and um
8:45
let's go to the wrap up seven themes and i i always like reason it's a nice little theme um from nick cates hat tip
8:53
to nick cates there okay let's just preview that really quick all right cool
8:59
and let's publish that
9:05
and uh just for fun let's bring up safari multiple what oh did i i didn't
9:10
rename this page darn it
9:15
i created it but didn't rename it okay php
9:21
uh change file name and
9:26
go ahead and delete the index again
9:35
all right excellent and now oh well i'm gonna have to
9:40
publish again because i rename my page voila
9:51
boom we have a completely new page okay completely new project file as you can see
9:57
um and yeah let's go ahead and implement blog fun stuff
10:04
all right so now we have a clean slate so before we actually get into adding stacks and whatnot to the page
10:12
um let's just back up really quick and oh no
10:20
hate when i do that
10:26
there it goes all right um so
10:31
total cms blog okay um a lot of people tell me that joe you
10:37
shouldn't call it a blog because it's so much more than a blog yes it is
10:43
um it is so much more than a blog and you can do it for you can abuse it for so many reasons but if i didn't call it
10:50
a blog then people wouldn't uh people would wonder how to do a blog in total cms right so
10:57
we had to start from something i know a blog is a very popular thing that people want and today we are going to implement
11:02
it as a blog however um people have used blog for all kinds of
11:09
things i mean um if you saw last week chris powers created an entire like crm
11:15
using blog like crazy that is just crazy stuff um but most common use cases
11:22
are like product e-commerce sites um you know so each blog each
11:27
essentially each blog post is a product not a blog post you're just using reusing the fields for other things
11:33
right okay we're not going to go into like how to use total cms as ecommerce site today um
11:40
but what we are gonna go over is um how to implement blog from scratch
11:46
um to create a blog okay um so essentially blog has three pages
11:55
okay uh well actually technically four pages sorry four there's four components
12:00
to a blog okay um at least basic components
12:08
and there's two content sides and two admin sides
12:13
okay what i mean by that is um on the content so what our visitors are
12:19
looking at they're looking at our blog on on the content side right
12:24
they have a blog list so a component that lists out all of our blog posts
12:31
and then we have another one that uh when you click through that you go to like the dedicated blog post page
12:38
right and then on the admin side we essentially have those same exact components but for the admin side now
12:45
the admin side is going to be something that is um you know only you or your you know
12:51
maybe your customer has access to so that they can actually create new blog posts or edit existing blog posts
12:58
and on the admin side guess what we have an admin list so we have a way to list out all of our content
13:06
and then next on top of that is when you click on one of those you need to have a form that actually has all of our fields
13:14
okay so today we're going to be implementing a again a very basic a basic blog
13:20
i'm probably not going to use all the various fields but as we go on you'll see that there are a lot of extra fields
13:26
that um you know you can implement i'm not going to be implementing every single field today okay
13:33
um but it's just the ability to you know add those extra fields the process is
13:40
pretty much identical okay so we're gonna go ahead and let's pop
13:45
back into rapidweaver and let's go ahead and build start
13:51
building this so what i'm going to do is i'm going to start i'm going to create the kind of the page structure okay
13:57
and um so i'm going to do i'm going to actually rename this to blog list okay
14:02
i'm going to name this page blog list and that's going to be like our content side blog list
14:09
okay then um i'm going to i'm going to add another page let's go ahead and add another page
14:16
okay and this is going to be the blog post page
14:22
okay there we go
14:29
actually let's i'm going to uh let's change this up let's make it a
14:34
little bit more lifelike okay i'm going to add one more page in here i'm going to add a home page
14:41
okay um okay and uh we'll spice it up a little we'll
14:46
go a little bit past the the basics here today so we're gonna have um a home page
14:52
and then we're gonna have a blog page because a lot of times that's what it is right a lot of times people have a
14:57
you know a dedicated page for their blog so we're going to do that okay and then
15:02
we're going to have um we're going to create our admin stuff so we need um
15:08
we're going to create an admin okay and then under that we need one
15:14
more page and uh this is going to be blog post
15:21
we're going to make that a sub page of admin okay so now let's go ahead and name all of our pages okay so here we
15:27
have home and that's just going to be at the root uh yep and then we're here this one's
15:33
going to be slash blog all right and then blog post so blog
15:41
post um what i'm gonna do is so we're gonna be setting up later on
15:46
we're gonna be setting up um thinking of url structures okay so i'm going a little bit of a hit a little head here
15:52
i'm not going to fully explain it but let's just do blog and normally i strongly recommend that
15:59
you always name every page every file name index.php
16:04
however this one time is an exception and it is on your blog post page okay
16:10
what i can do is i'm going to recommend that you call this post.php
16:16
okay still under the blog folder but name it post.php okay um and then here we have slash
16:23
admin okay and uh we'll do this
16:28
um slash admin slash blog okay excellent
16:36
okay so that is our our basic page structure now okay so we have um and
16:41
then now also uh let's preview this really quick so here we'll see that we have a whole
16:47
home blog and then admin now a lot of times you don't want to have admin in the
16:53
um navigation of your of your website right maybe sometimes you depending on what
16:58
your site functionality is um but maybe sometimes you don't want to show the sub pages so maybe you want the
17:04
admin button there right but you don't want to show the blog post so we're going to go to the blog post and uncheck that okay and that gives us a nice
17:11
single admin login area okay um and then here under blog we don't
17:17
want blog posts to be show up in the in the navigation because our blog list is going to link to all those things right
17:24
so on this blog post page we're going to uncheck that as well so now we have home blog and admin okay um it's up to you if
17:31
you want to have admin there or not a lot of people what they'll do is maybe put like a little hidden link in the
17:36
footer or like a little lock icon so that you know because only your the
17:42
admin of the site wants to be able to see that right i'm going to leave it there just to keep things simple for us
17:49
today but again you probably want to remove admin from the main menu of the site
17:55
okay and again simple enough you just uncheck that from show navigation okay
18:00
and we're gonna leave it on though it actually kind of looks kind of nice okay um
18:08
so there we go let's get started um where do we start let's start from the
18:13
admin side okay um so let's go ahead because we need to be
18:18
able to create blog posts in order to display them so we're going to implement the admin stuff first
18:25
so let's go ahead and i have a little specialized group in my stacks library that has all of my total
18:31
cms stacks and as we know the orange stacks
18:36
um so the orange backgrounds those are our admin stacks and then our white with the orange icon
18:42
those are our content stacks okay so uh you'll notice that there is a blog
18:48
list stack here so i'm going to go ahead and create i'm going to chuck that onto the page and this is our admin blog list
18:57
now if you look it says there's an error in here saying you must add admin core stack to the page why thank you for the
19:03
help because i almost forgot that so what we're going to have to do is on every page that you're going to want to
19:09
have admin stuff for total cms you're going to want to add the admin
19:15
core stack to the page okay and so you're also going to have your
19:21
license so um let's go ahead and put my license in here
19:28
okay um now i have a video on registering your total cms license um if you don't know how to
19:35
register it just you basically check this and then you preview your um your page
19:42
and then this this should show up inside edit mode okay and then you can go ahead and put type
19:49
in your domain put in your serial number and click register and then that will um register your
19:55
license of your domain uh once you once you've done that you can uncheck this box inside rapidweaver
20:01
okay done so now um admin core has a bunch of other settings um if you're using
20:09
foundation um i recommend setting this to yes we are not so i'm just going to go ahead and you can leave it auto
20:15
checker it does auto check but um yeah it's nice just to go ahead and say no i'm not using foundation right now
20:21
okay if you notice once you do that it kind of fixes some things and makes some things a little bit nicer in edit mode
20:27
if you're not using foundation okay
20:36
okay um we're not gonna play with too much here inside the admin mode inside admin core probably gonna leave most of
20:41
this as default um there's a bunch of videos on that already okay and now we have the blog list and
20:48
um if we preview this um oh it's saying oh look here we have an
20:54
error inside edit mode or in preview saying cannot communicate with total cms either you have you have
21:00
not published your project file yet to your website or your website is not properly sent so
21:05
um once you add admin core um it's going to start wanting to query total cms on your
21:12
server okay uh to for data so we can actually display the cms data inside rapidweaver
21:18
for you um but i haven't published it online yet right because this is a new setup so
21:24
what i can do now is i'm gonna go ahead and i'm gonna let's publish this and this is now going to create all of
21:30
our pages and all of that jazz so here we go
21:36
have a drink
21:42
massimo is here how's it going massimo
21:53
okay you twiddle your thumbs and we're almost done okay now uh if i go ahead and preview
21:59
rapid uber what either you have not published your project or your website is not properly
22:05
set i thought i set my project file sandbox dot oh whoops
22:14
there we go sandbox.joeworkman.net i had my haha see that was a complete accident i had
22:22
accidentally pasted the wrong url here in my web address field and it wasn't working so um there you go
22:30
the error is always correct okay so now that i fixed my web address let's go ahead and publish that again
22:38
now it's going to want to republish everything oh just the web pages nice
22:46
that was a lucky mistake okay um there we go so let's go we were on the
22:52
admin page admin page and voila the error is gone and it says we have zero
22:57
posts cool all right good because we do have zero posts um let's go ahead and let's go to our
23:04
blog post page here okay uh and one thing i also like to do uh actually here
23:10
we'll we'll get back to that okay so now this is our blog post page
23:15
this is going to contain the blog form okay so um as we had before um i'm not
23:22
going to create partials and all that jazz normally what you'll do is you're going to create a partial that you add on all of your admin pages
23:28
um here let's just do it okay i'm going to create a partial um and then here is our partial we're going to call this um
23:38
blog in 30 um admin
23:44
okay back so now we have this partial and i'm going to add this partial into this page
23:51
voila now that everything's all in sync okay so if we go in here all of our license data and all of our other
23:57
settings is in sync so if we change anything it'll now change it everywhere or it'll change it on both admin pages
24:03
okay um next up is we want the blog form so we're gonna add the blog form to the
24:08
page okay and um here we go we'll notice that we
24:14
have a bunch of fields that we can add okay um
24:19
let's just go ahead and make a sim a really simple blog form okay so we're gonna do title we're gonna add the date
24:27
um let's add author um and there's genre categories tags i'm
24:34
just going to use category right now okay we're just going to leave it at just that um
24:41
then i'm going to have a uh let's have draft and we're gonna have
24:46
featured um then we're gonna do we're gonna add a
24:52
um an image
24:57
i guess we're just gonna go all out we're gonna have a gallery we're gonna have a summary
25:03
and then we're gonna have content wow all right and then we're gonna have a
25:09
save button okay and a delete button
25:16
cool and do i have a button stack oh i do have buttons nice all right so we're just going to go
25:22
ahead and add that to save add that to delete um
25:33
then we're gonna do uh this one's gonna be alert we're gonna say delete
25:40
okay oh here look delete uh and then this is um
25:48
yep save so we have a save button and a delete button
25:53
okay all right let's um so now this is all of our fields right but if you look i mean
25:59
this this doesn't look too nice right so let's let's make this look a little prettier okay so um
26:07
one thing uh before i start organizing this blog form a little bit that i see people do all the time
26:14
if you notice for blog the blog you add all of the fields via this plus
26:21
menu right you have to okay you cannot go and say oh i want a date field and add this
26:29
date field you cannot do that it will break okay so do not add any of these other
26:36
things don't add gallery don't add file you don't add radi you can't do that the only things you can add to a blog
26:43
form stack in terms of form fields are what's here okay you cannot just will and really
26:48
start adding all these other things it will not work okay so
26:54
um let's go ahead and just create like a simple blog form layout um i'm just going to create a two-column shift here
27:03
man it's been a while since i used a default column stack um let's do like a
27:11
something like a 65 35 split something like that right and then on this side we're going to
27:17
have let's see i want to have title up top or permalink and then above that we want the title
27:23
and then below that we want the date over here i want author and categories
27:30
and then i'm going to have another two column there and we're gonna have
27:35
draft and featured um and then we're gonna do image
27:42
and then um we're gonna do this summary we're gonna do the content
27:50
i'm gonna have the gallery oh wait this image is gonna be below there
28:00
all right and then
28:10
all right interesting
28:18
why is that going over there hmm
28:25
let's just keep it like that i'm gonna go like i want that there and then i'm gonna put i'm gonna put our
28:31
buttons over here
28:36
all right now if you guys are wondering um if we preview this you'll notice that we didn't see the delete we don't see
28:41
the delete button okay and that's because the delete button only shows up um when we're editing an existing blog
28:49
post okay so by default we're creating a new blog post and so the delete button isn't going to
28:55
show okay but uh when we when we edit a blog post we want to give the ability to
29:00
delete that blog post so there you go um and by the way you can use whatever button stacks you want
29:07
um these are just the buttons stacks that come with total cms they're very simple um but
29:13
yeah if you want to use your own foundation six buttons or whatever button stack you want um just drag these
29:18
into the save and delete um stacks okay
29:24
um if you notice over here actually i'm going to add um just add a little text box
29:30
here and i'm just going to say draft
29:38
and featured
29:44
make sure that all right there we go cool um do we have alignment here i'm going
29:50
to do alignment left
29:55
cool there we go there we go i like it it's good enough
30:01
okay um so let's go ahead and um
30:07
i'm going to publish this now because i want to start creating some blog posts so we can see them on the content side
30:26
all right and uh let's open up safari and if we go to sandbox.joeworkman.net
30:34
uh we're gonna go to admin and we have nothing there
30:39
okay and oh wait how i can't get to there how do so
30:45
how do i get to that new blog form page hmm so um what we're going to do is i'm
30:52
going to go to this page and what i'm going to do is i'm going to add a button and just to keep these things as simple
30:58
as possible i'm going to use the default stacks button and we're going to say
31:05
new blog post
31:11
okay and we're going to link it
31:18
to page admin blog post set link and we're going to align it to the right
31:26
okay let's publish that
31:41
refresh voila now i have this new blog post button on the page so i'm going to go
31:47
ahead and click that and it takes us to our form so we have a new blog post form now
31:54
okay and let's just start typing some stuff this is my
32:00
first blog post now a couple things i'm just gonna give some blog tips um as we go along by
32:08
default the permalink field um is it's based off the title of your blog
32:14
post however as long as you haven't saved the blog post yet you can actually edit the
32:19
permalink okay so i'm gonna do is i'm gonna change this one to be first blog post instead of this is my first blog
32:26
post okay today's date is fine
32:31
just add some lorem ipsum text into here i'm going to do that as well
32:38
okay um and then uh author uh we're gonna add
32:46
uh joe workman categories is um
32:57
uh we're going to call it live stream oh we'll just call it live okay live
33:03
um i don't want it draft or featured um let's do um the featured blog post is going to be
33:10
how about uh this one there we go weaver space live okay and
33:18
um let's add some blog images to the gallery just for fun let's go ahead and add um that
33:26
we're going to add that okay that's good enough save oh um by the way uh you can click the
33:32
save button um it's just muscle memory for me command s also saves blog posts
33:38
and um so yeah and we get the green check marks everywhere even on the gallery images so we're good to go if we
33:46
go back to the admin page we'll see that i now have my first blog post pretty
33:52
cool right and uh go ahead if i click on this we'll see that um oh it doesn't work
34:00
aha what did i do here so something very important that i
34:06
completely skipped all right in the blog list
34:12
um you need to set up your blog form page so i'm going to go ahead and click on blog form page
34:19
and we're gonna link to my blog form page which is right there
34:25
set link okay another very big thing
34:30
a very very very very big thing this is a big no-no that i didn't explain this earlier okay
34:36
um and it just kind of works out of the box which is kind of cool too but i it is important to explain this
34:43
there is a very important setting throughout all of total cms stacks
34:48
okay and that has to do with
34:53
what's called the total cms id okay every total cms stack has a total cms id
35:01
setting and that id must match everywhere
35:08
so like for example i have the blog list and i have a blog form okay now with total cms you can have
35:15
multiple blogs as many as you want on the same website
35:21
so by default the blog is the cms id is just called total cms okay but obviously
35:27
we can change that and in order to tie the blog list
35:32
to the blog form they need to have the same id okay so this id is a very very very
35:40
important thing and a lot of people including me just right now didn't mention it
35:46
okay so let's let's jump in um so here i have this blog list and the
35:52
total cms id is set to be total cms now i'm not going to change that right
35:58
now because it that's fine i'm only going to have one blog on this and that's okay okay um if we go to the blog post page
36:04
in the blog form stack you'll you'll see that the total cms id here
36:10
is also set to total cms now a lot of people will change the id
36:16
to be blog okay or products or whatever okay again
36:21
i'm gonna leave it as total cms
36:26
and call that good okay um
36:32
cool let's go ahead and i i fixed this blog list linking right
36:38
which is important this blog form page setting so i'm going to go ahead and publish that
36:51
let's refresh this page and i have my blog post and now if i click on it
36:57
it takes me to the blog post form page okay and i can edit the contents and
37:04
you'll notice here that i have i now have that delete button okay it's styled a little funky um but
37:10
it's probably a conflict with this theme okay but
37:15
we're not gonna worry about that right now so here i have all of my you know blog
37:21
post content that i can do that i'm gonna what i'm gonna do now is i'm actually just gonna create a couple new
37:27
blog posts so we have at least three okay
37:43
okay and we're gonna
37:57
okay and then um now here's another tip in the blog form field
38:03
i know that i already exist so i could either start started typing joe workman and it will show up here or
38:11
if you just double click on the field on that little pop-up will come up and you can select an existing item okay um so
38:17
like there i could see live but here i'm gonna i'm gonna do summit as my category okay and let's just do some
38:25
some stuff here let's go ahead and voila weaver space summit
38:31
and uh let's just add some images to the gallery again
38:37
okay we got st lee bryan
38:42
all right we got some more there we go and i'm going to go ahead and and we're going to make this featured okay we're
38:49
going to save that
38:54
all the images are uploading
39:04
cool there we go uh one thing you might you might want to maybe have another new blog post button right here on the blog
39:10
form so if someone just wants to keep creating blog posts if that's a workflow then you know you can do that
39:15
um i'm just going to go ahead and go to new blog post again um
39:21
my third blog post okay
39:26
we'll leave that there laura
39:32
good and uh author joe workman categories
39:41
i um put this in live as well so we'll do this under live as well and then uh
39:47
let's go ahead and do that and uh we need some gallery images
39:55
so i'm just gonna do the boring the same old ones let's get me in there let's get
40:01
uh google page test speed from foundation six because it's awesome
40:07
and we'll do another one okay there we go and save
40:14
voila all right so now we go back to admin and i have three blog posts okay this one particular one's featured
40:20
cool um so now
40:25
that i have some some data okay now i also have some dummy data uh that you
40:31
can download and upload to your server um maybe i should have done that for just for speedness but i thought it was
40:37
it was kind of good just to do something completely custom and off the cuff here
40:43
so but our admin side is pretty much done i guess one thing we we could add to the admin side um is if you notice
40:50
right now it's publicly accessible right so right now if i wanted to we want to password protect this
40:56
by default there is a protect stack inside of total cms
41:02
so you can add this now what i'm going to do is actually i'm going to go into this partial and i'm going to add it into here okay
41:09
and what this will do is this will because this partial is on every admin page we
41:15
want to make sure that we protect every admin page right so um yeah the password
41:20
here is what is the password uh placeholder what is the default password
41:28
where oh here it's password okay so that's fine we'll just we'll change
41:33
one two three four we'll just make it one two three four and i'll go back
41:38
okay so now i have um admin and let's just make sure if we go over here uh look it's there as well
41:45
okay so let's publish that
42:00
okay uh now if we go ahead and go back to admin you'll see that hey i can't get
42:05
directly to it anymore i need a login so we're just gonna go one two three four
42:10
enter i don't wanna save it one password
42:16
and voila we're in and now i can freely go to uh the blog post page go to the
42:21
admin page and everything is locked cool okay
42:27
our admin site is done okay i have a few blog posts so now let's now let's work on displaying these blog posts on the
42:34
content side okay sweet
42:42
so to start off we need a blog list okay we need we need to be able to display
42:47
all of our blog posts on a single page okay um so let's go ahead and
42:56
on the content stacks we're gonna add a blog list to the page
43:01
now if you notice there's an error here saying you must add to cms core stack in order for the cms to function that is
43:06
correct so there is a just like on the admin side there is an admin core on the
43:13
content side there is a cms core we're gonna add that to the top of our page i'm gonna go ahead and add my license
43:23
oops there we go
43:29
and i'm just gonna minimize that we don't really need it okay
43:34
and uh here i guess yeah it's fine okay now on the blog list
43:39
we need to make sure that the total cms id matches what we had on the admin side needs to all be the same that's the key
43:46
that ties it all together okay remember i left mine as the default of total cms
43:51
but if you changed yours to be blog or products or news or whatever you're
43:57
gonna have to make sure that that cms id is the same everywhere okay um let's just build out a blog list
44:05
really quick so by default we have a title let's go ahead and add um we want the image okay so maybe above
44:13
the title we want the image and then let's add i guess
44:20
i'll just keep it simple we have title and image okay um you can have more things um you know you can have the tags
44:26
you cannot there are some things you'll notice that um the extra content isn't here um the full blog content isn't
44:34
there there are some fields that are only accessible on the blog post page and not accessible in the blog list okay
44:41
um you cannot update that that is a decision that i have made um and uh yeah we're stuck with these
44:47
fields only in the blog list and this is for performance reasons okay
44:52
um so in the blog list i think i'm just going to keep all the defaults in terms of what grid and and and what not to
44:59
take um it'll display up to 10 plug posts we only have three at the moment so we should be okay let's go ahead and
45:06
preview that and voila there we have our three blog
45:12
posts now as you see here it created cropped versions um for this particular one that doesn't
45:17
look too great we could potentially update that so that it gets the thumbnail instead of the
45:23
um crop okay um so there we go right um and uh
45:28
yeah the styling here is ho-hum but it would look nicer if we were in foundation but it's okay
45:35
okay maybe let's go ahead and um um
45:42
see background let's create like a slightly off-white background how about
45:48
that just to make it a little bit nicer let's do like um
45:56
whoops when i click there
46:04
there just a slight gray background and maybe add a little bit of padding or
46:10
like a 16 pixel padding all right
46:16
all right there we go that looks a little and around add some round corners we'll do like um eight pixel rounding
46:24
there we go just just something uh i'm not gonna go and try to make a beautiful styled blog list right now the
46:31
point is just getting blog up and running okay so okay cool
46:37
um there is our blog list okay now we need to we need to configure so when we click through
46:44
um it actually takes us to the blog post page okay
46:49
so our blog list is done let's go to the blog post page
46:55
so the blog post page again you're going to need the cms core i'm just going to copy and paste that just just because
47:02
you'll probably want to have this inside of a partial again so that any page that you need to access cms content this cms
47:08
core is on every page okay um and just for fun later on i'm probably
47:13
going to do something on home page we'll add it there too all right blog post so now
47:19
we're going to add the blog post stacked to the page and let's go ahead and add some
47:25
content here so we have our title up at the top um then maybe we have a date and then maybe
47:32
we have the um summary and then um below the summary we're
47:37
going to put in the image i guess actually the image probably maybe the image will be
47:43
up top okay and then below the summary we're actually going to put in uh gallery
47:50
okay um and and then below the gallery we're gonna do the full blog content
47:58
okay um and i'm not gonna dive into the settings of all of these
48:03
um but we need to go to the blog post page we need to make sure that the cms id
48:08
actually works okay it's it's what again the same cms id is all the other ones it's what ties everything together
48:16
okay now this preview post is important okay and what this does
48:22
is it um allows us to preview our blog posts
48:28
inside rapidweaver okay and so what we're gonna do is i'm gonna go back to
48:33
our website online oops i closed it
48:39
and let's go to admin um let's go to this blog post
48:45
and i'm going to copy the permalink okay and i'm going to paste it directly into there
48:51
so now when i preview inside rapidweaver it's going to bring in the content for
48:57
that blog post oh people are thank you let's not let's
49:03
not try to live update um this as i'm doing this i'd appreciate that thank you very much
49:09
okay um yeah thank you
49:17
go ahead and i'm going to delete that thank you very much okay
49:22
please at least while i'm live streaming let's keep things and not play with things thank you very much okay um so
49:29
you'll notice that as i uh when i previewed this this light box came up and this is a very important
49:35
step that a lot of people miss okay um which tells me they actually aren't
49:41
previewing their content their blog post page okay this lightbox comes comes up inside
49:47
rapidweaver and um it says that we that the server totalcms on the server
49:54
doesn't know where the blog post pages it's this is an important setting that's used in
49:59
various places and it's one place where it helps us link on the blog list side
50:06
okay so on the server it's saying nothing set the default setting is this we're just going to go ahead and submit that
50:13
okay so now if i preview again um that light box shouldn't come up
50:20
okay at all and these should show up as like a a nice gallery interesting
50:28
i go ahead and uh i haven't played around with
50:33
let's go ahead i'm going to change the gallery really quick we're going to do uh post
50:39
going to put that there let's preview that
50:45
hey there we go okay not i'm not trying to win any any design
50:53
challenges here we're just getting the blog up and running okay um so there we go there is a blog post page
51:01
okay we're not getting that warning inside um preview now
51:07
with that said there are times
51:12
depending on a lot of various factors okay when you submit that light box
51:19
sometimes it won't save like when you when you click the save button you get an error
51:25
okay um one way around that is to preview in the browser so i'm
51:31
gonna go ahead um you can use command p and you preview the blog post page in the browser
51:36
okay and that light box should show up
51:41
and you can try submitting it from the browser window and if that doesn't work you can go
51:47
ahead and go to develop disable cross origin restrictions
51:54
and that should allow you to save that light box regardless okay
51:59
um again that it there's so many factors that that factor into whether or not
52:05
that light box would potentially error so um if if you're trying to preview in
52:10
wrap weaver and you can't submit that that form inside that light box go ahead and open it preview it in
52:17
safari go to develop disable cross origin restrictions and then you might need to refresh the
52:24
page after you've disabled it and then that light box should submit so that is one step that some users again
52:30
depending on your host or your setup and various other things um that is a
52:36
potential fix and workaround for that solution for that situation okay
52:42
cool um okay so let's go ahead and publish this
52:48
now we're going to publish
53:00
and uh let's go and let's look
53:06
so i can go to let's go to the blog
53:11
there it goes and if i click through to this voila we go to the actual blog post page
53:19
right i can go back i can click on this one and we're on the actual blog post page
53:28
there we go awesome
53:35
okay so now um what do we need to do um to a lot of times what people want
53:42
it's really weird if i go to a home page like did i add that to the homepage too
53:49
oh i didn't that's strange
53:54
what's the blog post url here oh well crazy
54:02
i had i didn't even know that was possible you could have the home and the blog i had them both set to
54:08
oh because you need to right click and say set his homepage ah crazy
54:21
how did i never do that before crazy sauce so we make sure our homepage is nothing with index
54:28
our blog page is slash blog with index our blog post page is blogwithpost.php
54:35
again i haven't explained why this yet but we're getting there okay and let's republish that
55:07
slash blog interesting i'm just going to like republish all files just for free kicks
55:20
maybe just closing the browser window safari sometimes it's cache is like uh
55:25
so annoying luckily my publishing setup to my server
55:32
is pretty quick so i have to wait too long
55:44
um gaston put it in the chat the cms id should not be the same everywhere if you use more than one yes
55:50
that is correct you can make sure the cms id is is the same as long as it's accessing
55:55
the correct blog right i mean so if you have multiple blogs you're you're going to have multiple ids right um
56:02
hopefully i i wasn't too uh over exert on that um but
56:08
yes so yes if you have multiple blogs you're going to have multiple ids you just have to make sure that the correct
56:13
stack is tied to the correct id okay so thank you for the clarification guest though
56:20
um okay let's go ahead and open safari again
56:31
that is pretty nuts
56:52
wow br the browser has like cached like that is crazy
57:01
empty cash there it goes wow that was nuts did you
57:08
see all that sometimes safari's caching man that just drives me bonkers
57:13
okay now we have a blank homepage with a blog page um and then our admin page that is
57:19
um it's still logging me in because of the uh the timing um it's not timed out
57:25
yet my connection hasn't timed out yet all right um oh and then so what i wanted to test
57:32
if we went to blog um and we clicked through to these blog posts
57:37
what we'll notice is the let's look at the url here okay
57:42
so if we look at the url the url is it's not pretty right i mean it has this
57:47
slash blog slash post.php question mark permalink equals and then
57:53
our permalink what we'd really want is the ability to have just slash blog
58:00
slash permalink and then it takes us to our blog post
58:05
okay that's what we really really want so let's set that up okay
58:12
okay so to do that uh we need to be on the content blog post page
58:17
okay then we go to the blog post stack um and we go to the settings on that
58:23
stack and then right here we're going to set post url
58:28
we're going to set it to pretty okay and what i can do is i'm going to
58:34
preview this page and that light box
58:39
is now showing up and it's saying that the server setting is this but now it noticed that we wanted to use
58:44
pretty urls so it's saying that we want to use this so what i do is first i'm going to copy
58:51
these rules that it gives us i'm just going to copy that to our clipboard and i'm going to submit this
58:58
and that that's saved okay now if we um
59:04
if we go to our website let's go to sandbox joerg.net and go to blog
59:10
and if if we refresh that well you'll notice if you hover over
59:16
this you'll notice at the bottom corner of this browser if we look at the browser now it goes to that url
59:22
okay but the url doesn't work okay and that's because what we need to do is we need to take those rules that
59:29
were in that light box and we need to put those inside of our ht access file okay so i'm going to open up i use
59:36
transmit you can use your favorite app or you can actually use rapid ever
59:41
to edit your hd access files as well but i'm just going to edit transmit
59:48
and what i'm going to do here is
59:55
i'm going to paste in those rules and i'm going to save it
1:00:00
okay and let's close that minimize this
1:00:05
and if i i should just be able to refresh that and voila it works
1:00:10
so now we go to our blog i can go to this one our blog post works
1:00:16
and if we look at the url it's a nice pretty blog post
1:00:23
okay so there we go i mean there's a lot of things that we could also work on with
1:00:28
total cms here obviously making it prettier and doing some really cool dynamic stuff
1:00:33
but can you change the order of the blog list um yeah i mean so here in the blog
1:00:38
list there's orders so you can there's all kinds of different there's a sort order for newest first oldest first
1:00:44
alphabetical natural order you can shuffle it um and then you can also do all kinds of
1:00:50
filtering so you can filter based off dates whether or not you want featured so let's say right here on i'm going to
1:00:56
go over here let's copy this blog list to the home page and i'm only going to display
1:01:02
uh the featured blog posts so we're going to say only featured and if we preview that
1:01:08
um we'll see that i have remember i only added one featured blog post right so we only have one but now on the homepage
1:01:16
featured blog posts are shown so uh yeah you can do all that stuff have a look at the settings read through the
1:01:22
tool tips are are really important here um they kind of explain all of this um so yeah you can also filter by
1:01:29
category so if on a particular page you wanted to filter a blog list and only show blog posts from certain categories
1:01:36
or in this case you wanted all featured posts from a particular category you can do that too right so it's very flexible
1:01:43
this filter and sort option here is very very powerful okay
1:01:48
you can also filter by date only past posts future posts all posts
1:01:53
um so yeah essentially but the default is only past post so what this does is
1:01:59
if you want um a post to be published automatically in the future all you have to do is put it set the date on the blog
1:02:05
post to be when you want that blog post to be displayed and it will magically show up at the correct time so there we
1:02:12
go um hopefully this helped everybody
1:02:18
um it was again it was pretty basic for those that are pros at this and have
1:02:23
done it a million times um but hopefully it helped everyone else out a little bit um i skipped a lot of settings that
1:02:30
didn't that weren't required right i touched the most minimal amount of settings to get the blog working
1:02:36
and hopefully that helped you guys out and um what i will do here is i will
1:02:42
i will save this project and i'm going to drag it up to here and you can have this project file
1:02:50
um i just put the project file in the chat um a link so you can download that project file the one i just created
1:02:57
right this very second um although i just noticed i named it wrong it's blgo but whatever project
1:03:04
file works um so cool thank you very much guys uh did
1:03:10
you say why your name oh um okay so why i named it post.php
1:03:17
uh was for those ht access rules um it makes it it makes that htaccess rule thing really smooth okay um
1:03:26
so yeah sorry thank you very much for pointing that out dave um it was for the hd axis rules
1:03:32
because a lot of times what what i used to show like probably way back in the day
1:03:38
um was i would do um this would be slash blog slash post
1:03:44
okay and then this would be index and if you if you name your blog post
1:03:51
like this um essentially uh the htaccess rules would generate let me open up a um
1:03:58
let's just go to like text editor or something i'll just go to ps code okay
1:04:05
um so if we did let's go back to
1:04:19
let's just get this url here okay uh we'll make it bigger
1:04:29
all right so this was our blog post okay
1:04:35
and um remember here our blog post page was
1:04:40
called uh post.php okay um now
1:04:46
if we had instead hopefully you guys can see this and make it as big as possible
1:04:53
okay now if instead if we had named our blog post um this
1:04:59
okay which some people used to do right um i and i even told people to do this a
1:05:04
long time ago until i got smarter and had this brilliant idea um
1:05:10
so if we were to name our urls this so slash blog slash post index.php
1:05:17
um the urls to our blog posts wouldn't be this pretty slash blog slash blog post what they would be
1:05:24
is they would be um slash blog slash post
1:05:29
slash permalink right so by adding that extra folder in there
1:05:36
it gives us an extra folder in our pretty urls and that's not what we wanted right so
1:05:42
um by naming post php we can get rid of that extra directory okay so um when and
1:05:49
yeah and the htaccess rule builder that i have um kind of takes care of all of that so there's the kind of the
1:05:55
full-blown explanation on why we're using post.php instead of index.php it's purely for
1:06:02
these pretty url rules so good question thanks uh thanks for
1:06:08
making me clarify that dave um
1:06:17
including the total cms admin license
1:06:22
oh that's okay i mean the license is there but you can't use it on any other domain
1:06:27
except mine so and you don't have access to my my domain so um
1:06:33
yeah thank you for pointing that out though um that's very true um so thanks guys thom i appreciate that
1:06:40
shout out on that in fact here i'll build out a new one here we're just going to
1:06:48
uh we'll do this
1:07:01
so that no one goes ahead and just publishes this up to their server and then you know think that they can just go ahead and do whatever
1:07:23
there we go all right there's another download for those that weren't trigger happy
1:07:31
oh shoot i was i wasn't sharing my screen during that whole url thing
1:07:37
[Laughter] oh dang it good thing a good thing i didn't close the file
1:07:43
okay i hate when i do that um
1:07:50
so here we go uh here's the two examples so this is how i
1:07:56
told you how to do it unbelievable i can't believe i wasn't sharing my screen what a what a noob
1:08:02
okay so here we go this is the how i told you to do it and uh if you see here um this is
1:08:10
the page that we have and then this is what our pre url looks like if we were to do it like this with which
1:08:16
is slash blog slash post slash index.php the pretty url would have that extra
1:08:23
layer in there as well right and we don't want that i don't think it looks i think this way looks nicer right
1:08:30
so um that's the reason we did the post.php there instead of post index.php
1:08:36
okay so there we go sorry guys for not sharing my screen
1:08:43
what a rookie okay sorry about that totally missed those
1:08:49
ones
1:08:55
that's why that's why i had a barrage of comments coming in with no no sharing
1:09:01
sorry about that okay well good thing i i you guys said that
1:09:06
and um i appreciate it hopefully you guys um hopefully we'll see you at the conference coming up
1:09:12
okay uh october 22nd three days again 100 virtual you get to attend from the
1:09:19
comfort of your own home and hopefully we'll see you there and uh well i'm sure i'll see a lot of you in a
1:09:26
couple days on the hangout this friday and um if not i will see you guys hopefully next week
1:09:37
oh wait i shared my screen you guys didn't see my screen
1:09:43
just clarification really quick you guys saw the url screen right i verified that
1:09:51
all right sweet i think the stream's a little behind right now
1:10:03
cool okay guys um take care we will see you
1:10:08
um next week live stream see you on the community as well take care bye