Trying to display content using jQuery is giving me some trouble. I’ve created three buttons, when clicked they load data from a php file on my server. Everything works except when I try to send a request to load Wordpress posts. The following fatal error appears: Call to undefined function get_posts(). I learned how to do this from https://perishablepress.com/slide-fade-content/.
For the scripting, I have this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/slide-fade-content/jquery.colorfade.min.js"></script>
<script type="text/javascript">
// slide & fade content @ http://m0n.co/r
$(document).ready(function() {
$('.more').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
}
$('#ajax').css({ display:'block' }).animate({ height:'200px' },function() {
$('#ajax').html('<img id="loader" src="loader.gif">');
$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' });
$('#ajax').load('slide-fade-content.php ' + href, function() {
$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
});
});
});
});
</script>These are my three buttons:
<ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul>This is where the content appears
<div id="ajax"></div>And this is the content
<div id="load">
<div id="first-item">
<?php
$args = array(
'posts_per_page' => 5,
'offset'=> 0,
'category' => '2,3,4',
'orderby' => 'meta_value_num',
'meta_key' => 'views',
'order' => 'DESC',
'suppress_filters' => true,
'date_query' => array(
'after' => date("jS F, Y", strtotime('-24 hours'))
)
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<div>
<li>
<ul><?php $categories = get_the_category(); $separator = ' '; $output = '';
if($categories){
foreach($categories as $category) {
$output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
}
echo trim($output, $separator) ;
}
?>
</ul>
<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, array(300, 160), $attr ); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</li>
</div>
<?php endforeach;
wp_reset_postdata();?>
</div>
<div id="second-item">
Test2
</div>
<div id="third-item">
Test3
</div>
</div>I think I have to define a function, but after many hours of trial and error I’m lost. I can't figure out how to do it or where to defines it.
get_posts()is part of the WordPress API so you can call that function if WordPress has been instantiated.