CPTs, Templates, Loops, & Logic: The Makings of a Modern Dynamic Website (Part 2)
HTML-код
- Опубликовано: 12 сен 2024
- The modern dynamic website series continues! In this episode:
🔥 Dynamic Footer
🔥 Behaviors CPT
🔥 Behaviors Archive Template
🔥 Behaviors Single Template
🔥 Legal CPT
🔥 Legal Single Template
🔥 Removing URLs From CPT
🔥 Blog Page & Loop
🔥 Single Post Template
🔥 Category Archive Template
🔥 Author Template
🔥 Dynamic Reviews
🔥 Service-Related Reviews
🔥 Dynamic Review Ratings
Don't worry, there's plenty more to come, so make sure you're subscribed to the channel! Missing the rest of this series would be criminal.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
Pure awesomeness. I spent 15 years of my website career waiting for a video series like this! Thank you Kevin!
0:51 Intro
1:38 Dynamic Footer
4:36 Behaviors CPT
12:14 Legal Single Template
14:03 Behaviors Archive Template
17:39 Save Template
20:36 Behaviors Single Template
24:24 Blog Page & Loop
29:57 Blog Single Post Template
32:51 Blog Category Archive Template
35:14 Author Template
37:40 Dynamic Reviews
43:18 Service-Related Reviews
48:12 Service-Related Reviews Loop
50:31 Query Word Limits
51:30 Create Call-Out for Reviews
53:50 Dynamic Review Ratings
Great video.
Thank you.
Added the time stamps for myself, and maybe useful for someone else. 😀
You are such a great teacher. I used to use another framework but when I ran into issues, there were no resources available to help me. I switched over to ACSS and now you are holding my hand every step of the way. Thank you so much for all your hard work to put great, free resources out there.
Happy to hear it!
Amazing series. I would love to see a deeper explaination of how to write content with headings, paragraphs, images, lists... in Gutenberg and then style this blog content via acss in bricks in part 3.
Great idea
This series is gold, thank you! I have watched your PB101 and a few other videos and often trawl back to check - love how this has stitched it all together and covered a few holes in my knowledge too. Keep up the awesomeness!
Incredibly helpful. This is a subject I have been struggling with continuously. I very much appreciate 1 - 2 and look forward to 3 and beyond (Thanks again!)
Agree with others. Invaluable content. Invaluable tools. I have followed along and built out my website using this tutorial. At last, bricks, ACSS, and a Frames system that creates sites I can be proud of.
💪🏻💪🏻💪🏻
Part 1 was very good, Part 2 explained so much more. Great explanation when to use archives and use of different template types, inserting dynamic data through data attributes .... golden nuggets throughout the entire video. Looking forward to Part 3.
This was absolutely AMAZING, Kevin! Even after all this time of watching your videos I continue to learn little tricks and tactics I wouldnt have considered (or just missed in general). I hope you keep doing more live build demos like this of various types of potential project features. Cheers!
Can't wait for episode 3. I have a service area project Im starting soon and I'd love a refresh on it.
Dang, that was dynamite, friend!! You have made this so clear and understandable and doable. Thank you, thank you, thank you.
I have a confession Kevin, I had to go back and watch part one again. I fell asleep on the couch on the first viewing. Nothing to do with you but exhaustion after chasing our new retriever pup.
Already tuned into manny of the concepts but always good to see someone else do it to pick up new tips and tricks.
Got the pup in on the video to see if I could get uncle Kevin to put manners on him but the minute you get animated he starts running away… … hey! … come back! … …PUNK!
Your tutorial was absolutely amazing! It was a real monster tutorial, covering every detail comprehensively. Thank you for putting so much effort into it
💪🏻 happy to help
❤ awesome!! Cant wait for part 3. I am proud of myself, almost nothing new in the video’s whoohoo, kind of feeling like a pro now lol. 🤣 still got some golden nuggets out of it. Like removing the reviews link with disable the Publicly queryable switch. Very nice. Super curious about the service area stuff!!!!
This series is great Kevin! I would love to see how to set up a Docs/Knowledge Base CPT with a single template, archive template, and category archive template. This is something I want to do but my brain gets stumped
Super easy. Did it on frames and ACSS sites. Which part are you getting hung up on? If you are a member of the inner circle, create a thread so we can jump in and help you.
@@Gearyco ah yeah that is right…I missed the live yesterday. I will give that live replay a watch. Thanks for responding Kevin. You do great work!
Great informative useful video (again!). The nice golden nugget of info that stuck in my mind was using a loop to generate the footer lists. Seems obvious now, but, like a chump, I had always created those statically in the past! No longer! 😉👍🤣
Another great teaching experience for me.
Thanks Kevin, great stuff, watched both parts, exciting and very educational. I would like to see how things are filtered, custom post types often have something to do with filters, at the top of the head, for example in pill form as a button filter.
Facets are only needed in specific circumstances. Might be beyond the scope of this video. I've done many facet trainings in the Inner Circle.
@@Gearyco I'm in the Inner Circle, I haven't seen it yet, but there's tons of material there. 🙂 I'll look for it. Thanks.
Enlightened like this, full of satisfaction, the site is finished, everything is perfection. Next, how can the client continue to add content all over the site? The client is Bev 😱, it would be a tragedy if she could change anything! I think it should be a special episode(s).✅
Great series!
If you can also show how to use something like ws form post management to add those reviews posts dynamically into the website after they're submitted by the reviewer.
Already did that on a video last month. Check the channel.
This was a very nice recap of most of what Kevin has taught over the years. I still wish it was MetaBox, but... Awesome stuff. When do we get Part 3?
Let’s get it rolling! 🎥
Great video, thanks for the explanation! Excellent tutorial on Bricks with ACF. Where is your data rating (Star rating video)?
Search for those terms on my channel and it should pop up.
Great video, thanks for the explanation. I can't wait for part 3. Is there any chance to have a similar approach but with Woocommerce products templates? It would be really helpful
I hate woo with a passion 😕
It's like you are reading my mind, most of your latest videos were on my mind including the testimonial and the dynamic footer in which I have already implemented. I thinking now Dynamic NAV menu now haha
The nav menu element already queries the nav dynamically so that should be covered already
Thank you for this series. It would be great to see how you can have a blog page where it has a tree of 2 CPTs for audio and video plus the native wp posts for articles. So to have a main blog page for a preview of the family of 3 subpages blog/articles, blog/videos , blog/podcasts . I find it very challenging to achieve this exact url structure with correct breadcrumbs as well for the subpages. Maybe the challenge is that I'm trying to put under 1 umbrella the native wp posts with CPTs, but maybe you, @kevin, know the way!
Amazing video, again. Thank you a lot Kevin for your work!
@Kevin Geary: Thanks for the great video series. Looking forward to part 3 and maybe part 4. One question: since you have your permalinks set to /blog/%postname%/, what do you use the default pages in the WP backend for?
Pages don’t get the /blog/ slug. Wordpress strips it from pages naturally.
@@Gearyco Does it - true it does - weird that I missed that. Then the setup /blog/%postname%/ simply helps you to make sure all standard posts land under /blog/ while everything else (so all your CPTs) us their own slug (minus Front URL-Prefix), is that it?
And do you always keep the slug or your CPTs as is or do you sometimes also remove the slug of a CPT?
For me the whole CPT stuff is great for organization purposes but in most cases the added slug is not needed and sometimes can also be bad for SEO.
Is there a simple way to remove the added slug /services/ from your single services pages in ACF Pro or do we still need the help of some permalink manager plugins, that allow us to remove the cpt slug completely for example?
Thanks again Kevin. Keep up the great work and fight.
@@DanielNeubauer Try Post name on the Permalink structure.
With bi-directional, do you tend to add the equivalent one for the matching post type on the other post type, as a ACF field as well? I'm not sure if I misunderstood the use of them but I tend to say, for testimonials, have the option to see where they are assigned from within the testimonials - but then also on the service you want the actual testimonial on have another ACF there to see which is assigned. Hope that makes sense, that's what I always took to be the bi-directional aspect - otherwise it's just a 'show on:' field right?
Can you show how to deliver the website to the client and how backend look like to them?
It looks like it looks in my video. Most of our clients never touch their website because we tell them not to. We manage the site for them. In the few cases they need to edit something, we show them how to use the custom fields.
thanks, looking Forword for part 3.
Great episode, tahnk you Kevin. I have got one question regarding your legal bucket : How do you manage the WP default behavior for privacy page. Indeed, when you go to Settings => Privacy => Privacy Policy page, you can only select a page and not a CPT. Thank you !
Is that necessary? I’ve always ignored it.
@@Gearyco I thought it was ! Thanks for your insight !
Just FYI, to type an ellipsis on Mac is option+; …
thanks Kevin for your good content. I was wondering what tools and plugins you recommend for optimizing images for wordpress website. Clients don't care about changing image type to (WebP) and compressing it. I want to automate on either server side or client side (like a plugin). Thanks
I use Shortpixel.
Good video! Thanks!
I created a post in the Inner Circle on a nonprofit organization that uses an event booking platform (Retreat Guru) for their events, which has a WP plugin. The Program Director is able to add/remove and make changes to any old or new events on the Retreat Guru website and it dynamically updates the company website. Since they use this platform instead of ACF to list their events and all facilitators, how can I 'Edit with Bricks' and target the data?
I use SEOpress and I can choose not to index templates (noindex). Should we noindex all templates? LIke those of template single, template archive, header footer and so on.
Another banger! Thank you Kevin!
Nice tutorial, do you know a way to limit the result of a relation like services a trainer offers and limit it to 3 services per "page" and add filters and pagination to them so people could do some filtering and pagination, which would be quite good user experience in case you have lot of related items ?
Stay tuned.
Great Content!! thanks for all this.. Question. If i want to make the loop as the past video for the releated services BUT i wanted to show it as Bento.. how can i do that? Thanks again :)
Custom CSS
Variable grid is really handy when you don't know how many items you have. With one item the image size has to be fairly large to cater for size. When more items are added, doesn't that large image size get applied to the other items also when really the size needs to be much smaller if say there were 4 items in the row?
The goal is to not have one item. It’s a grid after all. It should have at least two items.
Q. Why do you prefer a static page for the blog archive instead of a regular archive page?
WordPress doesn’t have an archive page for Blog 🤷♂️
Good stuffs here... thank you.
Hello! Another great episode! I'm updating some of my sites to utilize custom post types (CPTs), but I need help with an issue. When I enable the 'Blog: Category Articles' CPT, the sections with the dynamic footer disappear. Do you have any ideas on what might be causing this? I could remove the dynamic
You mean the loops disappear? You might need to disable query merge in the loop.
@@GearycoYes, you can also see in your videos around 29:38 that the footer loops disappear when enabled. I'll try what you suggested. Thanks again for responding and I learned a lot from watching all of your videos.
I understood everything except for the dynamic stars rating.
Do you have a video tutorial to make it from scratch? I mean without using the frames
Yeah search the channel for dynamic star rating.
10:09 You're talking about limiting the number of posts and the pagination, but isn't the contextual menu on the left at this moment only about the links in the Behaviors column of the footer (and not about the archive page)?
Not sure which loop you're referring to. Be specific since there are many of them.
@@Gearyco
At 10:09, you're talking about limiting the number of posts and the pagination.
But while you're talking, we can clearly see that the left panel is about the "Li" element of the Behaviors column in the footer.
So are the "Query Loop" and "Query" instructions on the left panel at that moment related to the "Li" links of the Behaviors column in the footer or about the archive page of the CPT Behaviors?
Crossing fingers that you understand what I meant :).
And of course, a big THANK YOU for teaching us the right way!
thanks
28:45 Is there a particular reason for choosing "External URL" rather than "Internal page/post"?
Not really.
Looking forward to this
Hi Kevin, why do you use /blog/ as a custom permalink? Why not just postname?
Blog posts should be under /blog/ for better url structure
@@Gearyco True, but it seems to be persistent for other pages as well, as you keep turning it off for the Custom Posts. Does this mean that Custom Posts are therefore considered by WordPress to be Posts and not Pages? Thanks for your reply!
34:52 the two query loops in the footer appear to be broken on the category archive page. I’ve had this happen on a bricks site but forgot about it until just now. Do you know to fix this? (He asks without even googling it like a chump)
Yeah, will show this in the series.
I've noticed for adding posts for a blog, the editor is gray, do you know why? It is off-topic but I've noticed it is only the posts and was curious if you know why?
I had this occur at some point whilst I was 'building along'. Stopped when I disabled WS Forms (I've got Lite installed) plugin. Anyway, I reset ACSS to default and all OK again 🤷♂
Ask the block editor development team. They're the ones who set it to grey.
Re review ratings, how would you go about adding an average rating to each service? For example, on the service cards on the services template page.
You'd need a way for users to rate each service and then query the average. It would be quite a bit of work.
I have followed this Blog:Single section of the video three times and can't for the life of me get my Blog page to cooperate, without putting query loops on wrappers and elements.😕
Post a link in the inner circle, and we can help you
Q: Would it also be possible to not use the bidirectional field for the reviews but use categories for the reviewCPT?
Yeah but it’s kind of another thing to manage
19:48
> Do we agree that if you reuse a saved template and change something about it (such as the title here), it will not affect the saved template?
> And if you make some changes to the saved template itself (the source > can we by the way?), it will not affect the pages of the site that reused it?
Reuse a saved template? Not sure what this means.
Making changes to a template will affect all the pages that template is assigned to.
@@Gearyco Let me rephrase it then :).
I was talking about the "Save as Template" feature. You saved the section "My specialties" as a template that you named "Features" and reused it at 18:24. So in this context, my questions are:
> When you reuse your "Features" template and rename the heading OF THE COPY (that is "My specialties" becoming "Which Behavior is Your Dog Struggling With"), can you confirm it won't impact the original heading of the "Features" template saved in the library?
> And in the opposite situation, if you make a change to the original heading of the saved template "Features", can you confirm it won't impact the new heading of the copied "Features" template reused here and there?
I hope it clarifies.
Shouldn't you disable query merge for footer/header loops so they don't conflict with loops on archive pages?
Yeah the explanation for that is coming.
How can we make this so that customers writes the reviews and not the website owner? Give them a login somehow?
I showed how in a video a few weeks ago. Check the channel.
Sensational!!!
Great series....just two questions...
1) You've created a template for a service, so all the service pages will look the same. What if the service pages need to be different?
2) In a project I'm working on right now, I have created a "reviews" cpt but I have two service cpt's. I have added a relationship field to the service cpt's and the reviews cpt and they're all linked up and bi-directional however...if I add "Jack"'s review to a service...when I look at that service, I cannot see "Jack" in the list of related reviews. I thought as it was bi-directional if I added Jack's review to a service, when I looked at that service I would see Jack in the list of reviews?
RE 2 - I figured it out. So just (1) remains!
You have multiple options. You can deploy a full template or a partial template. A partial template allows you to make each page layout completely custom while standardizing certain areas.
Assuming I use the same template layout for all the blog archives like post, categories and author etc., is there any [simple] way to work one archive template for all the options? I have found to my cost that I certainly break DRY when I need to amend all templates individually! I watched a @nickarceco solution but got lost! 😁
I guess the same question could also cover all the Single templates too providing the styling is identical across all...
I'd try and watch Nick's video again and read through the comments because his approach does work. It took me a couple of tries but I got it working and can now handle all blog/category archive templates from the same source.
@@gtawestliving Thanks Mike. I will give it a try and I'm sure knowing Nick's workflows I will get it to work. Interested to hear any feedback from Kevin, and others, about implementing this more maintainable workflow.
This is my question and pain point as well with the Archive template. I just want a global catch all archive template that works everywhere i.e. posts, tags, categories, users etc.
@@zuber7358 I followed Nicholas Arce’s suggestion and built a single template for both a blog archive and a category archive, which turned out to be reasonably easy in the end. Have a look on his RUclips channel.
@@david.robertson.photography Ok, I'm gonna watch that video again, I skipped it initially, maybe that's why I didn't get the gist. Thanks!
AWSOME AWSOME AWSOME