[Resolved] Elements Block / Post meta template

[Jan]

Hi there,

I’d like to add a filter to the archive page of a CPT. This is how I have set up the post meta template.

How do I need to change this template to get the categories of all posts from that archive listed below the main content of the archive page?

Thanks,
Jan

[Fernando]

Hi Jan,

To clarify, do you want to show the categories of the posts appearing in this page on top? If so, you would need custom code for this. I’m not sure if there’s a third party plugin that does this. It might be good to ask for suggestions in our Facebook group as well: https://www.facebook.com/groups/1113359788719597

[Jan]

Hi Fernando,

yes, on top of the page.

This is what I was able to find:

<div class="row">

  <ul class="menu">
  <?php
    $terms = get_terms(array(
     'taxonomy' => 'wg_chat_category'
    ) );
    foreach($terms as $term){ 
      echo "<li><a href='#{$term->slug}'>{$term->name}</a></li>";
    }
  ?>

  </ul>
</div>

This is how the custom taxonomy is defined:

if ( ! function_exists( 'wg_chat_category' ) ) {
// Register Custom Taxonomy
function wg_chat_category() {
$labels = array(
'name'                       => _x( 'Chat Categories', 'Taxonomy General Name', 'wg_chat_category' ),
'singular_name'              => _x( 'Chat Category', 'Taxonomy Singular Name', 'wg_chat_category' ),
'menu_name'                  => __( 'Chat Category', 'wg_chat_category' ),
'all_items'                  => __( 'All Chat Categories', 'wg_chat_category' ),
'parent_item'                => __( 'Parent Chat Category', 'wg_chat_category' ),
'parent_item_colon'          => __( 'Parent Chat Category:', 'wg_chat_category' ),
'new_item_name'              => __( 'New Chat Category Name', 'wg_chat_category' ),
'add_new_item'               => __( 'Add New Chat Category', 'wg_chat_category' ),
'edit_item'                  => __( 'Edit Chat Category', 'wg_chat_category' ),
'update_item'                => __( 'Update Chat Category', 'wg_chat_category' ),
'view_item'                  => __( 'View Chat Category', 'wg_chat_category' ),
'separate_items_with_commas' => __( 'Separate Chat Categories with commas', 'wg_chat_category' ),
'add_or_remove_items'        => __( 'Add or remove Chat Categories', 'wg_chat_category' ),
'choose_from_most_used'      => __( 'Choose from the most used', 'wg_chat_category' ),
'popular_items'              => __( 'Popular Chat Categories', 'wg_chat_category' ),
'search_items'               => __( 'Search Chat Category', 'wg_chat_category' ),
'not_found'                  => __( 'Not Found', 'wg_chat_category' ),
'no_terms'                   => __( 'No Chat Categories', 'wg_chat_category' ),
'items_list'                 => __( 'Chat Category list', 'wg_chat_category' ),
'items_list_navigation'      => __( 'Chat Category list navigation', 'wg_chat_category' ),
);
$args = array(
'labels'                     => $labels,
'hierarchical'               => true,
'public'                     => true,
'show_ui'                    => true,
'show_admin_column'          => true,
'show_in_nav_menus'          => true,
'show_tagcloud'              => false,
);
register_taxonomy( 'wg_chat_category', array( 'wg_seo_chat' ), $args );
}
add_action( 'init', 'wg_chat_category', 0 );
}

What am I missing to make it work?

Thanks,
Jan

[Fernando]

Are you adding this through a Hook Element? Have you enabled “Execute PHP”?

[Jan]

Hi Fernando,

sorry for leaving this unclear.

I understand that there are two options for PHP code injection:

A) Elements Hook with “Execute PHP” enabled
B) Add the PHP directly to the function.php

I generally prefer (A) for scripts of any kind. PHP execution, however is blocked by our web-roster for security reasons ;-/

Leaving option B. I added the following part of the PHP

 //WG Chat - Add category filter
 
    $terms = get_terms(array(
     'taxonomy' =--> 'wg_chat_category'
    ) );
    foreach($terms as $term){ 
      echo "<li><a href="#{$term->slug}">{$term->name}</a></li>";
    }

…to the function.php. Next I created a GB Container (class=row) and added an Unsorted List block therein (class=menu). This way we get the remainder of the code template covered.

The only missing piece is a link between the the GB Container Block and the PHP in the function.php.

Am I looking at an additions shortcode or is there a more simple way to achieve that?

Any advise is much appreciated.

Best,
Jan

[Fernando]

To clarify, do you already have this working?:

$terms = get_terms(array(
     'taxonomy' =--> 'wg_chat_category'
    ) );
    foreach($terms as $term){ 
      echo "<li><a href="#{$term->slug}">{$term->name}</a></li>";
    }

If so, yes, you should be able to turn this into a shortcode or directly inject it into a GB Headline Block.

[Jan]

Hi Fernando,

sorry for not getting back earlier.

The straight answer is I don’t know if the PHP snippet is working. As a matter of fact, only one category appears (see link to relevant page below).

After I added the snippet to the function.php I checked the debug.log. There are no errors but the following notice: PHP Notice: Trying to get property ‘name’ of non-object in /home/wp/disk/wordpress/wp-content/themes/generatepress_child/functions.php on line 15

This is line 15: echo "<li><a href="#{$term->slug}">{$term->name}</a></li>";

Any thoughts on how to proceed?

Thanks,
Jan

[Fernando]

The taxonomy retrieved at the bottom of the page is from a GB Headline Block. That won’t work if you’re trying to retrieve all
“categories” you have in your custom taxonomy.

You’re code isn’t working. We can try get_categories() instead. You’ll probably need a Shortcode like this instead:

add_shortcode( 'category_grid', function() {
	$args = array(
		'orderby' => 'name',
		'order' => 'ASC',
		'hide_empty' => 1,
		'taxonomy' => 'wg_chat_category'
	);

	$categories = get_categories( $args );

	if ( $categories ) {
		ob_start();

		echo '<div class="category-grid">';

			foreach ( $categories as $category ) {
				echo '<div class="category-item">';
					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>';
					$description = term_description( $category->term_id );

					if ( $description ) {
						echo '<div class="category-description">';
							echo $description;
						echo '</div>';
					}
				echo '</div>';
			}

		echo '</div>';

		return ob_get_clean();
	}
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Try adding this shortcode – [category_grid] through a Hook or Block Element instead and see how it goes.

[Jan]

Hi Fernando,

sorry for not getting back earlier.

Meanwhile, I was able to add the suggested PHP to function.php and the list of categories appears 😉

Now I’d like the list elements to display inline instead of block,

The CSS I use is as follows:

/* GP - Style Chat Filter */

.category-item h3 {
  font-size: 20px
}

.category-grid {
  display:inline
}

.category-grid div:last-child::after {
  content: "";
}

.category-grid div::after {
  content: ", ";
}

Any thoughts as to why the line break still remains?

Thanks,
Jan

[Ying]

Try change this CSS:

.category-grid {
  display:inline
}

To:

.category-grid {
    display: flex;
    flex-wrap: wrap;
}

and this CSS:

.category-grid div:last-child::after {
  content: "";
}

.category-grid div::after {
  content: ", ";
}

to:

.category-grid h3:last-child::after {
  content: "";
}

.category-grid h3::after {
  content: ", ";
}

[Jan]

Hi Ying,

thanks for getting back. I added the following to the Customizer/ Additional CSS:

.category-grid {
    display: flex;
    flex-wrap: wrap;
}

.category-grid h3:last-child::after {
  content: "";
}

.category-grid h3::after {
  content: ", ";
}

The headlines do appear inline 😉

The comma separators, however do not ;-(

May I ask you to take another look?

Thanks,
Jan

[Ying]

Hum… try change this CSS

.category-grid h3:last-child::after {
  content: "";
}

to:

.category-grid div.category-item:last-child h3::after {
    content: "";
}

[Jan]

Hi Ying,

thanks for double checking this. The comma-separators do appear now also 😉 As far as the blank space after the comma, I added a padding-left for the category-item instead.

May I ask you to review this part of the CSS once more:

.category-grid div:last-child::after {
  content: "";
}

It does not remove the comma-separator after the last item.

Thanks,
Jan

[Fernando]

Hi Jan,

It’s more of this code in your custom CSS:

.category-grid h3::after {
    content: ",";
}

Replace it with this:

.category-grid .category-item:not(:last-of-type) h3::after {
    content: ",";
}

Let us know how it goes.

[Jan]

Great. This does the trick, Fernando.

Many thanks.

[Author]

Posts