Custom Post Types and Theme Builders Part 10 Meta Box Views

hi this is david mccann for web tng in this video i want to look at meta box views wordpress natively supports custom fields and the ability to create custom post types but wordpress doesn't by default provide any way to show them on the front of the site there are a large number of third-party options to solve this this series on custom post types and theme builders has looked at a number of these solutions and this tutorial looks at metabox views in part 9 of the series we looked at how to create a custom post type using metabox now we turn to metabox views the metabox extension for creating content templates for custom post types i set up a test site with the free cadence theme and here are the installed plugins meta box is the core framework plugin that all the metabox extensions rely on the metabox core plugin doesn't have any user interface this is the metabox all-in-one extension that comes with some of the premium versions of metabox metalbox all-in-one allows access to all of the metabox extensions i have wp reset pro and wp vivid here for resetting the site between testing sessions this is the meta box website and in the previous tutorial in this series i showed how to install metabox the metabox all-in-one plug-in how to create a custom post type so we're continuing on from there and now we're using the metabox extension called metabox views metabox views is the metabox solution for how to show your custom post type and custom fields on the front end of your website you can see here that they have a description that says with metabox views you can just select fields you want to show fill in some parameters and done that makes it sound very easy we'll see what's really involved as we step through the process in the tutorial before we leave the metabox website i want to show you that they do have some documentations and videos for metabox views so metabox has pretty decent documentation if you need it now back to the test site i used metabox to create a custom post type called books i added some books and as you can see each book has three custom fields the book author the author's image and a link to the author's website however when we look at the archive for books the default archive that cadence gives us this is the best we can do this side doesn't look bad but the featured image is really huge and if we look at individual books wow this is kind of overwhelming and we see the standard post fields the title the post meta the content and comments area but again we don't see any of our custom fields so to fix the templates and show the custom fields we're going to need to do some theming you access metabox views here from the metabox menu in the admin here's views and you start by creating a new one and this is the interface that you're going to use for creating the views you give the view a name then here's an editor area for the template itself the html here's an editor for the css and here's the editor for javascript then over here is where they have a list of all of the fields that you can insert into your template there are the post fields the taxonomy fields the user fields the current logged in user or the post author site fields query fields and these are used when creating the archive or you're looping over the results and then the views area so if you've created other views you can insert them into a new view to nest them so this is pretty powerful here then there's the option to save your draft or publish now here it says that it uses twig and there's a link to the twig documentation and that you can run a php function using this mb dot syntax and this is a meta box proxy to the wordpress functions so this is another powerful feature of metabox views that you can use you have access to any of the wordpress functions and wordpress has a lot of them now here's where you choose your settings for the view to say what the view is for you have the options for the singular or archive or a hook custom for short code or code so for our book single we want singular and then you add rules to say what it applies to so it is for singulars for books okay and then if you needed to add more rules you could here and then you have the option to replace the entire page including the header and footer the layout between the header and footer or only the post content area so i'm going to choose only post content area and i'm doing that rather than replacing the whole page or everything in between the header and footer because i want to leverage the cadence theme as much as possible i'm kind of lazy i don't want to do more than i need to and if we do only the content area for instance then we could have a sidebar using the theme sidebar so i'm going for this and then we have an option of where we want to put it before the post content after the post content or to replace the post content which is what i'm going to choose and then you have order and name which you would use if you're using multiple views together and that doesn't apply here so i'm going to just leave that as it is so i'm going to publish this to save it and i think what i'll do here is i'll insert a field just the post title and you see when you insert fields it puts it in these double curly braces and that's a twig syntax so actually in doing this i really didn't need to use twig much so but i'm just mentioning that now i like to build things up step by step so i'm going to update this and then i'm going to go to the front end of the site and we're working on single books so let's see what one looks like didn't take away our featured image the title the meta or the comments but look the content is gone and all that's left here is the title which is what we have in our view so this actually makes sense because we told metabox views that we just wanted to replace the content area now fortunately cadence and many other themes good themes have a lot of customizing options and so i'm going to go into the customizer and cadence has a really cool feature they let you customize the individual layout and the archive for custom post types unfortunately they don't have an option to put the featured image next to the content this was kind of the best i could do without altering the aspect ratio of the featured image so i'm going to go here now and i'm going to start turning stuff off i'm turning off the title and that got rid of the title and post meta i'm going to turn off the featured image and then you have an option to turn off comments also and metabox has an option in the insert fields that would insert it back but i don't really see any reason to do that so i'm just going to leave this on for now and publish this and then let's go out of this now okay so here's our book single so far at this point i'm going to start building up this view step by step adding the html and css until i get something i'm happy with but i want to tell you this process took a few hours and what i'm showing you here in the video is kind of the final result you know i've kind of reverse engineered the final result to show you the steps i went through so i'm not really showing you everything i went through a lot of places i stopped i looked at the documentation i googled for wordpress functions and whatnot looked up stuff about css grid so i'm just putting it out there so you don't think that i know everything and i just snapped my fingers and this all came together anyway what i want to do is i want to put the featured image on the left and the content on the right have a two column layout for the book single so what i did since i want to use the theme as much as possible is i went to the cadence user forums and i searched for grid to find out how the theme is creating its columns is it using bootstrap is it using foundation how are they doing it and so what i found here is that the developer is answering a question that someone else asked he tells them they're just using css grid okay so now i know what to use i'm not going to use bootstrap or something like that so i go back to my single template now and i put together some html for the grid columns the left and right grid columns now the way that css grid works is you declare the outer container div as your grid container and then the inner divs become your columns and i put an inline style here for background colors just so we can see that it's working all right so now i'm going to add the css here see this outer div is dcm book single is the class for that class i'm saying it's a grid background color white so i'm going to hit update and let's go take a look and see if anything's changed good here are our left and right columns they are stacked they're not left and right because we have to add some css some code to say that we want them to be columns but we do want them to be stacked on mobile so by default we want them stacked on mobile but if we have tablet or desktop then we want them to be in columns next question is what are the theme breakpoints so again i return to the cadence forum and i found a question my own question i asked back in june what are the cadence break points so below 768 is mobile okay so i put together some css now to turn these into columns so here i'm saying if it's below 769 this container is a grid template and has two columns first column is 20 of the content and the second is eighty percent so save that go back and look and here we have our two columns excellent so things are going how we want next step i guess is to add the featured image so i'm going to delete that and now insert a field we have post thumbnail and i want the medium large and i want an image tag you have other options for different parts of the image information but i'm going for image tag here i put that in and we see it's going to fill in the alt text and it fills in the width and height information let's save this and go see what we've got excellent let's start with the post title i'll do an h1 and now let's insert the post title so that's good and now let's try inserting the post content and let's save that and see what we've got okay so this is going fairly quickly the next thing is to add the post meta in here so let's see span i'll say buy and then i want the author display name user display name so i think it should say author display name here but anyway okay and then we'll do a divider and we'll say on and we'll want the post date from wordpress settings that looks good all right so we have by author on and now we want to say comments and show the number comments so we have here this actually inserts the whole comment area not the number of comments we don't have that under term user site query or view so i did some googling and i used this metabox proxy to call a wordpress function to get the number of comments so i'll paste that in okay get comments number okay so i'm going to save this and let's go check now good we've got our post meta now normally on themes like if we go to look at a page that the theme created this is actually a link to the author archive if you have comment links here then that's a link to the comment area down below and so if i was being real conscientious here i would turn these into links to do that but that's a kind of more work and i have a shortcut i'm going to show you later so i'm just going to leave it like that for now so now i want to add the custom fields below the featured image so that's going to be in this column and the first thing i want to output are the categories the books have a genre category so that i can style and center those i'm going to put it in a div and now then we want to output the list of categories so if i look at insert fields we do term name and now let's hit save refresh nothing there so i don't think term name was the right thing let's go to terms and we'll do term name here same thing so that's not going to do it for me so again i googled and found a wordpress function that will do this for me and i use this metabox proxy so get the term list and it outputs the list and you can specify you know how you divide them to the delimiter i'm dividing them with a comma here okay so now let's update that and take a look good historical fiction so the genre is there now i want to output the author's photo so i'm going to go to insert field and we have authors image the thumbnail is fine they are square images i want to output the image tag so now we have something interesting metabox puts this in a for loop this is twig syntax and that's because it allows you to actually add more than one image when you add an image field and so if there were more than one image it would output more i'm just going to indent that let's save that and take a look there's the author's image okay and now we want to create a button to take the user to the author's website so i'm going to add link to author's website actually i know this is going to be an anchor tag so i'm going to add that and then i'm just going to guess because it's a pretty good guess that the theme has a class of button and then i'm going to go visit and we're going to put in the author's name website okay i'm going to save that if the class wasn't button if cadence had a different class and i'd again need to go to the website and search for that or ask in their support forums to find out what the class is all right so now we have everything output here and we just need to do some styling to make it look nice okay so i'm going to go back and i'm going to add a div around this so here's that anchor tag but i put a div around it so that i can say button div so i can style that and we already have a class for the categories so i modified the css and this is what i came up with so inner wrap that's actually the theme container around the content and i noticed that on the site see how it's got this very very light blue color so i matched that then here's what we had before for the outer div and then i added some padding for the second div for this div i added some padding for it and then i centered the author's photo i centered the categories i centered the button i centered the text on the button inside the button and then if it's on tablet or desktop i added some padding to the top of the featured image so now i'm going to save that and if i've done everything okay then the output should be good and here's the final result and so that all looks good all right so before we continue on there are a couple things i just wanted to show you point out here and those are having to do with the editor see how when i've highlighted one div it highlights the matching div so that's a nice feature of the editor so the matching tags are nice but one thing i noticed is that the clipboard is cleared when you do update and maybe that's not a big deal really except that as you're building things up step by step you try something you try say a little css code and then you go to the front end and you hit refresh and you say oh that didn't work i want to undo that change well because you had to save it in order to preview it that clipboard ability to go back is lost anyway it's kind of a minor thing but i wanted to point that out that the editor was sometimes a little bit difficult in that regard okay so anyway this is the book single so next we go on to creating the archive okay so i go add new this time we'll have book archive and down here we'll say archive add a rule and i'll say book archive i don't want to be the whole page we have the option then between layout between header and footer or only the post content area and this time i decided to go for the layout between header and footer kind of show you what that would look like and kind of show you what i was thinking in this case so i'm going to publish it again kind of trying to build things up step by step i'm going to insert field and then go to query and this is what the documentation says to use for your archives so i'm just going to put the post title in here and i'll save that and let's go to the front end and look at our book archive okay there are all the titles and everything's right here against the header and i had the thought to look at the page source so if i go down here so here's the header right there going up and then here's the footer right here going down well i know that cadence has in many modern themes have some content areas that are used for different things so what i did is i changed it to be a draft and i went back and updated this again and this time when i looked at the page source i went down and found and these things that start article then there's another one starts there those are the rows with the book in each row here are the content classes and divs that the cadence theme is using and then if you go down to the bottom you see now here's the footer and there are a few divs after the last article after the last row i decided i wanted to preserve those and so what i did is i copied all this out into my text editor and i just left one article row and got rid of the header and footer anyway what i did is i put this on the bottom and then i went and copied this out and put this above and i took a modified version of the article element to try to kind of recreate what we have going there now what i saw here is that cadence has this here for the way where it's declaring its grid columns but i'm going to do it but since i'm going to do this a little differently i modified this div got rid of this and just kept the content wrap class so save that let's go look and see what this looks like now okay so now i have the rows stacked because each one is an article element so what i'm showing you here again this kind of end point is what i came to after a lot of trial and error i know it's not as helpful when you have somebody just paste in a bunch of code but you know it took me several hours to create the book archive and i'm sure you don't want to watch that whole process okay so the next thing that i want to do is i want to add my divs in here for the two columns there's one and here's the other one okay we'll say left and right then we'll add our css okay so we'll add our class here to declare the grid dcm book archive and we'll add that here as well okay let's update that go and take a look so we have now our columns and now we need to do the same trick add in the media query okay and update that now let's go refresh okay so now we have our two columns so we're making progress okay so let's start adding the content so here i want to add the featured image and here again we're going to do the medium large and we want an image tag let's save that and go take a look okay so that's fine we notice that the images are you know by default slightly different sizes so we're going to need to add some css to size those and also in your archives usually the image is a link you can click on it so we're going to need to change this to make it a link so i changed this into an anchor tag with the post url which is this field here and then i gave this a class so that i can size and style the images typo there let's add a little bit of css in for our image and let's save go take a look and see what we've got okay so now we're looking a little bit better let's go ahead and see if we can size those images a little bit okay so i'm going to add some css here i'm going to center the image say it's 80 of the width and the height is auto see what we get now okay and centered and our images are all the same size now so that's progress for the part on the right i took a shortcut and so what i did is i copied the article part out from here and i paste it in there well you can see that is like a mess but then what i started doing is i went through and i substituted out where it was static text and put in the variables here's the link to the post url all right so you get the idea you see what i'm doing there so like here is the author name in the database all right the date okay so i'm going through and doing that for all of these link here you see this comes with a link to the comments so then i added the comments number here we already did in the single version and then when i tried to do the excerpt from here we have post excerpt okay so let's just look at so far and the excerpt didn't show up but you can see look i've got a link here and link to the comments so that's good so for the excerpt i had to go use this metabox proxy and a wordpress function so get the excerpt all right so i went through and i did the date format you know the the date time and everything okay so you get the idea on this and so now i'm just going to paste in kind of the finished result everything between the article tag you know all of the article everything between the loop i'm going to delete and paste in the finished result okay and then i'm going to add the css that i added and then after the loop i added a spacer div so i can have space between the rows in my css i added something to make that that very light blue okay so let's update this and here's the final result and see i have links here and it looks pretty good so for discussion and conclusions one thing that became instantly clear was that that marketing blurb on the metabox website about views where with metal box views you can just select fields you want to show fill in some parameters and done that shouldn't be relied upon when planning how long it's going to take you to create your views this is true at least for the first few times when you go through the process to create the single and the archive took the better part of a day i imagine once i had done it a few times i would build up a library of code that i could use on new projects and it would go quicker but that's something to keep in mind this is very developer focused when i created the archive i took that shortcut and copied in the html from the cadence themes version of the archive loop that turned out to be a good job even though it was a little daunting especially because for the post meta is it inherited the styles and the author and comment meta had the links to the author's archive and the comment area if i had done something like that for the single template it would have picked up those styles and links as well in terms of the code editor i guess it was better than notepad but at times it was a bit painful especially because the editor clipboard is lost when you save because what i was doing is i was experimenting i would try something i would save i'd switch to the front and to see what it looked like and if i didn't like it i want to go back and put back what i had had before and that wasn't possible i'd have to try to remember so that was kind of a bit of a pain if you have two monitors i recommend putting the page with the preview on one monitor and the editor on the other and that would make it go a little faster in terms of the editor on the plus side you know the opening and closing tag matching worked well so that was a nice feature the panel with the fields where you could pick your fields and they'd be inserted that was helpful and the ability to use the metabox proxy syntax is very powerful i didn't really have to get into twig that much i've used it before and i'm generally a fan having the css and javascript tabs is a plus because then your styles and javascript code are only loaded when that template is used which is a nice convenience now i didn't see a way to queue a style sheet or a javascript file or load other resources within the views editor so that might be a nice enhancement for the future i didn't show adding a custom field on the archive but doing so would be the same process just clicking on a custom field from that fields panel and going in it'd be really trivial to do and that very easy so that's powerful if you want to include custom fields in your archive overall my conclusion is that metabox views is a developer or power user tool if you're used to the elementor theme builder or beaver themer or oxygen or some of the other theme builders out there then using the metabox views editor is a little bit painful however if you put performance and code optimization first then you might not mind the process because it's all very lightweight it's very powerful it's a step up from creating php theme templates but in the end it's a similar experience so this is my walkthrough and review of metabox views there's a text version of the video available on the web tng website along with other tutorials and reviews and resources i hope you found this video interesting thank you for watching

Channel: David McCan

Views: 908

Keywords: WordPress tutorial, Meta Box, Meta Box Views, Theme Templates, Custom Post Types, Custom Fields, Meta Box Tutorial

Id: roIrjweYn_8

Length: 33min 18sec (1998 seconds)

Published: Wed Dec 23 2020