Displaying all categories of a site in grid style. So this functionality will be good fit for food or photography site. I did following things:
- Add/Edit featured image thumbnail option for category
- Create a category template file.
Adding a image upload option in category’s add/edit form. So user can upload the specific thumbnail to every category. Open your functions.php file and add the following scripts:
Create a new file “media.uploader.js” and put in your child theme’s “js” folder. This file is containing the following codes:
Add new image size for category thumbnail. Just drop this single line of code in your functions.php file.
//* Register new image size add_image_size( 'category-thumb', 300, 300, true );
add_image_size( string $name, int $width, int $height, bool|array $crop = false ) function is cropping the image based on the value of $crop. If you set false (default), images will be scaled, not cropped. If true, images will be cropped to the specified dimensions using center positions. First three parameters of this function are mandatory. Here I am doing the hard crop.
Creating a template file “page_categories.php” and put this file in your child theme’s folder. Here is the complete code of this file:
- 11: Registering a page template file. Page templates are a specific type of template file that can be applied to a specific page or groups of pages. This one line of code simply tells WordPress that this is a template file and it should be recognized as “Listing Categories”. You can name your template anything you want as long as it makes sense to you.
- 13-21: Adding a custom class to body tag. Any new CSSs using this class name will work on this page template only. So you can easily avoid the conflicting issue with other CSSs.
- 24: Forcefully creating a full width page template
- 27: Removing the default loop
- 30: Creating a custom loop for categories
- 33: Fetching all categories in alphabetic order
- 38-72: Running the PHP’s foreach loop and showing the categories in grid style
- 48-55: First retrieving the attachment ID (image ID) using the category ID. This attachment ID is saving as a term metadata. So I used get_term_meta() function for it. get_term_meta( int $term_id, string $key = ”, bool $single = false ) function retrieves the metadata for a term.
Now I am retrieving the category thumbnail by wp_get_attachment_image_src( int $attachment_id, string|array $size = ‘thumbnail’, bool $icon = false ) function. This function is returning an array which contains four values: the URL of the attachment image src, the width of the image file, the height of the image file, and a boolean representing whether the returned array describes an intermediate (generated) image size or the original, full-sized upload.
- 54: If there have no attachment then showing the placeholder image
Create a custom placeholder image file and put this image file in your child theme’s images folder. Make sure file name is “placeholder.png”.
Adding this new CSSs in your style.css file. You can alter this CSS depending on your site design.
Login to Dashboard and create a new page. Enter the title, select “Listing Categories” template form Page Attributes -> Templates drop down list and publish the page. Click on “view page” link and see the output.
If you need help, feel free to contact me via the contact page.