added faqs labels in category and page template, controlled using function in theme

adminstyles.css

@@ -798,6 +798,26 @@ Add your custom styles in this file so it is easier to update the theme.
 	text-transform: uppercase;
 }
 
+.edit-post-visual-editor__content-area .ofisuport-faqs-types .cat-item {
+	display: inline-block;
+	margin: 0.1em 0;
+	padding: 0.2em 0.2em 0 0.2em;
+	color: #fff;
+	background-color: #000;
+	font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.1rem;
+	text-transform: uppercase;
+}
+
+.edit-post-visual-editor__content-area .ofisuport-faqs-types a {
+	color: #fff;
+	text-decoration: none;
+}
+
+.edit-post-visual-editor__content-area .ofisuport-faqs-types a:visited, .edit-post-visual-editor__content-area .ofisuport-faqs-types a:hover {
+	color: #fff;
+}
+
 .edit-post-visual-editor__content-area .single-ofisuport-ajut article:not(.type-post) .ofisuport-label li {
 	font-size: 1.1rem;
 }

category.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * The template for displaying archive FAQS 
+ *
+ * Template Name: PAFs, consells, tutorials... 
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Oficina_de_Suport_theme
+ * @since 1.0
+ */
+
+get_header();
+?>
+
+	<main id="primary" class="site-main">
+
+  <?php if( in_category('faq') ) : ?>
+    <nav id="tipus-faqs" class="ofisuport-faqs-types">
+      <ul class="ofisuport-label">
+        <?php // https://developer.wordpress.org/reference%2Ffunctions%2Fwp_list_categories%2F/
+          wp_list_categories(
+            array(
+              'child_of'            => 1, // category FAQ id=1
+              'hide_empty'          => 0,
+              'hide_title_if_empty' => true,
+              'separator'           => '<li>',
+              'style'               => 'list',
+              'taxonomy'            => 'category',
+              'title_li'            => '',
+            )
+        	); ?>
+      </ul>
+    </nav>
+  <?php endif; //end if is_category faq ?>
+    <content class="archive-posts ">
+		<?php if ( have_posts() ) : ?>
+			<?php while ( have_posts() ) : the_post();
+
+				get_template_part( 'template-parts/section', 'eachpost' );
+
+			endwhile;
+
+			the_posts_navigation();
+
+		else :
+			get_template_part( 'template-parts/content', 'none' );
+
+		endif;
+		?>
+    </content>
+	</main><!-- #main -->
+
+<?php
+get_sidebar();
+get_footer();

inc/template-functions.php

@@ -63,3 +63,30 @@ function ofisuport_class_posttype (){
 	  printf(get_post_type_object( get_post_type() )->rewrite['slug'] );
 	}
 }
+/**
+ * Displays the FAQS subcategories from category id=1 
+ */
+
+if ( ! function_exists( 'ofisuport_display_faqs_labels' ) ) :
+  function ofisuport_display_faqs_labels() {  
+?>
+    <nav id="tipus-faqs" class="ofisuport-faqs-types">
+      <ul class="ofisuport-label">
+      <?php 
+        // https://developer.wordpress.org/reference%2Ffunctions%2Fwp_list_categories%2F/
+        wp_list_categories(
+          array(
+            'child_of'            => 1, // category FAQ id=1
+            'hide_empty'          => 1,
+            'hide_title_if_empty' => true,
+            'separator'           => '<li>',
+            'style'               => 'list',
+            'taxonomy'            => 'category',
+            'title_li'            => '',
+          )
+        ); ?>
+      </ul>
+    </nav>
+<?php
+  }
+endif; //end ofisuport_display_faqs_labels

page-templates/faqs-page.php

@@ -34,16 +34,30 @@ get_header();
 
 			endwhile;
 
-			the_posts_navigation();
+//			the_posts_navigation();
 
 		else :
 			get_template_part( 'template-parts/content', 'none' );
 
 		endif;
 		?>
-
+<nav id="tipus-faqs" class="ofisuport-faqs-types">
+<ul class="ofisuport-label">
+			<?php // https://developer.wordpress.org/reference%2Ffunctions%2Fwp_list_categories%2F/
+		    wp_list_categories(
+          array(
+            'child_of'            => 1, // category FAQ id=1
+            'hide_empty'          => 0,
+            'hide_title_if_empty' => true,
+            'separator'           => '<li>',
+            'style'               => 'list',
+            'taxonomy'            => 'category',
+            'title_li'            => '',
+          )
+				); ?>
+</ul>
+</nav>
 			<content class="archive-posts <?php ofisuport_class_posttype(); ?>">
-
       <?php
        // https://developer.wordpress.org/reference/functions/get_posts/
        // https://www.advancedcustomfields.com/resources/true-false/

sass/base/elements/_lists.scss

@@ -73,8 +73,27 @@ article:not(.type-post){
       text-transform: uppercase;
   }
 }
+.ofisuport-faqs-types {
+  .cat-item {
+    display:inline-block;
+    margin:0.1em 0;
+    padding: 0.2em 0.2em 0 0.2em;
+    color: $color__white;
+    background-color: $color__black;
+    font-family: $font__black;
+    font-size: $font__size-body*1.1;
+    text-transform: uppercase;
+  }
+  a {
+    color: $color__white;
+    text-decoration: none;
+    &:visited, &:hover{
+      color: $color__white;
+    }
+  }
+}
 .single-ofisuport-ajut {
-  article:not(.type-post){
+  article:not(.type-post) {
     .ofisuport-label {
       li {
         font-size: $font__size-body*1.1;

style.css

@@ -724,6 +724,26 @@ article:not(.type-post) .item-os_fund_apply_text {
 	text-transform: uppercase;
 }
 
+.ofisuport-faqs-types .cat-item {
+	display: inline-block;
+	margin: 0.1em 0;
+	padding: 0.2em 0.2em 0 0.2em;
+	color: #fff;
+	background-color: #000;
+	font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.1rem;
+	text-transform: uppercase;
+}
+
+.ofisuport-faqs-types a {
+	color: #fff;
+	text-decoration: none;
+}
+
+.ofisuport-faqs-types a:visited, .ofisuport-faqs-types a:hover {
+	color: #fff;
+}
+
 .single-ofisuport-ajut article:not(.type-post) .ofisuport-label li {
 	font-size: 1.1rem;
 }

template-parts/wordpress-menu.php

@@ -0,0 +1,111 @@
+<?php                                                                                                                
+/**
+ * Template part for importing wordpress menus from other sites usin the REST api
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Oficina_de_Suport_theme
+ */
+ 
+
+# Config
+$wordpress_site="https://xarxaprod.cat";
+$wordpress_endpoint="https://xarxaprod.cat/wp-json/menus/v1/menus/4";
+
+
+$items = new ArrayObject;
+$items[0] = new ArrayObject(); // top level menu items go here
+
+if ($wordpress_endpoint) {
+  try {
+    $client = new Client($wordpress_endpoint);
+    $client->setOptions(array("timeout"=>2));
+    $response = $client->send();
+  }
+  catch (exception $e) {
+    $response = null;
+  }
+  if ($response) {
+    $response_data = json_decode($response->getBody());
+    if (!$response->isClientError() && $response_data) {
+      foreach ($response_data as $menu_item) {
+        $lowered_title = strtolower($menu_item->title);
+        $item_url = $menu_item->url;
+        if ($lowered_title == 'login') {
+          // manipulate login url
+          $item_url = "/login";
+        }
+        $item_title = $menu_item->title;
+        /*
+        if ($lowered_title == 'collections') {
+          if ($wordpress_site) {
+            // change Collections item
+            $item_title = "Project";
+            $item_url = $wordpress_site;
+          } else {
+            continue; // do not render the Collections item
+          }
+        }
+        */
+        $item = [
+          "id" => $menu_item->ID,
+          "title" => $item_title,
+          "url" => $item_url
+        ];
+        if (!isset($items[$menu_item->menu_item_parent])) {
+          $items[$menu_item->menu_item_parent] = new ArrayObject();
+        }
+        $items[$menu_item->menu_item_parent][$menu_item->ID] =$item;
+      }
+    }
+  }
+}
+
+if (count($items[0]) == 0) {
+  // we did not retrieve a menu from the wordpress site
+  // let's create a default menu
+  if ($wordpress_site) {
+    $collections_item = [
+      "id" => 1,
+      "title" => "Collections",
+      "url" => "/"
+    ];
+    $items[0][1] = $collections_item;
+  }
+  $login_item = [
+    "id" => 2,
+    "title" => "Login",
+    "url" => "/login"
+  ];
+  $items[0][2] = $login_item;
+}
+//print_r($items);
+
+if (!function_exists('render_menu')) {
+  function render_menu($items, $level_id) {
+    if ($level_id == 0) {
+      echo '<ul id="" class="dropdown menu" data-dropdown-menu="dropdown-menu" role="menubar">'.
+      PHP_EOL;
+    } else {
+      echo '<ul class="dropdown menu vertical submenu is-dropdown-submenu first-sub" data-toggle="" data-submenu="" role="">'.
+      PHP_EOL;
+    }
+    foreach ($items[$level_id] as $menu_item) {
+      if ($level_id == 0) {
+        echo '<li id="" class="" role="">'.PHP_EOL;
+      } else {
+        echo '<li id="" class="is-submenu-item is-dropdown-submenu-item" role="">'.PHP_EOL;
+      }
+      echo '<a role="" href="'.$menu_item['url'].'">'.$menu_item['title'].'</a>'.PHP_EOL;
+      if (isset($items[$menu_item['id']])) {
+          render_menu($items, $menu_item['id']); // render sub menu
+      }
+      echo '</li>' . PHP_EOL;
+    }
+    echo '</ul>' . PHP_EOL;
+  }
+}
+
+render_menu($items, 0);
+
+?>