-
I made a couple topics and you guys have helped tremendously and I appreciate it. So I applied with everything I learned and found what I want to do but still have slight trouble. The link to the site is in the private information.
I took this pattern here and adjusted it:
https://generateblocks.com/library/?pattern-type=free&pattern-preview=4065Question 1: As you can see I still have the category and sub category showing in a blue button. For example it shows “Tools” and “Image Improvement”. You can see not all the buttons are aligned the same as the other posts. Is there a way to make them all the same alignment and not one slightly higher then the other ones?
Question 2: Also, is there a way to only show the sub category and not the main category? I would like to only show for example “Image Improvement” and not “Tools”.
Thanks again
-
Hi Philly,
Let’s discuss #1 first.
1. For the Post Template Block, set the display to flex and the flex direction to column.
2. Remove the height setting for the Container Block that has a 210px height. Set the flex-grow of this Block to 1. Reference: https://docs.generateblocks.com/article/layout-options-overview/#flex-1
Let us know how it goes.
-
I did what you suggested above and it didn’t do anything with the category buttons. I assume I did the flex-grow correctly. On the container block I went to Layout > Flex Child > Then set the Grow number to 1 px. I updated the page if you want to check it out.
I also did step 1 on the post template block and set the display to flex and the flex direction to column.
-
Great.
1. Now, set the Container Block holding the texts to display flex and flex-direction – column.
2. Then, give the Container Block holding the categories a margin-top of
auto. -
Okay so I went to the container block that had the title and post excerpt and went to Layout > Display then changed the display to flex. Then went to Direction and selected column.
Then I went to the container block for the categories which is a Button Category and I’m not sure what you mean by margin-top of auto? I went to Spacing and saw there is a margin row and has Top, Right, Bottom, and Left. How do you do auto for Top? Unless I’m looking in the wrong spot? Right now the site is updated from the first step.
-
You’re looking at the right spot. Just type
autoas the value for Top – margin. -
You’re great, this worked and everything is the same. I wish I understood this all process but I’m slowly learning how to use this on my own.
Can you help me with the second question also?
Question 2: Also, is there a way to only show the sub category and not the main category? I would like to only show for example “Image Improvement” and not “Tools”.
Thanks again for helping out
-
Great.
For #2, there’s no setting in GB that retrieves categories in such a way. You’ll need custom code for this but this would be out of our scope. Here’s something to help you with this:
You can try creating a Container Block with class
get-sub-cats.Then, add this snippet:
add_filter( 'render_block', function( $block_content, $block ) { if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'get-sub-cats' ) !== false ) { $output = ''; $categories = wp_get_post_categories(get_the_ID()); foreach($categories as $category) { $term_id = $category->term_id; $taxonomy_name = 'category'; $term_children = get_term_children( $term_id, $taxonomy_name ); $output .= '<ul class="list-subcats">'; foreach ( $term_children as $child ) { $term = get_term_by( 'id', $child, $taxonomy_name ); $output .= '<li><a href="' . get_term_link( $child, $taxonomy_name ) . '">' . $term->name . '</a></li>'; } $output .= '</ul>'; } return $output; } return $block_content; }, 10, 2 );Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets
-
Okay thank you. If you can’t help after this I understand just let me know.
I think I added it, I went to the button container and went to advanced then additional css. It looks like it worked and I just have to edit it a bit? Looks like it takes away the button and I would have to create the button myself in the code?
Also, I see the post “Blue Willow”‘s categories are not aligned with the other posts categories. Does this have to do with the code and I have to tweak it? Or is that something you can help with? Again if this is out of scope, no problem and ill fiddle around with it.
Thanks again for the help
-
Hi there.
try this CSS to style and align the terms:
.list-subcats { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; } .list-subcats a { text-decoration: none; font-size: 12px; padding: 3px 5px; border-radius: 3px; background-color: #000; color: #fff; } -
This has worked, thank you! I just have to adjust the code a bit for colors and all that but it looks like all the questions for this thread has been answered and resolved. Thank you guys so much for your help!
-
I previously marked this as solved, but I actually didn’t test something out. So the subcategories show up, but it’s ALL subcategories. For example, I only have 1 main category created called “Tools”. I have 3 subcategories called “Generate Video”, “Generative Art”, and “Image Improvement”. I only selected one subcategory for each post but just now realized that all 3 subcategories are under each post when I only selected 1 out of the 3.
I also just made another subcategory to test this out and named it “Test” and I never assigned any post to the “Test” category and it shows up for all 4 posts.
Is this something you are able to help with?
EDIT: Also I noticed something else. My images don’t align with the other posts on the home page.You can noticeably see it with the post for LeiaPix and Midjourney because they are side by side. Any way to fix that? I tried messing around with it but couldn’t figure it out.
-
Let’s address the first issue first. I updated the previous code I provided. Can you try that instead?
-
Just replaced it, looks like it took away all the categories
-
Try this:
add_filter( 'render_block', function( $block_content, $block ) { if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'get-sub-cats' ) !== false ) { $current_post_id = get_the_ID(); $current_post_categories = get_the_category($current_post_id); $sub_categories = array(); $output = ''; foreach ($current_post_categories as $category) { if ($category->parent !== 0) { $sub_categories[] = $category; } } if (!empty($sub_categories)) { $output .= '<ul class="list-subcats">'; foreach ($sub_categories as $sub_category) { $output .= '<li><a href="' . get_category_link($sub_category->term_id) . '">' . $sub_category->name . '</a></li>'; } $output .= '</ul>'; return $output; } return $output; } return $block_content; }, 10, 2 ); -
Looks like it works, thank you for going out of your way to help!
The featured image with the alignment not sure if that’s something that you can help with or I just need to do my best to size all then images the same?
- You must be logged in to reply to this topic.