How to Properly Add & Query Service Pages With Bricks (CPT + Query Loop)
HTML-код
- Опубликовано: 6 июн 2024
- Are you still adding service pages to websites via the WordPress pages area? (Gasps) The audacity!
It's time to step your game up and start using WordPress as a proper CMS (content management system) so you can build sites that are truly scalable and maintainable!
Thankfully, Metabox and Bricks make this super easy.
In this tutorial you'll learn:
• Why CPTs are critical for building scalable, maintainable websites
• How to properly add service pages via a custom post type (CPT)
• How to add some simple custom fields to your CPT
• How to properly build a service card in Bricks
• How to clamp text to a specific number of lines (pure CSS)
• How to use the Bricks Query Loop feature to query your service pages
• & much more!
Want detailed tutorials on agency growth, SEO, Bricks Builder, UX Design, & Digital Advertising? Join my Inner Circle: digitalambition.co/inner-circle/
Want the best CSS framework for Bricks Builder? Get Automatic.css at automaticcss.com
00:00 Intro & Context
00:58 Example Site & Big Mistakes
07:53 Getting Started
10:54 Creating Services CPT
13:55 Creating Custom Fields
17:53 Adding Services
21:30 Building the Card in Bricks
44:35 Gradient Overlay Trick
47:54 Line Clamp Trick
53:12 Using the Query Loop & Dynamic Data
01:00:55 Making the Entire Card Clickable
01:03:20 Adding a Hover Style
01:05:44 Wrapping Up
kevin, oh boy, this is not about bricks or acss or wordpress at some point, it goes beyond all of that, it’s pure web design, and i love it. it’s entertaining and full of knowledge, even if a lot of us have learned some of these things. it’s watching an appassionate professional doing what you also love. the value is still so so so so damn high. glory to you and to your house.
What he said. Your passion is making all the difference Kevin. Big up.
This one felt a little sloppy in a couple places. I'm still getting used to Bricks. Thanks for your patience :)
Honestly the way you explain things, sloppy or not, teaches us so much we do not care how sloppy it is :) I love that you talk to us assuming we know basics on advanced topics, it helps so much.
It was actually great to see you slip up in Bricks. I've been on the fence about whether to start my next project in Bricks or Oxygen and reading as much as I can on the two side-by-side, but, seeing you in action, hiccups and all, gave a much better sense of what switching will be like than anything I've read.
I love your Bricks Builder tutorials!!!
You explain everything perfectly, you are understandable even in another language!👍
Glad to hear that!
Fantastic tutorial once again Kevin! Thank you 👏🏾
Really appreciate your efforts for creating such useful tutorials 🙏🙏🙏
My pleasure 😊
Bricks is new to me, but I'm blown away by how you approach each tutorial. Keep up the good work! :)
Love this tutorial Mr. Kevin!
Amazing!! Truly appreciate your tutorials I learn so much each time!
This tutorial just makes me excited to go start using Bricks with CPT's and Query Loops! So much good information here. 😍
Awesome tutorial! I love to see you working with bricks, because I recently switched from elementor to bricks and there is quite little good content as of now. Especially when it goes deeper into including best practice. Hope to see much more :) kind regards from Germany
Oh my. Did the same thing with elementor some time ago and now i see your video with bricks. I like it a lot more. Here is some good tips for design from you. So thank you very much:)
Just started using bricks myself. Used to code everything by hand...like using a hammer instead of a nailing gun. Learned a lot from your channel. Adding design concepts while working on the development aspect is extremely helpful. Your energy level is amazing.
Thank you so much for the time and effort you put in to these videos.
Glad you like them!
Thank you so much for an excellent tutorial! I love the fact that you leave in the "bloopers" in like styling at the ID level - that really HELPS re-enforce the learning #saynotochumpville :-). Awesome :-)
As always, a very good tutorial
I am stunned by the content in this video and that too for free. I am so happy i subscribed to your channel long while ago.
Great stuff Kevin! I had to set my service card container position to Relative from Static because my cards were all going crazy when hovering over them
Hey Kevin, this was a fantastic tutorial. You convinced me to change my ways! Even though I knew how to do this, I usually did it the manual page way. This inspired me to change that, so thanks!
💪🏻
Excellent tutorial. Thanks, Kevin. 👍
You are very welcome
Awesome tutorial
Absolutely brilliant tutorial, mate. I've just joined The Inner Circle for more of the same... Thank you!
Welcome aboard!
Pure gold!
Great tutorial! I like the way how you teach and explain things. Also, the professional ways, not the ways people might think, is the good or best practice. I'm interested to know which CSS snippet you have used to make the whole dive clickable with CSS only. I know the jQuery or JavaScript ways, but a CSS only solution would be great. Thanks in advance.
That's awesome Kevin! Kudos on that...
Can you make a tutorial on Css animations on Bricks. That hover style actually helped me to get that nice and smooth hover animation
Love this tutorial Mr. Kevin! Would you mind making a tutorial about WpgridBuilder? with oxy or bricks ..I just noticed it's in your WordPress arsenal!
Kevin, Awesome stuff as always! Couple little hiccup's going through matching your work, as a couple things are different in the 1.5RC so had to make some minor adjustments. Your 'clickable-parent' class sounds good, but I don't see it yet. :) I presume its coming in next release? And re the default positioning, I think thats on the request in the bricks site. What would be even better is to be able to define it in the global theme area or the settings. Thanks as always for the guidance! Aside from that, so I presume then you would then build out each of the CPT 'posts' as a 'page'. I never thought of doing it this way, but it opened my eyes on the process.
Awesome Kevin, not using bricks yet (using oygen) but the more I watch your bricks videos the more I will probably get myself bricks. Looks so easy!!!
The query loop is dramatically better than Oxygen.
@@Gearyco Yes I see that and that's something I really like with bricks
I currently developed and now manage two sites (in addition to my full time job). One is an ecommerce site (Elementor), one is a straight Services site (Astra Template). I'd like to convert both to Bricks. I've been watching tutorials in preparation for this. Not sure I'm ready to pull the trigger yet on the eCommerce site yet. However, after tutorials like this one (And I also purchased ASCSS and will look to Frames when I can get into it), I'm ready to go with the Services site. Thanks for content you are putting out. The only thing I couldn't get working correctly was the gradients / clamps on the text box. I'm on 1.5.2 now so that might be the issue.
Take the leap, you can do it!
I learned a lot in this video about bricks than my whole months of own experiments.
🙏
35:54 for anyone wondering why their "-1 order" isn't working if you're using a more recent version of Bricks... Since 1.5.1 (or 1.5.2 -- I don't know exactly), the default display property for elements is no longer "flex" (which is the more accurate way). You just need to set your service-card class display property to 'flex'.
Many thanks that solved it for me.
1.5.7 doesn't work too
@@KomentarSaya there is a lot of defaults changed in newer versions of bricks, many have to do with display properties or position properties. Gets you learning though once you figure it out.
I made a whole in My Enter button and was about to make one in my head for not getting things properly
:D :D :D Thank you!
Still doesnt work... I go with normal order
Another golden piece of a tutorial! 👏🏼 By the way, the CSS 'transition' property is located under the "CSS" tab in Bricks.
Ah, thank you!
@@Gearyco 🙌🏼😅
Hi Kevin, I am getting so much value from your content. You really are pumping it out!
Question: I know this vid is 9 months old when you were getting on top of Bricks but somewhere in your other tutorials you mentioned that query-based card arrays should be based on unordered lists. Is this still the case as far as best practice/accessibility?
Thanks again, I'm an older wannabe web dev and learning heaps.
Yes that’s correct in most cases.
Seen so many Kevin vids this weekend, when I think I hear his voice, do I need medical attention? On a serious not, great content again!
Awesome 🙏🏽
Another great tutorial and I love the way things look so easy in Bricks. A few issues here and there, but nothing drastic.
I did not realise the loop builder is the same thing as the repeater. Silly me.
Thanks a lot for all your work Kevin.
Your tutorials are always really awesome and got lot to learn new things from you sir.. hope bricks get every thing perfectly in their final version.. the new rc version is not working properly with this video...
I’m sure they’ll get it straightened out.
Thanks!
Much love!
Fantastic video. Loving the Inner Circle also! So I get the benefit of using CPTs for creating posts that will be used to build a Page where the Query Loop will reside... but the actual Services Pages should come from a Page template? Am I thinking this through correctly? Is there a video on building out what happens after you click on one of the service cards?
Yes there’s an archive template to show all services. For each service page you can create a template or just build each one individually in builder. Depends on how you like to work and what the site needs
if anyone is concerned with how to use the "clickable parent" technique here's a css i figured out that works quiet well...
......................
root {
position: relative;
}
root a::before {
content: "";
position: absolute;
inset: 0;
}
......................
Make sure to apply this to the immediate parent/container of the heading link
Another great video Kevin! Quick question. If you take a look at the example service card grid which you rebuilt, the last card is not a service card but rather a "contact us" blurb. How would you build something like that? Is it possible to achieve this while using a query loop?
I don’t remember the card exactly without rewatching but yes it’s possible with a query loop. You add the CTA outside the loop.
Incredibly insightful, great tutorial. Did anyone manage to figure out the clickable parent?
Great stuff and great info - but where would i build the actual service page? Am i using Bricks on the custom post type page or do i build another one? Thanks
Yeah you use bricks on the CPT pages
1:48....who complaints about that...maybe someone who is super pro and on depression pills. Because for beginners the redundant explanations of basic concepts are critical, and I enjoy that a lot. You talk awesome and on 1.5x its like you are on steroids.
Hi.. Extremely informative content. How would one implement the .clickable-parent feature in oxygen builder from scratch, please advise?
Anything I do in bricks can be more or less done the same way in oxygen.
another great tutoria. i followed closely but couldn't achieve the clickable parent feature. then i read in acss you need to add .relative class to the parent. this is not shown here. am i doing the correct thing ? cheers
Actually you can have transitions, they hide in the CSS tab. But this is like for all transitions then, otherwise you really have to use WPCodebox and write it on your own.
Have you switched to Bricks instead of Oxygen? This is second Bricks video in a row, IIRC
I still have a lot of sites we manage on Oxygen. I'm about to start building a couple client sites in Bricks. Oxygen is EOL and only being maintained so it's time to start looking to the future.
Hi Kevin... how did you make the whole card a link ?
Hey, Kevin there is a plugin for chrome image save as where you can right click and save webp images as jpg - I think maybe, just maybe this is one thing perhaps I've been able to teach you to make up for the five hundred things you've taught me :-D Cheers!
Sweet!
Could you do a video explaining all web design terminology? Example: differences between REM, ‘Em, Pixels, Points etc.
And also what is the flex measurement on the bricks edit window
Flex measurement?
I’m not sure what it’s called. I’ll look at bricks to find the correct name. But it says “Flex Grow” etc
Question: as the card is linked rather than the image, is it possible to apply an overlay hover style to the image (eg darken/brighten) instead of the transform y?
Thanks in advance 😊
Yes
The problem that you have at 1:02:47 - that's the problem I'm having, right now it goes to another page, but nothing shows up. I think I need a template. How do I assign a template to this specific post type. I want to use 3 different post types, meaning I need 3 different templates--- I'm still trying to figure out how to do this... any tips???
I think it's best to use the post title as the service title and the featured image as the service image. Because when the service gets shared via social media, WordPress is designed to pull the featured image and title from its default locations. I personally only use custom fields for images when it's a gallery field. With your current setup, you won't get a proper link preview when the service link is shared.
The same applies to the service description. I would just use the text editor for that too.
None of this applicable if you use a proper SEO plugin. I use RankMath, so I can customize exactly which image gets shared and what the title and description are. Anyone who is failing to properly customize these things with an SEO plugin and is simply relying on default WP settings is dropping the ball.
I'm following along, but when I use the clickable parent class, it makes the whole darn content area clickable, not just the card. And I did add the "static" settings as you suggested as well.
I saw you asked this in inner circle but I’ll reply here too. Parent card needs to be position relative
Right now I'm using ACF (free) but I need to upgrade to a pro version. Which one is the best to use (value for money) at this moment?
Just ACF Pro
Great to see you build live and thanks for taking the time to explain the process in detail! One question: why not add the alt attribute for images inside the WordPress Media Library? It seems redundant to create a custom field when it's already available by default anyway.
Because then you're limited to one alt description which is a little bit of a limitation for SEO if there are multiple uses of the image. Also, it's a UX issue IMO. If you upload an image and forget to write an alt tag, it takes a lot of extra clicks to get back to the media gallery.
@@Gearyco Got it. Great response, thanks!
Am on Bricks 1.8, have set Display field to "flex" plus the Order field set to "-1" but can't get the correct order as per video. Any suggestion Kevin?
Fixed it. I chose the wrong element to set the -1 on. It must be the 'Media' DIV, whereas I did the Service Card (parent).
So, the focus style for accessibility use the hover style too ?
It can. Doesn’t have to
Hi Kevin, would Croco Block Jet Engine help accomplish the same goal? Do you know how this would compare to a tool like Metabox? Although it doesn’t say so on the website, it does work with Bricks.
Haven’t used those before so not sure.
Regarding the same height in 57:16 How do I set it up/add the stretch class to Bricks when I don't have automaticcss ?
Stretch is a flexbox control.
The problem with CPTs for services is that those pages will be forced to have some sort of URL structure other than domain/service. For example, domain/services/service-name. There's plenty of data to support that for smaller sites (less than 100 pages) a shorter URL for those pages tend to rank better. In that respect, it's better to add services as pages. You can create a custom tanxonomy for pages (ie; Page Type) as a method to template those pages. Both Bricks and Oxygen have the ability to set a template based on tanxonomy, and you can add ACF fields to pages that have a specific taxonomy, so this is a good balanced alternative to CPTs.
Nope. CPTs are far better. The base slug can be removed.
I've seen this done before, and imo it's madness for organization, query, and the database.
As stated, the base slug can be removed. This leaves the archive page in-tact (/services/) with default query and pagination. There's also the issue down the road if the company wants to expand their site in any way. Adding pages, on pages, on pages is defeating the purpose of how WP is built and can snowball into complicated issues.
*speaking as someone who has had to clean up projects like this, please don't. The WP Rewrite system is complicated, but removing the base url slug is rather simple.
Great tutorial as usual Kevin.
Is the class "clickable-parent" coming soon in ACSS or is it a custom class you wrote for this tutorial? I always struggled making a card clickable... (Oxygen)
Many thanks
It's coming to ACSS in the next update.
@@Gearyco Brilliant! I look forward to it!
If you need the code now, it's in the accessible card video.
@@christophheine4725 watched the accessible card video but couldn't get it to work for bricks
@@sjchalton what exactly didn't work?
What is it that @35:51 when I try to use the "-1" to change the order of the elements, nothing happens? I have tested with Bricks 1.5.6 & 1.5.7.
I had forgot to set the wrapper from the default "Block" to "Flex". Works now.
Would be nice to be able to design those back end input pages at least a little, or maybe create some kind of front end form to create the content.
How come?
@@Gearyco The client can write the information through the Custom Post Type and Custom Field you created. You didn't explain how to create the card link pages and connect them to CPT.
Hey Kevin, you mentioned that you were going to be adding a class to a future version of ACSS for the feature to clamp the text to a certain number of lines. Is this still in the works? I didn't see it in the roadmap, but then again, I am not sure what it would be called.
Possibly. it became less important when I switched to bricks because bricks allows you to do this natively via their dynamic data shortcode.
@@Gearyco Really? I didn't know that. How does that work?
Hi, I´m trying to replicate making the entire card clickable. I´ve created the BEM-Class "card__heading", but when I add the clickable-parent class to it (the BEM-class is activated, not the ID), it doesn´t have any effect on the other headings to which I also have attributed the BEM-Class "card__heading". It only has an effect at ID level and not to de BEM-class). What am I doing wrong?
Would need a link. Lots of possibilities. Ask in the inner circle and you’ll get an answer in a few min .
Hi Kevin,
when i try to copy what you did on the text gradient trick of yours its not working properly. Is there any other way to do it?
I'd need a link to inspect. You can post in the Inner Circle and I can help you or other people will help as well.
Great tutorial. I am using Bricks 1.5.1 which seems to treat things a little differently and had problems with the utility clickable-parent. I needed to add a z-index 999 to extend the utility class via wpcodebox to make this work. There may be a best practice reason I shouldn't do this but it worked. I checked double checked I didn't have another absolute wraper in there even on an ID level meaning I was compensating for something by having to have the z-index. Still I'd be interested if anyone else has the same issue.
Something else is going on with it. I wouldn’t recommend doing that with Zindex. It’ll cause other issues.
Same issue, I'm on Bricks 1.6.2. Have you happened to find a fix? Cheers
I didn't understand how to create the clickable card, when I tried to replicated it, didn't work 😅.
I am not sure if this class is created on ACSS or not, if it isn't, could you please let me know how to create it?
For the rest of the tutorial, Excellent 😁, please continue creating more Bricks tutorials like this.
It requires a slight tweak in bricks. But yes, it’s part of ACSS 2.0
That clickable parent class is nice but you can just choose the loop and change the DIV in the HTML Tag dropdown to an A element, and then choose the url dynamically. Could that be a bad practice though?
It’s bad for accessibility to make the entire card an link.
@@Gearyco Good to know! Thank you
Will u update the video Seth about oxygen builder?
??
I am a little confused. Not about your awesome tutorial but the way Brinks seem to work with loops. I am used to Elementor (shame 🔔 shame 🔔shame, I know 😂), where it feels like you need to use 5 different plugins to achieve a proper query loop grid. Now you're building this grid section in just one place. Does that mean, that every time I need a query loop like that, I have to build it from scratch, even thou it would be the exact same thing? Or would this just be saved as a template to be used in other places too? Otherwise, I learned so much stuff here, it's unbelievable. And I am doing this for years now.
Yes you can save them as a template if you’d like.
When I switch the body and the media nothing changes. They stay on same place and dont move
Using order -1? Make sure it’s on the media wrapper and not the media itself.
I've completed all of these steps, but my dynamic data is not snapping to 4 lines
would need a link to inspect. Have you tried posting in the Inner Circle?
^__^ YES!
why my order doesn't work ?
doesnt change anything,
Make sure your container is a flex or grid container.
When should I use REM and when EM?
Rem is good for more static sizes. Em is when you want the sizing to scale based on the element. Em for buttons for example so the button padding reduces as the button font size reduces.
@@Gearyco thank you 🙏🏻
Why do you add a custom field for service names and then enter it twice?
Because sometimes you need the admin title to be different from the front end title.
Love these tuts. Make Bricks sexy with more more more!
what am I doing wrong here? my cards are clickable but dont point to any url
Would need a link
@@Gearyco haha yeah there is a link and all that is fine....in the video you had trouble with the link not working and said you would investigate, was wondering if you found the reason?
@@silentphil77 yes, I was using code that works for oxygen but bricks formats links differently and requires a slight adjustment to target the > a
@@Gearyco ok awesome man cheers , any hint on the adjustment? in next video?
👍 why no new tutorial for oxygen?
I've done a lot in Oxygen, especially considering all the tutorials in the Inner Circle. Also, I'm honestly not sure if I can post in the Oxygen group right now without getting banned. They're banning people left and right. I'll be doing more for sure, but at a slower pace.
@@Gearyco Oxygen group? Where that is?
@@ZailCZ Their Facebook group.
@@Gearyco Oh, and why they should ban you?
@@ZailCZ because they don't allow criticism since Breakdance.
making the text position absolute doesn't work it makes the entire screen white.
this is in Feature Card Charlie btw on the lede.
Can’t help you without a link
Looks like it only works if you set the body/parent to position relative, then the position absolute works, however wouldn't that mess up the clickable-parent?
@@Gearyco Oh sweet I'll make a post over in the ACSS community
When you are using Custom post types for your Services, how difficult is it to select the order of the queried Service Cards? Is it even possible when you are using CSS Grid ?
Screenshot: snipboard.io/eX6NtL.jpg
Yeah you have full control over the order!
@@Gearyco Okay just did some research and I see the
.item :nth-of-type(5) {
Order:1;
}
The only potential issue that could change the order is the addition of a new card into the grid; the CSS would need to be modified to accommodate the new card and it's desired position in the order.
@@PswACC If you want to keep a specific card in position 1 you can use a custom data attribute.
@@Gearyco How would you assign the attribute when it's a loop?
@@PswACC Since we're using a CPT we can add a custom field to each post for the data attribute values and then dynamically pull them into the loop. All the cards will have a blank data atrribute except the one we want to pin.
Thanks!