- 325
- 253 456
WP Easy
Australia
Приєднався 26 вер 2020
WordPress and related skill set tutorial videos.
Bricks Builder: : Query Loop anything from any API! PART 2
Hey all,
This is a follow up video with updated code to allow for Indexed Array values and also a custom formatter callback.
Watch ua-cam.com/video/ia-tXt2f0Ho/v-deo.html first
Code is updated on GIST linked in previous video.
This is a follow up video with updated code to allow for Indexed Array values and also a custom formatter callback.
Watch ua-cam.com/video/ia-tXt2f0Ho/v-deo.html first
Code is updated on GIST linked in previous video.
Переглядів: 108
Відео
Bricks Builder: : Query Loop anything from any API!
Переглядів 1,1 тис.4 години тому
Intermediate Level. PHP Coding In this video, I show how to * add a Custom Query to the Bricks Query Loop * add custom controls to the query for our settings * add a dynamic tag to access deep array values using dot notation * consume API Endpoints for our Query Loop: - Google Reviews - DummyJSON.com posts This demonstrates that you can use any API that returns an array of items and display the...
Bricks Builder: Create reusable and easily modifiable icon sets.
Переглядів 48321 годину тому
In this video, I show you how to create a set of linked SVG icons using only Bricks Builder features i.e. no addons whatsoever. The set is easily extendable and variations can be created by overriding single CSS variables.
WordPress quick-start Plugin Starter using AI and PSR4 autoloading.
Переглядів 163День тому
This video walks through creating a WordPress plugin: - Local by WPEngine for localhost development. - ChatGPT - using a prompt that I will share in the video description - GitHub Copilot - which the base plan is now free for all Github users - VSCode - free code editor - Composer for PSR4 class autoloading Local: localwp.com/ CoPilot: github.com/features/copilot/plans VSCode: code.visualstudio...
Create a noise texture background with radial gradients. Uses Bricks Builder
Переглядів 340День тому
Hey all, a super quick video inspired by a question in another forum. This video shows a way to have a background color, with a noise texture overlay, then a set of dark radial gradients on top. Sites used:| www.noisetexturegenerator.com/ www.base64-image.de/ www.noisetexturegenerator.com/
Xmas gift for Advanced Themer users
Переглядів 1,2 тис.14 днів тому
This video has an updated version of the Framework created with Bricks, Advanced Themer and SCSS (In AT). Get the JSON below for importing. No fancy thumbnail, editing or timestamps. :) I install a base WP with Bricks Builder, Import the framework with AT. I then create a Sticky Header using the framework. Note: This framework is experimental only. I use it for personal projects and working out...
Bricks Builder: Focus Trap for improved accessibility
Переглядів 29814 днів тому
Hey all. This is just some JavaScript code to create a generic "Focus Trap" which can be used on Element structures for improved accessibility. Basically, when a set of focusable items has this "Focus Trap" and one of the focusable elements gets focus, the keys "ArrowUp", "ArrowDown", "Home" and "End" navigate thought the items. There is also an option to auto click the items when they get focu...
Bricks Builder: Walk through creating your own CSS framework and applying to templates
Переглядів 1,1 тис.Місяць тому
No fancy thumbnails or editing here :) This video show how quick and easy it is to create and use our own CSS variables and create templates using Bricks Builder. I'm travelling ATM. So no apologies for sound or video quality, :) Take it or leave it. And no.. I will not be sharing code. The intention is to show you how to di it yourself.
Bricks Builder: Styling Forms - CSS Targeting Bricks Form, ProForm
Переглядів 3502 місяці тому
See ua-cam.com/video/IRysDAs3jC8/v-deo.html first. This is episode 2 of styling forms in Bricks Builder. In Episode 1 we just styled the tabs to look like a stepper, with the intention of styling the form elements the next video. Questions I got from Episode 1 were all about Bricks Forms and Bricksforge ProForm, none about WS Form. So I assume most of you use the former two. So in this episode ...
Bricks Builder: Simple flexible bento grid for media
Переглядів 5322 місяці тому
This video shows a flexible way to manage multiple variations of a Bento style media grid using a single class and template.
Bricks Builder: Styling Forms - CSS Targeting
Переглядів 3962 місяці тому
In this video I use WS Form to create a Stepped/Tabbed form. I then use the Bricks Class/CSS system to style the tabs to look more like a stepper. WS Form does also have a Progress element. I wanted to show this method of styling the tabs. Because there is quite a lot to cover, this episode covers the basics and styles tabs to look like a stepper. I will create another episode showing how to st...
Bricks Builder: Difference img, figure, picture tags
Переглядів 6372 місяці тому
This video shows the difference is use and purpose of img, picture and figure tags.
Bricks Builder: Add Background images 2 ways
Переглядів 8622 місяці тому
In this video I show you two ways of adding background images with Bricks Builder. Method 1: Is simple CSS, quick and easy. Method 2: Uses an Image Element, only slightly more difficult but with some benefits.
Bricks Builder for Newbies, Episode 6
Переглядів 7832 місяці тому
In this final episode, I break from the "No Plugins" ethos to using my favourite plugin "Advanced Themer" Before you ask, "No you do not need plugins". However, AT definitely has some awesome features that make Bricks quicker and easier to work with. To demonstrate, I create some content. Lastly, I show how you can export / import all settings using AT.
Bricks for Newbies: Episode 5
Переглядів 4192 місяці тому
In this episode, we take the WordPress site with Bricks Builder and a fully functional Style Guide based on our CSS Variable framework. We then create a "BluePrint" site with WP Local and then deploy a new site using the BluePrint. This is so easy to do. The sites could be used as discardable scratch/learning, or client dev sites. In the next episode I will replace the color management to use A...
Bricks Builder: Newbie Series Episode 3
Переглядів 7772 місяці тому
Bricks Builder: Newbie Series Episode 3
Bricks Builder: Newbie Series Episode 2
Переглядів 1,1 тис.2 місяці тому
Bricks Builder: Newbie Series Episode 2
Bricks Builder: Newbie Series Episode 1
Переглядів 1,1 тис.2 місяці тому
Bricks Builder: Newbie Series Episode 1
Bricks Builder Dynamic Data tokens for newbies.
Переглядів 5442 місяці тому
Bricks Builder Dynamic Data tokens for newbies.
Bricks Builder +AT Advanced Themer. Advanced CSS SASS Framework.
Переглядів 1 тис.2 місяці тому
Bricks Builder AT Advanced Themer. Advanced CSS SASS Framework.
Bricks + MetaBox Events in multiple Timezones
Переглядів 3143 місяці тому
Bricks MetaBox Events in multiple Timezones
Bricks Builder: Background decoration with a clip-path
Переглядів 2183 місяці тому
Bricks Builder: Background decoration with a clip-path
Bricks Builder: Positioned Masked Background Image
Переглядів 3473 місяці тому
Bricks Builder: Positioned Masked Background Image
Bricks Builder: Blob background shape with Gradient Overlay
Переглядів 3403 місяці тому
Bricks Builder: Blob background shape with Gradient Overlay
Bricks Builder: Code Element run once
Переглядів 2813 місяці тому
Bricks Builder: Code Element run once
Bricks Builder: Interaction Animations Tamed with a single Global utility class set.
Переглядів 6943 місяці тому
Bricks Builder: Interaction Animations Tamed with a single Global utility class set.
Bricks Builder: Reusable cards Part 2, CTA and Hero layouts
Переглядів 4224 місяці тому
Bricks Builder: Reusable cards Part 2, CTA and Hero layouts
Bricks Builder: Reusable components with CSS Variables and BEM
Переглядів 1,4 тис.4 місяці тому
Bricks Builder: Reusable components with CSS Variables and BEM
Great video. Curious, how would you pas an API key? Would any parameters go into the result path?
Check the GIST for the Google Reviews. In that example I add a Control for the API Key and PlacesID. How you send the API Key will depend on the API. You may send it as a query parameter or it may need to be an Authorization header. The result path is just the key path for the array you got back from the API.
@@wpeasy Thank you..
Bookmarked! Can't wait to watch!
Thanks, very helpful
Very interesting, I like your approach making calling just about any API accessible to Bricks. Great stuff
Great stuff Alan, thanks
Thanks very much for this, Alan! It doesn't seem to work for me when dealing with stuff inside square brackets, though. (tags in the dummyJSON, for example). Is this the same for you?
Ah OK, that would be an indexed Sub Array. You would need to either create another dynamic tag or a function to use with {echo:} that just gets that array and formats an HTML response. Alternately, you could have test in wpe_get_deep_array_dot_notation, if the result is an indexed array, return an HTML LI ??
@wpeasy legend. Thanks for the pointers! I'll check it out and post my results if successful :)
Please expand on integrationg Google Reviews, thank you!
There is code for that in the GIST. On the Google End, you need to create an API Key in Cloud Console, then find the Places ID for your business.
Thank you good man! Keep it up. This is the contet we are missing in this community 🌲
this is insane timing for a upload, it was just recommended to me (uploaded 6 hours ago) ive just spent most of the last day figuring this out, i pull data from a google sheet via the json api. nice simple video and gist code.
Doesn't work, as you forgot to either add the itchycode to the git rep or the link to the article.
Sorry guys I pasted the wrong code in the GIST files. Just updated.
@@wpeasy Perfect, thank you.
Not bad ❤
Awesome man! Exactly what I need! Any ideas how to implement pagination? Especially when the api is limited?
It depends on the API response. You would need to output an LI with page links. How you create this would be dependent on the API data for pagination. You could then just link to the current URL with a query param for the page, then add that to the API Call.
Dude you are doing what i wanted to fix 😁 awesome
Smart!
That was awesome. Thank you very much!
If you are using Elementor Pro, you don't need to use this workaround. Once you done with your popup design, go to Publishing Settings -> Advanced Rules, then set Show up to X times: Times [1] Count [Per Session].
high quality content and simple to understand. you did amazing on this video. you have a new sub . reuqest on making more of this on Bricks and real time senarios life video. thanks
Hi there! Thanks for the detailed tutorial, but it looks like Elementor changed something and it no longer works :(
Probably. Elementor has changed a lot in 2 years. I haven't even used it for 18 months :)
unfortunately it doesn't work anymore.
Probably. I haven't used Elementor for more than 18 months and a lot has changed :)
A awesome lesson. I hope you are aware of how much value you bring to the Bricks community
Thanks for your kind words.
Great Presentation, Must Say. Need more videos like this, on plugin development with help of AI...
👍
Thank you so much for this amazing video! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?
Please more videos of accessibility!!!
Thanks a lot for sharing this, and for all your time and effort! It's really much appreciated!
Is there a speed advantage over a framework like CoreFramework?
I'm not sure what you mean by a speed advantage? They are both just generating CSS, so there should be no difference. As far as workflow, I haven't used Core, so I'm unsure. I think Core would be better if you want a full UI to manage your Framework and want it for more than just Bricks?? I personally like managing my own framework with SCSS. So it depends on your own preference.
@@wpeasy generating or having raw code in your css might have a difference in speed right? I use core .. mainly advantage is automatically generated things like shades, etc...
@@jpk6916 I'm not sure what that means? CSS Is generated when you edit it. With the AT Method, shades are generated by the UI. The only real difference is that Core is a single UI. Both methods generate CSS in their editor. On the frontend, it is just CSS, there is no compiling, so no performance difference. Core looks like a great centralised way to create and manage your framework using a UI. But not every AT user has a Core license, so this is just another option.
@@wpeasy Thanks a load for your explanation. I get it now. Great you help the people like this.
Great job …and Merry Christmas !
That's a wonderful gift. Thanks 🙏
Thank you for amazing vid. The website is not longer active. How can I access the code?
Thank you very much!! Such valuable inputs...
Thanks Alan 🙂
Please continue with accessibility videos on bricks
i got serious problem to show video in a blog post after ajax call will this help? also i got css problem with oceanwp ... thank you for the video
Not quite what I was searching for, still thanks.
I don't use elementor but having the same issue What should I do? Please help me.. I don't understand coding
Still using WordPress. Bricks Builder + Adavnced Themer
Didn't work for me, and it did not seem very smooth in the video when it re-enters view. I used this bit of code (adjust animation type/speed to your liking): Class: txt-anim CSS: .txt-anim.animate { animation: fadeIn 1.2s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(15px); /* Example entrance effect */ } 100% { opacity: 1; transform: translateY(0); } } JS: <script> document.addEventListener("DOMContentLoaded", function () { const elements = document.querySelectorAll(".txt-anim"); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const el = entry.target; el.classList.remove("animate"); // Remove class to reset animation void el.offsetWidth; // Trigger reflow to restart animation el.classList.add("animate"); // Add class to start animation } }); }); elements.forEach((el) => observer.observe(el)); }); </script> Hope this helps
Yeah, and the video is quite old now. A lot has changed in Elementor since then. I have learnt since then to state a date, builder and plugin versions on any new videos :) Also, I have not used Elementor for around 18 months :)
@wpeasy yeah of course. I completely understand. I am curious though. What CMS or builder are you using now? If you're still doing similar stuff.
what a shite video
Thanks you so much. Really helped me a lot. I used it with bricks builder and crocoblocks jetsmartfilters. Works axaclty the same. Bricks theme has the select2 dependency built in so no need for the additional php when using bricks builder.
This code still works effectly end of 2024! Thanks, was looking high and low for this, so strange Elementor does not have a build in solution for that.🤔 It works well over here (flexbox containers), but I encounter a strange issue in Chrome and Opera:
Thank you so much. I have come to the same conclusion. Other frameworks are great and all, but CF has no in depth documentation and 400 USD for 100 ACSS stylesheets is too expensive IMO. So making your own mini framework and understanding why everything is there and what it does is way better for me.
just what I was searching for, thank you!
I am curious. Where to place your global css in this framework? In customize theme css file or Advanced Themer Global css? For example, I want to have css to apply to a block or container, which will make the siblings elements fade out if I hover over one of the child elements. It makes sense that this should be the global class and not the part of the element css. Thank you!
thank you!!
Thank you for your time and effort. Great series.
Nice approach for a custom framework. Where you use the clamp generator, there is a big mistake by using 30 (rem) as you say pixel what effectively isn't. 30rem would be 300px in a Bricks scenario. Correct would be 3rem for the maximum value if anyone is following along and getting weird sizes, that's why. ;-)
Very nice, I've heard you mention your Frame-Work many times and you've really solved many of my questions about your approach.
I think creating your own framework, is in general a better, cleaner way to go for a number of reasons. Now to get really good at creating templates. Thanks for your hard work, would love to see more.
I agree to the point of custom own frameworks. Much better, more precise, lighter....
Great video, well done! =]
What is the effect on performance when using component variables for each new element? Will this method bulk up the CSS stylesheet, or does the fact that you already defined and reuse global variables keep it efficient?
That is the beauty of the bricks class system. You can apply the class to as many elements as you want to, Bricks only outputs the class once. So the overhead is negligible.