This is my first shot at a video tutorial. I’m brand new using ScreenFlow and the mic is just the one on my MacBook Pro. Hopefully, I’ll get better over time. Also, if you benefited from the video and do not own LoopBuddy or a WPMU membership, please use my affiliate links below if you plan to purchase. Thanks!
Resources used in the video:
- Link to the Reading List on the Infinite Banking Concept Web Site
- LoopBuddy from iThemes
- CustomPress from WPMU (see bottom of post for information about using Custom Post Type UI)
- 3000 Custom Post Type Icons
Very Important Note:
When you create your Custom Post Type, be sure that you do not name the slug of your CPT the same as the slug of the page that it will be displayed on with LoopBuddy. If you do, all manner of badness will occur, including a potential breach of the space-time continuum. So, don’t cross the streams, Venkman.
Here is the CSS that was pasted:
/*Book Grid */
.books-grid {
width: 125px;
height: 250px;
float: left !important;
display: inline !important;
padding-right: 15px;
text-align: center;
}
.hentry {
border-bottom: 0px !important;
margin-bottom: 0em !important;
}
.books-grid-image {
margin-left: 5px;
}
.books-grid-title {
line-height: 1;
font-size: .8em;
font-style: normal;
width: 125px;
}
/*Books Detail Page*/
.books-detail-title {
color: #A87F10;
font-size: 1.25em;
font-weight: bold;
line-height: 1.3em;
text-align: left;
}
.books-detail-author {
padding: 15px 0px;
}
.books-detail-image img {
margin: 0px 10px 15px 0px !important;
float: left;
}
.books-detail-return {
text-align: center;
background-color: #DAD8D9;
padding: 5px;
display: block;
margin: 75px auto;
width: 50%;
border: 1px #888 solid;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
Grid Items Not Gridding?
If your posts are not displaying in a grid, try putting the float on the .hentry rather than the .books-grid. I’ll betcha that will work.
Using Custom Post Type UI instead of CustomPress
Custom Post Type UI will not allow you to create custom fields by itself, which makes doing what this video describes impossible. However, a nifty little plugin called More Fields will allow you to add custom fields to Custom Post Types and gives you the kind of control over what they look like (single line text, textarea, etc) that CustomPress does. One day I’ll make a video demonstrating this process. But it’s pretty straight forward:
- Create your custom post type using Custom Post Type UI
- Add custom fields to your custom post type using More Fields
- Put the custom field key you created in step 2 in LoopBuddy’s custom fields item.
Related Posts:
How to Buy a MacBook Pro for Cheap 
WorryProof WordPress – Backup Strategies for your Web Site 
How to Fix the "Your Cart is Empty" Error in Cart66
How to Connect Securely on Public Wifi
Nathan, nice work on the video! I’ve wondered about a good solution for this without coding custom theme elements… Thanks for posting!
I was lucky enough to be one of the first to view this video production – Thanks Nathan.
This is an excellent video! I had been wanting to get into learning how to do this easily and your video was perfect for providing explanation and visual confirmation when I needed it.
Thank you so much!
This video tutorial is excellent and have given me the exact information that I need for my next project – and explained in a very easy and understandable manner.
Well done!
Thank you, Nathan, for putting together such an informative tutorial on Loop Buddy and CPT. I’ve struggled with this and your information has turned on a light bulb for me.
Fantastic! Very well done, informative, excellent pace, and easy to follow.
Thank you for that tutorial, it was so helpful. I am new to LoopBuddy and needed exactly the details and the walkthrough you explained.
You did an awesome job for a first tutorial. Keep up the good work.
Thanks for the encouraging words Melanie! I’m glad it was helpful to you.
Hi Nathan,
I’m using the free custom post type UI plugin. I’ve managed to complete every stage apart from I can’t understand where to find the Field IDs with this plugin to enable loopbuddy to work with the custom post type.
I know you did say that it should work with any custom post type plugin but I’m tearing my hair out with this trying to find where the field IDs are hiding!
Any help would be much appreciated and I might still just have some hair left :-}
Many Thanks,
Dave
Hi Dave. I’ve found what’s needed to make this concept work using Custom Post Type UI and updated the post. Thanks for the question!
Sorry shoot the newbie! thanks a million Nathan much appreciated! you’ve got a great wordpress resource!
[...] padding : 5px ; display : block ; background-color : #DAD8D9 ; margin : 75px auto ; Supercharge WordPress with LoopBuddy + Custom Post Types :: NathanIngram(dot)com [...]
This is your first video tut?!!
What an absolutely brilliant tutorial. Well done and thank you!
Thanks for the kind words! I’m glad the video was helpful to you.
Nathan
I picked up your link from one of the ithemes tutorials this week that I attended.
Kept it open overnight and watched it today. This is just the thing I am looking for to explore some amazon blogs that I intend building.
A fantastic first video, I think you are pulling my leg when you say this is your first effort… Top marks
Hope you get round to adding the 2nd video regarding the free custom post UI. It would top it off.
Keep up the good work.
Kev
Thanks for the compliments, Kevin. I put this out there to help people, and knowing that it does is encouraging. When you get your project done, let me know. I’d love to have a look!
Excellent demonstration! I’m impressed with your clear instructions and the whole flow of the tutorial. I’d used custom-post-types before loop buddy was around, and it was a LOT more work! Thanks for taking the time to put this together and for sharing it.
Thanks Valerie. LoopBuddy definitely makes the world easier!
[...] based on CPT and LoopBuddy. Here’s a tutorial on my site on how I created this system using LoopBuddy with Custom Post Types. Until now, something like this would have required PODS to pull off. Notice the random book widget [...]
Nathan,
Great Demo! I’ve had LoopBuddy on a shelf in the closet for the last 10 months and now I finally understand how to use it effectively. Thanks!
Thanks Ray! I’m glad it helped. LoopBuddy is amazing and the more you use it, the more applications for it you find.
Thank you!! I have been looking for this solution for a long time. Excellent job on this tutorial. I really appreciate it.
Thanks for the comment Nancy. I’m glad the video was helpful to you!
Great job, loved the video. Thank you for the information. I do have a questions, do you know who to use Easy Custom Content Types for WordPress from http://codecanyon.net/item/easy-custom-content-types-for-wordpress/234182?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=mordauk
I love this plugin, I have used it in the past and it woks great, it also has more filed options. But i can not seem to get it to work with Loopbuddy. Do you have any suggestions?
Thank you,
Will
Hello Nathan,
Very impressive tutorial! Now I know why Benjamin Bradley mention very often about you.
I have started using Easy Content Types (Code Canyon) with Loopbuddy.
Just to show you two jobs:
This is the custom post type made to display a small selection of books, note also the Cart66 integration: http://www.earthdog-runningdog.com/books-for-sale/
And this is another cpt I am working right now: http://wp-web.co.uk/beyondchocolate/testimonials/
To answer to Will:
Easy Content Types works fantastically well with LoopBuddy.
When you create a Meta Box and assign to it a field like text, or any other from the avalaibale ones you can then call them using the layout editor in LB dragging a custom field in the editing area and assigning to it the meta_key. Eg. If your field is “Name” the mata field name in ECT will be ecpt_name.
Just play a bit with ECT + LoopBuddy and you’ll see that is not that difficult and best of all….ZERO CODING.
The only manual coding is the CSS part to style the layout the way you (or your client) like.
Thanks a lot Nathan, look forward to meet you again at the next Benjamin webinar compatible with the U.K. time zone…:-)
All the best
Roberto
http://www.ciaoweb.co.uk
Very nice work Robert! And great info for Will about ECT. Be sure to introduce yourself in the chat room if you see me.
Nathan this is a fantastic tutorial. It has really helped me understand how to use Loopbuddy and ECT. The only thing that I can not get to work is the css where the grid is displayed. My items are showing up, but they are not aligning left, just all vertically. I am a complete newbie at css mind you. All I know is what I have played with and researched. My css for the grid is based on yours above. Could tell me what I am missing? Any help or direction would be greatly appreciated.
here is a link
http://memphissewingmachine.com/used-sewing-machines/
css
/*Product Grid */
.product-grid {
width: 212px;
height: 200px;
float: left;
display: inline !important;
padding-top:5px;
margin-left: 32px;
margin-bottom: 14px;
text-align: center;
border-top: 1px #555 solid;
border-left: 1px #555 solid;
border-right: 1px #555 solid;
border-bottom: 1px #555 solid;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
}
.hentry {
border-bottom: 0px !important;
margin-bottom: 0em !important;
}
.product-grid-image {
padding-left: 5px;
padding-right: 5px;
}
.product-grid-title{
text-shadow: 2px 2px 2px #86848e;
line-height: 1;
font-size: 1.2em;
font-style: normal;
width: 195px;
text-align:center;
}
Thanks Gerald for your comment. Try putting the float on the .hentry instead of the div for each item. That might work for you.
You are genius. Thanks Nathan for a quick reply. That worked great. Now I am going to go find out why it worked. Thanks a lot!
Hi Nathan,
i have really struggled to get the divs to display inline..
I must be missing something or new versions of theme and WP have weaved their web to confuse me.
I have tried everything to get the divs to display inline but no matter what i have tried they are refusing to display as required.
bummer
the tutorial you delivered was great though, thanks a tonne.
M
[...] Loopbuddy - http://nathaningram.com/tutorials/supercharge-wordpress-with-loopbuddy-custom-post-types/ [...]
As I mentioned in an email, this was an absolutely terrific tutorial,..one of the best I’ve seen. Thanks Nathan!!
I reproduced your steps using CustomPress and LoopBuddy but I’m using Headway. Everything worked except for the grid layout. ( I just get a vertical list of books).
I am new at CSS, but did experiment a lot with the float: left; statements.
Do you have any idea how difficult it is to make this work with Headway? Headway is integrated with Loopbuddy, and I did tell Headway single page layout to use the correct Loopbody query and layout. But when looking at the HTML in firebug, there were a lot of interleaved divs between the various “book” classes ( books-grid etc.)
Hi Craig, you may try floating the .hentry rather than the div. If you post a URL or send by email I can have a quick look.
Thanks Nathan. I did buy a domain at HostGator (CraigWHarris), but have not uploaded my local practice site to it yet. I’ll try some more experiments, and upload to live this coming week so I can have more meaningful discussions.
Thanks again for the response and suggestion!
Hi Nathan
Thanks for the excellent video.. Totally helped and much appreciated!
Wondering if you had a thought/idea for this… any way to have hard returns/breaks in a multiline custom field box.
i.e. recipe site.. 5, 10, 15 ingredients – that the user would paste in with bullets.. but have each on its own line.
The alternative would be to have X amount of custom fields.. but ya never know how many you might need.
Make sense?
Any thoughts?
-Adam™
Actually – found out that you can add html in the fields – so for now works!