[Resolved] Category Page

Home Forums Support Category Page

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #1439049
    Ashish

    Hi,

    I would like to build a Category Page for the different categories of recipes I have on the blog. If there are Indian, Mexican, Italian recipes, then I would like to have just 1 Post of that particular category shown, and when clicked, opens all the recipes under that category.

    I just have gone blank on how to proceed. I have GP Pro and ShowPosts Pro version installed.

    Have sent the example link in the Private Information. That’s something similar Id like to have.

    Ashish

    #1439209
    David
    Staff
    Customer Support

    Hi there,

    Tom provides the PHP snippet here to create a shortcode for displaying your own Category Grid with Featured Image:

    https://generatepress.com/forums/topic/grid-gallery-of-category-images/#post-871841

    Note the Plugin required below the code.

    Let us know.

    #1439265
    Ashish

    Hi David,

    Thanks. I incorporated the code (php and css) and used the plugin mentioned. This helped me to set a default image for each category. Perfect.

    Now, this may sound dumb on my part, but I want all the categories on a page/post (filtering out some). How do I get the categories as rows and columns as mentioned in the URL in private information? Can Show Posts only loop through the categories and show them? Currently, I’m using ShowPosts for showing Posts in a particular category on the home page. I can think of creating a list for each Category, and then using each list (shortcode). I have over 50 categories. Is there a better way to get all the categories automatically?

    Ashish

    #1439271
    Ashish

    On second thoughts, I don’t think I can get the Categories with ShowPosts. Can I? Im confused.

    #1439295
    David
    Staff
    Customer Support

    WP Show Posts doesn’t support Category Grids at this time.
    The code i provided above should display all Categories.

    In that code you will see the $args array – you can add the exclude argument as shown below – simply add the IDs you don’t want displayed:

    $args = array(
    	'orderby' => 'name',
    	'order' => 'ASC',
            'hide_empty' => 1,
            'exclude' =>array(1,2,3) // Add ID to exclude
    );

    If thats all too much then i found this plugin ( i haven’t tested ):

    https://wordpress.org/plugins/post-category-image-with-grid-and-slider/

    #1439573
    Ashish

    Thanks David. That works like a charm.

    1. Is it possible to pass ids from the shortcode to the function like [category_grid=”1,2,3″] ?

    2. Only the Title of the Category is Clickable. The entire image should be clickable too and enclosed in a border like the posts on the home page-> https://hetalkamdar.com

    Ashish

    #1439605
    Ashish

    like instead of hard coding list of Categories in exclude in the function, it would be nice to have an include in the function and pass the necessary category ids from the shortcode itself like [category_grid=”1,2,3″]. In this way I can write a line or 2 and then call the shortcode again with different parameters.

    #1439635
    Ashish

    I tried something like this. And this does not output anything. p.s: I’m new to php programming and hence stuck. I know Ive done something wrong in the parameters

    I have this in the wordpress page -> [category_grid=”5371, 53948″]

    and the code below:

    add_shortcode( ‘category_grid’, function( $atts = ”) {
    $args = array(
    ‘orderby’ => ‘name’,
    ‘order’ => ‘ASC’,
    ‘hide_empty’ => 1,
    ‘include’ =>array($atts)
    );
    $categories = get_categories( $args );
    if ( $categories ) {
    ob_start();
    echo ‘

    ‘;
    foreach ( $categories as $category ) {
    echo ‘

    ‘;
    echo ‘term_id ) . ‘”>’;
    echo ‘<h3>’ . $category->name . ‘</h3>’;
    echo ‘
    ‘;
    if ( function_exists( ‘z_taxonomy_image’ ) ) {
    z_taxonomy_image( $category->term_id );
    }
    $description = term_description( $category->term_id );
    if ( $description ) {
    echo ‘

    ‘;
    echo $description;
    echo ‘

    ‘;
    }
    echo ‘

    ‘;
    }
    echo ‘

    ‘;
    return ob_get_clean();
    }
    } );

    #1439671
    Ashish

    When I hardcode the values, they work fine.
    ‘include’ =>array(5371, 5399, 5402)

    BUT

    When I include the parameter
    ‘include’ =>array($atts)

    it shows blank.

    #1439738
    Ashish

    used this code ->
    ‘include’ => $atts
    and [category_grid=”5371, 5399, 5402, 5398, 106″]

    and it works perfectly.
    Thank you so much for the initial code.

    Now, only the Title of each Category is Clickable. I want that the entire image should be clickable too and enclosed in a border like the posts on the home page-> https://hetalkamdar.com
    Can you help me with that?

    #1439774
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Right now you have this:

    echo '<a href="' . get_category_link( $category->term_id ) . '">';
        echo '<h3>' . $category->name . '</h3>';
    echo '</a>';
    
    if ( function_exists( 'z_taxonomy_image' ) ) {
        z_taxonomy_image( $category->term_id );
    }

    Try this:

    echo '<a href="' . get_category_link( $category->term_id ) . '">';
        echo '<h3>' . $category->name . '</h3>';
    
        if ( function_exists( 'z_taxonomy_image' ) ) {
            z_taxonomy_image( $category->term_id );
        }
    echo '</a>';
    #1439799
    Ashish

    Hi Tom,
    That did the magic. Thank you so much.
    The formatting on the mobile isn’t there. Can you help me with formatting it like the posts shown on the homepage on a mobile. 2 Columnns with borders In gray.

    #1439895
    Tom
    Lead Developer
    Lead Developer

    You could give this a shot:

    @media (max-width: 768px) {
        .feast-grid-third {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }
    #1441265
    Ashish

    Tried it. The border around the images still dont come. URL is https://hetalkamdar.com/recipes-index-gui/

    This is the additional css I have for this page:

    .category-grid {
    display: flex;
    flex-wrap: wrap;
    }
    .category-item {
    padding: 10px;
    width: 33%;
    box-sizing: border-box;
    text-align: center;
    }
    .category-item img {
    margin-bottom: 5px;
    border-radius: 8px;
    }

    @media
    (max-width: 768px) {
    .feast-grid-third {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    }

    #1441629
    Tom
    Lead Developer
    Lead Developer

    To add a border around the images, you can do this:

    .category-item img {
        border: 1px solid #ddd;
    }
Viewing 15 posts - 1 through 15 (of 30 total)
  • The topic ‘Category Page’ is closed to new replies.