UPDATE: Any functions you use inside of echo tags now need to be allowed through an allowed filter. You can see more info here: academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
I was unable to make the dynamic titles work, but I made a PHP shortcode in my functions.php file and inserted the shortcode in my header container. Glad to send the code to anyone else who us having that problem. Wish I knew why it wouldn't work inside Bricks Builder.
It’s probably because of the newest update. Any functions you use inside of echo tags now need to be allowed through an allowed filter. You can see more info here: academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
@@nickarceco Awesome work! Learnt alot. So glad I found this comment though! I spent 2 hours trying to troubleshoot why it wasn't working haha. This should defs be pinned
Thanks Nick, this is such a time saver for multiple category archives. All worked as expect with Bricks 1.10...once I remembered that I had to actually add the additional 'is' echo conditions to the child functions.php. Doh! 🙄
@@nickarceco yes Nicholas thanks for this much needed tutorial you covered steps that are not provided by other website developers. We want beginner video to build and style the blog page and blog posts and linking them. Much appreciated.
I am loving every second of your tutorials! What I specially like is that you are not afraid of showing us advanced stuff. There’s plenty of tutorials for beginners, but it’s more difficult to find good ones when you are looking for tutorials that follow a professional workflow, good code practices and a nice UI/UX output. And you nailed those! Keep up the good work, Nicholas! 😊 Btw, I like teh way you work styling it via external scss stylesheets 😊
Haven't used saas before or codebox to produce partial. I realised watching this video how much much i misuse tools like codebox. Apart from that, all the information on using dynamic data is so good. Great to see how our approach workflow and styling. Thanks Nicholas.
**NOTICE** After uploading I realized a few things. 1. I did not set the blog card to be an li element. I left it as a div inside the ul card grid. That’s a no no. We can also make the conditions easier. You can do the below: 1. wrap your top blog content in a div and set the condition for that wrapper to only show on the blog archive page. 2. wrap your top category content with a div and set the condition for that wrapper to only show on the category pages Now instead of making 4 or 5 conditions we have narrowed it down to two. Happy building!
I was thinking about that while watching the video. I do love this long format showing your process, thinking and problem solving. It feels like daily routine when building websites for clients!
Super! Very clean and straightforward tutorial. A lot of good tips. That is exactly what I was looking for. As a hobbyist developer, I don't have any special development tools, I would love to see the CSS styling inside Bricks.
Now I had time to see the video in full length. I think the styling in Sass is good, although I haven't mastered Sass yet. However, it forces me to learn. It's good to see that not everything works right away, even for a pro, and there's a lot to learn in troubleshooting. I also think it's excellent that you put the styling at the end of the video and don't style each element to death right after creating it, as you see in many videos. Thanks for the chapters as well. I add good tutorials to my library. There I have the ability to search directly for chapters, and also add my own notes. I will definitely spend several more hours with this perfect video before I internalize everything. Thank you very much.
I do want to make note to you. I am in no way a pro. I am in the same boat of still learning how to make myself more professional in how I do things. For instance I even forgot how to do the flex-direction: column-reverse; 😂 I'm very glad to hear that you are working to enhance your skills and not staying stagnant. We need people doing that in the wordpress sphere.
You make the best tutorials I've ever seen on Bricks Builder, please keep making more. Thanks for sharing your knowledge and if you have a website, I would love to see it.
Wow. That is quite the complement. I was on my way to church when I saw this comment and couldn't help but feel an overwhelming sense of "alright. keep down this path it's genuinely helping people." because of your comment. Thank you sincerely. I am in the middle of working on a personal website. I do have an agency website magnifiedweb.com if you are interested in taking a look at that.
Amazing tutorial. Most teachers use the builders in house styling, your methods actually teach us how to grow and become better developers. Thats value right there!
This video was so informational, even beyond the dynamic blog. I have been looking for someone that shows their way of thinking while designing and showing best practices along the way. Your style of teaching is easy to follow and the fact that you show your "mistakes" actually helps in the learning process. Hoping you decide to post more frequently because these videos are great! Thank you!
Thank you so much for your video. I only needed one little thing from it, but I have been working on getting it to work for 2 days. You had a blog page that you had to add as a second template condition "induvial > blog (page)", to get the archive template to work. I also change the permalink to "/blog/%postname%/". I had everything working with all my CPTs but could not get it to work with the posts. Your little hint worked perfectly. Thanks
Nicholas, I love the work that you provide! Amazing Tutorial, Great in-depth details, and No cutting corners, It's extremely valuable. Thank you. I want to add this, I'm using different techniques on some projects, By replacing Category w/ Page - with (PHP Snippet) and then editing each category with its own template. More work and hard to be honest. I've reasons for sure doing this.
thank you Kareem! and absolutely sometimes projects do require more templates. If you can get away with less then do it but there are always those cases.
This is the first video I've watched from you and it simply blows me away! I love seeing the thought process and then exactly how to build it. I just got to where you're going to work on the styling and had to take a break to process the functionality but wanted to answer a question you posed; I would prefer to see the styling in Bricks.
Glad you are finding value!! I ended up moving my workflow to be in bricks for the local items and wpcodebox for global items. So definitely more bricks styling in the future
Very good tutorial. So much insight from you. I am thinking of learning how to properly use CSS and the SCSS just looks beautiful. Keep doing more tuts!
Hi NIcholas Thanks for the amazing tutorial! I am fairly new to Bricks and WP in general and I have learned a lot from your videos. Please keep them coming.
I ran into the same thing at the beginning of the video when having to set the archive conditions. The reason this is weird is because in the WordPress settings you have to choose a "real" page as your blog landing page, even though this page doesn't directly need to have any content on it at all. It's just a placeholder that creates the URL for the blog home so we can use it in the WP settings. So in Bricks, I create an Archive template and set the conditions to be blog home and taxonomies, but I also have to set it to run on that empty landing page too. It felt weird to me as well, but without the empty landing page, we can't tell WordPress what page should be the blog landing page!
Well done Nicholas. It was really useful to walk us through your thinking process and the way you solved problems as they occured. +1 for a video with styling in Bricks since not everyone uses WP Codebox (but I think many will, after seeing your video). Keep up the awesome work!👍
What am I doing wrong? I followed your tutorial. It has no effect on the archive page and get error Parse error when saving the snippet: parse error: failed at `&cat-gap: 0.6em;` (stdin) on line 47, at column 13 in SCSS Snippet: Global Is there something I am missing.?
Hey Nick, I come back to this post often, it's awesome, thank you. Seems the 1.9.7 Bricks update adds an additional step with the new Echo: Function Names security step. I had to add 'is_category', to the filter to get the things working.
Yeah...I am now expecting to get support requests and comments here regarding it haha Im glad they added it but at the same time its another step we have to take.
@@LeoKoo Hey leo, Bricks now blocks external functions from running inside the {echo:} tag unless you specifically allow them to be ran. They show this in their youtube video under the "echo function names" area of the bricks settings ruclips.net/video/z6q42bJvkxo/видео.htmlsi=sq_Bvw4tjA6lE4Qm
You have to set the condition for your Blog Page as well as Archive because you probably have set the default “Home and Blog” page settings to be your blog. Wordpress Settings / Reading I think? If not it’s one of those settings. But just set your homepage and leave the blog dropdown empty. No more blog page template condition required 😮
Great video, Nick. Just subscribed! There is a lot of content out there but you are a great teacher with a lot of new knowledge. Learned a lot of great tricks for Bricks. I've already left Sass since CSS is getting so powerful, it also keeps me down to earth :) All the best!
@@nickarceco I'm a raw/vanilla kind of guy. I prefer to avoid extra "layers" like Sass or parallel methods like utility classes (this one, maybe good for prototyping but terrible for production). The tendency is that they eventually stop being so useful and we lost the evolution and momentum of the original technic. But I love your workflow. Love to see it applied to raw technics :)
Wow, I learned so much watching this video! The least I can do is the routine comment, like and subscribe to try and give something back to you. Thank you, sir.
I can certainly entertain the idea. What specifically has you stuck? What questions come up when trying to setup a bricks website? Where do you feel your practices arent up to a good standard?
Arce is such a cool name. I hope it's pronounced like "arse". I always wanted to know how to use the same template for archive and category archive, without putting every single thing in a class.
Amazing tutorial! So for my understanding I need a normal page for fun just so I can select it as an individual page in the template conditions on the template archive page?
I just noticed that there is no default archive page for taxonomy that would list terms. I would think we should have an archive for any custom taxonomy that lists all the terms? Any ideas?
I would probably put these on the archive page. List out all the different terms. I would only do this if there were a ton of posts the user could find under each one. Otherwise I would just use a filter for them to filter down.
Thank you for the tutorial. You set the card grid to be a ul for semantic html. Shouldn't you set the blocks inside to be li as well? Or to use div tag under like this ul-> li -> div? As it is in the tutorial, inside the ul you have divs. As far a s i know, Element “div” not allowed as direct child of element “ul”
A side question for you, if I may? I have been tossing up between WPCodeBox and "Scripts Organiser" for some time. My preference has been "Scripts Organiser" for better autocompletion and cleaner UI. Now WPCodeBox 2 is out I see the auto-completion is way better now. Have you tried both, and if so, what makes you favor WPCodeBox? One thing I see is that it now has auto-complete for ACSS variables. I have just written to them to ask if there is a filter to include your own framework variables.
I’ve played with scripts organizer a little bit and gave up on it after about an hour. The UI is better but the experience is much worse in my opinion. Having to jump between different screens to create or organize snippets wasn’t my favorite. Unless I missed something. And there was no folder organization like code box. Just on that alone I chose code box. And 2.0 with monaco editor (the same as vs code) is really nice to have.
Hi Nic, do you think its a good idea to place the blog heading and blog desc into one div and set conditions ? easier to manage i think ? less one set of condition to set, i'm not sure how the conditions impact the site speed?
Yes absolutely! You are thinking ahead! I actually made a pinned comment down below of all the little adjustments I missed and that was one of them. Absolutely great catch.
Hi, thanks for the great tutorial. I have a question: If I have parent categories and sub categories, them I have the posts, what is the best approach to create a template to show the sub categories in a certain design when someone click a parent category, and when there are posts they show in a different design?
What an awesome video! Thanks for sharing. Just one thing, I cannot stand that human time difference. I hate not knowing when something was posted, it drives me nuts. Especially when we're talking about years. It can make a huge difference if something was posted in April or June.
Very very good point. I think im going to create a condition to show that {posted x days ago} if its no more than 1 month ago. then it changes to the date method. Good mix of both.
Can you please give an advice on how to learn custom post types with Bricks or MetaBox ? I need to learn how to structure tour packages/destinations custom types for a travel website. What video or course do you recommend?
As of bricks 1.9.7 you have to add non bricks functions to an allow list for them to run in a dynamic tag like the {echo:} academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
Hey Nic! Thank you for the tutorial very helpful! I'm just wondering if I can create my own custom layout for my blog page: post highlight that is takes more space and masonry style cards. Can I do those using Bricks?
absolutely! one way you can do this is by the below. We can set the card-grid to have something like three rows then we can target the very first card and set that to span all three so it takes up the first row. Something like the below HTML: CSS: .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .card:first-of-type { grid-column: 1 / span 3; }
Great tutorial. I had created a page for my archive (forgotten where I was advised to do it...) - but I'm wondering is it strictly necessary and what are the advantages? Also, on the theme of keeping things simple, are there any pros/cons to using custom post types vs having everything under the native post type and assigning custom fields to categories? I guess using just native posts each post type would inherit the same permalink structure which may not be ideal...
If you are only doing the archive page and not category pages as well you could argue that you could just create a page with the archive URL and build it there but I prefer to have it as an archive template and cover my bases with making sure those category pages go to the same type of archive page. As for CPT’s, always always use them. Dont put them all in pages and post and organize them by tags. That’s just plain ridiculous. Hard to organize and like you mentioned the url structures don’t vary by information type. Not great practice.
Question. I don't use bricks yet. Im looking for a solution to a woocommerce issue i have. Or rather custom checkout functionality. I need 2 different checkout designs depending on if a coupon has been applied and the amount is zero. Can a condition be made to check for that and completely change the layout, field order and button wording?
you definitely can. you will need to create a function to check for that coupon, but you can use the bricks condition builder to check against that function and show/hide things conditionally. The different field order will be a custom work. Maybe WS forms has this capability to create a checkout forms and you can show those conditionally? im not sure on that though
@@nickarceco ya when I saw the custom php working with the conditions I immediately thought this could work for my situation. I subbed. I like your style and approach.
@@nickarceco Hey again (2 months later). Now that I just picked up Advanced Themer, I'm curious about your shortcut on the right side of the panel that takes you to conditions. Was that maybe moved in a later release? I see one on top of the left hand side panel when I activate it. It was nice to have indicated which elements had conditions on them but I can't find where to do that.
I've used the clickable-parent and it works fine, but when I want to use pseudo-classes to give the image some hover effect, it shuts down the ability to mouse-over the image part. The pseudo-class does its thing, but it seems to remove clickable-parent. It works fine again without the pseudo-class. Any idea what causes this?
@@nickarceco that is very lovely sir, but I won't waste your time with problem-solving my ideas. Thought you might know it on the top of your head, since I'm sure it will come up for everyone at some point with these cards. Let me throw it on the Bricks forum tomorrow. Tnx anyway!
@@nickarceco i thought I responded yesterday, but don't see the comment anymore. Sadly I don't Tweet (Euro). Made a a topic on Bricks forum though. BTW, found out yesterday we've been in contact before. You DM'd (is that a word) about my restaurant websites on Inner Circle a while ago.
@@Joe-ss9cr Oh yeah thats right! i remember. Good to see you here. I found the answer to your problem (atleast I think I did) and answered in the bricks forum
Hi Nick, I came back to your great tutorial as I'm trying to use the same template for a custom post archive that uses a custom taxonomy. I've changed the conditional statements to {echo:has_term()} (from echo:is_category()}) and the allowed list of echo functions includes has_term. But the conditional filter doesn't work. The CPT and taxonomy are created in Metabox. Any suggestions? Do you think this should work, and am I using the correct echo function? Grateful for any ideas. And look forward to more of your brilliant videos.
@@colderik has_term would be used at a post level to check if it has a term. For custom taxonomies you would use is_tax() developer.wordpress.org/reference/functions/is_tax/ However I was trying to use this yesterday for a project and was having issues where the entire page would disappear with the condition in place. Let me know if you run into the same thing
@@nickarceco That works perfectly for me - once I'd remembered to add is_tax() to the list of allowed functions! Thank you for your help. Hope you got it working in your project.
oooo thats a good question. It is a snippet that gives me about 11 more shades of each ACSS color. hence why I was using var(--shade-800) and similar variables. ACSS just reworked their color system so I may be reworking that snippet and potentially sharing that with everyone. Otherwise for yourself ACSS allows you to get the individual HSL values of every color so you can make your own shades. Super helpful.
Thanks a lot @Nicholas very nice tuto! i am staring using bricks, it helps me to learing via this tutoriel! i stuck at one point, i not have automatic css, so the css ( clickable-parent). not working. Can you help me to solve this problem? to have the full card clickable. please....
I apologize for some reason I didnt see this comment. I have a snippet to a mixin for clickable parent here: nickarce.com/products/clickable-parent-snippet/
Hi Nic, this i will consider pro level lessons. thanks for that ! btw i have one strange issue, not sure anyone has the same issue. my partial scss keep loading older version of the file everytime i refresh the site.or when i click cat link and back to "all blog post" all styling is gone.strange to me
Thank you Nicholas for this tutorial! 🙂 I wanted to ask: is there a method to translate into a different language the aria-label that Bricks automatically adds when using {post_title:link}? Or in case of non-English language I should just add the aria label manually?
@pixelstrata, I must correct myself. I actually didn't test it thoroughly the first time. It is indeed translated correctly, as the great Bricks' support pointed out. I apologize for bringing up a non-existent issue!
Hey Mate, Newbie here: would be nice to know the out of the box alternative to automatic css settings, that you took on that card, as I can't figure out how to create those three columns without it. My queryloop just has no end :( Also, you're explaining everything great, but a bit fast. And your custom code for the categories works, but with just one category, it shows it like this "o Category xyz" instead of "Category xyz o (+ Category zyx)"
Totally understand this. It's a hard balance because I truly believe and stand behind automatic CSS because its in my daily workflow so I want to show people how I use the tools I stand by. I'm not quite sure what you mean by the category code not working. You can send me a support request and I may be able to help you troubleshoot it nickarce.com/contact/#support
@@nickarceco which I totally understand, and your video seems to be for actual developers, which I am not. I could just follow to some extend, and lost you right there. Nevermind, I’ll figure out a workaround.
Hello Nicolas, Thank you for this excellent video. I'm looking for a solution to hide a button that doesn't have a url. (This is incorporated by a metabox field). Unfortunately, I haven't found a php function to include in the conditions element. Thanks for your help, and keep up the great videos!
Why do all of those conditions for each individual text / heading? Why not just put wrap cat stuff in a div.. and put the condition on that single div.. then simply anything you put in the div AUTOMATICALLY has the condition. And then another div aka wrapper for the blog stuff? Now you only have 2 conditions.. and 2 wrapper divs.. done.
To use SASS you would need to use wpcodebox, advanced scripts, or scripts organizer. I have found after trying all that wpcodebox is the best. There are other ways to right the css like in your theme or straight within bricks but you won’t have SASS.
Great video Nicholas, I've been looking for a solution like this. Do you know the function to do the same with WooCommerce archives by any chance? I had no luck with {echo:is_product_cat()}
UPDATE: Any functions you use inside of echo tags now need to be allowed through an allowed filter. You can see more info here: academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
I watched the tutorial again today. Thanks!
I was unable to make the dynamic titles work, but I made a PHP shortcode in my functions.php file and inserted the shortcode in my header container. Glad to send the code to anyone else who us having that problem. Wish I knew why it wouldn't work inside Bricks Builder.
It’s probably because of the newest update. Any functions you use inside of echo tags now need to be allowed through an allowed filter. You can see more info here: academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
@@nickarceco Awesome work! Learnt alot. So glad I found this comment though! I spent 2 hours trying to troubleshoot why it wasn't working haha. This should defs be pinned
@@nickarceco I'm glad I read this. I was having the same problem.
I am stuck right here, I believe. Would you mind sharing the code? Would highly appreciate it. Thanks in advance!!
Thanks Nick, this is such a time saver for multiple category archives. All worked as expect with Bricks 1.10...once I remembered that I had to actually add the additional 'is' echo conditions to the child functions.php. Doh! 🙄
I really enjoyed this video. Thank you Nicholas! I would personally love to see the styling being done inside Bricks if possible. 😘
Got it. If I get more responses like this I will switch over. Maybe ill alternate.
@@nickarceco yes Nicholas thanks for this much needed tutorial you covered steps that are not provided by other website developers. We want beginner video to build and style the blog page and blog posts and linking them. Much appreciated.
@@nickarceco yes nice to see the settings in the builder itself
I am loving every second of your tutorials! What I specially like is that you are not afraid of showing us advanced stuff. There’s plenty of tutorials for beginners, but it’s more difficult to find good ones when you are looking for tutorials that follow a professional workflow, good code practices and a nice UI/UX output. And you nailed those! Keep up the good work, Nicholas! 😊 Btw, I like teh way you work styling it via external scss stylesheets 😊
Happy you could find this useful and enjoy watching! ❤ I definitely want to try to make the more complicated concepts easy as best I can.
Haven't used saas before or codebox to produce partial. I realised watching this video how much much i misuse tools like codebox. Apart from that, all the information on using dynamic data is so good. Great to see how our approach workflow and styling. Thanks Nicholas.
**NOTICE**
After uploading I realized a few things.
1. I did not set the blog card to be an li element. I left it as a div inside the ul card grid. That’s a no no.
We can also make the conditions easier. You can do the below:
1. wrap your top blog content in a div and set the condition for that wrapper to only show on the blog archive page.
2. wrap your top category content with a div and set the condition for that wrapper to only show on the category pages
Now instead of making 4 or 5 conditions we have narrowed it down to two. Happy building!
Yeah I’ve been doing this for the past while - makes sense to use conditional display and not another template
I was thinking about that while watching the video. I do love this long format showing your process, thinking and problem solving. It feels like daily routine when building websites for clients!
@@alessiorealini9643 glad you caught it before me. I'll have to do more long form videos that show the breakdown of thinking.
@@AmandaLucaseu I'm not the only one! Woohoo! It just makes sense to me as well. Keep it all in one spot.
Nick, if I may add, you can use Template and disable the wrapper, so that on the front end, you don't get an extra div wrapper.
Super! Very clean and straightforward tutorial. A lot of good tips. That is exactly what I was looking for.
As a hobbyist developer, I don't have any special development tools, I would love to see the CSS styling inside Bricks.
Now I had time to see the video in full length. I think the styling in Sass is good, although I haven't mastered Sass yet. However, it forces me to learn. It's good to see that not everything works right away, even for a pro, and there's a lot to learn in troubleshooting. I also think it's excellent that you put the styling at the end of the video and don't style each element to death right after creating it, as you see in many videos. Thanks for the chapters as well. I add good tutorials to my library. There I have the ability to search directly for chapters, and also add my own notes. I will definitely spend several more hours with this perfect video before I internalize everything. Thank you very much.
I do want to make note to you. I am in no way a pro. I am in the same boat of still learning how to make myself more professional in how I do things. For instance I even forgot how to do the flex-direction: column-reverse; 😂 I'm very glad to hear that you are working to enhance your skills and not staying stagnant. We need people doing that in the wordpress sphere.
You make the best tutorials I've ever seen on Bricks Builder, please keep making more.
Thanks for sharing your knowledge and if you have a website, I would love to see it.
Wow. That is quite the complement. I was on my way to church when I saw this comment and couldn't help but feel an overwhelming sense of "alright. keep down this path it's genuinely helping people." because of your comment. Thank you sincerely. I am in the middle of working on a personal website. I do have an agency website magnifiedweb.com if you are interested in taking a look at that.
Amazing tutorial. Most teachers use the builders in house styling, your methods actually teach us how to grow and become better developers. Thats value right there!
This video was so informational, even beyond the dynamic blog. I have been looking for someone that shows their way of thinking while designing and showing best practices along the way. Your style of teaching is easy to follow and the fact that you show your "mistakes" actually helps in the learning process. Hoping you decide to post more frequently because these videos are great! Thank you!
Thank you Erika! I definitely want to make more “unpolished” videos that show thought process and mistakes. I’m glad you find them helpful to
Thank you so much for your video. I only needed one little thing from it, but I have been working on getting it to work for 2 days. You had a blog page that you had to add as a second template condition "induvial > blog (page)", to get the archive template to work. I also change the permalink to "/blog/%postname%/". I had everything working with all my CPTs but could not get it to work with the posts. Your little hint worked perfectly. Thanks
Nicholas, I love the work that you provide! Amazing Tutorial, Great in-depth details, and No cutting corners, It's extremely valuable.
Thank you.
I want to add this, I'm using different techniques on some projects, By replacing Category w/ Page - with (PHP Snippet) and then editing each category with its own template.
More work and hard to be honest. I've reasons for sure doing this.
thank you Kareem! and absolutely sometimes projects do require more templates. If you can get away with less then do it but there are always those cases.
Great tutorial. Didn’t mind you working in SCSS at all, was very informative. Thanks and keep up the work.
Subscriber earned!
Glad it was helpful to you. Thank you for the sub!
Watched the whole video and took notes! Many valuable nuggets especially in the styling part. Much appreciated! 👌
Very grateful it's of use to you! never hesitate to post questions if you have any. I try to get back to every comment.
Thank you for taking the time to do these video's and share your workflow, solutions and advanced techniques.
You are most welcome! sincerely hope you found them helpful.
This is fantastic! Love it when it works for me THE FIRST TRY! 🙏🙏
Wow! I’m really happy to hear this! Means it was time well spent making the tutorial! Thank you for implementing it on your project.
Another great tutorial. I was waiting for it! :) About the .stretch class: you put .stetch, not .stretch, that is why it didn`t work. :)
oh yup. that pesky stetch class
Love seeing your figure things out! Great format for the videos. Thanks Nick!
Ton of great stuff here, thanks Nicholas.
Nice! I love the clarity of your flow.
An absolute gem, thanks Nicholas!
Great tutorial, thank you Nicholas 😉
This is the first video I've watched from you and it simply blows me away! I love seeing the thought process and then exactly how to build it. I just got to where you're going to work on the styling and had to take a break to process the functionality but wanted to answer a question you posed; I would prefer to see the styling in Bricks.
Glad you are finding value!! I ended up moving my workflow to be in bricks for the local items and wpcodebox for global items. So definitely more bricks styling in the future
This was a fantastic tutorial - thank you
You are a great teacher. I just seen your first video and subscribed your channel.
Welcome aboard! Thank you for the sub.
Very good tutorial. So much insight from you. I am thinking of learning how to properly use CSS and the SCSS just looks beautiful. Keep doing more tuts!
Do it! I recently took the leap and it really helps you understand the potential of things you can create.
Thank you! High class content as always!
More please 😘
Fantastic video, so much value! Thank you!
Hi NIcholas
Thanks for the amazing tutorial!
I am fairly new to Bricks and WP in general and I have learned a lot from your videos. Please keep them coming.
Welcome to bricks! There is lots to learn but so much you can do!
A big THANK YOU from me!
Well done. Thanks for sharing your knowledge and doing it in such a thoughtful way. Much appreciated!
I ran into the same thing at the beginning of the video when having to set the archive conditions.
The reason this is weird is because in the WordPress settings you have to choose a "real" page as your blog landing page, even though this page doesn't directly need to have any content on it at all. It's just a placeholder that creates the URL for the blog home so we can use it in the WP settings.
So in Bricks, I create an Archive template and set the conditions to be blog home and taxonomies, but I also have to set it to run on that empty landing page too.
It felt weird to me as well, but without the empty landing page, we can't tell WordPress what page should be the blog landing page!
Thank you. I really enjoyed this video. Seeing your workflow and few more advanced tip
Really nice
Glad you enjoyed it! Let me know if you have questions I can help with.
3:24 I have lost for a big while ,Thank you
Well done Nicholas. It was really useful to walk us through your thinking process and the way you solved problems as they occured. +1 for a video with styling in Bricks since not everyone uses WP Codebox (but I think many will, after seeing your video). Keep up the awesome work!👍
Wow... First video of yours I've seen and I learned a ton. You do things so clean and beautifully.
Thank you so much Zach! Means a lot to me. Hope to keep providing more content in the near future!
Nicholas thank you for sharing your knowledge and skills great video and as other taking notes! looking forward to the next.
Great video Nicholas, thank you.
Great tutorial super useful 👍 more tutorials 😊
I really appreciate this video, thanks!
You are most welcome
This was incredible. Very valuable.
Excellent tutorial. Very nice explanation, and I have to say - I am very positively surprised.
Thank you, Nicholas.
Thank you sir! Happy to hear it was useful
Nice dude, I've been looking for something like this. I have saved it to watch later.
Thanks for the tutorial. Very valuable content
You are most welcome! Glad you liked it!
What am I doing wrong? I followed your tutorial. It has no effect on the archive page and get error
Parse error when saving the snippet:
parse error: failed at `&cat-gap: 0.6em;` (stdin) on line 47, at column 13 in SCSS Snippet: Global
Is there something I am missing.?
Very good. Thank you.
Thank you a lot for this awesome tutorial.
Learnt some very useful tricks, thanks.
Top notch! Keep it up!
Awesome tutorial! Would like to see you style in bricks aswell
I may be moving back to the builder thanks to advanced themer. We shall see!
Great tutorial, thank you. I'd like to see the styling in Bricks. It's also good to see how you do things with SCSS
I may be moving back to doing a mix of both. Currently working out what that workflow looks like
Hey Nick, I come back to this post often, it's awesome, thank you. Seems the 1.9.7 Bricks update adds an additional step with the new Echo: Function Names security step. I had to add 'is_category', to the filter to get the things working.
I'm a bit lost here. Where do we add "is_category" to?
Yeah...I am now expecting to get support requests and comments here regarding it haha Im glad they added it but at the same time its another step we have to take.
@@LeoKoo Hey leo,
Bricks now blocks external functions from running inside the {echo:} tag unless you specifically allow them to be ran. They show this in their youtube video under the "echo function names" area of the bricks settings
ruclips.net/video/z6q42bJvkxo/видео.htmlsi=sq_Bvw4tjA6lE4Qm
Your content are great for learning Keep doing man,
Glad you enjoy it!
You have to set the condition for your Blog Page as well as Archive because you probably have set the default “Home and Blog” page settings to be your blog. Wordpress Settings / Reading I think? If not it’s one of those settings. But just set your homepage and leave the blog dropdown empty. No more blog page template condition required 😮
sooo the only thing I can think is that the reading setting is to set the blog archive url? so if you dont set that the archive has no URL?
Great video, Nick. Just subscribed!
There is a lot of content out there but you are a great teacher with a lot of new knowledge.
Learned a lot of great tricks for Bricks.
I've already left Sass since CSS is getting so powerful, it also keeps me down to earth :)
All the best!
Appreciate the sub! Thank you very much! I hope I can continue to bring value to you. You left sass?? Would love to know more your thoughts on it
@@nickarceco I'm a raw/vanilla kind of guy. I prefer to avoid extra "layers" like Sass or parallel methods like utility classes (this one, maybe good for prototyping but terrible for production).
The tendency is that they eventually stop being so useful and we lost the evolution and momentum of the original technic.
But I love your workflow. Love to see it applied to raw technics :)
Wow, I learned so much watching this video!
The least I can do is the routine comment, like and subscribe to try and give something back to you.
Thank you, sir.
Thank you for the engagement. It’s a big help!
Thanks for the video. Could you make a 1h video about how to make a bricks builder website from scratch with your good practices?
I can certainly entertain the idea. What specifically has you stuck? What questions come up when trying to setup a bricks website? Where do you feel your practices arent up to a good standard?
Great video and tips
This is awesome, TQ.
Thanks for the video
Very Very nice and clearly explained
Would you mind sharing the json of the page and the css, I would love to have this as a reference file/point
Arce is such a cool name. I hope it's pronounced like "arse". I always wanted to know how to use the same template for archive and category archive, without putting every single thing in a class.
its actually pronounce RC like an RC car. but glad you were able to get something useful out of this video!
Amazing tutorial! So for my understanding I need a normal page for fun just so I can select it as an individual page in the template conditions on the template archive page?
I just noticed that there is no default archive page for taxonomy that would list terms. I would think we should have an archive for any custom taxonomy that lists all the terms?
Any ideas?
I would probably put these on the archive page. List out all the different terms. I would only do this if there were a ton of posts the user could find under each one. Otherwise I would just use a filter for them to filter down.
Thank you for the tutorial.
You set the card grid to be a ul for semantic html.
Shouldn't you set the blocks inside to be li as well? Or to use div tag under like this ul-> li -> div?
As it is in the tutorial, inside the ul you have divs.
As far a s i know, Element “div” not allowed as direct child of element “ul”
YES good catch! I could have sworn I did do it but looks like I didn’t. 🤦♂️ this is why on every project you go back through everything to verify.
A side question for you, if I may?
I have been tossing up between WPCodeBox and "Scripts Organiser" for some time. My preference has been "Scripts Organiser" for better autocompletion and cleaner UI. Now WPCodeBox 2 is out I see the auto-completion is way better now. Have you tried both, and if so, what makes you favor WPCodeBox?
One thing I see is that it now has auto-complete for ACSS variables. I have just written to them to ask if there is a filter to include your own framework variables.
I’ve played with scripts organizer a little bit and gave up on it after about an hour. The UI is better but the experience is much worse in my opinion. Having to jump between different screens to create or organize snippets wasn’t my favorite. Unless I missed something. And there was no folder organization like code box. Just on that alone I chose code box. And 2.0 with monaco editor (the same as vs code) is really nice to have.
Hi Nic, do you think its a good idea to place the blog heading and blog desc into one div and set conditions ? easier to manage i think ? less one set of condition to set, i'm not sure how the conditions impact the site speed?
Yes absolutely! You are thinking ahead! I actually made a pinned comment down below of all the little adjustments I missed and that was one of them. Absolutely great catch.
Hi, thanks for the great tutorial. I have a question:
If I have parent categories and sub categories, them I have the posts, what is the best approach to create a template to show the sub categories in a certain design when someone click a parent category, and when there are posts they show in a different design?
Hey I didn’t see this until now. Did you figure this out yet?
What an awesome video! Thanks for sharing. Just one thing, I cannot stand that human time difference. I hate not knowing when something was posted, it drives me nuts. Especially when we're talking about years. It can make a huge difference if something was posted in April or June.
Very very good point. I think im going to create a condition to show that {posted x days ago} if its no more than 1 month ago. then it changes to the date method. Good mix of both.
Can you please give an advice on how to learn custom post types with Bricks or MetaBox ? I need to learn how to structure tour packages/destinations custom types for a travel website. What video or course do you recommend?
i would search for kevin gearys videos on CPT's. they are very helpful
this {echo:is_category()} does not seem to work for me to display the category title
As of bricks 1.9.7 you have to add non bricks functions to an allow list for them to run in a dynamic tag like the {echo:} academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
@@nickarceco Thanks for this
any chance on some new tutorials, I would love to see one about setting up the theme style without AT and or ACSS
Hey Nic! Thank you for the tutorial very helpful!
I'm just wondering if I can create my own custom layout for my blog page: post highlight that is takes more space and masonry style cards.
Can I do those using Bricks?
absolutely! one way you can do this is by the below. We can set the card-grid to have something like three rows then we can target the very first card and set that to span all three so it takes up the first row. Something like the below
HTML:
CSS:
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card:first-of-type {
grid-column: 1 / span 3;
}
Great video! Keep it coming please! :)
you got it 😉
Great tutorial. I had created a page for my archive (forgotten where I was advised to do it...) - but I'm wondering is it strictly necessary and what are the advantages? Also, on the theme of keeping things simple, are there any pros/cons to using custom post types vs having everything under the native post type and assigning custom fields to categories? I guess using just native posts each post type would inherit the same permalink structure which may not be ideal...
If you are only doing the archive page and not category pages as well you could argue that you could just create a page with the archive URL and build it there but I prefer to have it as an archive template and cover my bases with making sure those category pages go to the same type of archive page.
As for CPT’s, always always use them. Dont put them all in pages and post and organize them by tags. That’s just plain ridiculous. Hard to organize and like you mentioned the url structures don’t vary by information type. Not great practice.
Question. I don't use bricks yet. Im looking for a solution to a woocommerce issue i have. Or rather custom checkout functionality.
I need 2 different checkout designs depending on if a coupon has been applied and the amount is zero.
Can a condition be made to check for that and completely change the layout, field order and button wording?
you definitely can. you will need to create a function to check for that coupon, but you can use the bricks condition builder to check against that function and show/hide things conditionally. The different field order will be a custom work. Maybe WS forms has this capability to create a checkout forms and you can show those conditionally? im not sure on that though
@@nickarceco ya when I saw the custom php working with the conditions I immediately thought this could work for my situation.
I subbed. I like your style and approach.
@@RobCooper Thank you Rob! appreciate you subscribing!
@@nickarceco Hey again (2 months later). Now that I just picked up Advanced Themer, I'm curious about your shortcut on the right side of the panel that takes you to conditions. Was that maybe moved in a later release? I see one on top of the left hand side panel when I activate it. It was nice to have indicated which elements had conditions on them but I can't find where to do that.
I've used the clickable-parent and it works fine, but when I want to use pseudo-classes to give the image some hover effect, it shuts down the ability to mouse-over the image part. The pseudo-class does its thing, but it seems to remove clickable-parent. It works fine again without the pseudo-class. Any idea what causes this?
You would have to give me a url for me to see. Couldn’t really tell ya from your description.
@@nickarceco that is very lovely sir, but I won't waste your time with problem-solving my ideas. Thought you might know it on the top of your head, since I'm sure it will come up for everyone at some point with these cards. Let me throw it on the Bricks forum tomorrow. Tnx anyway!
@@Joe-ss9cr send me a DM with the link to my twitter: twitter.com/Sleeplesskxng ill happily take a look. could be something really simple
@@nickarceco i thought I responded yesterday, but don't see the comment anymore. Sadly I don't Tweet (Euro). Made a a topic on Bricks forum though. BTW, found out yesterday we've been in contact before. You DM'd (is that a word) about my restaurant websites on Inner Circle a while ago.
@@Joe-ss9cr Oh yeah thats right! i remember. Good to see you here. I found the answer to your problem (atleast I think I did) and answered in the bricks forum
Hi Nick, I came back to your great tutorial as I'm trying to use the same template for a custom post archive that uses a custom taxonomy. I've changed the conditional statements to {echo:has_term()} (from echo:is_category()}) and the allowed list of echo functions includes has_term. But the conditional filter doesn't work. The CPT and taxonomy are created in Metabox. Any suggestions? Do you think this should work, and am I using the correct echo function? Grateful for any ideas. And look forward to more of your brilliant videos.
@@colderik has_term would be used at a post level to check if it has a term. For custom taxonomies you would use is_tax() developer.wordpress.org/reference/functions/is_tax/
However I was trying to use this yesterday for a project and was having issues where the entire page would disappear with the condition in place. Let me know if you run into the same thing
@@nickarceco That works perfectly for me - once I'd remembered to add is_tax() to the list of allowed functions! Thank you for your help. Hope you got it working in your project.
What is that ACSS Color Extended snippet? =)
oooo thats a good question. It is a snippet that gives me about 11 more shades of each ACSS color. hence why I was using var(--shade-800) and similar variables. ACSS just reworked their color system so I may be reworking that snippet and potentially sharing that with everyone. Otherwise for yourself ACSS allows you to get the individual HSL values of every color so you can make your own shades. Super helpful.
@@nickarceco hehe, already found it. ;)
@@nikoweb my first thought “he hacked me!” Second thought “oh yeah it’s in my snippets 😂”
Can you explain how you have your partials organized?
Absolutely. I actually have a video that covers partials and I cover how I organize: ruclips.net/video/_63kJayn8mc/видео.html
Hi Nic. another nice tutorial ! thanks ! question : the"page" blog is something you created isnt ?
Yes. And then under Wordpress settings > reading I set the “posts page” to that blog page
Thanks a lot @Nicholas very nice tuto! i am staring using bricks, it helps me to learing via this tutoriel! i stuck at one point, i not have automatic css, so the css ( clickable-parent). not working. Can you help me to solve this problem? to have the full card clickable. please....
I apologize for some reason I didnt see this comment. I have a snippet to a mixin for clickable parent here: nickarce.com/products/clickable-parent-snippet/
@@nickarceco Thanks a lot
Hi Nic, this i will consider pro level lessons. thanks for that ! btw i have one strange issue, not sure anyone has the same issue.
my partial scss keep loading older version of the file everytime i refresh the site.or when i click cat link and back to "all blog post" all styling is gone.strange to me
i have to click save button in the partial scss in order to load the style!
I actually just ran into this problem. its pretty frustrating. I think its a bug.
Thank you Nicholas for this tutorial! 🙂
I wanted to ask: is there a method to translate into a different language the aria-label that Bricks automatically adds when using {post_title:link}? Or in case of non-English language I should just add the aria label manually?
That is an excellent question and I’m not too sure. I haven’t had to play with other languages so that would be a good question for their support.
@@nickarceco thank you, I'll ask them!
@pixelstrata, I must correct myself. I actually didn't test it thoroughly the first time. It is indeed translated correctly, as the great Bricks' support pointed out. I apologize for bringing up a non-existent issue!
Hey Mate, Newbie here: would be nice to know the out of the box alternative to automatic css settings, that you took on that card, as I can't figure out how to create those three columns without it. My queryloop just has no end :(
Also, you're explaining everything great, but a bit fast. And your custom code for the categories works, but with just one category, it shows it like this "o Category xyz" instead of "Category xyz o (+ Category zyx)"
Totally understand this. It's a hard balance because I truly believe and stand behind automatic CSS because its in my daily workflow so I want to show people how I use the tools I stand by.
I'm not quite sure what you mean by the category code not working. You can send me a support request and I may be able to help you troubleshoot it nickarce.com/contact/#support
@@nickarceco which I totally understand, and your video seems to be for actual developers, which I am not. I could just follow to some extend, and lost you right there. Nevermind, I’ll figure out a workaround.
Hello Nicolas,
Thank you for this excellent video.
I'm looking for a solution to hide a button that doesn't have a url. (This is incorporated by a metabox field).
Unfortunately, I haven't found a php function to include in the conditions element.
Thanks for your help, and keep up the great videos!
Hey Christopher, did you ever figure this out? Apologies for the late reply
@@nickarceco Yes always :'( And i don't have found any soltuion for that.
@@christophe_s have you tried checking the field to see if its empty like this imgur.com/a/5o1SPPG
Why do all of those conditions for each individual text / heading? Why not just put wrap cat stuff in a div.. and put the condition on that single div.. then simply anything you put in the div AUTOMATICALLY has the condition. And then another div aka wrapper for the blog stuff? Now you only have 2 conditions.. and 2 wrapper divs.. done.
lol... i just saw that you corrected it.
I’m glad you caught it though. Means you’re thinking about optimizing your work.
Are you exclusive to Bricks?
Yes. Her and I are in a relationship 😂 but in seriousness, yes I use bricks for all my projects
Hi Nic, absolutely great video, I just want to ask do I need to get WPcodeBox2 to do things you do ? or is there a alternative choice.
To use SASS you would need to use wpcodebox, advanced scripts, or scripts organizer. I have found after trying all that wpcodebox is the best. There are other ways to right the css like in your theme or straight within bricks but you won’t have SASS.
Too many ads :(
Really!? I’m not even eligible for monetization and they bombard you with ads?
@@nickarceco Yeah it’s crazy! I could barely reverse, pause and play again with ads haha. What in tarnation
Great video Nicholas, I've been looking for a solution like this. Do you know the function to do the same with WooCommerce archives by any chance? I had no luck with {echo:is_product_cat()}
You were close! It looks like it’s {echo:is_product_category()}
woocommerce.com/document/conditional-tags/
@@nickarceco amazing, thank you!