Listing All Categories in Grid

Listing Categories in Grid
Listing Categories in Grid

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.

Step 1

Add Thumbnail to Category
Add Thumbnail to Category

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:

This content is only available to members. You must subscribe the monthly membership plan ($.9.99 USD).

Step 2:

Create a new file “media.uploader.js” and put in your child theme’s “js” folder. This file is containing the following codes:

This content is only available to members. You must subscribe the monthly membership plan.

Step 3

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.

Step 4

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:

This content is only available to members. You must subscribe the monthly membership plan.

Explaining

  1. 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.
  2. 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.
  3. 24: Forcefully creating a full width page template
  4. 27: Removing the default loop
  5. 30: Creating a custom loop for categories
  6. 33: Fetching all categories in alphabetic order
  7. 38-72: Running the PHP’s foreach loop and showing the categories in grid style
  8. 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.
    1. $term_id: (int) (Required) Term ID.
    2. $key: (string) (Optional) The meta key to retrieve. If no key is provided, fetches all metadata for the term.
    3. $single: (bool) (Optional) Whether to return a single value. If false, an array of all values matching the $term_id/$key pair will be returned. Default is false.

    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.

  9. 54: If there have no attachment then showing the placeholder image

Step 5

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”.

Step 6

Adding this new CSSs in your style.css file. You can alter this CSS depending on your site design.

This content is only available to members. You must subscribe the monthly membership plan.

Step 7

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.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *