- 13
- 20 418
Tobi Salami
Nigeria
Приєднався 9 лют 2015
Hey, I’m Tobi Salami, and my channel exists to help people get better at Dynamic WordPress Development! Whether you’re just starting out or already have some experience, I’ll show you how to build great websites, use the best tools, and make your freelance business work for you.
I’ll guide you through tools like Bricks, Elementor, and Crocoblock Suite of Tools to help you build sites faster and easier.
Want to create more dynamic websites but don’t know where to start? I’ve got simple, step-by-step tutorials using ACF, JetEngine, Jet Smart Filters, JetFormBuilder, and more. If you want to see this kind of content regularly, you would do well to subscribe and turn on the notifications so you can be notified of a future video.
Let’s make WordPress fun and easy!
I’ll guide you through tools like Bricks, Elementor, and Crocoblock Suite of Tools to help you build sites faster and easier.
Want to create more dynamic websites but don’t know where to start? I’ve got simple, step-by-step tutorials using ACF, JetEngine, Jet Smart Filters, JetFormBuilder, and more. If you want to see this kind of content regularly, you would do well to subscribe and turn on the notifications so you can be notified of a future video.
Let’s make WordPress fun and easy!
How to Build a Dynamic Component Based on Queries (Part 1) | JetEngine | WP | Crocoblock Tutorial
🌍 Create Dynamic Components in WordPress with JetEngine 🎥
In this video, I’ll show you how to build dynamic components in WordPress that allow for seamless data manipulation through JetEngine’s Query Builder. 🚀 Whether you’re displaying hotels by location or filtering content dynamically, this tutorial breaks down the process step by step.
📌 What You’ll Learn in This Video:
- Setting up Custom Post Types (CPTs) and Taxonomies for dynamic content.
- Creating reusable components with JetEngine.
- Using Query Builder to fetch and display posts dynamically.
- Linking query parameters to components for real-time data updates.
- Making it work with Elementor, Bricks, or Gutenberg-your choice of page builder!
💡 Why Watch This?This tutorial demonstrates how to design components powered by a single query, giving you maximum control over your dynamic WordPress content. Perfect for developers, designers, and no-code enthusiasts looking to enhance their workflow!
🎯 Key Features Highlighted:
- Real-time query by location
- Reusable dynamic listings with control over any query object.
- Optimized workflow for scalable WordPress projects.
🔗 Subscribe for Part 2 and Beyond!This is just the start of an exciting series on building dynamic components. Hit that subscribe button and enable notifications so you don’t miss a thing!
📬 Join the Community!
If you're interested in dynamic WordPress content, subscribe to my channel for more tips, tricks, and tutorials. Let me know in the comments which roadmap feature you'd like to see next!
🔗 Resources Mentioned:
- JetEngine plugin
- Elementor Page Builder
- Bricks Builder Page Builder
- Gutenberg
👍 Don’t forget to like, share, and subscribe for more WordPress magic! ✨
✉ Send me a message: tobisalami.com/consult/
[Please consider using this affiliate link when purchasing the Jet plugins covered in my tutorials. It supports me and adds no cost to your purchase price.]
Purchase JetPlugins: crocoblock.com/?ref=11962
Link to an article to help you understand contexts: tobisalami.com/understanding-contexts-in-wordpress/
My Social Media:
LinkedIn: www.linkedin.com/in/tobisalami/
Facebook: tobisalamidev/
-----------
Chapters:
0:00 - Introduction and Overview
0:32 - Demonstration of components
2:03 - Plugins used to build components
2:46 - Setting up the environment
4:00 - Configuring Query Parameters for Dynamic Listings
5:10 - Designing a Listing Template for Hotel Items
7:00 - Introduction to Components in JetEngine
8:30 - Adding Content Controls to Components
10:00 - Linking Query Parameters with Component Controls
12:00 - Testing Dynamic Filters for Hotel Listings
13:45 - Modifying Component Queries for Real-Time Updates
15:00 - Demonstrating Dynamic Query Results in the Editor
16:30 - Use Case Scenarios for Dynamic Components
17:00 - Wrapping Up and Call to Action
#Components #WordPress #JetEngine #QueryBuilder #DynamicContent #WordPressTutorial #Elementor #BricksBuilder #WebDevelopment #NoCode #WordPressPlugins #DynamicWebsites #WebsiteDesign #WordPressTips #WebDevTutorials
In this video, I’ll show you how to build dynamic components in WordPress that allow for seamless data manipulation through JetEngine’s Query Builder. 🚀 Whether you’re displaying hotels by location or filtering content dynamically, this tutorial breaks down the process step by step.
📌 What You’ll Learn in This Video:
- Setting up Custom Post Types (CPTs) and Taxonomies for dynamic content.
- Creating reusable components with JetEngine.
- Using Query Builder to fetch and display posts dynamically.
- Linking query parameters to components for real-time data updates.
- Making it work with Elementor, Bricks, or Gutenberg-your choice of page builder!
💡 Why Watch This?This tutorial demonstrates how to design components powered by a single query, giving you maximum control over your dynamic WordPress content. Perfect for developers, designers, and no-code enthusiasts looking to enhance their workflow!
🎯 Key Features Highlighted:
- Real-time query by location
- Reusable dynamic listings with control over any query object.
- Optimized workflow for scalable WordPress projects.
🔗 Subscribe for Part 2 and Beyond!This is just the start of an exciting series on building dynamic components. Hit that subscribe button and enable notifications so you don’t miss a thing!
📬 Join the Community!
If you're interested in dynamic WordPress content, subscribe to my channel for more tips, tricks, and tutorials. Let me know in the comments which roadmap feature you'd like to see next!
🔗 Resources Mentioned:
- JetEngine plugin
- Elementor Page Builder
- Bricks Builder Page Builder
- Gutenberg
👍 Don’t forget to like, share, and subscribe for more WordPress magic! ✨
✉ Send me a message: tobisalami.com/consult/
[Please consider using this affiliate link when purchasing the Jet plugins covered in my tutorials. It supports me and adds no cost to your purchase price.]
Purchase JetPlugins: crocoblock.com/?ref=11962
Link to an article to help you understand contexts: tobisalami.com/understanding-contexts-in-wordpress/
My Social Media:
LinkedIn: www.linkedin.com/in/tobisalami/
Facebook: tobisalamidev/
-----------
Chapters:
0:00 - Introduction and Overview
0:32 - Demonstration of components
2:03 - Plugins used to build components
2:46 - Setting up the environment
4:00 - Configuring Query Parameters for Dynamic Listings
5:10 - Designing a Listing Template for Hotel Items
7:00 - Introduction to Components in JetEngine
8:30 - Adding Content Controls to Components
10:00 - Linking Query Parameters with Component Controls
12:00 - Testing Dynamic Filters for Hotel Listings
13:45 - Modifying Component Queries for Real-Time Updates
15:00 - Demonstrating Dynamic Query Results in the Editor
16:30 - Use Case Scenarios for Dynamic Components
17:00 - Wrapping Up and Call to Action
#Components #WordPress #JetEngine #QueryBuilder #DynamicContent #WordPressTutorial #Elementor #BricksBuilder #WebDevelopment #NoCode #WordPressPlugins #DynamicWebsites #WebsiteDesign #WordPressTips #WebDevTutorials
Переглядів: 419
Відео
Build Dynamic Product Roadmap Page & Voting System on WordPress | JetEngine | Crocoblock Tutorial
Переглядів 1,1 тис.16 годин тому
Learn how to create a dynamic and interactive product roadmap page in WordPress using JetEngine's powerful Query Builder! 🚀 In this step-by-step tutorial, I’ll guide you through building a roadmap with categories like 'Planned', 'Next', and 'In Progress', complete with a voting system that automatically prioritizes items based on votes. 📌 What You’ll Learn in This Video: - How to set up custom ...
Build Front-end Dashboard; Manage Woocommerce Orders | Bit Integrations | JetEngine | JetFormBuilder
Переглядів 1,5 тис.14 днів тому
This tutorial shows how you can build a WordPress Woocommerce Client Management Dashboard from scratch by combining a few tools - BitIntegrations, JetEngine, and JetFormBuilder. You can let clients change order statuses from the frontend and do so without a page refresh. 🎁Use the Coupon Code "tobi40" to get 40% OFF on any BitIntegrations Plan: tobisalami.com/bit-integrations/ 👈👈👈 [If you use th...
The PERFECT Way to Secure Your WordPress Forms and Stop all Spam, in 11 Minutes!
Переглядів 1,8 тис.Місяць тому
This video shows how you can secure your WordPress forms completely including your login and signup pages so that you can almost completely stop all bots on your WordPress website. The method shown in the video uses Cloudflare Turnstile - a free solution to help you stop bots. Everyone, from beginner to advanced can follow the steps outlined in the video whether you use Elementor, Bricks Builde...
Build a Working Profile Completion Bar In WordPress using JetEngine Plugin | Crocoblock Tutorial
Переглядів 2,1 тис.Місяць тому
This video shows how to create a profile completion bar or prompt on a WordPress website using JetPlugins. The value in percentage of profile completion can be calculated automatically to get users on the site to complete their profile. The page builder you use here does not matter. As long as it supports JetEngine, it can be used to do what I demonstrated in the video. Please leave some feedba...
Create WordPress Forms That Auto-Update with Live Data | JetFormBuilder | JetEngine | Crocoblock
Переглядів 2,5 тис.Місяць тому
In this tutorial, you will learn how you can fetch anything in the WordPress database using a WordPress form on your site. The data fetch will be done without coding. You will not need to set up any manual conditional logic options. Everything can be fetched in realtime and returned to the form without doing a full page reload. Although the concepts discussed here can be viewed as advanced, a b...
JetEngine Query Builder - 25 Features You Must Know | WordPress | Crocoblock Tutorial
Переглядів 3,9 тис.Місяць тому
This video covers a lot of JetEngine Query Builder features that are very rarely discussed. You can skip through the chapters of this video to see all 25 features I discussed here including how to use JetEngine macros inside of the query builder and nesting queries, among others. Building queries in WordPress with a no-code interface using JetEngine, and do it correctly. Be sure to leave a comm...
How to Switch Queries in the Front-end without Reloading the Page - JetEngine | Crocoblock Tutorial
Переглядів 1,6 тис.2 місяці тому
This video shows how a person can make use of Jet Engine, Jet Smart Filters and the Query Builder to change queries in the frontend without doing a full page reload. The explanation offers new insight into a possibility of building something that mimics a Single Page Application where page content changes without reloading the entire page. Anyone can follow if they are using Elementor, Bricks B...
Build an Internal Notification System | JetEngine | JetFormBuilder | Elementor | Crocoblock Tutorial
Переглядів 3,1 тис.2 місяці тому
This video offers a new perspective on building a website's internal notifications system that does not involve the use of code. Everything is demonstrated with the use of Jet Engine, Jet Engine Query Builder, Jet Engine Data Stores, Jet Elements, JetFormBuilder and Elementor. Anyone can follow if they are using Bricks Builder or Gutenberg Blocks, since these builders support Jet Engine. Leave ...
The BEST Way to Setup Typography and Fonts in Elementor (2024) | Elementor Tutorial
Переглядів 2,4 тис.2 місяці тому
This video covers everything you need to know about how to set up font typography in Elementor. It's a complete guide that clears the doubt of those who may have previously been misinformed on how to correctly set up Elementor fonts in a way that is both scalable and maintainable. ✉ Send me a message: tobisalami.com/consult/ Font Size Type Scale Generator: typescale.com/ Font-size Clamp Generat...
Awesome video. This is something that can also help with separate design and content, while making it very reusable. Is there a way for ACF that you know? Love the thumbnail btw
@@techiesreviews thank you Lex! And no, I don't know of any Components functionality within ACF. -- I appreciate the feedback on the thumbnail very much!
Ah... tout ca pour nous mélanger encore
Nice to know this is possible with the components already. I wasn’t aware of the query capability for control values. I can see lots of ways that clients can dynamically add specific products, banners, call to actions in blog posts for example. To be explored… thanks for showing us
@@kevinrichter9397 you're very welcome! And you really do get the idea for the use cases. Pretty much any kind of control can be achieved. Including using Dynamic Tags that are not available to the queries, but will work on the component control values. First it'll be fetched into the component, than translated to the query. That used to be impossible! Thanks for watching
That's genius!
Thank you!😊
Looks interesting waiting for the part 2 for to know the usage of this in which type of situations
Thanks for watching! Part 2 is coming soon.
is it possible to create a kanban system in brix ?
What I showed in the video can be done the same way in Bricks.
Hello Tobi, thank you very much for this excellent tutorial. Your videos are always so interesting and instructive. I have a question: when you add the listing grid of the roadmap categories in the final page of the site, you don't choose any Custom Query. I thought this was a necessary step. Could you explain bit why it's not necessary in this case? Thank you.
You're welcome! It wasn't necessary because the listing grid added to the roadmap category was ALREADY based on a query. You only select a custom query in the listing grid settings IF the listing grid was not already based on a query, or if you want to change the query to some other query for that particular listing grid. In the case that I demonstrated, there was no need to change the query. It was already based on the query I needed. Do you understand? 😊
@@tobisalami Thanks, it's very clear to me now
Good video :) Do you have a lifetime deal of crocoblock? or what are you using? Also wondering, what elementor plan are you using? Do you let clients pay extra for elementor fees or do you take that cost? Wondering since i am planning to invest in elementor pro but im not sure what plan to choose and what payment agreement I should have with clients. Do you have any recommendations?
Lifetime deal? Yes. Elementor Pro? 1000 licenses yearly. There are different pricing models different developers adopt. I don't charge for licenses separately if I built the website. Many developers adopt this approach too. If you're maintaining the website, the license cost can be included in the monthly or yearly maintenance cost. I hope this helps.
Insight unlocked again. Please is there a video on responsive screen sizes?
You're welcome. No, I don't have one at this time. But stay tuned.
Great video! Quick question, how can I map a button to clear ALL notifications?
I haven't given that a thought. I'll keep it in mind for part 2 of this
Thank you, Tobi, for this wonderful and useful tutorial. I am always enjoying your tutorials. Please, how can I integrate Jetformbuilder with Paystack Payment Gateway? Can I use Bit Integration?
You're welcome. JetFormBuilder has a WooCommerce add-on. WooCommerce has a Paystack add-on. You can make the connection that way.
[erfect
great, keep doing that
Thank you!
THANKS Can you add ability to DRAG AND DROP btn PLANNED and NEXT
@@lwifunyomangula That's probably possible with a little bit of JavaScript. But I cover low-code to no-code mostly.
Great 👌 staff can you please do one for inboxes or private messaging between users
There's a video about this coming in the future.
wow 😍 great work!
@@victoriabormotova7248 Thank you Victoria! It means a lot, coming from you! 😊
This is really great work you're doing here. Thank you, you've saved me hours of work. Greetings from Switzerland
@@GRAUTIER thank you for thanking me! 😊 I appreciate that!
Excellent work Tobi ❤ i just subscribed
Thanks for subscribing! 😊
Amazin g bro
@@masum_techs thank you for watching! 😊
Amazing video!
@@leonardofavaretto2289 Thank you for watching!
@@tobisalami I've been learning a lot with your videos, man. Thank you so much!
@@leonardofavaretto2289 I'm glad to hear that! Thank you for thanking me. 😊
Just awesome bro mind blowing and out standing
Thank you for the feedback
Amazing stuff as always Tobi!
@@techiesreviews thank you, completely! 😊
Nice! I should try using this internally for my tutorials. Thanks for sharing.
@@daveden2 thanks a lot for your support!
As usual, amazing! And new thumbnail looks excellent :)
@@lanamiro8443 thank you very much!
Greatings from Greece!! Keep on the good Work!!
Thank you for your kind words! I will!
It would be great if it can update in real time after we voted.
It can. Just specify the ID of the listing on the datastore widget, and it will refresh without reloading the page. I will cover that in a subsequent video.
Firstttt
Ah! Marvelous! Thanks for watching!
I am working on a travel website i need to add a search box . one key and two filters and an Apply button it will redirect me to a post section which I search how do i do that with crocoblock
I don't have a tutorial for that at this time. But I can write this down as a suggestion.
This is an amazing video, thank you very much! I am trying to use nested queries in the Meta Query Clauses for a posts query, but it isn't working (tried IDs, titles, etc.). Do queries work in the Meta Query Clauses?
You're welcome. Have you tried specifying an id in the query and in the listing grid? It could be why this is not working.
NIce!!!
Thanks a lot!
Excellent video!!! at 17:30, you mentioned to choose Site - shortcode, but I cannot see at my side, wonder if needs Elementor Pro upgrade?
@@HappyHappy_1314 thank you. It needs Elementor Pro to do that. But if you don't have Elementor Pro, feel free to use a Listing template to do the same thing instead of an Elementor template. Put your form in the listing grid template. Now, inside of the Tables Builder column option, pick template and pick your listing grid template. It'll work the same way.
@@tobisalamithank you so much for sharing smartest way🎉🎉🎉you are awesome ❤
Excellent video! I need a simpler solution and I don't know how to do it, can you help me? I need the selection field options to change depending on the value of another field, for example: if field 1 receives the value '1', the selection field only displays the option '1 person', if field 1 receives the value '2', the selection field displays the options '1 person' and '2 people' and so on. In other words, it is a simple form but I would have to change the selection field options according to the value entered in field 1. How can I do this, can you guide me? Thanks.
I am not sure I understand your request. Are you saying that the number of options inside of the select field will increase depending on the number the user enters in the previous field?
@@tobisalami Exactly! I need a selection field to change depending on what was selected in the other field. But it is a simple form and I do not need to search for information saved in the CPTs, the options entered in the selection field will be manual.
As always, awesome video!!
Thanks a lot, Man.
In my opinion, a real jet engine is like a Swiss knife. It's really crazy. Thanks to you, I came up with an idea that I can apply to the website I am planning to create. I applaud your flexible idea of linking WooCommerce with bit integration.
I appreciate your kind feedback! Thank you.
Hi Toby, this is a great video. I have watched a lot of videos on this topic and yours explains it the best. Thanks and well done!
@@seaonau thank you for watching. I appreciate that!
Great video!!! Thank you!!! I have question. How did you remove the success message from the forms? Also, it is advised from crocobloc to not have many same forms on the page but rather on a pop up. I know this for listings. Does it have any issues with table builder? Thank you!
I just deleted the success message. That's how I removed it. I didn't find any issues while using forms within tablesbuilder. However, there's a recent add-on from Crocoblock JetFormBuilder that lets you trigger form actions with a button instead of putting the form on the page. This is best, as properties that need to be fired only fire after click. Maybe you can check that out and apply it to this use case.
@tobisalami you mean the formless endpoints? I could not understand them and make them work 🥲 I did manage to make a workaround for "bulk editing" which works great! You can bulk delete, change field info from select/checkbox/radio and other using jetformbuilder.
What a fantastic video, Tobi. I can see lots of applications for my personal use. Thank you.
You are very welcome!
Please mention that you use wocommerce order status meta key in glossary. Pending Payment: wc-pending Processing: wc-processing On Hold: wc-on-hold Completed: wc-completed Canceled: wc-cancelled Refunded: wc-refunded Failed: wc-failed
Thanks for putting it out for others to grab easily.
Great tutorials, Tobi. Keep doing great job! :) What would we need to do to get some feedback if form/status submitted successfully, eg green checkmark or something?
You are welcome! I actually took off the "form submitted successfully" message. You can leave yours or modify the feedback or style it the way you want.