tamas088

Hi,

Thanks for your answer! I got rid of the jQuery error message by your advice.

The columns and images still doesn’t show though. Anyway javascript shouldn’t effect the presence of those columns and images because I display them with php and HTML. Only make changes on them with jQuery by a button click.

I don’t want to make it a template because I only want that file to affect that particular page. So I named it page-new-home-page.php and copied it to the child theme’s folder same as the functions.php. wp-content/themes/rosemary-child. It looks like the php code not getting interpret and strangely neither the css what I placed into wp css editor.

Here is the code of page-new-home-page.php

<?php get_header(); ?>

	<div class="container">

<!-- FIRST COLUMN * RANDOM COOKIES* -->
<div id="getIdeasButton"><h1>What to eat today?</h1></div>
  <div class="containerGrid">
    <div id="breakfastCol" class="col-sm randomRecipesDiv">
      <?php
      $homepageEvents = new WP_Query(array(
            'posts_per_page' => '1',
            'orderby' => 'rand',
            'category_name' => 'cookies'
          ));

          while ($homepageEvents->have_posts()){
            $homepageEvents->the_post();?>
            <div id="cookiesDiv"><p class="courseText">Breakfast</p><h1 class="recipeLink"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <div> <?php if ( has_post_thumbnail() ) : ?>
                      <div class="phpImage"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
                <?php  endif;
                  ?>
            </div>
          </div>
          <div class="loaderContainer">
            <div id="cookieLoader" class="loader"></div>
            <p id="cookieLoaderText" class="loaderText">Getting<br>a recipe<br>for you.</p>
          </div>
          <div id="cookieButtonCont">
          <button id="cookieIdeaButton" class="randRecipeButton" type="button" name="button"><i style="font-size:20px" class="fa"></i></button>
        </div>
        <?php  }  wp_reset_postdata();
        ?>
    </div>

<!-- END ------------------------------>

<!-- SECOND COLUMN *RANDOM SALADS* -->
    <div id="lunchCol" class="col-sm randomRecipesDiv">
      <?php
      $homepageEvents = new WP_Query(array(
            'posts_per_page' => '1',
            'orderby' => 'rand',
            'category_name' => 'salad'
          ));

          while ($homepageEvents->have_posts()){
            $homepageEvents->the_post();?>
            <div id="saladDiv"><p class="courseText">Lunch</p><h1 class="recipeLink"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <div> <?php if ( has_post_thumbnail() ) : ?>
                      <div class="phpImage"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
                <?php  endif;
                  ?>
            </div>
          </div>
          <div class="loaderContainer">
            <div id="saladLoader" class="loader"></div>
            <p id="saladLoaderText" class="loaderText">Getting<br>a recipe<br>for you.</p>
          </div>
          <div id="saladButtonCont">
          <button id="saladIdeaButton" class="randRecipeButton" type="button" name="button"><i style="font-size:20px" class="fa"></i></button>
        </div>
        <?php  }  wp_reset_postdata();
        ?>
    </div>
<!-- END --------------------------------------------->

<!-- THIRD COLUMN *RANDOM SMOOTHIES*  -->
    <div id="dinnerCol" class="col-sm randomRecipesDiv">
      <?php
      $homepageEvents = new WP_Query(array(
            'posts_per_page' => '1',
            'orderby' => 'rand',
            'category_name' => 'smoothie'
          ));

          while ($homepageEvents->have_posts()){
            $homepageEvents->the_post();?>
            <div id="smoothieDiv"><p class="courseText">Dinner</p><h1 class="recipeLink"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <div> <?php if ( has_post_thumbnail() ) : ?>
                      <div class="phpImage"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
                <?php  endif;
                  ?>
            </div>
          </div>
          <div class="loaderContainer">
            <div id="smoothieLoader" class="loader"></div>
            <p id="smoothieLoaderText" class="loaderText">Getting<br>a recipe<br>for you.</p>
          </div>
          <div id="smoothieButtonCont">
          <button id="smoothieIdeaButton" class="randRecipeButton" type="button" name="button"><i style="font-size:20px" class="fa"></i></button>
        </div>
        <?php  }  wp_reset_postdata();
        ?>
      </div>
<!-- END ------------------------>
  </div>

</div>

<?php get_footer(); ?>

I am missing something. I don’t know what.