Display The Latest Products - P1: Meta Box + Gutenberg | Meta Box Tutorials

hi guys welcome back to meta box tutorials today we're going to use metabox and gutenberg to show the latest products as you can see here if you are using a theme without any page builders or just use only gutenberg this tutorial may work for page builders or a theme that already includes a page builder we have other tutorials as well product is a custom post type and it needs custom fields to input additional information so on my website i already installed metabox core plugin to have a framework to create custom fields it's free on wordpress.org the next one is meta box aio you will have it when you get the ultimate bundle or lifetime bundle or the developer bundle if you haven't had it you can get the individual extensions that i'm showing you now first mb custom post type and custom taxonomies it's a free extension of metabox to create custom post types you can also download it on the wordpress plugin repository next as mb views which helps you to create templates without touching the theme files it also generates a shortcode so that you can display the templates anywhere you want and the last is meta box builder this premium extension provides you with a ui in the back end to create custom fields easily please make sure that you've enabled them all now let's start go to meta box create a new post type now in the menu a new menu named restaurant appears it's your new post type now create custom fields for your post type you can add new fields here for the product information as you want metabox has more than 50 field types so you can choose any type of data you want we already have a video about that so you can learn about each one [Music] these are the fields i created for the status field i fill in the options for users to select here like this and do similarly with the voucher field after having all the fields we need turn to the settings tab choose the location as post type and select restaurant to apply these fields to this post type finally publish now create a new post in the restaurant you will see the custom fields we created just fill in the information to display the value of custom fields i will use mb views to create a new template by this way i do not have to go to the theme file to add code in the template tab of the view i add this code to display the list of posts or in my case the list of restaurants in descending order let me explain it i added some classes so that i can style them later more easily this code declares the args variable that gets the data from the post type which has the ideas restaurant this is used to get all the posts from the post type one want in case that you just want to display a limited number of products you just have to change minus one by the number you want this is to display the posts according to the publishing date order this is to display the latest posts first then the older posts if you want to display the oldest to the latest ones replace desc with asc this transfer the return data of the args variable to the posts variable this loop will list the posts this gets the featured images of the corresponding posts this gets the label of the option in the voucher field if you want to get the value instead use this rwmb meta function this creates the image variable to get data from the logo field of the corresponding posts it displays images from the return data of the image variable this gets the product's name from the post title and places the link of the corresponding post into it it displays the values of the address fields plus you can click here to insert the field instead of typing code [Music] this is to display the values of the status fields this adds the view detail texts and places the link of the corresponding post into it i will display it when users hover over the featured images of the posts then move to the settings tab select shortcode in the type section that action will save this template as a shortcode so when you publish it you will see a shortcode here now just paste it anywhere you want to display the template in my case i add it to the home page see i have the latest restaurant section immediately now we need to style it i want to display it like a slider that i showed you in the beginning so i will need some css in js but instead of adding them directly to the theme i'm using my custom functionality plugin so when i change the theme it won't be affected you can download this plugin from github and install it on your website then download the slick slider library for the js and css when you download it there will be many files inside but you will need only these three files then go to the folder of my custom functionality plugin and upload these files into the corresponding js and css folders next to set up the slider effect of slick slider i'll create a custom js file in the js folder and add this code to it this is used to create a slider for the elements that have this class and this slider will have the style of the slick slider library this code creates a dynamic class based on the returned values of the restaurant status in the section that i put in the status res class if the returned value is open the class will be open if the returned value is close the class will be close depending on the created class i will have two different styles for the two statuses of the restaurant after that declare the js and css files that we have just uploaded do it by adding this code to the plugin.php file now visit the home page your latest restaurant section has already turned into a slider but it hasn't looked good yet i still need to add some additional css traditionally you have to add css to the customizer or the themes file right but with mb views you can add code to this css tab easily here is the css code i added that includes the css to style for the images title logo and so on and also the css to style for the slider of the slick slider library as you can see you can refer to it in the article in the description well it looks more attractive now isn't it that's all for the tutorial today to have all the js code in the library i used in this tutorial please read the article in the description remember to like share and subscribe to our channel bye

Channel: Meta Box

Views: 135

Keywords: metabox, meta box, wp meta box, gutenberg, plugin, custom field, custom fields, wordpress, tutorial, tutorials, latest posts, latest post, latest product, latest products, homepage, time order

Id: ZNEj_63XTnY

Length: 7min 30sec (450 seconds)

Published: Mon Dec 06 2021