bbPress loading more topics with ajax

Created a plugin which allows you to add one ‘load more’ button on your bbPress topics archive. And obviously, that button click loads more topics and appends it at the end of the topics list.

The plugin can be downloaded from here.

You can use it alongside the pagination. The plugin internally loads the same template files to display new topics, so it integrates with your existing theme without any extra effort.

Once you’ve installed and activated the plugin. You need to add 2-3 lines of code in your template file. The file that we will be editing is loop-topics.php. If you’ve not done already, create a folder inside your active theme, and name it as ‘bbpress’, then open the bbPress plugin folder, copy the file templates/default/bbpress/loop-topics.php and paste it inside the new folder that you created in your theme.
Open the file loop-topics.php and look for

<li class="bbp-body" >

An unaltered file will have the following code in that region


	<?php while ( bbp_topics() ) : bbp_the_topic(); ?>

		<?php bbp_get_template_part( 'loop', 'single-topic' ); ?>

	<?php endwhile; ?>


We need to add the code for the ‘load-more’ button there. The code that we need to add is:

<?php if( function_exists( 'bbpresslmt_loadmore_button' ) ): ?>
	<?php bbpresslmt_loadmore_button(); ?>
<?php endif; ?>

So after adding this code, our updated file should contain:


	<?php while ( bbp_topics() ) : bbp_the_topic(); ?>

		<?php bbp_get_template_part( 'loop', 'single-topic' ); ?>

	<?php endwhile; ?>

	<?php if( function_exists( 'bbpresslmt_loadmore_button' ) ): ?>
		<?php bbpresslmt_loadmore_button(); ?>
	<?php endif; ?>


That’s all we need to do. If you are viewing topics inside any forum, then topics from inside that forum is loaded. If you are viewing all topics list, all topics are loaded. So no configuration required on that part.

Drop in your comments for any issues with the plugin or any other feedback.

Contact form 7 – redirect after ajax submission

The code to redirect to a ‘Thank You’ page after the form submission in Contact Form 7.

For those of you who don’t know what is Contact Form 7, its a great wordpress plugin for contact forms, and you probably shouldn’t be here.

The Problem:

I am using ‘Contact Form 7’ plugin and everything works fine. But instead of displaying the message ‘Your email sent successfully’, i want the visitor to be redirected to a ‘Thank You’ page that i’ve created.

The Solution:

You can have different forms redirecting to different url’s after successful submission. So for example if you want form1 to be redirected to one url and form2 to be redirected to other url, you can do that easily!
Here’s what you need to do:

  1. Go to edit the desired contact form in wp-admin ( ) and add a hidden field in the form’s html. Here’s what you should add:
    <input type='hidden' id='wdw_redirect_to_url' value='' />

    change the url here to the url you want.
    So initially if the form’s content looked like the image below:

    After adding the hidden field, it should look like the image below:

    You can set different url’s in different forms, just make sure that you dont change the id of the hidden field!

  2. Next, add this little javascript in any of your theme’s(or plugins’) javascript file:
        $(".wpcf7").on( 'mailsent.wpcf7', function(){
    	var redirect_to = $(this).find('#wdw_redirect_to_url').val();
    	if( typeof(redirect_to)!=='undefined' && redirect_to!='' ){
    	    window.location.href= redirect_to;

    And you are done!

If you would rather open the url in a new tab, in the code above, replace

window.location.href= redirect_to;

with redirect_to );

Floating sidebar for twentythirteen

The javascript code to make the sidebar float and stick to screen as you scroll down. This code is specific to twentythirteen wordpress theme and most probably won’t work with any other theme.

I didn’t like it when the sidebar area goes blank as i scroll down the page. The content in the main content area(towards left) is more than the content(widgets) in sidebar(towards right) so as one scrolls down the page, the sidebar area becomes empty.

The following javascript does the trick. As you scroll down the page and scroll past the bottom of sidebar, the sidebar sticks to the bottom right of the page. You keep going down and it stays there. And when you scroll up to a sufficient height, it again acquires its normal position. The script also prevents sidebar from overlapping with ‘header’ and ‘footer’ areas.

Any demo ? : yes, this very page(or any other page on this website) is a live demo of the script. Try scolling!! Its more apparent on longer pages like home page.
This script results in nice dirty trick on this website. On a fresh page reload, you don’t see ads in the sidebar becuase that widget at the end of the sidebar and becomes visible only when you scroll down. And once you scroll down, only those ads are visible, and you can’t get rid of them 🙂 🙂 ..

This site no longer uses twentythirteen, so no demo. Its time for twentyfourteen!

Anyway so here’s the javascript, you can save it in any of the existing javascript of your theme or save it as a new file and enqueue the file properly:

That’s it here. I didn’t bother to check it in IE! so be warned 🙂

Load more activities on scroll

Modify your buddypress theme to load more activity posts when user scrolls down!
All you need to do is to add the following javascript in any of your javascript files (and make sure that javascript file is included! lol). The script loads more content by ajax and appends at the bottom of the page. The server side code to process the ajax request is already there in buddypress. God bless those guys at automattic!

That’s it here.