- This topic has 29 replies, 4 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 11, 2020 at 3:07 am #1439049Ashish
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
September 11, 2020 at 5:34 am #1439209DavidStaffCustomer SupportHi 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.
September 11, 2020 at 6:29 am #1439265AshishHi 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
September 11, 2020 at 6:38 am #1439271AshishOn second thoughts, I don’t think I can get the Categories with ShowPosts. Can I? Im confused.
September 11, 2020 at 6:57 am #1439295DavidStaffCustomer SupportWP 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/
September 11, 2020 at 8:49 am #1439573AshishThanks 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
September 11, 2020 at 9:21 am #1439605Ashishlike 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.
September 11, 2020 at 9:44 am #1439635AshishI 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();
}
} );September 11, 2020 at 10:19 am #1439671AshishWhen I hardcode the values, they work fine.
‘include’ =>array(5371, 5399, 5402)BUT
When I include the parameter
‘include’ =>array($atts)it shows blank.
September 11, 2020 at 11:25 am #1439738Ashishused 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?September 11, 2020 at 11:55 am #1439774TomLead DeveloperLead DeveloperHi 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>';
September 11, 2020 at 12:11 pm #1439799AshishHi 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.September 11, 2020 at 2:10 pm #1439895TomLead DeveloperLead DeveloperYou could give this a shot:
@media (max-width: 768px) { .feast-grid-third { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
September 13, 2020 at 4:18 am #1441265AshishTried 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;
}
}September 13, 2020 at 10:15 am #1441629TomLead DeveloperLead DeveloperTo add a border around the images, you can do this:
.category-item img { border: 1px solid #ddd; }
-
AuthorPosts
- The topic ‘Category Page’ is closed to new replies.