Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

loading more post using ajax

how can l load more post using ajax in wordpress? l am currently using this plugin but its not working well for me. any ideas how l can accomplish my aim please?

mikes02
mikes02
Courses Plus Student 16,968 Points

What plugin are you using that isn't working? It will help others answering to avoid suggesting it. Also, Google returns numerous ways of accomplishing this, for example:

https://github.com/dcooney/wordpress-ajax-load-more http://connekthq.com/plugins/ajax-load-more/

Have you researched any of those?

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l am actually using that particular connekthq plugin. l am gte getting my code and i will post it below.

3 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

Assuming you haven't tried this already, I would attempt to get the plugin working in its most basic form:

<?php echo do_shortcode('[ajax_load_more]'); ?>

Try that and see if it works, if it doesn't work, you can better troubleshoot from there.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

i tried that aswell l am thinking l have put the code in the wrong place but confused where else it can go

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

abit of a problem with this plugin why doesn't it turn up with some posy first then on click loads more? instead turns up with no post then loads the post on click? any work around you rekon?

mikes02
mikes02
Courses Plus Student 16,968 Points

Isn't that an adjustable parameter?

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

I just had a look it's don't seem to be a parameter that you can. All the parameters are for when the Ajax load so without the load there won't be any post already displayed.

mikes02
mikes02
Courses Plus Student 16,968 Points

If you have the Pause parameter set to true, it won't load any posts until a user interacts with the load button to initiate it. Per the documentation:

"Pause - Do not load posts until user clicks load posts button"

You can see it on the Pause demo here: http://connekthq.com/plugins/ajax-load-more/examples/pause-loading/

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l tried that before the user interacts with the load post button l am thinking it would be nice if there was in some post already there. so when the user click on the button it loads more post to add on to the ones there. this prevents the user seeing a page with only the buttons but no post to start with.

Kelvin Atawura
seal-mask
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points 
 <div class="large-7 column">

          <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

          <aside <?php post_class('post'); ?>>
             <?php if( get_the_post_thumbnail() ) : ?>
          <figure><?php the_post_thumbnail('large'); ?></figure>
          <?php endif; ?>  

          <h3><?php the_title(); ?></h3>

          <p>Posted on <?php the_time('F j, Y'); ?></p>

          <p><?php echo strip_tags( get_the_excerpt() ); ?></p>

          <a href="<?php the_permalink(); ?>" class="more">More <span>+</span></a> 
          </aside>
          <?php endwhile; else : ?>

              <p><?php _e( 'Sorry, no pages found.' ); ?></p>

            <?php endif; ?>

          <div
><?php echo do_shortcode( '[ajax_load_more repeater="repeater2" posts_per_page="1" scroll="false" pause="true" transition="fade" button_label="Load Posts"]' ); ?></div>
          </div>

if l am going about it the wrong way please let me know guys. hoping if Zac Gordon can give me a hand here please

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Try something very simple, remove all your existing code except the wrapping div, and then try the shortcode:

<div class="large-7 column">
<?php echo do_shortcode('[ajax_load_more]'); ?>
</div>

What happens when you try that? Also check to see if there are any JavaScript errors when you load the page if it's not working.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

thanks pal it worked now. taught l will be a bit cheeky ask you one more question. how can l override the font size of the wp_tag_cloud? is there a piece of could l can put in my functions.php and do this?

mikes02
mikes02
Courses Plus Student 16,968 Points

You could try:

wp_tag_cloud('smallest=8&largest=22');

Substituting 8 for the smallest font size you want and 22 for the largest.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

abit of a silly question but where do l put that code? please

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l am confused because of was thinking l can write a function for it like

function wp_wp_tag_cloud($arg){ wp_tag_cloud('smallest=8&largest=22'); }

then have this in my fnctions.php to work but not just wp_tag_cloud('smallest=8&largest=22'); inthe file. :s

mikes02
mikes02
Courses Plus Student 16,968 Points

You don't need to write a custom function for this, just place it in the template where you want it displayed:

<?php wp_tag_cloud( 'smallest=8&largest=22' ); ?>

For more, you can check out the documentation: http://codex.wordpress.org/Function_Reference/wp_tag_cloud

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l came up with this 

  <article>
          <h4 data-toggle="collapse" data-target=".collapseTags"><span>Tags</span></h4>

          <div class="collapse collapseTags">
               <?php if ( function_exists( 'wp_tag_cloud' ) ) : ?>
          <ul>
          <li><?php wp_tag_cloud( 'smallest=8&largest=22' ); ?></li>
          </ul>
          <?php endif; ?>

          <a href="#" class="more">More <span>+</span></a>
          </div>
          </article>

But don't seem to be doing the same. the default fontsize remains

mikes02
mikes02
Courses Plus Student 16,968 Points

No, not functions.php, just place it in the template where you want it displayed.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l have with the code above but its not passing for some reason. :s