Kadence Theme Builder Tutorial: How to Create Custom Layouts for Posts, Archives & Custom Post Types
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- In this video, you are going to learn how to create custom layouts using the Kadence Theme Builder and the Kadence Pro Add-on. Learn how to customize your single blog layouts, category or archive pages, custom post types, and pretty much anything in your website built with Kadence.
Enjoy!
Timestamps:
0:00 How to create custom layouts with the Kadence Them Builder
0:44 Overview
1:36 Installing Plugins and activating Kadence Pro Addon
5:58 Exploring the new template option in Kadence Elements
8:39 How to create a custom blog post layout
18:54 Custom Post Types Explained
21:20 How to Create a custom post type
24:47 How to add custom fields to custom post types
33:37 How to create a custom layout and display a custom post type
48:40 How to Create a custom taxonomy for a custom post type
53:05 How to Create a custom archive page for a custom post type
01:05:04 How to add a custom hero section to your custom archive pages.
01:10:00 Wrap up and Thank you!
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ Advanced Custom Fields: FREE
✅ Custom Post Types UI: FREE
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #kadencepro #kadencethemebuilder
![🔥[New Tutorial] How to Customize a Kadence Starter Template into a Unique WordPress Website](http://i.ytimg.com/vi/JCJPKQlPT3U/mqdefault.jpg)
Clifton. You just taught me how to create my entire website from scratch. Knowing that I have 0 talent and I did it. You are absolutely amazing.
Also what you have taught me. And everyone. These are very highly valuable knowledge. I would suggest that you make a course to sell.
I just don't know how else I can thank you. If I can afford to tip you more. I definitely will when my blog makes money.
Thank you. We used this tutorial to build a website for a builder client $10k project
Whoohooo!!!! That is AWESOME!!! Very happy for you and super glad the tutorial was helpful! Congratulations and I wish you much more success in your endeavors!😉😊😀
Its amazing. I am korean. I have had a big problem which i don't understand kadence theme. I am used brizy plugin to make landing page and homepage. My boss said that we don't use brizy but uses kadence theme. So i was panic because in korea nobody teach kadence and just teach elementor. Really thanks your tutorial. Expecially i really understood custom filed types and post. Thanks you bro!!
Very happy to hear this and glad this was helpful!
It's always beautiful waking up to a new Clifton video. Can't do anything else till I watch it. Great Teacher. Superb delivery. Thorough explanations, and one is able to do after watching. Many Thanks.
Wow, thank you! Thank you so much!
THANKS SO MUCH I LEARNED A LOT, hope to see more tutorials from you about Kadence
Thank you very much!
Hej Clifton, love your Kadence tutorials, thank you so much! I am checking back regularly for new content -- seems you are working on new projects. Good luck to you, I hope we will hear from you soon!👍
Thank you Atalanta! Please keep checking back. I am working on a slew of tutorials for the channel. Will be releasing them soon. I appreciate you!
@@CliftonWP That's great to hear, Clifton! Looking forward to finding new tutorials from you!👋
Seriously Clifton, your are the a LEGEND 🎖 !!! What an AMAZING tutorial about how to use DYNAMIC options in Kadence but also, a golden secret which is how to apply custom templates into the Archive Loop of any Custom Post Type, HUGEEE 😍!!! I am learning sooo much from you and your tutorials, your ROCK ❤️
Hey Carmelo! Thank you so much! Glad this is helpful! I appreciate you watching!
im addicted to your style of explaining, you make so much sense I LOVE IT tysm again Clifton
Thank you so much!
Great video. Thank you!
Another great video :)
Another excellent tutorial. Learned loads. Thanks Clifton.
Wow! Awesome walk through. Learned a ton.
Glad it was helpful Aaron! Appreciate you watching!
Great Tut, thanks for sharing!
This makes the applications of the custom theming endless indeed!
Yes it does!
Great tutorial - thanks!
You're welcome Alexander! Thank you for watching!
10/10 tutorial! thank you so much!
love the smile consistency!
Thank you!
Absolutely fantastic, thank you!
You are very welcome! Thank you for watching! 🙂
nice work Clifton!!!
Thank you kindly!
Loved this extensive tutorial. I'm using the Kadence theme since shortly and I'm only using little bits and pieces so far.
Hi Clifton. You are doing an amazing job and you have helped me a lot. Much appreciated.
Thank you so much Blair! I appreciate you!
Thanks so much Clifton. Just what I needed to start on a custom resources section. I'm planning to use Pods now that's it's supported. Would love a similar Kadence + Pods tutorial!
Great tutorial. You are an awesome instructor. And your pace is just right. I learned loads. More Kadence tutorials please!
Thank you very much! More on the way!
Thank you soooooo much!
Greatings from Austria
You are very welcome Stefan! Thank you for watching!
Thank you! Another great, informative video.
My pleasure! Glad you enjoyed it and thank you for watching!
Clifton you’re absolutely a great teacher, your videos are interesting to watch and you explain everything very detailed. It’s a delight to practice the lessons in Kadence, which I realize more and more after your videos that it is such a great theme!! Thanks and looking forward to more content on Kadence!
Thank you so much and very glad you are finding the videos helpful! Thank you so much for watching and more to come!
Awesome tutorial Clifton! This is exactly the information I was looking for to customize my blog posts and archives using Kadence Pro. Game on!
Thank you so much! I hope I have the opportunity to pay it forward to people I meet in the very near future.
Thank you Shawn! Glad to hear this was helpful for you. I appreciate you watching!
Excellent! Thank you Clifton! With your tutorials I'll master Kadence properlly. Please do some more! For Kadence Blocks / Theme PRO users
Thank you! More on the way!
I love your videos very well explained.
Thank you very much Jorge! I appreciate you watching!
Awesome tutorial
Thank you! I appreciate you watching!
Awesome Clifton 👍
Thank you Daniel!
Dear Clifton, thanks for the wonderful tutorial. Earlier I thought such a level of customization was only possible in Elementor which creates a lot of bloats & affects the page speed. Now we have a much better option in the form of Kadence. It's simply amazing what we can achieve with Kadence without compromising on page speed.
So thank you again for taking out your time to pass on this knowledge!
Thank you! You are very very very welcome and glad you found this helpful!
Thank you Clifton. You do a much better job at showing off the capability of Kadence for Web Developers than their own documentation does. Creating custom post types and using advanced custom fields need not be difficult anymore for entry level developers now that cadence gives you a completely visual interface. If only they are also allowed the type of conditional logic that we build into child theme PHP based templates.
Thank you very much Gray!🙏
Good Job - took you 8 minutes to really get started but after that, you got your confidence and really made a clear and easy tutorial. Subscribed
Thank you Scott! I appreciate you watching and thank you for the sub!
Detailed Tutorial. ❤️
Thank you so much!
This tutorial is phantastic - I love your style and ability to explain even some extra information that might pop up while creating that content... your channel is the best ressource to dive deeper into the possibilities of Kadence... I would love to see more WooCommerce insights around Kadence in future... keep up the great work!
Thank you so much Pedro! I really appreciate you comment and I appreciate you watching! Thank you for the Sub!
Dear Clifton. Not only are you the coolest guy on TH-cam, you are just about the only tutorialist who cares enough to answer our questions in the comments. Amazing.
Also, I have to say that the process covered in this tutorial seems (to me) to be fiendishly complex...and only due to your clear and detailed instructions would I ever be able to even think of trying this on my own website. Thank you so much.
Thank you so much! I appreciate the compliment and I appreciate you!
Awsome learned a great deal from you on this one :-)
Glad to hear it Darin! Thank you!
Thank you, Clifton.
You are very welcome Emran! Thank you!
Awesome Tutorial. I really like your presentation style and how you explain things in your very low-key (but methodical) nature workflow. I look forward to many more videos from you on the block editor and Kadence add ons.😀
Thank you Charlie! I appreciate you and more tutorials on the way!
@@webreignerstv you can purchase a license key at cliftonwp.com/kadence (affiliate link) or directly from the kadence website. 🙂
Very helpful!
Glad it was helpful! Thank you for watching!
Came over from years with the Divi theme. Recently started building numerous sites with Kadence and Kadence Pro. Your tuts have been invaluable for our learning curve. Many thanks, Clifton. Informative, organized, and a well-paced presentation. We appreciate you!
Thank you so much!!! I am glad the videos are helpful. More to come. I really appreciate you watching!
@@CliftonWP Yes sir. We will look forward to them.
wow thanks a lot, I learned a lot, and I will use that knowledge for my affiliate sites
Happy to hear it! I appreciate you watching!
Wow, finally, I now understand custom post type.
Very happy to hear this Marcos! I appreciate you watching!
@@CliftonWPThis is just for kadence pro?
Amazing tutorials for the Block Editor. Thanks a lot! Please consider taking a look at Nexter theme with the Plus Blocks and Blocksy with Stackable.
Thank yoo Zoltan! Nexter, Blocksy, Stackable and The Plus Blocks are on the schedule!
Very helpful
Much appreciated
Thank you so much! You´re awesome! Please consider a Kadence tutorial about a research center - how to present reasearch articles, books, podcasts ect., create filters by date and subject, how to present PDF's in terms of fx availability. Anything that inspire better research dissemination.
Thank you! I appreciate you watching! I'll give this some thought.
Truly amazing what can be done with this theme over the past 2 weeks i have almost watched every single video on kadence that you have created and it has really opened my eyes to what is possible. Great stuff and i hope you keep on making content like this, learnt so many news things you have been a massive help this would potentially of taken months and months of trial and error saved me a huge learning curve cant thank you enough.
Thank you Craig! I appreciate you watching and really glad that the tutorials have helped you. That is the one of the best compliments I can get! That my content has helped you in anyway. Thanks again!🙂
Excellent Tutorial. I just started listening, but this is again top notch content. May I ask which Custom Post Type Plugin you will show us next? You talked about it around 20:00 - is it Crocoblock or Toolset? I‘m considering using Kadence, plus the dynamic content plugin you recommend. Keep up the good work and thank you to be such a great Tutor!
This (and all of your tutorials) are fabulous. They are really helping me think through setting up my new website before I get started and create something that will be a nightmare to maintain. I do have a question about customer post types/custom layouts. How is SEO affected by them? Do they have the same "seo credibility" as a static content page? Also, what custom post type do you recommend (you implied that there are better paid options, but I don't see a video where you discuss custom post types again after this video.
Thank you Robin! I appreciate you and your kind words! I am working on a custom post type video with Advanced Custom Fields. Should be coming up on the next few days. SEO in WordPress works well with Custom Post Types.
Clifton top. As always.
Thank you!
Another super tutorial! I love the concept of using dynamic content but was wondering how I could use it for my wedding photography blogs. If I want to display posts/ pages based on Location and Venue, with multiple blog posts for each category how would you approach this?
Thank you Paul! What you are describing is very possible. You will need to add Location and Venue as individual taxonomies and attache them to your pages and posts. Then you could create a custom page, category page or layout that displays those posts or pages using Kadence Elements.
@@CliftonWP that's what I had in mind, i'm just trying to get my head around how to set it all up. Thank you for your reply, and keep those tutorials coming!
Amazing tutorial. Congratulations. If I want to put a product grid or a post grid on a normal page, is there a way to customize the loop with custom fields or other elements like the archive hooks?
Thank you Trin! The post grid/carousel allows you to select different custom-post-types, however, it doesn't allow for the addition of custom fields.
Please do more of these. For some reason, my youtube is chalked full of generatepress tutorials and not kadence tutorials. Kadence, hire Clifton to just make tutorials like this so that people buy your theme if you're smart. What is the difference between a content element and a template element?
Hi Clifton, Thanks for this tutorial! I'm having issues finding a way to indicate the category dynamically. Am I missing something?
Hi Clifton, thank you for all your videos. They are of great help. I also like the music you use in your intro. Do you mind sharing the name of that track?
Hey Thank you so much! The music is called Timpani beat by Nana Kwabena. Glad you like it!
Dear Clifton,
one question, how to customize categories pages ?
thanks a lot for your answer!
Could I create a shop page categorized by different products with the same concept of the theme above, adding dynamic content as desired? I’d also use Surecart Business for the e-commerce backend. Thanks for any help
Thank you! You absolutely can!
Hi Clifton, I just found your channel & thanks for the great content. I have Kadence on one of my sites & recently built a Single Post Template Blog with Elementor. All was looking good when I loaded it only to find out some hours later when checking on something on my site that it had changed the ENTIRE site to the same layout as the Blog post. 😱. I searched forever to try & find where I had slipped up & eventually, took the Blog post down & it went back to normal. Do you have any ideas of where I may have something lurking that has slipped through to the entire site when the blogs are loaded??? Random question I know but it looks like you really know your way around Kadence & set ups. Thanks, Colleen
Thank you Colleen! Hoping I can help here.🙂 I'd need to see your site with the Single Post Template assigned to be able to diagnose what may have happened. From your description, it sounds like the Single Post Template created with Elementor may have been conditional assigned to show on the Entire Website. This is a setting option when you create a Custom Template in Elementor. Let me know if I can help further!
Best tutorial! Is there a way to create custom design for CPT on home page as carousel with arrows?
Portfolio Grid/Carousel and post grid/carousel has certain limitations
It's possible to an extent with Post Grid carousel. If you want to take it further, you will need something like the toolset plugin which has additional functionality.
Terrific explainer... I finally get it. I now have a great Archive page. I use Ajax search Pro for my client, but i've discovered that when I place it at the top of my new archive page it repeats before every post... is there a way to avoid the never ending repeat ?
Thank you Tom! If you are seeing the search in every post, then your Ajax search has been placed inside the loop. What you could do is create and element that attaches to the archive page you created. You could hook it at the top and it would then be outside the loop and not repeat in each post on the archive page. 🙂Hope that makes sense!
@@CliftonWP …I see that now …absolute genius…thank you
This is great! Thank you for putting this together. I've been trying to customize post tags to show as individual pills rather than a horizontal row of text. Any tips on that?
Thank you Katie! I appreciate you watching. That sounds like a styling issue. Do you have an example I could look at?
@@CliftonWP Thanks for responding and yes, what's the best way to provide that?
@@yourfriendlydesigner You can post a link here or if you want to send it privately, send me an email to clifton@cliftonwp.com
Hi Clifton, Another great video 5 Stars. You have done a great job explaining how to build custom post types within the Kadence ecostructure. There is one question I would like to ask, in the post, where you place the body text, you had spacing between each paragraph, how do we get this replicated on the front end?
Cheers, John
Thank you John! In the tutorial, when creating the Agent Custom Fields, I used the textarea Custom Field for the Agent Bio. The textarea Custom Field outputs without formatting. If you want to retain the formatting, you can use the WYSIWYG custom field option instead. That will retain any formatting. Here is a quick video showing you how to do it. www.loom.com/share/6070e46213054de2b911278f061c118a. Enjoy!
@@CliftonWP Hi Clifton, Thank you so much for the explanation video. Can I throw a curve ball in to the mix, is there a way to change the layout to look more like Guternberg and not the old WordPress editor?
Cheers, John
Thank you John! Great curveball. :-) This is a little complex. Currently there isn't a way to pull in gutenberg blocks as a custom field using strictly ACF and Kadence Dynamic Content. It may be coming but it isn't here yet. There are other more powerful custom post type tools that are suited to doing that such as Toolset. (Toolset tutorials are on the schedule.) A workaround would be to create what you need as gutenberg blocks on a page, copy it to code and then paste it in the "text" or HTML section of the WYSIWYG custom field for the agent. It will then render your blocks on the front end. Alternatively in the creation of your custom post type you can opt to keep the editor and simply create your layout around the Gutenberg Block Editor and just replace parts of the Single Post Agent Layout instead of all of it. Similar to what I did with the Blog custom layout in the tutorial.
Since version 3 of Kadence things look very different. For instance as well as an advanced image block there is actually a featured image block. When I try and add a featured image block I don't see the option to add a featured image, only an option for featured image URL. What is the process for creating a custom blog template since version 3? I'm actually happy with the default blog template but just wanted to add my own custom footer.
Great tutorial! Does this also work with woocommerce products and archive?
Thank you Thomas! Currently Kadence dynamic content will pull standard fields but does not currently pull product data yet. I anticipate that is an area that will be coming soon considering how quickly Kadence is improving.
I am looking forward to this, Kadence is getting better and better and soon I will move away from Elementor
Nice tutorial Clifton....
I had a request.... Is it possible for you to show us how to add custom CSS from say codepen to Kadence theme and blocks to customise archive pages, buttons, links, etc
Thanks!
Thank you Sounak! Do. you mean just how to add CSS to style elements in Kadence? If so, please stay tuned, I'll put one together showing some CSS work. In the mean time you can always paste your CSS in the customizer of your website, even if you are using the Kadence theme.
@@CliftonWP yes! style the different elements of the theme and page.... using codepen codes to customize native kadence blocks like buttons, archives, link styles, tables, etc
What do you think of Getwid? Hope I am spelling it right, it's late and I'm a little tired.
Getwid is great. Very nice blocks.
Bro, that's a good tutorial but I have problem no dynamic data shows in preview.. Please help me in displaying it, do i miss something ? I am new to wordpress, please explain .. thanks in advance
Hey Clifton, I have been watching your video since I started working with Kadence. One quick question, can we build custom layout of woocommerce pages like Cart, Checkout etc. with the same concept you used for blog post page in this video?
Hey Ahmar! Thank you for watching. Yes, technically you can customize the Cart Page and Checkout page using the elements feature in Kadence. However you would be customizing the hook areas around those pages, so for instance you could add a custom header or page header to your cart or checkout or you could add a notification box or pretty much any layout you want. you could also customize the Woocommerce Account page this way too!
@@CliftonWP It seems like I can add anything AROUND the content that is generated by [woocommerce_cart] woocommerce shortcut. But I have no control over the content that is generated by this shortcode, right?
@@ahmarraza3625 That is correct.
11:08 where did you get that dynamic content icon button? also i dont see an advanced headings block, i only see advanced text. Please help~
Hi Figgyminx! Kadence recently updated the Advanced Heading Block to Advanced Text Block. The dynamic content icon shows up if you have the Kadence Pro addon installed.
I am concerned about the Wordpress 5.9update coming next week and how it will affect the Kadence theme / Blocks experience. Should we hold off updating for a while ?
Hi Tom! I know that the Kadence Theme and Blocks will work fine with the upcoming WordPress 5.9. They've been preparing for it and are quite ready for the release. That being said, I highly recommend that you not update your WP install to 5.9 when it releases on January 25. It's better to wait a few weeks as they iron out all the bugs that will inevitably be discovered when more people are using it. I typically wait 8 weeks or more when the WP release is not a security release. (WP 5.9 is not a security release) The Kadence them will not be enabling full site editing by default in their theme, however, Kadence has full site editing capabilities already and is lightyears ahead of WP + Gutenberg. Some of the new features in 5.9's Gutenberg will work well with your Kadence site out of the box such as the drag and drop of the sections in the layout tree or what is known as list view. 5.9 looks very promising, but I recommend waiting before you update. Your sites will still work fine. 🙂
Question: Not too far off topic but is it too much to combine Buddy Press,and Woo Commerce on one site. Also great work.
The important thing with Buddyboss is to ensure you have very good hosting. I have not experienced any issues using it with Woocommerce.
Hi Clifton, thanks for this video! Just a question -- why bother with custom post types when you can just use Elements to create a custom template?
Great question Daniel. Custom Post Types allow you to better organize your content within WordPress. They allow you to separate characteristics and features such as custom fields from the default post types of Posts and Pages. In addition Elements require a custom post type in order to apply a custom template. I hope that helps!
@@CliftonWP Thank you!
Hey Clifton, I've built a website for a client using Kadence, with about 6 services pages (default wordpress pages, each with a unique block design) and a home page (default wordpress page) that functions as a directory to the services pages. There's a mega menu as well, linking to the 6 services pages. I want to make a section in the back of the website where the client can easily modify or alter the text content in all pages and mega menu, without having to use the block editor. For each of the six services there's a headline, a short description, and a long description, an image, and this information is repeated across the website. For example the short description for each service is used in the mega menu and appears in a list of services on the home page. So I'm thinking the best way to make a place where the client can edit all this content is to make a custom post type with no editor ("SERVICES") and advanced custom fields ("Service 1 title", "Service 1 short description", "Service 1 long description", "Service 2 title", "Service 2 short description", "Service 2 long description", etc.). Then I would link all this dynamic content into the existing services pages. I learned about custom post types and advanced custom fields after I had made the homepage, 6 services pages, and mega menu...
@@user-be5hi9rg3f Daniel, what you are describing is exactly right. That is the solution to how you would accomplish this..
@@CliftonWP Thanks so much
hello, I want to create an archive template, tell me please with which custom hook can I replace the content of the content on the archive page
Hello,. you'll want to create a Kadence Element and select the "Template" option. Then add your archive content and in the element settings, select the placement to replace the archive content of the post-type you are working with.
@@CliftonWP Thank you for your answer, maybe you misunderstood me. I created my own template, but it doesn't work to replace the current content, because there are no hooks Replace content archive blog. But there are Custom Hooks, and I can’t find what is the meaning to write anywhere
24:20 Probably miss pick Custom Fields
Kadence should pay you.
😂Thank you Bamyan!
Must have "pro" kadence to use this method?
Yes!