Then, here are the thumbnail images and titles of the categories on the homepage.īack to the view, add some code to the CSS tab to style this section.īackground-image: radial-gradient(ellipse, rgb(0 0 0 / 63%), rgb(0 0 0 / 55%), rgb(0 0 0 / 50%), rgb(0 0 0 / 42%), rgb(0 0 0 / 35%), rgb(0 0 0 / 20%)) Īll the above classes are created in the code which I put into the Template tab.Īfter that, the Top Destinations has a new better look. It seems like simplify the process a lot. You can use this shortcode to easily display the list of the category with thumbnails everywhere you want. This view will be set in the type of Shortcode so that it will auto-generate a shortcode. In the event that I did neither insert a link nor upload an image, the last line of code will display a default image. : to display the image by the link assigned to the variable.wp_get_attachment_image_src (): to get the link of the uploaded image of the corresponding category.'thumbnail_images_category' and 'url_images_category' are IDs of fields get_term_meta (): to get values of the fields from the corresponding category by category.term_id.At the same time, display the category name and hyperlink it In the Template tab, I used this code: : to get the link of the corresponding category by ID. We will need support from the MB Views for this task. I filled in the URLs for all the categories instead of uploading images.ĭisplay List of Categories with Thumbnails on the Frontend Then, go to a Category Editor page, you will see the fields. ![]() In the Settings tab of the field group, remember to set the Location as Taxonomy and Category to assign these fields for Categories. So, let it be something easy to recall and distinguish. ![]() One more thing, you must pay attention to the IDs of the fields. But, if you have a significant number of categories or you need high-quality images, that sounds not good for your server. Otherwise, the single image field allows you to upload images to the media library. The URL field allows you to put links from any website so that your site will not carry those images. You can choose to use one of these fields or both like I did here. In case you haven’t been familiar with creating custom fields using Meta Box, we have a video tutorial on it. There is no special thing in the settings them. And, another is Single Image which allows you to upload an image to the media library. Go to the Custom Fields menu then create a new field group. Create Custom Fields for Saving ImageĪfter activating the Meta Box Builder, you will have a UI to create custom fields right from the Admin Dashboard. These all extensions are available in the Meta Box AIO, which the Developer and Lifetime licenses included. Please be aware that if you are looking for something for taxonomies, please wait for the next tutorial. MB Custom Post Types & Custom Taxonomies: (optional) you need this extension when you are creating thumbnails for custom taxonomies of a custom post type.MB Views: in this tutorial, we will use this extension to create a shortcode to display category thumbnails.MB Term Meta: allows to create custom fields for categories or taxonomies.Meta Box Builder: provides UI to create custom fields.Along with the core framework, which is free on, we also need the following extensions: Write the below code in the functions.php file which will add a meta box for you.As the title of the post, I will use custom fields. When a user clicks on the button, they will upload the image and the final image URL will be set in the text field.Īdding a meta box is easy and straightforward. We need a meta box that contains the upload image button and a text field. Using the Meta box you can add additional information for the post and page. Categories, Tags, Featured Image, Excerpt, Discussion, etc are examples of meta boxes. Meta box is nothing but a block on a post or page. The uploaded image URL would be set in a custom meta field and saved as a post meta for the specific post or page. ![]() With a click of this button, the media uploader will open where the user can upload the image or choose an existing image. So without further discussion, let’s get started with it.įor this tutorial, I will add a custom image button for the post and page. Implementing a media uploader just takes a few lines of code. By doing it you are following WordPress standards. It is always recommended to use the built-in media uploader if you are looking for a custom solution to upload an image in the backend. We wanted a custom image button to upload an image through the media uploader. WordPress built a media uploader beautifully that allows a user to upload a new image or use an existing image from the media library. Recently I was working on a plugin where we wanted to use the media uploader of WordPress for our requirement.
0 Comments
Leave a Reply. |