merged with dev

404.php

@@ -14,11 +14,11 @@ get_header();
 
 		<section class="error-404 not-found">
 			<header class="page-header">
-				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'ofisuport' ); ?></h1>
+				<h1 class="page-title"><?php esc_html_e( 'Ho sentim, aquesta pàgina no es vaig poder trobar.', 'ofisuport' ); ?></h1>
 			</header><!-- .page-header -->
 
 			<div class="page-content">
-				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'ofisuport' ); ?></p>
+				<p><?php esc_html_e( 'Sembla que no s&rsquo;ha trobat res en aquest lloc. Potser provar un dels enllaços de sota o una cerca?', 'ofisuport' ); ?></p>
 
 					<?php
 					get_search_form();
@@ -27,7 +27,7 @@ get_header();
 					?>
 
 					<div class="widget widget_categories">
-						<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', 'ofisuport' ); ?></h2>
+						<h2 class="widget-title"><?php esc_html_e( 'Categories més utilitzades', 'ofisuport' ); ?></h2>
 						<ul>
 							<?php
 							wp_list_categories(
@@ -45,7 +45,7 @@ get_header();
 
 					<?php
 					/* translators: %1$s: smiley */
-					$ofisuport_archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'ofisuport' ), convert_smilies( ':)' ) ) . '</p>';
+					$ofisuport_archive_content = '<p>' . sprintf( esc_html__( 'Potser buscant en els arxius mensuals. %1$s', 'ofisuport' ), convert_smilies( ':)' ) ) . '</p>';
 					the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$ofisuport_archive_content" );
 
 					the_widget( 'WP_Widget_Tag_Cloud' );

archive-ofisuport-ajut.php

@@ -1,6 +1,6 @@
 <?php                                                                                                    
 /**
- * The template for displaying archive custom post type ajut
+ * The template for displaying archive custom post type ofisuport-ajut
  *
  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
  *
@@ -11,72 +11,29 @@ get_header();
 ?>
 
 	<main id="primary" class="site-main">
+  <?php
+    // Detect plugin. For use on Front End only.
+    include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
+    // check for plugin using plugin name
+    if ( is_plugin_active( 'oficinasuport-wp-plugin/ofisuport-wp-plugin.php' ) ) {
+    //plugin is activated do
+?>
 
     <section id="filteredfunds" class="ofisuport-filtered-funds ofisuport-ajuts-filtrats">
-
+      <aside id="fundsfilter" class="ofisuport-filter-funds ofisuport-filtre-ajuts">
-      <aside id="fundsfilter" class="ofisuport-filter-funds ofisuport-fitre-ajuts">
-
-        <div id="arhive-filters" class="ofisuport-filters">
-        <?php
-        // output all possible values of a checkbox
-        $groupkey = "group_63ab636898703"; // write here the key for the group of fields from acf
-        if( $groupkey){
-        //echo '<h6>check the groupkey <span style="color: #00b">' . $groupkey . '</span></h6>';
-        	$groupkey_fields = acf_get_fields($groupkey);
-        	foreach( $groupkey_fields as $field_key ) {
-        		if( $field_key['type'] == 'checkbox' ){
-          		//echo '<span style="color: #00b">' . ($field_key['key']) . '</span><br/>';
-        	  	//echo '<span style="color: #00b">' . ($field_key['label']) . '</span><br/>';
-        	  	//echo '<span style="color: #00b">' . ($field_key['name']) . '</span><br/>';
-        	    // https://wordpress.stackexchange.com/a/102915
-              //$field_key = "field_XXXXXX";// the acf field key unic numbers
-              $field_key = $field_key['key'];
-              $fields = get_field_object($field_key);
-              
-              if( $fields )
-        			{
-        				// check for values in url
-                foreach( $GLOBALS['my_query_filters'] as $key => $fieldname ): 
-                   
-                  // set value if available
-                  if( isset($_GET[ $fieldname ]) ) {
-                      
-                      $filteredvalues['value'] = explode(',', $_GET[ $fieldname ]);
-                      
-        					};
         
-                  // construct the checkboxes
+      <script type="text/javascript">
-                  if( $fieldname == $fields['name']) {
+        <!-- https://stackoverflow.com/a/48314274 -->
-        		        echo '<nav id="fund-filter" class="ofisuport-filter ' . $fields['name'] .  '">' ;
+        (function($) { 
-        		        echo '<h5>' . $fields['label'] . '</h5>';
+        $('.fund-filter').ready(function() {
-        		        echo '<ul>';
+          $('.oficinasuport-titol-opcions').click(function() {
-        		        
+            $(this).siblings(".filter").toggle();
-                    foreach( $fields['choices'] as $choicevalue => $choicelabel ) {
+          });
-        		        	echo '<li>';
+        });
-        		        	echo '<input type="checkbox" ';
+        })(jQuery);
-        		        	echo ' value="' .  $choicevalue . '" ';
+      </script>
-        		        	if( in_array($choicevalue,$filteredvalues['value']) ):
+      
-        		        		echo ' checked="checked" ';
+        <?php ofisuport_ajuts_filters_form(); // function defined in the plugin ?>
-        		        	endif;
-        		        	echo ' />';
-        		        	echo $choicelabel;
-        		        	echo '</li>';
-        		        }
-        		        echo '</ul>';
-        					  echo '</nav>';
-									};
-									// end of construct checkboxes
-        
-        					endforeach;
-                 // end check for values in url
-        	    }
-        		};//end if type checkbox
-        	};//end foreach groupkey field
-        };//end if groupkey
-        ?>
-        
-            <?php //endforeach; ?>
-        </div>
 
       </aside>
 
@@ -88,7 +45,8 @@ get_header();
   		    get_template_part( 'template-parts/section', 'eachpost' ); 
   
   			endwhile;
-  
+
+        the_posts_navigation();
   
   		else :
   
@@ -100,6 +58,7 @@ get_header();
 			</content>
 	</section>
 
+<?php }  //end plugin is activated do ?>
 </main><!-- #main -->
 
 <?php

archive.php

@@ -31,14 +31,16 @@ get_header();
 
 			endwhile;
 
-      echo '</content>';//end content ajuts
+      
 			the_posts_navigation();
+      echo '</content>';//end content ajuts
 
 		else :
 			get_template_part( 'template-parts/content', 'none' );
 
 		endif;
-		?>
+
+    ?>
 
 	</main><!-- #main -->
 

category.php

@@ -0,0 +1,43 @@
+<?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') ) : ?>
+		<?php ofisuport_display_faqs_labels(); ?>
+    <?php ofisuport_display_faqs_search(); ?>
+
+  <?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();

footer.php

@@ -14,12 +14,12 @@
 	<footer id="colophon" class="site-footer">
 		<div class="site-info">
 	  <?php dynamic_sidebar( 'footer' ); ?>
-			<!--a href="<?php //echo esc_url( __( 'https://wordpress.org/', 'ofisuport' ) ); ?>">
+			<?php //echo '<a href="' . esc_url( __( 'https://wordpress.org/', 'ofisuport' ) ) . '">'; ?>
 				<?php
 				/* translators: %s: CMS name, i.e. WordPress. */
 				//printf( esc_html__( 'Proudly powered by %s', 'ofisuport' ), 'WordPress' );
 				?>
-			</a-->
+			<?php //echo '</a>'; ?>
 			<!--span class="sep"></span-->
 				<?php
 				/* translators: 1: Theme name, 2: Theme author. */

functions.php

@@ -9,7 +9,7 @@
 
 if ( ! defined( '_S_VERSION' ) ) {
 	// Replace the version number of the theme on each release.
-	define( '_S_VERSION', '1.0.0' );
+	define( '_S_VERSION', '1.0.1' );
 }
 
 /**
@@ -129,6 +129,9 @@ require get_template_directory() . '/inc/widgets-register.php';
  */
 function ofisuport_scripts() {
 	wp_enqueue_style( 'ofisuport-style', get_stylesheet_uri(), array(), _S_VERSION );
+  //https://developer.wordpress.org/reference/functions/wp_enqueue_style/#comment-2056
+  //wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);
+	//wp_enqueue_style( 'ofisuport-style', get_stylesheet_uri(), array(), filemtime(get_stylesheet_uri() . 'style.css'), false);
 	wp_style_add_data( 'ofisuport-style', 'rtl', 'replace' );
 
 	wp_enqueue_script( 'ofisuport-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

header.php

@@ -29,14 +29,21 @@
     <div class="main">
 	  	<div class="site-branding">
 	  		<?php
-	  		the_custom_logo();
+        // the_custom_logo();
+       // https://developer.wordpress.org/reference/functions/the_custom_logo/#comment-2037
+        if( has_custom_logo() ): 
+					$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
+        ?>
+				 <a href="https://xarxaprod.cat" title="Xarxa d&rsquo;espais de procucció i creació de Catalunya" class="custom-logo-link"><img class="custom-logo" src="<?php echo esc_url( $image[0] ); ?>" /></a>
+        <?php
+				endif;	
 	  		if ( is_front_page() && is_home() ) :
 	  			?>
-	  			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+	  			<h1 class="site-title"><a href="https://xarxaprod.cat" title="Xarxa d&rsquo;espais de procucció i creació de Catalunya">Xarxaprod</a></h1>
 	  			<?php
 	  		else :
 	  			?>
-	  			<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
+	  			<p class="site-title"><a href="https://xarxaprod.cat" title="Xarxa d&rsquo;espais de procucció i creació de Catalunya">Xarxaprod</a></p>
 	  			<?php
 	  		endif;
 	  		$ofisuport_description = get_bloginfo( 'description', 'display' );
@@ -47,7 +54,8 @@
 	  	</div><!-- .site-branding -->
 
 	  	<nav id="site-navigation-main" class="main-navigation">
-	  		<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button>
+				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" style="background-image: url('<?php echo esc_url( wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) ); ?>');" ><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button>
+        <section class="main-navigation-content">
 	  		<?php
 	  		wp_nav_menu(
 	  			array(
@@ -55,27 +63,30 @@
 	  				'menu_id'        => 'primary-menu',
 	  			)
 	  		);
-	  		?>
+?>
+        </section>
 	  	</nav><!--primary #site-navigation -->
 		</div>
 		<div class="secondary">
-		  <nav id="site-navigation-secondary" class="site-navigation secondary-navigation toogle-secondary-navigation">
+		  <nav id="site-navigation-secondary" class="site-navigation secondary-navigation toggle-secondary-navigation">
         <legend class="hide-content">menu</legend>
-        <input id="hide-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
+        <input id="hide-menu-mobile" class="hide-not-mobile toggle" name="toggle" type="radio">
-        <label for="show-menu-mobile" class="hide-not-mobile toogle-show"><span class="hide-content">open</span></label>
+        <label for="show-menu-mobile" class="hide-not-mobile toggle-show"><span class="hide-content">open</span></label>
-        <input id="show-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
+        <input id="show-menu-mobile" class="hide-not-mobile toggle" name="toggle" type="radio">
-        <div class="toogled-menu">
+        <div class="toggled-menu">
-					<label for="hide-menu-mobile" class="hide-not-mobile toogle-hide"><span class="hide-content">close</span></label>
+					<label for="hide-menu-mobile" class="hide-not-mobile toggle-hide"><span class="hide-content">close</span></label>
+        <section class="secondary-navigation-content">
 					<?php // here content to hide or show ?>
 		  	  <?php
-		  	  wp_nav_menu(
+		  	     wp_nav_menu(
-		  	  	array(
+		  	     	array(
-		  	  		'theme_location' => 'menu-2',
+		  	     		'theme_location' => 'menu-2',
-		  	  		'menu_id'        => 'secondary-menu',
+		  	     		'menu_id'        => 'secondary-menu',
-		  	  	)
+		  	     	)
-		  	  );
+		  	     );
-		  	  ?>
+          ?>
-        </div><!--toogled-menu-->
+          </section>
+        </div><!--toggled-menu-->
 			</nav><!--secondary #site-navigation -->
 
 			<?php the_header_image_tag(); // header image to show below menus before title ?>

inc/template-functions.php

@@ -63,3 +63,76 @@ 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
+
+/**
+ * Displays categories for each FAQ  
+ */
+
+if ( ! function_exists( 'ofisuport_display_each_faq_categories' ) ) :
+  function ofisuport_display_each_faq_categories() {  
+
+    $categories = get_the_category();
+    if ( ! empty( $categories ) ) {  
+      echo '    <nav id="tipus-faqs" class="ofisuport-faqs-types">';
+      echo '     <ul class="ofisuport-label">';
+      foreach ( $categories as $category ) {
+        if ( ! ($category->cat_ID == '1') ) { //cat_ID '1' is defined   as default FAQ
+          echo '<li class="cat-item"><a href="' . esc_url( get_category_link( $category->term_id ) ) . '">' . esc_html( $category->name ) . '</a></li>';
+        }                   
+      }                     
+      echo '     </ul>';    
+      echo '    </nav>';    
+      }                       
+  }
+endif; //end ofisuport_display_each_faq_categories
+
+/**
+ * Display search form for FAQs
+ */
+
+if ( ! function_exists( 'ofisuport_display_faq_search' ) ) :
+  function ofisuport_display_faqs_search() {  
+    // search form for category
+    // https://developer.wordpress.org/reference/functions/get_search_form/#comment-369
+    // https://wordpress.stackexchange.com/questions/313037/restrict-a-search-to-a-custom-post-type
+?> 
+    <aside id="search-form-faqs" class="ofisuport-search-faqs">
+      <form class="ofisuport-search-form" role="search" method="get" action="/">
+        <label class="screen-reader-text" for="search">Search in ajuts</label>
+        <input type="search" id="search" class="search-field" placeholder="cerca faqs..." value="<?php the_search_query();?>" name="s" />
+        <input type="submit" id="searchsubmit" class="search-submit button button-search" value="cerca">
+        <span class="ofisuport-search-submit ofisuport-icon-search"></span>
+        <input type="hidden" value="posts" name="post_type" id="post_type" />
+        <input type="hidden" value="faq" name="category_name" id="category_name" />
+      </form>
+    </aside>
+<?php
+  }
+endif; //end ofisuport_display_each_faq_categories

page-templates/faqs-page.php

@@ -34,16 +34,20 @@ get_header();
 
 			endwhile;
 
-			the_posts_navigation();
+//			the_posts_navigation();
 
 		else :
 			get_template_part( 'template-parts/content', 'none' );
 
 		endif;
-		?>
+    ?>
 
-			<content class="archive-posts <?php ofisuport_class_posttype(); ?>">
+     <?php //if( in_category('faq') ) : ?>
+       <?php ofisuport_display_faqs_labels(); ?>
+       <?php ofisuport_display_faqs_search(); ?>
+     <?php //endif; //end if is_category faq ?>
 
+      <content class="archive-posts <?php ofisuport_class_posttype(); ?>">
       <?php
        // https://developer.wordpress.org/reference/functions/get_posts/
        // https://www.advancedcustomfields.com/resources/true-false/
@@ -51,7 +55,7 @@ get_header();
        $the_query_faq = new WP_Query(
          array(
 					 'post_type' => 'post',
-					 'category'  => 'faq',
+					 'category_name'  => 'faq',
            'post_per_page' => '8'
          ) );
        ?>

page-templates/funds-search.php

@@ -38,53 +38,48 @@ get_header();
     <section id="filteredfunds" class="ofisuport-filtered-funds ofisuport-ajuts-filtrats">
   
 <aside id="fundsfilter" class="ofisuport-filter-funds ofisuport-fitre-ajuts">
-  <?php include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); if ( is_plugin_active( 'oficinasuport-wp-plugin/ofisuport-wp-plugin.php' ) ) { // if plugin active do?>                                
+  <?php include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); if ( is_plugin_active( 'oficinasuport-wp-plugin/ofisuport-wp-plugin.php' ) ) { // if plugin active do?> 
-     <nav class="sidebar fund-filter">
+        
-
+      <script type="text/javascript">
-     </nav>
+        <!-- https://stackoverflow.com/a/48314274 -->
+        (function($) { 
+        $('.fund-filter').ready(function() {
+          $('.oficinasuport-titol-opcions').click(function() {
+            $(this).siblings(".filter").toggle();
+          });
+        });
+        })(jQuery);
+      </script>
+      
+     <?php ofisuport_ajuts_filters_form(); // function defined in the plugin ?>
 
    <?php  } //end if is_plugin_active ?>
-
-
   </aside>
 
-
+    <content class="archive-posts <?php ofisuport_class_posttype(); ?>">
-      <content class="archive-posts <?php ofisuport_class_posttype(); ?>">
-
 
 <?php
-       // https://support.advancedcustomfields.com/forums/topic/wp_query-using-meta_query-for-an-acf-checkbox-field/#post-145830
+    // https://support.advancedcustomfields.com/forums/topic/wp_query-using-meta_query-for-an-acf-checkbox-field/#post-145830
-       // https://www.advancedcustomfields.com/resources/checkbox/#query-posts
+    // https://www.advancedcustomfields.com/resources/checkbox/#query-posts
-       // https://barn2.com/blog/querying-posts-by-custom-field-acfi/
+    // https://barn2.com/blog/querying-posts-by-custom-field-acfi/
 
-       $the_query_ajut = new WP_Query(
+    $the_query_ajut = new WP_Query(
-         array(
+      array(
-           'post_type'     => 'ofisuport-ajut',
+        'post_type'     => 'ofisuport-ajut',
-           'post_per_page' => '6'
+        'posts_per_page' => '-1'
-         )
+      )
-       ); 
+    ); 
-       ?>
+    ?>
-       <?php if ( $the_query_ajut->have_posts() ) : ?>
+    <?php if ( $the_query_ajut->have_posts() ) : ?>
-         <?php while ( $the_query_ajut->have_posts() ) : $the_query_ajut->the_post(); ?>
+      <?php while ( $the_query_ajut->have_posts() ) : $the_query_ajut->the_post(); ?>
 
-          <?php get_template_part( 'template-parts/section', 'eachpost' ); ?>
+       <?php get_template_part( 'template-parts/section', 'eachpost' ); ?>
 
-<?php
+      <?php endwhile;//end of the loop ?>
-//the_title('<h3>','</h3>');
+      <?php wp_reset_postdata(); ?>
-//  echo '<ul>';
+    <?php endif; //end query ajut ?>
-//$postmetas = get_post_meta(get_the_ID());
-//	foreach($postmetas as $meta_key=>$meta_value) {
-//		echo '<li><code>' . $meta_key . '</code>:<code>' . $meta_value[0] . '</code></li>';
-//  } ;
-//  echo '</ul>';
-?>
 
-
+		</content>
-         <?php endwhile;//end of the loop ?>
-         <?php wp_reset_postdata(); ?>
-       <?php endif; //end query ajut ?>
-
-			</content>
 	</section>
 
 </main><!-- #main -->

sass/abstracts/variables/_colors.scss

@@ -25,17 +25,17 @@ $color__background-pre: $color__grey-lighter;
 $color__background-ins: $color__white-dark;
 $color__background-input: $color__grey-lighter;
 
-$color__text-screen: $color__black-grey;
+$color__text-screen: $color__black;
 $color__text-input: $color__black-light;
 $color__text-input-focus: $color__black;
-$color__link: $color__black-light; 
+$color__link: $color__black; 
-$color__link-visited: #303030; 
+$color__link-visited: $color__black-grey; 
-$color__link-hover: #707070;
+$color__link-hover: $color__black-light;
-$color__text-main: #404040;
+$color__text-main: #202020;
 
-$color__border-button: #000;
+$color__border-button: $color__black;
-$color__border-button-hover: #111;
+$color__border-button-hover: $color__black-grey;
-$color__border-button-focus: #222;
+$color__border-button-focus: $color__black-light;
 $color__border-input: $color__black;
 $color__border-abbr: $color__grey-dark;
 

sass/adminstyles.scss

@@ -29,6 +29,15 @@
     display:none;
   }
 }
+.editor-styles-wrapper .wp-block-button__link {
+  color: #000 !important;
+  background-color: #fff !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  text-decoration: none !important;
+  padding:  0.6em 1em 0.4em !important;
+  font-size: inherit !important;
+}
 
 // modify internal paths to make objects locally available 
 @import "adminstyles/fonts";

sass/base/elements/_buttons.scss

@@ -23,28 +23,104 @@ input[type="submit"],
 	}
 }
 .button-more {
-  //&::before {
+	  line-height: 2.5em;
-  //	content: "accedir";
-  //	position: absolute;
-  //	bottom: 1em;
-  //	left: 0.5em; 
-  //	font-family: $font__light;
-  //	font-size: 1rem;
-  //	line-height: 0;
-  //}
 	&::after {
 		content: "+";
 		display: inline-block;
-		width: 1.5rem;
+		width: 2rem;
-		height: 2rem;
+		font-family: $font__black;
-		padding: 0 0.5rem;
-	  font-family: $font__black;
 		font-size: 1.5rem;
+		text-align: right;
 	}
 	&:hover::after {
 		content: ">";
-		padding-left: 0.2rem;
+		font-size: 1rem;
-		font-size: 1.2rem;
-		line-height: 1.5;
 	}
 }
+.home-featured,.archive-posts {
+	.more-link {
+		position: relative;
+		.button-more {
+			border:none;
+			&::after {
+				content: "+";
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 3rem;
+				height: 3rem;
+				bottom: 0;
+				left: 0;
+				padding: 0;
+				border: 1px solid $color__black;
+				font-size: 4rem;
+				line-height: inherit;
+			}
+			&:hover::after {
+				content: ">";
+				padding: 0;
+				font-size: 2.5rem;
+				line-height: inherit;
+			}
+		}
+	}
+}
+.category-faq {
+	.more-link {
+		.button-more {
+			&::before {
+				content: "accedir";
+				position: absolute;
+				bottom: 1em;
+				left: 0.5em; 
+				font-family: $font__light;
+				font-size: 1rem;
+				line-height: 0;
+			}
+			&::after {
+				content: "+";
+				display: inline-block;
+				width: 8rem;
+				height: 2rem;
+				padding: 0 0.5rem;
+				text-align: right;
+				font-size: 2.5rem;
+				line-height: 0.7;
+			}
+			&:hover::after {
+				content: ">";
+				padding: 0 0.1rem;
+				font-size: 1.5rem;
+				line-height: 1.2;
+			}
+		}
+	}
+}
+
+	.ofisuport-search-form {
+    display: flex;
+		margin: 0.5rem 0;
+    .search-field {
+      padding: 0.5em;
+    }
+    .search-submit{
+      border: none;
+      margin: 0rem;
+      font-size: 0px;
+      width: 2.5rem;
+      height: 2.5rem;
+			background: none;
+			z-index: 10;
+    }
+    .ofisuport-icon-search:before {
+			z-index: 0;
+			min-width: 2.5rem;
+      min-height: 2.5rem;
+      font: normal 2rem/1 dashicons !important;
+      content: "\f179";
+      padding: 0;
+      margin: 0.1rem 0 0 -1.5rem;
+      position: absolute;
+    }
+	}

sass/base/elements/_links.scss

@@ -34,61 +34,61 @@ a {
 		text-decoration: none;
 	}
 }
-.home-featured,.archive-posts {
+//.home-featured,.archive-posts {
-	.category-faq,.type-ofisuport-ajut {
+//	.category-faq,.type-ofisuport-ajut {
-		position: relative;
+//		position: relative;
-		padding-bottom: 4rem;
+//		padding-bottom: 4rem;
-		.entry-title {
+//		.entry-title {
-			a {
+//			a {
-				&::after {
+//				&::after {
-					content: "+";
+//					content: "+";
-					position:absolute;
+//					position:absolute;
-					bottom: 0;
+//					bottom: 0;
-					left: 0;
+//					left: 0;
-					width: 3rem;
+//					width: 3rem;
-					height: 3rem;
+//					height: 3rem;
-					padding: 0 0.38rem;
+//					padding: 0 0.38rem;
-					border: 1px solid $color__black;
+//					border: 1px solid $color__black;
-					font-size: 4rem;
+//					font-size: 4rem;
-					line-height: 0.8;
+//					line-height: 0.8;
-				}
+//				}
-				&:hover::after {
+//				&:hover::after {
-					content: ">";
+//					content: ">";
-					padding: 0 0.38rem;
+//					padding: 0 0.38rem;
-					font-size: 2.5rem;
+//					font-size: 2.5rem;
-					line-height: 1.3;
+//					line-height: 1.3;
-				}
+//				}
-			}
+//			}
-		}
+//		}
-	}
+//	}
-	.category-faq {
+//	.category-faq {
-		.entry-title {
+//		.entry-title {
-			a {
+//			a {
-				&::before {
+//				&::before {
-					content: "accedir";
+//					content: "accedir";
-					position: absolute;
+//					position: absolute;
-					bottom: 1em;
+//					bottom: 1em;
-					left: 0.5em; 
+//					left: 0.5em; 
-					font-family: $font__light;
+//					font-family: $font__light;
-					font-size: 1rem;
+//					font-size: 1rem;
-					line-height: 0;
+//					line-height: 0;
-				}
+//				}
-				&::after {
+//				&::after {
-					content: "+";
+//					content: "+";
-					width: 8rem;
+//					width: 8rem;
-					height: 2rem;
+//					height: 2rem;
-					padding: 0 0.5rem;
+//					padding: 0 0.5rem;
-					text-align: right;
+//					text-align: right;
-					font-size: 2.5rem;
+//					font-size: 2.5rem;
-					line-height: 0.7;
+//					line-height: 0.7;
-				}
+//				}
-				&:hover::after {
+//				&:hover::after {
-					content: ">";
+//					content: ">";
-					padding: 0 0.1rem;
+//					padding: 0 0.1rem;
-					font-size: 1.5rem;
+//					font-size: 1.5rem;
-					line-height: 1.2;
+//					line-height: 1.2;
-				}
+//				}
-			}
+//			}
-		}
+//		}
-	}
+//	}
-}
+//}

sass/base/elements/_lists.scss

@@ -1,64 +1,112 @@
 ul,
 ol {
-	margin: 0 0 0.5em 0.5em;
+  margin: 0 0 0.5em 0.5em;
-	padding: 0;
+  padding: 0;
 }
 
 ul {
-	list-style: none;
+  list-style: none;
 }
 
 ol {
-	list-style: decimal;
+  list-style: decimal;
 }
 
 li > ul,
 li > ol {
-	margin-bottom: 0;
+  margin-bottom: 0;
-	margin-left: 0.5em;
+  margin-left: 0.5em;
 }
 
 dt {
-	font-weight: 700;
+  font-weight: 700;
 }
 
 dd {
-	margin: 0 0 0.5em 0.5em;
+  margin: 0 0 0.5em 0.5em;
-	padding: 0;
-}
-
-.oficina-suport-label {
-  margin: 0;
   padding: 0;
-  display: inline;
-   li {
-    display:inline-block;
-    margin:0.1rem;
-    padding: 0 0.2rem;
-		color: $color__white;
-		background-color: $color__black;
-		font-family: $font__black;
-    font-size: $font__size-body*0.7;
-    text-transform: uppercase;
-	}
-}
-.item-os_fund_target li {
-	background-color: $color__orange;
-}
-.item-os_fund_source li {
-	background-color: $color__lightblue;
-}
-.item-os_fund_field li {
-	background-color: $color__yellow;
-}
-.item-os_fund_dates li {
-	background-color: $color__green;
-}
-.item-os_fund_call {
-	display: block;
-	margin:0.2rem 0.1rem;
-	li {
-    font-size: $font__size-body*1.2;
-	}
 }
 
+article:not(.type-post){
+  .ofisuport-label {
+    margin: 0;
+    padding: 0;
+    display: inline;
+    li {
+      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*0.7;
+      text-transform: uppercase;
+    }
+  }
+  .item-os_fund_target li {
+    background-color: $color__orange;
+  }
+  .item-os_fund_source li {
+    background-color: $color__lightblue;
+  }
+  .item-os_fund_field li {
+    background-color: $color__yellow;
+  }
+  .item-os_fund_dates li {
+    background-color: $color__green;
+  }
+  .item-os_fund_call {
+    display: block;
+    margin:0.2rem 0;
+    li {
+      font-size: $font__size-body*1.2;
+    }
+  }
+  .item-os_fund_apply_text {
+      display:inline-block;
+      margin:0.1em 0;
+      padding: 0.2em 0.2em 0 0.2em;
+      color: $color__white;
+      background-color: $color__green;
+      font-family: $font__black;
+      font-size: $font__size-body*0.7;
+      text-transform: uppercase;
+  }
+}
+.ofisuport-faqs-types {
+  ul {
+    margin: 0;
+  }
+  .cat-item {
+    display:inline-block;
+    margin: 0.1em 0.5em 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;
+  }
+  .current-cat{
+    background-color: $color__orange;
+  }
+  a {
+    color: $color__white;
+    text-decoration: none;
+    &:visited, &:hover{
+      color: $color__white;
+    }
+  }
+}
+.single-ofisuport-ajut {
+  article:not(.type-post) {
+    .ofisuport-label {
+      li {
+        font-size: $font__size-body*1.1;
+      }
+    }
+    .item-os_fund_apply_text {
+      font-size: $font__size-body*1.1;
+    }
+  }
+}

sass/base/typography/_headings.scss

@@ -3,34 +3,58 @@
 	h2,
 	h3,
 	h4,
-	h5 {
+	h5,
-		text-transform: uppercase;
+	h6,
+	.h1,.h2,.h3,.h4,.h5,.h6{
 		clear: both;
 		line-height: $font__line-height-header;
 	}
-	h1 {
+	h1,.h1 {
 		font-family: $font__light;
 		font-size: $font__size-body*1.8;
+		text-transform: uppercase;
+		&.small {
+			font-size: $font__size-body*1.5;
+		}
 	}
-	h2 {
+	h2,.h2 {
 		font-family: $font__light;
 		font-size: $font__size-body*1.5;
+		text-transform: uppercase;
+		&.small {
+			font-size: $font__size-body*1.2;
+		}
 	}
-	h3 {
+	h3,.h3 {
 		font-family: $font__black;
 		font-size: $font__size-body*1.3;
+		text-transform: uppercase;
+		&.small {
+			font-size: $font__size-body*1;
+		}
 	}
-	h4 {
+	h4,.h4 {
 		font-family: $font__bold;
 		font-size: $font__size-body*1.2;
+		text-transform: uppercase;
+		&.small {
+			font-size: $font__size-body*0.9;
+		}
 	}
-	h5 {
+	h5,.h5 {
 		font-family: $font__medium;
 		font-size: $font__size-body*1.1;
+		text-transform: uppercase;
+		&.small {
+			font-size: $font__size-body*0.8;
+		}
 	}
-	h6 {
+	h6,.h6 {
 		font-family: $font__light;
 		font-size: $font__size-body*1.1;
+		&.small {
+			font-size: $font__size-body*0.8;
+		}
 	}
 	.site-main {
     h1,
@@ -39,17 +63,18 @@
 		h4,
 		h5,
 		h6,
+		.h1,.h2,.h3,.h4,.h5,.h6,
 		.entry-content {
         margin: 0;
     }  
 	}
 	.single {
-		h1 {
+		h1,.h1 {
 			font-family: $font__black;
 		}
 	}
 	.home-featured {
-		h2 {
+		h2,.h2 {
 			margin: 1.2rem 0; 
 			font-size: $font__size-body*2;
 			line-height: 1.2;
@@ -58,27 +83,54 @@
 	}
 }
 @media screen and (min-width: 48em) {
-	h1 {
+	h1,.h1 {
 		font-size: $font__size-body*3.5;
 	}
-	h2 {
+	h2,.h2 {
 		font-size: $font__size-body*2.5;
 	}
-	h3 {
+	h3,.h3 {
-		font-size: $font__size-body*2;
+		font-size: $font__size-body*1.5;
 	}
-	h4 {
+	h4,.h4 {
 		font-family: $font__black;
-		font-size: $font__size-body*1.7;
+		font-size: $font__size-body*1.3;
 	}
-	h5 {
+	h5,.h5 {
-		font-size: $font__size-body*1.5;
+		font-size: $font__size-body*1.3;
 	}
-	h6 {
+	h6,.h6 {
-		font-size: $font__size-body*1.5;
+		font-size: $font__size-body*1.3;
 	}
 	.home-featured {
-		h2 {
+		h2,.h2 {
+			font-size: $font__size-body*3.5;
+			border-bottom: 0.8rem solid $color__black;
+		}
+	}
+}
+@media screen and (min-width: 1440px) {
+	h1,.h1 {
+		font-size: $font__size-body*3.5;
+	}
+	h2,.h2 {
+		font-size: $font__size-body*2.5;
+	}
+	h3,.h3 {
+		font-size: $font__size-body*1.6;
+	}
+	h4,.h4 {
+		font-family: $font__black;
+		font-size: $font__size-body*1.4;
+	}
+	h5,.h5 {
+		font-size: $font__size-body*1.4;
+	}
+	h6,.h6 {
+		font-size: $font__size-body*1.4;
+	}
+	.home-featured {
+		h2,.h2 {
 			font-size: $font__size-body*3.5;
 			border-bottom: 0.8rem solid $color__black;
 		}

sass/base/typography/_typography.scss

@@ -9,7 +9,23 @@ textarea {
 	font-size: $font__size-body;
 	line-height: $font__line-height-body;
 }
-
+.hide {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	min-width: unset;
+	max-width: unset;
+	width: 0px;
+	min-height: unset;
+	max-height: unset;
+	height: 0px;
+	font-size: 0px;
+	line-height: 0px;
+	text-decoration: none;
+	border: 0;
+	background-color: transparent;
+	background: none;
+}
 @import "headings";
 @import "copy";
 @import "fonts";

sass/components/content/_posts-and-pages.scss

@@ -5,7 +5,7 @@
 
   .post,
   .page {
-    margin: 0 0 1.5em;
+    margin: 0 0 5em;
   }
 
   .updated:not(.published) {
@@ -22,17 +22,30 @@
     clear: both;
     margin: 0 0 1.5em;
   }
+
+  /* used in 
+   * ./template-parts/section-eachpost.php 
+   * */
   .ofisuport-card-each {
     .entry-title,h6 {
       border-bottom: 1px solid $color__black;
       margin: 0;
       padding: 0.5rem 0;
+      //word-break: break-word;
     }
     p {
       padding: 0.5rem 0;
       margin:0;
     }
+    .more-link {
+      display: inline-blocK;
+      margin-top: 2rem;
+    }
   } 
+  /* used in 
+   * ./template-parts/content-ofisuport-ajut.php 
+   * ./template-parts/section-eachpost.php 
+   * */
   .ofisuport-fund-info-fields, 
   .ofisuport-fund-info-contact-fields {
     display: grid;
@@ -61,8 +74,6 @@
       margin: 1rem 0 0.5rem 0;
     }
   }
-  .oficina-suport-label {
-  }
   .ofisuport-funder-name,
   .ofisuport-fund-contact-name,
   .ofisuport-fund-web {
@@ -78,49 +89,118 @@
       font-size: 0.8rem;
     }
   }
-//  .page-template-funds-search {                                         
+  /* filters form custom fields
-    .ofisuport-filtered-funds {
+   */
-      display:grid;
+  .ofisuport-filtered-funds {
-      grid-template-columns: 1fr 1fr;
+    display:grid;
+    grid: 1fr;
+    .os_fund_target,
+    .os_fund_source,
+    .os_fund_field {
+      .filter {
+        display: none;
+      }
     }
-    .ofisuport-fund-filter {
+  }
-      display: grid;
+  .ofisuport-filters {
-      grid-template-columns: repeat(1 , 1fr);
+    section {
-      gap: $grid__gap;
+      margin: 1em 0;
     }
-    .archive-posts {
+    .oficinasuport-titol-opcions {
-      grid-template-columns: repeat(1 , 1fr);
     }
-  //}
+  }
+  .archive-posts {
+    // https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid#61240964
+    grid-template-columns: repeat(1 , minmax(0,1fr));
+  }
+
+  .oficinasuport-titol-opcions {
+    // applied in forms and contactforms
+    display: inline-block;
+    width: 100%;
+    max-width: 13em;
+    margin-bottom: 0;
+    margin-bottom: 1rem;
+    padding: 0.6em 1em 0.4em;
+    clear: both;
+    cursor: pointer;
+    font-family: $font__black;
+    font-size: $font__size-body*0.9;
+    border: 1px solid $color__border-button;
+    text-transform: uppercase;
+    &:after {
+      content: ">";
+      display: inline;
+      float:right; 
+    }
+    &:hover {
+      &:after {
+        transform: rotate(90deg);
+        animation: rotate 0.5s;
+      }
+    }
+    @keyframes rotate {
+      0% {
+        transform: rotate(0);
+      }
+      100% {
+        transform: rotate(90deg);
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 48em) {
   //only smaller than 48em
+
+  .post,
+  .page {
+    margin: 0 0 1em;
+  }
+
+  .ofisuport-filters {
+    section {
+      display: block;
+      h5 {
+        display: block;
+        width: 100%;
+      }
+      .filter {
+        display: inline-block;
+        width: 45%;
+        margin-top: 0.5rem;
+        margin-right: 0.3em;
+        float: left;
+        &:last-of-type {
+          margin-bottom: 2rem;
+        }
+      }
+    }
+  }
 }
 @media screen and (min-width: 48em) {
   //only bigger than 48em
-  //.page-template-funds-search {
+  .ofisuport-filters {
+    padding-right: 2em;
+    section {
+      margin: 1em 0;
+    }
+  }
     .ofisuport-filtered-funds {
       grid-template-columns: 1fr 2fr;
     }
-    .ofisuport-fund-filter {
-    }
     .archive-posts {
-      grid-template-columns: repeat(2 , 1fr);
+      grid-template-columns: repeat(2 , minmax(0,1fr));
+      grid-gap: 3em;
     }                                                                                                  
-  //} 
 }
 @media screen and (min-width: 80em) {
   //only bigger than 80rem
-  //.page-template-funds-search {
     .ofisuport-filtered-funds {
       grid-template-columns: 1fr 3fr;
     }
-    .ofisuport-fund-filter {
-    }
     .archive-posts {
-      grid-template-columns: repeat(3 , 1fr);
+      grid-template-columns: repeat(3 , minmax(0,1fr));
     }
 
-  //}
 }

sass/components/navigation/_navigation.scss

@@ -18,6 +18,176 @@
 			margin: 0;
 			padding-left: 0;
 
+      ul.sub-menu {
+        padding-top: 0.5rem;
+        padding-left: 1rem;
+      }
+		}
+
+		li {
+			position: relative;
+
+			&:hover > a,
+			&.focus > a {
+			}
+		}
+
+		a {
+			display: flex;
+			align-items: center;
+			min-height: 100%;
+			padding: 0 0.5rem;
+			text-decoration: none;
+			font-size: 1rem;
+		}
+
+		.current_page_item > a,
+		.current-menu-item > a,
+		.current_page_ancestor > a,
+		.current-menu-ancestor > a {
+			font-weight: bold;
+			font-family: $font__bold;
+			border-left: 1px solid $color__black;
+		}
+	}
+
+	.main-navigation {
+		a[href^="http://localhost"],
+		a[href^="http://oficinasuport.xarxaprod.cat"],
+		a[href^="https://oficinasuport.xarxaprod.cat"]
+		{
+			font-family: $font__bold;
+			border-left: 1px solid $color__black;
+		}
+	}
+	.secondary-navigation {
+		padding: 0 1em 1em 0;
+		ul {
+			display: inline-block;
+			li {
+				padding: 0.5em 0;
+			}
+		}
+		a {
+			text-transform: uppercase;
+		}
+	}
+
+	.menu-item-has-children {
+	}
+
+	/* begin of menu-hidden */
+	.toggle-secondary-navigation .show-mobile{
+		display:inherit;
+	}
+	.toggle,
+	.toggled-menu {
+		display: none;
+	}
+	.toggle:checked+.toggled-menu{
+		display: block;
+		position: absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100vh;
+		margin-top: 0;
+		padding: 0 2rem;
+		background-color: $color__white;
+	}
+	.toggle-show {
+		position: relative;
+		display: inline-block;
+		width: 1.8em;
+		height: 1.4em;
+		margin-right: 0.3em;
+		border-top: 0.3em solid $color__black;
+		border-bottom: 0.3em solid $color__black;
+	}
+	.toggle-show::before {
+		content: "";
+		position: absolute;
+		top: 0.3em;
+		left: 0;
+		width: 100%;
+		border-top: 0.3em solid $color__black;
+	}
+	.toggle-hide {
+		display: flex;
+		justify-content: end;
+		margin-right: -0.5em;
+	}
+	.toggle-hide::after{
+		content: "x";
+		padding: 0;
+		font-size: 3rem;
+		font-weight: bold;
+	}
+	/* end of menu hidden*/
+
+	/* Small menu. */
+	.main-navigation.toggled {
+		ul {
+			display: block;
+		}
+		.main-navigation-content {
+			display: inline-block;
+			position: absolute;
+			top: 5rem;
+			left: 0;
+			width: 100%;
+			height: calc(100vh - 5rem);
+			padding: 3rem;
+			background-color: $color__white;
+		}
+	}
+	.menu-toggle {
+		display: inline-block;
+		width: 10rem;
+		height: 4rem;
+		margin: 0;
+		padding: 0;
+		font-size: 0;
+		border: none;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+@media screen and (max-width: 47.99em) {
+	.site-branding {
+		display: block;
+		width: 0px;
+		height: 0px;
+		overflow: hidden;
+		margin: 0;
+		padding: 0;
+	}
+	.main-navigation-content {
+		text-transform: uppercase;
+		li {
+			padding: 0.5rem 0; 
+		}
+	}
+	.secondary-navigation-content {
+		padding: 4rem 2rem;
+	}
+}
+@media screen and (min-width: 48em) {
+	.site-branding {
+	}
+	.custom-logo {
+		min-width: 11rem;
+		margin: 1rem 1rem 1rem 0;
+	}
+	.menu-toggle {
+		display: none;
+	}
+
+	.main-navigation,.secondary-navigation {
+		ul {
+			display: flex;
+
 			ul {
 				background-color: $color__white;
 				box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
@@ -60,55 +230,59 @@
 			}
 		}
 
-		li {
-			position: relative;
-
-			&:hover > a,
-			&.focus > a {
-			}
-		}
-
 		a {
-			display: flex;
-			align-items: center;
-			min-height: 100%;
 			padding: 0 0.5rem;
-			text-decoration: none;
-			font-size: 1rem;
 		}
-
 		.current_page_item > a,
 		.current-menu-item > a,
 		.current_page_ancestor > a,
 		.current-menu-ancestor > a {
-			font-weight: bold;
+			border-left: none;
-			font-family: $font__bold;
-			border-left: 1px solid $color__black;
 		}
 	}
-
+	.main-navigation { 
-	.main-navigation {
+		padding-bottom: 1em;
+		ul {
+			justify-content: end;
+      ul.sub-menu {
+        flex-direction: column;
+        padding-top: 2rem;
+        padding-left: 1rem;
+        padding-bottom: 1rem;
+        li {
+          margin: 0.5rem 0;
+        }
+      }
+		}
 		a[href^="http://localhost"],
 		a[href^="http://oficinasuport.xarxaprod.cat"],
 		a[href^="https://oficinasuport.xarxaprod.cat"]
 		{
 			font-family: $font__bold;
-			border-left: 1px solid $color__black;
+			border-left:none;
 		}
+		a[href^="http://localhost"]::after,
+		a[href^="http://oficinasuport.xarxaprod.cat"]::after,
+		a[href^="https://oficinasuport.xarxaprod.cat"]::after,
+		.current-menu-item a::after {
+			display: inline-block;
+			content: "";
+			position: absolute;
+			left: 5%;
+			min-height: 2px;
+			height: 100%;
+			width: 90%;
+			margin-top: 2.3em;
+			border-bottom: 0.3rem solid $color__black;
+		}
+    .menu-item-has-children {
+			ul {
+      }
+  	}
 	}
 	.secondary-navigation {
-		padding: 1em 0;
+		padding: 1.5em 0;
-		ul {
-			display: inline-block;
-			li {
-				padding: 0.5em 0;
-			}
-		}
-		a {
-			text-transform: uppercase;
-		}
 	}
-
 	.menu-item-has-children {
 		&::after {
 			content: "";
@@ -134,132 +308,17 @@
 			}
 		}
 	}
-
+		/* 
-	/* begin of menu-hidden */
+		 * css menu toggler 
-	.toogle-secondary-navigation .show-mobile{
+		 * */
-		display:inherit;
+	.toggle-secondary-navigation .show-mobile,
-	}
+	.toggle-secondary-navigation .hide-not-mobile{
-	.toogle,
-	.toogled-menu {
 		display: none;
 	}
-	.toogle:checked+.toogled-menu{
+	.toggled-menu {
-		display: block;
-		position: absolute;
-		left:0;
-		top:0;
-		width: 100%;
-		height: 100vh;
-		margin-top: 0;
-		padding: 7em 4em 0 4em;
-		background-color: $color__white;
-	}
-	.toogle-show {
-		position: relative;
-		display: inline-block;
-		width: 1.8em;
-		height: 1.4em;
-		margin-right: 0.3em;
-		border-top: 0.3em solid $color__black;
-		border-bottom: 0.3em solid $color__black;
-	}
-	.toogle-show::before {
-		content: "";
-		position: absolute;
-		top: 0.3em;
-		left: 0;
-		width: 100%;
-		border-top: 0.3em solid $color__black;
-	}
-	.toogle-hide {
-		display: flex;
-		justify-content: center;
-	}
-	.toogle-hide::after{
-		content: "x";
-		padding: 0;
-		font-size: 3rem;
-		font-weight: bold;
-	}
-	/* end of menu hidden*/
-
-	/* Small menu. */
-	.menu-toggle,
-	.main-navigation.toggled ul {
-		display: block;
-	}
-	.ofisuport-filters {
-    .ofisuport-filter {
-      //float: left;
-	  }
-  }
-}
-@media screen and (min-width: 48em) {
-	.site-branding {
-	}
-	.custom-logo {
-		min-width: 11rem;
-		margin: 1rem 1rem 1rem 0;
-	}
-	.menu-toggle {
-		display: none;
-	}
-
-	.main-navigation,.secondary-navigation {
-		ul {
-			display: flex;
-		}
-		a {
-			padding: 0 0.5rem;
-		}
-		.current_page_item > a,
-		.current-menu-item > a,
-		.current_page_ancestor > a,
-		.current-menu-ancestor > a {
-			border-left: none;
-		}
-	}
-	.main-navigation { 
-		padding-bottom: 1em;
-		ul {
-			justify-content: end;
-		}
-		a[href^="http://localhost"],
-		a[href^="http://oficinasuport.xarxaprod.cat"],
-		a[href^="https://oficinasuport.xarxaprod.cat"]
-		{
-			font-family: $font__bold;
-			border-left:none;
-		}
-		a[href^="http://localhost"]::after,
-		a[href^="http://oficinasuport.xarxaprod.cat"]::after,
-		a[href^="https://oficinasuport.xarxaprod.cat"]::after,
-		.current-menu-item a::after {
-			display: inline-block;
-			content: "";
-			position: absolute;
-			left: 5%;
-			min-height: 2px;
-			height: 100%;
-			width: 90%;
-			margin-top: 2.3em;
-			border-bottom: 0.3rem solid $color__black;
-		}
-	}
-	.secondary-navigation {
-		padding: 1.5em 0;
-	}
-	/* 
-	 * css menu toogler 
-	 * */
-	.toogle-secondary-navigation .show-mobile,
-	.toogle-secondary-navigation .hide-not-mobile{
-		display: none;
-	}
-	.toogled-menu {
 		display: inherit;
 	}
-	/* end css menu toogler 
+	/* end css menu toggler 
 	 * */
 }
 
@@ -269,6 +328,7 @@
 
 	.site-main & {
 		margin: 0 0 1.5em;
+		align-self: end;
 	}
 
 	.nav-links {
@@ -280,14 +340,14 @@
 	}
 
 	.nav-next {
-		text-align: end;
+		//text-align: end;
 		flex: 1 0 50%;
 	}
 }
 @media screen and (min-width: 80em) {
 	.main-navigation,.secondary-navigation {
-		.toogle-sidebar-segona .show-mobile,
+		.toggle-sidebar-segona .show-mobile,
-		.toogle-sidebar-segona .hide-not-mobile{
+		.toggle-sidebar-segona .hide-not-mobile{
 			display:none;
 		}
 

sass/layouts/_no-sidebar.scss

@@ -33,14 +33,15 @@
 		box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0);
 		.main {
 			display: flex;
-			flex-flow: row;
+			flex-flow: column;
-			align-items: center;
+			align-items: initial;
 			justify-content: space-around;
+			padding-left: 1rem;
 		}
 		.secondary {
 			display: flex;
 			flex-flow: column;
-			align-items: center;
+			align-items: end;
 		}
 	}
 	.site-main {
@@ -60,6 +61,10 @@
 @media screen and (max-width: 48em) {
 	//only smaller than 48em
 	.site-header {
+		display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0.5rem 0;
+    align-items: center;
 	}
 	.site-main {
 	}
@@ -84,10 +89,11 @@
 	}
 	.site-header {
 		.main {
-			flex-flow: column;
+			align-items: center;
 		}
 		.secondary {
 			border-top: 1px solid $color__grey-lighter;
+			align-items: center;
 		}
 	}
 	.site-main {
@@ -107,6 +113,12 @@
 	.ofisuport-destacats,.ofisuport-featured,.archive-posts {
 		grid-template-columns: repeat(4 , 1fr);
 	}
+	.ofisuport-faqs-types {
+		margin: 1em 0;
+		.ofisuport-label {
+		//	margin: 0;
+		}
+	}
 }
 @media screen and (min-width: 80em) {
 	//only bigger than 80rem

sass/plugins/contactform7/_contactform7.scss

@@ -1,8 +1,5 @@
-//.wpcf7-form-control-wrap {
+/* contact forms styles used in wp backend with CF7                                           
-//  input {
+ */
-//    margin-top: -1em;
-//  }
-//}
 
 .wpcf7-not-valid:not(:focus) {
   background-color: $color__red;
@@ -23,9 +20,39 @@
   padding: 0rem;
 }
 .wpcf7-form {
-  .contactform-name, .wpcf7-form .contactform-email {
+  .wpcf7-submit {
-  max-width: 40%;
+    margin-left: 1rem;
-  display: inline-block;
+  }
+  .wpcf7-spinner {
+    margin: 0 -24px 0 0;
+  }
+}
+
+.wpcf7-list-item-label {
+  margin: 0 0.3rem;
+}
+
+/* styles applied if written in wp backend
+ * class="contactform contactform-WHATEVER"
+ * */
+.contactform {
+  margin-bottom: 1rem;
+  br {
+    display: none;
+  }
+  p {
+    display: block;
+    break-inside: avoid-column;
+    margin-top: 0;
+  }
+  .break-after-column, .saltar-columna{
+    break-after:column;
+  }
+}
+.contactform-consultoria {
+  .contactform-name, .contactform-email {
+    max-width: 40%;
+    display: inline-block;
   }
   .contactform-name {
     float: left;
@@ -36,16 +63,54 @@
   }
   .contactform-message {
   }
-  
+}
-  .contactform-acceptance {
+.contactform-acceptance {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: end;
+  justify-content: end;
-  }
+}
-  .wpcf7-submit {
+.contactform-fund-info {
-    margin-left: 1rem;
+  display: inline-block;
-  }
+  column-count: 2;
-  .wpcf7-spinner {
+  column-gap: 2em;
-    margin: 0 -24px 0 0;
+  width: 100%;
+  .contactform-descripcio textarea {
+    display: inline-block;
+    min-height: 15.5em;
   }
 }
+.contactform-fund-options {
+  display: flex;
+  justify-content: space-between;
+  p{
+    display: inline-block;
+  }
+  .wpcf7-list-item {
+    display:block;
+    label {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: left;
+    }
+  }
+  .wpcf7-form-control-wrap {
+    &[data-name="oferta-data-start"],&[data-name="oferta-data-end"] {
+      display: block;
+      input[type="date"] {
+        width: auto;
+        background-color: $color__white;
+      }
+      &::before {
+        display: inline-block;
+        width: 2rem;
+      }
+    }
+    &[data-name="oferta-data-start"]::before {
+      content:"inici: ";
+    }
+    &[data-name="oferta-data-end"]::before {
+      content:"fi: ";
+    }
+  }
+}
+

sass/style.scss

@@ -1,22 +1,22 @@
 /*
 
-Theme Name: Oficina de Suport theme
+Theme Name: Espai Assessorament - XarxaProd.cat
-Theme URI: http://underscores.me/
+Theme URI: https://git.hangar.org/xarxaprod/
-Author: jorge-vitrubio.net
+Author: Hangar.org Tech Lab - hangar.org
-Author URI: https://vitrubio.net
+Author URI: https://hangar.org
-Description: theme for the Oficina de Suport de Xarxaprod.cat
+Description: theme for the Espai d'assessorament, projecte oficina de suport de <a href="https://xarxaprod.cat">XarxaProd</a>. Inclou la possibilitat de publicar, catalogar i cercar ajuts, resoldre dubtes amb FAQs i altres. Design by Eudald Van der Pla <a href="https://vanderpla.com">vanderpla.com</a>. Coding template and theme by <a href="https://vitrubio.net">Jorge - vitrubio.net</a>
-Version: 1.0.0
+Version: 1.0.6
-Tested up to: 5.4
+Tested up to: 6.2
-Requires PHP: 5.6
+Requires PHP: 7.4
-License: GNU General Public License v2 or later
+License: GNU General Public License v3 or later
-License URI: LICENSE
+License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: ofisuport
-Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
+Tags: custom-logo, custom-menu, search,custom post-type,  translation-ready
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned.
 
-Oficina de Suport theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
+Epai d'Assessorament, projecte oficina de suport de la XarxaProd.cat theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of

search.php

@@ -15,14 +15,45 @@ get_header();
 		<?php if ( have_posts() ) : ?>
 
 			<header class="page-header">
-				<h1 class="page-title">
-					<?php
-					/* translators: %s: search query. */
-					printf( esc_html__( 'Search Results for: %s', 'ofisuport' ), '<span>' . get_search_query() . '</span>' );
-					?>
-				</h1>
 			</header><!-- .page-header -->
 
+<?php 
+// check if is ofisuport-ajut
+if ( get_post_type( get_the_ID() ) == 'ofisuport-ajut'){ ?>
+    <section id="filteredfunds" class="ofisuport-filtered-funds ofisuport-ajuts-filtrats">
+      <aside id="fundsfilter" class="ofisuport-filter-funds ofisuport-fitre-ajuts">
+
+        <script type="text/javascript">
+          <!-- https://stackoverflow.com/a/48314274 -->
+          (function($) {
+          $('.fund-filter').ready(function() {
+            $('.oficinasuport-titol-opcions').click(function() {
+              $(this).siblings(".filter").toggle();
+            });
+          });
+          })(jQuery);
+        </script>
+				<?php ofisuport_ajuts_filters_form(); // function defined in the plugin ?>
+
+      </aside>
+<?php } elseif ( in_category ( 'faq' ) ) { ?>
+		<section id="filteredsearch" class="ofisuport-searched-query ofisuport-search-faqs">
+   
+       <?php //if( in_category('faq') ) : ?>
+         <?php ofisuport_display_faqs_labels(); ?>
+         <?php ofisuport_display_faqs_search(); ?>
+       <?php //endif; //end if is_category faq ?>
+   
+
+<?php } else { ?>
+		<section id="filteredsearch" class="ofisuport-searched-query">
+      <?php
+      /* translators: %s: search query. */
+      printf( esc_html__( 'Search Results for: %s', 'ofisuport' ), '<br/><span class="h5 search-query">' . get_search_query() . '</span>' );
+?>
+<?php }; // end if is ofisuport-ajut ?>
+    <content class="archive-posts <?php ofisuport_class_posttype(); ?>">
+
 			<?php
 			/* Start the Loop */
 			while ( have_posts() ) :
@@ -46,6 +77,8 @@ get_header();
 		endif;
 		?>
 
+		</content>
+   </section>
 	</main><!-- #main -->
 
 <?php

single.php

@@ -18,17 +18,6 @@ get_header();
 
 			get_template_part( 'template-parts/content', get_post_type() );
 
-			//the_post_navigation(
-			//	array(
-			//		'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Anterior:', 'ofisuport' ) . '</span> <span class="nav-title">%title</span>',
-			//		'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Següent:', 'ofisuport' ) . '</span> <span class="nav-title">%title</span>',
-			//	)
-			//);
-
-			// If comments are open or we have at least one comment, load up the comment template.
-			//if ( comments_open() || get_comments_number() ) :
-			//	comments_template();
-			//endif;
 
 		endwhile; // End of the loop.
 		?>

template-parts/content-none.php

@@ -11,7 +11,7 @@
 
 <section class="no-results not-found">
 	<header class="page-header">
-		<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'ofisuport' ); ?></h1>
+		<h1 class="page-title"><?php esc_html_e( 'No s&rsquo;ha trobat res', 'ofisuport' ); ?></h1>
 	</header><!-- .page-header -->
 
 	<div class="page-content">
@@ -34,14 +34,14 @@
 		elseif ( is_search() ) :
 			?>
 
-			<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'ofisuport' ); ?></p>
+			<p><?php esc_html_e( 'Ho sento, però no hi ha res que coincideixi amb els termes de cerca. Torneu-ho a provar amb algunes paraules clau diferents.', 'ofisuport' ); ?></p>
 			<?php
 			get_search_form();
 
 		else :
 			?>
 
-			<p><?php esc_html_e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'ofisuport' ); ?></p>
+			<p><?php esc_html_e( 'Sembla que no podem trobar el que busques. Potser la cerca pot ajudar.', 'ofisuport' ); ?></p>
 			<?php
 			get_search_form();
 

template-parts/content-ofisuport-ajut.php

@@ -12,7 +12,7 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
 	<header class="entry-header">
-		<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
+		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
 	</header><!-- .entry-header -->
 
 	<section class="ofisuport-fund-info-contact-fields">
@@ -33,12 +33,19 @@
 	  </div>
     <?php endif; ?>
 
-	  <?php if( get_field('os_fund_web') ): ?>
+	  <?php if( get_field('os_fund_contact_mail') ): ?>
 	  <div class="ofisuport-fund-info-field">
-      <p class="ofisuport-fund-web"><a href="<?php the_field('os_fund_web'); ?>"><?php the_field('os_fund_web'); ?></a></p>
+      <p class="ofisuport-fund-contact-mail"><?php the_field('os_fund_contact_mail'); ?></p>
-    </div>
+	  </div>
     <?php endif; ?>
 
+	  <?php if( get_field('os_fund_contact_tel') ): ?>
+	  <div class="ofisuport-fund-info-field">
+      <p class="ofisuport-fund-contact-tel"><?php the_field('os_fund_contact_tel'); ?></p>
+	  </div>
+    <?php endif; ?>
+
+
 	</section>
 
 	<div class="entry-content">
@@ -88,11 +95,15 @@
 	  <div class="ofisuport-fund-info-field">
       <h6>Termini</h6>
      <?php if( get_field('os_fund_apply_begin') || get_field('os_fund_apply_end') ): ?>
-      <ul class="oficina-suport-label item-os_fund_dates">
+      <ul class="ofisuport-label item-os_fund_dates">
-        <li> <?php the_field('os_fund_apply_begin'); ?> </li>
+        <li class="item-os_fund_apply_begin">del <?php the_field('os_fund_apply_begin'); ?> </li>
-        <li> <?php the_field('os_fund_apply_end'); ?> </li>
+        <li class="item-os_fund_apply_end">al <?php the_field('os_fund_apply_end'); ?> </li>
       </ul>
      <?php endif; ?>
+	  <?php if( get_field('os_fund_apply_text') ): ?>
+      <p class="item-os_fund_apply_text"><?php the_field('os_fund_apply_text'); ?></p>
+    <?php endif; ?>
+
     </div>
 	
  	<?php if( get_field('os_fund_web') ): ?>

template-parts/content-post.php

@@ -12,12 +12,15 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header class="entry-header">
 		<?php
-			the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
+			//the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
+			the_title( '<h3 class="entry-title">', '</h3>' );
 
 		if ( 'post' === get_post_type() ) :
 			?>
 			<div class="entry-meta">
-				<?php
+       <?php
+        ofisuport_display_each_faq_categories();
+        //ofisuport_display_faqs_labels();
 				//ofisuport_posted_on();
 				//ofisuport_posted_by();
 				?>
@@ -52,6 +55,6 @@
 	</div><!-- .entry-content -->
 
 	<footer class="entry-footer">
-		<?php ofisuport_entry_footer(); ?>
+		<?php //ofisuport_entry_footer(); ?>
 	</footer><!-- .entry-footer -->
 </article><!-- #post-<?php the_ID(); ?> -->

template-parts/content-search.php

@@ -11,7 +11,7 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header class="entry-header">
-		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
+		<?php the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>
 
 		<?php if ( 'post' === get_post_type() ) : ?>
 		<div class="entry-meta">

template-parts/section-eachpost.php

@@ -10,7 +10,7 @@
 
 			<article id="post-<?php the_ID(); ?>" <?php post_class('ofisuport-card-each'); ?>>
          <h3 class="entry-title">
-           <a href="<?php the_permalink(); ?>" rel="bookmark">
+           <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
              <?php the_title(); ?>
            </a>
          </h3>
@@ -24,12 +24,25 @@
            <?php get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_target') ); ?>
            <?php get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_source') ); ?>
            <?php get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_field') ); ?>
-           <ul class="oficina-suport-label item-os_fund_dates">
+          <?php if( get_field('os_fund_apply_begin') || get_field('os_fund_apply_end') ): ?>
-             <li> <?php the_field('os_fund_apply_begin'); ?> </li>
+           <ul class="ofisuport-label item-os_fund_dates">
-             <li> <?php the_field('os_fund_apply_end'); ?> </li>
+             <li>del <?php the_field('os_fund_apply_begin'); ?></li>
+             <li>al <?php the_field('os_fund_apply_end'); ?></li>
            </ul>
-           <?php //get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_apply_begin') ); ?>
+           <?php endif; ?>
-           <?php //get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_apply_end') ); ?>
+           <?php if( get_field('os_fund_apply_text') ): ?>
+           <ul class="ofisuport-label item-os_fund_dates">
+            <li class=""><?php the_field('os_fund_apply_text'); ?></li>
+            </ul>
+           <?php endif; ?>
+
+           <?php if( get_field('os_fund_call') ): ?>
            <?php get_template_part( 'template-parts/section', 'list-checkbox', array('iterate_field' => 'os_fund_call') ); ?>
+           <?php endif; ?>
          </aside>
+         <nav class="more-link">
+         <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark" class="button button-more">
+            <span class="hide"><?php the_title(); ?></span>
+           </a>
+         </nav>
        </article><!-- #post-<?php the_ID(); ?> -->

template-parts/section-featured.php

@@ -25,10 +25,10 @@
      <?php 
      // https://developer.wordpress.org/reference/functions/get_posts/
      // https://www.advancedcustomfields.com/resources/true-false/
-     $the_query = new WP_Query(
+     $featured_query = new WP_Query(
        array(
-         'post_type' => 'any',
+         'post_type' => array( 'post', 'ofisuport-ajut' ),
-         'post_per_page' => '4',
+         'posts_per_page' => '4',
          'meta_query' => array(
              array(
                'key' => 'os_home_show',
@@ -37,8 +37,8 @@
            )
        ) );
      ?>
-     <?php if ( $the_query->have_posts() ) : ?> 
+     <?php if ( $featured_query->have_posts() ) : ?> 
-       <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
+       <?php while ( $featured_query->have_posts() ) : $featured_query->the_post(); ?>
    
          <?php get_template_part( 'template-parts/section', 'eachpost' ); ?>
    

template-parts/section-list-checkbox.php

@@ -20,7 +20,7 @@
       $fields= get_field($fielditerate);
       if( $fields ): 
       ?>
-      <ul class="oficina-suport-label item-<?php echo $fielditerate ?>">
+      <ul class="ofisuport-label item-<?php echo $fielditerate ?>">
       <?php foreach( $fields as $field ): ?>
         <li>
            <?php  echo $field['label']; ?>

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);
+
+?>