About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Leave a Tip!

Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!

Total CMS Blog in 30 Minutes (2021 Edition) thumbnail

Total CMS Blog in 30 Minutes (2021 Edition)

Total CMS Blog in 30 Minutes (2021 Edition)

Categories: Live

Transcript

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