$ is not a function can impact your JS that loads JSON data. WP jQuery runs in noConflict mode where the $ shortcut is not defined. All $ shortcusts need to be changed to jQuery, or the code needs to be wrapped in a “NoConflict Wrapper”, something like this:
(function( $ ) {
"use strict";
// javascript code here. i.e.: $(document).ready( function(){} );
})(jQuery);
The best way to ensure a particular template is used on your home page is to name it “front-page.php”. If you need to rename another front-page.php template that you don’t want to use that’s fine. You can designate any WP page to be the source of front page content in settings, or leave the home page as a blog listing. The template can choose to use this data or not. If you are renaming and adding template files for a theme subject to periodic updates, you should have a child theme to contain your altered templates.
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.
Sorry for being a little slow, I finally noticed the page’s slug is “new-home-page”. It’s template filename is fine.
The queries aren’t returning any posts for each category. Are you sure the category queried shouldn’t be in Polish? (i.e. ciastka instead of cookies)
Yes that was the problem I noticed it later. So silly mistake. Also the css started to work after I copied it into the child theme’s css file. I don’t really understand why it wouldn’t work from the wp css editor but the point is that it is working now.
Thank you so much for your help! I really appreciate it.
You’re welcome. Why CSS does or doesn’t work is complicated in one way, but simple in another. Basically, CSS with more specificity is the rule applied. What’s more specific is more complicated.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Use your browser’s element inspector tool to help you learn what rules are applied and what you might do to alter an element’s appearance. If you have trouble with rules added to an external stylesheet, try adding them to the Additional CSS customizer section instead. Its rules are more likely to be applied, provided the rules have equal specificity (i.e. same selectors), because customizer rules generally occur last.
