implement search page and search results

kit/css/footer.css

@@ -220,7 +220,6 @@
 
 @media (max-width: 960px) {
   .meta-footer-slogan {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
 }

kit/functions.php

@@ -169,6 +169,38 @@ function kit_customize_css()
                background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
+             .headline-element h2::after {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             form input[type='submit'] {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-searchbox form fieldset .tx-indexedsearch-search-submit button {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-browsebox ul li.tx-indexedsearch-browselist-currentPage a {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-browsebox ul li a:hover {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-res {
+               border-bottom: 1px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title a:hover {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .tx-indexedsearch .tx-indexedsearch-res .link-more span:hover {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
          </style>
     <?php
 }

kit/index.php

@@ -4,6 +4,29 @@ get_header();
 
 <main>
 
+
+  <?php
+  if ( have_posts() ) :
+    /* Start the Loop */
+    while ( have_posts() ) :
+      the_post();
+
+      /*
+       * Include the Post-Type-specific template for the content.
+       * If you want to override this in a child theme, then include a file
+       * called content-___.php (where ___ is the Post Type name) and that will be used instead.
+       */
+      get_template_part( 'template-parts/content', 'page' );
+
+    endwhile;
+
+    the_posts_navigation();
+  else :
+    get_template_part( 'template-parts/content', 'page' );
+  endif;
+  ?>
+
+
     <section class="full-width background-color-page-theme" id="c947">
       <div class="intro-element align-center background-color-page-theme-contrast" style="background-image: url(/fileadmin/user_upload/00_Startseite/20191216-CN-02-251_Homepage.jpg);">
         <div class="content-wrap">

kit/search.php

@@ -0,0 +1,92 @@
+<?php
+get_header();
+?>
+
+<main>
+
+
+
+  <section class="background-color-white">
+  <div class="content-wrap">
+
+
+    <div class="headline-element" id="c145">
+      <h2>Suche</h2>
+    </div>
+
+
+
+<div id="c139" class="frame frame-default frame-type-list frame-layout-0">
+<div class="tx-indexedsearch">
+
+
+  <div id="c139" class="frame frame-default frame-type-list frame-layout-0">
+    <div class="tx-indexedsearch">
+
+      <div class="tx-indexedsearch-searchbox">
+        <form method="get" role="search" action="<?php echo site_url(‘/’); ?>">
+      <div>
+    </div>
+      <fieldset>
+        <div class="tx-indexedsearch-form">
+          <label for="tx-indexedsearch-searchbox-sword">Suchen nach:</label>
+          <input class="tx-indexedsearch-searchbox-sword" type="text" name="s" value="<?php the_search_query(); ?>" />
+        </div>
+        <div class="tx-indexedsearch-search-submit">
+          <button type="submit" class="tx-indexedsearch-searchbox-button" />
+            <span>Suchen</span>
+          </button>
+        </div>
+      </fieldset>
+      </form>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="tx-indexedsearch-browsebox">
+    				<p>
+    					Anzeige der Ergebnisse <strong>1 bis 10</strong> von insgesamt <strong>12</strong>
+    				</p>
+    				<!-- render the anchor-links to the sections inside the displayed result rows -->
+
+    				<ul class="tx-indexedsearch-browsebox"><li class="tx-indexedsearch-browselist-currentPage"><strong><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='0';document.getElementById('tx_indexedsearch').submit();return false;">Seite 1</a></strong></li><li><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='1';document.getElementById('tx_indexedsearch').submit();return false;">Seite 2</a></li><li><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='1';document.getElementById('tx_indexedsearch').submit();return false;">Nächste &gt;</a></li></ul>
+    			</div>
+
+
+    <?php while ( have_posts() ) : the_post(); ?>
+    <div class="tx-indexedsearch-res">
+    	<h3>
+    		<span class="tx-indexedsearch-title">
+          <a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a>
+        </span>
+    	</h3>
+    	<p class="tx-indexedsearch-description">
+        <?php the_excerpt(); ?>
+      </p>
+    	<a href="#" class="link-more"><span>Weiterlesen</span></a>
+    </div>
+    <?php endwhile; ?>
+
+
+    			<div class="tx-indexedsearch-browsebox">
+    				<ul class="tx-indexedsearch-browsebox"><li class="tx-indexedsearch-browselist-currentPage"><strong><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='0';document.getElementById('tx_indexedsearch').submit();return false;">Seite 1</a></strong></li><li><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='1';document.getElementById('tx_indexedsearch').submit();return false;">Seite 2</a></li><li><a href="#" onclick="document.getElementById('tx_indexedsearch_pointer').value='1';document.getElementById('tx_indexedsearch').submit();return false;">Nächste &gt;</a></li></ul>
+    			</div>
+
+
+    </div>
+
+    </div>
+
+
+      </div>
+    </section>
+
+
+</main>
+
+<?php
+
+  get_template_part('template-parts/sidebar');
+  get_footer();

kit/searchpage.php

@@ -7,26 +7,35 @@ get_header();
 
 <main>
 
-  <section class="full-width background-color-page-theme" id="c3318">
-    <?php if ( has_post_thumbnail() ) { ?>
-    <div class="intro-element align-center background-color-page-theme-contrast" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);">
-    <?php } else { ?>
-    <div class="intro-element align-center background-color-page-theme-contrast" style="background-image: url(/fileadmin/user_upload/00_Startseite/20191216-CN-02-251_Homepage.jpg);">
-    <?php } ?>
-      <div class="content-wrap">
-        <h1>Suche</h1>
-      </div>
-    </div>
-  </section>
-
   <section class="background-color-white">
     <div class="content-wrap">
 
-      <article>
+        <div class="headline-element" id="c145">
+          <h2>Suche</h2>
+        </div>
 
-        <?php get_search_form(); ?>
+        <div id="c139" class="frame frame-default frame-type-list frame-layout-0">
+          <div class="tx-indexedsearch">
 
-      </article>
+            <div class="tx-indexedsearch-searchbox">
+            	<form method="get" role="search" action="<?php echo site_url(‘/’); ?>">
+            <div>
+          </div>
+        		<fieldset>
+        			<div class="tx-indexedsearch-form">
+        				<label for="tx-indexedsearch-searchbox-sword">Suchen nach:</label>
+        				<input class="tx-indexedsearch-searchbox-sword" type="text" name="s" value="" />
+        			</div>
+        			<div class="tx-indexedsearch-search-submit">
+        				<button type="submit" class="tx-indexedsearch-searchbox-button" />
+                  <span>Suchen</span>
+                </button>
+        			</div>
+        		</fieldset>
+          	</form>
+          </div>
+        </div>
+      </div>
 
     </div>
   </section>

kit/style.css

@@ -613,7 +613,6 @@ section .content-wrap > * + * {
 
 @media (max-width: 960px) {
   .container-3-cols {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-3-cols .column {
@@ -629,7 +628,6 @@ section .content-wrap > * + * {
     margin-top: 1.66667rem;
   }
   .container-2-cols-golden-rule {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-2-cols-golden-rule .column {
@@ -641,7 +639,6 @@ section .content-wrap > * + * {
     margin-left: 0;
   }
   .container-2-cols-2-thirds-1-third {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-2-cols-2-thirds-1-third .column {
@@ -656,7 +653,6 @@ section .content-wrap > * + * {
 
 @media (max-width: 768px) {
   .container-4-cols {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-4-cols .column {
@@ -675,7 +671,6 @@ section .content-wrap > * + * {
 
 @media (max-width: 680px) {
   .container-2-cols {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-2-cols .column {
@@ -695,7 +690,6 @@ section .content-wrap > * + * {
 
 @media (max-width: 420px) {
   .container-3-cols {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-3-cols .column {
@@ -706,7 +700,6 @@ section .content-wrap > * + * {
     margin-left: 0;
   }
   .container-4-cols {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .container-4-cols .column {
@@ -1017,7 +1010,6 @@ h6 {
   left: 0;
   width: 5.83333rem;
   height: 0.44444rem;
-  background-color: #009982;
   opacity: 1;
   transition: left 1s, width .7s, opacity .5s;
 }
@@ -1967,7 +1959,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
 }
 
 .locations-map .button {
-  -ms-flex-item-align: start;
   align-self: flex-start;
   width: 100%;
   padding: 1.11111rem 1.11111rem;
@@ -2381,7 +2372,6 @@ form textarea {
 }
 
 form input[type='submit'] {
-  -ms-flex-item-align: start;
   align-self: flex-start;
   display: inline-block;
   width: auto;
@@ -2390,7 +2380,6 @@ form input[type='submit'] {
   margin-top: 0.83333rem;
   color: #ffffff;
   font-weight: 500;
-  background-color: #009982;
   transition: background-color .5s;
 }
 
@@ -2976,7 +2965,6 @@ body.page-theme-color-quaternary .pro-contra ul li.contra {
 
 @media (max-width: 560px) {
   .pro-contra {
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .pro-contra ul {
@@ -3198,14 +3186,11 @@ body.page-theme-color-quaternary .icon-headline-text li.star::before {
 }
 
 .tabs-auto-height .tab-content-container {
-  display: -ms-grid;
   display: grid;
 }
 
 .tabs-auto-height .tab-content-wrapper {
-  -ms-grid-column: 1;
   grid-column: 1;
-  -ms-grid-row: 1;
   grid-row: 1;
   display: block;
 }
@@ -3292,7 +3277,6 @@ body.page-theme-color-quaternary .tab-navigation-item.active > div::after {
     width: 100%;
     margin-top: 10px;
     border-bottom: none;
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     background-color: #ffffff;
   }
@@ -4767,7 +4751,6 @@ article > p:first-child {
   text-decoration: none;
   text-transform: uppercase;
   vertical-align: bottom;
-  background-color: #009982;
   border-radius: 0;
   outline: none;
   user-select: none;
@@ -4814,10 +4797,6 @@ article > p:first-child {
   margin-right: 0;
 }
 
-.tx-indexedsearch .tx-indexedsearch-browsebox ul li.tx-indexedsearch-browselist-currentPage a {
-  background-color: #009982;
-}
-
 .tx-indexedsearch .tx-indexedsearch-browsebox ul li::before {
   display: none;
 }
@@ -4829,23 +4808,14 @@ article > p:first-child {
   transition: background-color .3s;
 }
 
-.tx-indexedsearch .tx-indexedsearch-browsebox ul li a:hover {
-  background-color: #009982;
-}
-
 .tx-indexedsearch .tx-indexedsearch-res {
   padding: 30px 0;
-  border-bottom: 1px solid #009982;
 }
 
 .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title a {
   transition: color .3s;
 }
 
-.tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title a:hover {
-  color: #009982;
-}
-
 .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-description strong {
   font-weight: 400;
   background-color: rgba(0, 153, 130, 0.1);
@@ -4869,10 +4839,6 @@ article > p:first-child {
   transition: transform .3s;
 }
 
-.tx-indexedsearch .tx-indexedsearch-res .link-more span:hover {
-  color: #009982;
-}
-
 .tx-indexedsearch .tx-indexedsearch-res .link-more span:hover::after {
   transform: translateX(3px);
 }