WordPress FSE image category

  • noerve

    (@noerve)


    3 years ago

    Hello,

    I’m trying to update an old theme to wordpress 5.9 (with FSE).

    In this theme I replaced the meta category with an image with the following code:

    <div class="post-categories">
	<?php
	// Display categories icons
	$icoCategories = array("castors", "loups", "scouts", "unite", "pionniers", "photos", "intro-posts");
	
	foreach((get_the_category()) as $category) {
		$catName = $category->slug;

		if(in_array($catName, $icoCategories)) {
			$category_link = get_category_link( $category->cat_ID );
			echo '<a href="'.esc_url( $category_link ).'" target="_self" class="ico-'.strtolower($category->slug).'">&nbsp;</a>';
		}
	}
	?>
</div>

    Could someone explain to me how to modify the following block to have the same result (if then else) ?

    <!– wp:post-terms {“term”:”category”} /–>

    Since the FSE sites are in HTML I assume that I have to go through JSX, right ?

    Thank you in advance

    • This topic was modified 3 years ago by noerve.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @noerve ,

    You’re in the correct direction. However, the post categories block only returns the category names by default.

    If you are comfortable with code, then you can extend the core block using using the registerBlockType block filter to add settings and return categories with images.

    Once you do that, then you can use it in your FSE compatible theme.

    Thread Starter noerve

    (@noerve)

    Thank you @kaavyaiyer for the answer,

    I posted the question on different forums and the only solutions offered was using vanilla javascript in a hook to modify the HTML structure after the page loads.

    I have already followed tutorials on how to create blocks under Gutenberg. Even if I managed to go to the end of the tutorials I have to admit that I am still not comfortable with the concept and that I can hardly deviate from what was proposed.

    Having to install node and scaffold packages to be able to “just” create a block seems infinitely more complicated to me than inserting a few lines of code in PHP in my single page for example.

    Even if I m confi with Vanilla JS or Jquery I m not yet with React (So I know what to learn).

    In the 2022 theme I spotted the inc/patterns folder which contains PHP pages and generates block-patterns.
    Maybe that could be a solution too.

    • This reply was modified 3 years ago by noerve.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WordPress FSE image category’ is closed to new replies.