bbPress Tag Cloud Widget

A very small wordpress plugin. If you’ve been using bbPress plugin, you know that it provides a shortcode to display the topics-tag-cloud. I’ve wrapped that into a small widget, so one can just easily display the tag cloud wherever required with just drag-and-drop.

You can download the plugin form its github repository.
**Note: Github adds the word ‘-master’ into the plugin’s folder name, so uploading the zip file bbpress-tagcloud-widget-master.zip (downloaded from github) directly to install the plugin won’t work. So, just rename the zip file to bbpress-tagcloud-widget.zip.

That’s it here.


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

<li>

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

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

	<?php endwhile; ?>

</li>

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:

<li>

	<?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; ?>

</li>

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 ( yourdomain.com/wp-admin/admin.php?page=wpcf7 ) 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='http://webdeveloperswall.com/wordpress/contact-form-7-redirect-after-ajax-submission' />

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

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

    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:
    <script>
    jQuery(document).ready(function($){
        $(".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;
    	}
        });
    });
    </script>

    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

window.open( 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.

UPDATE:-
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 🙂

Order by date in post meta

Here’s a quick tip to order posts by a date stored in custom fields (postmeta).

The problem

I have a custom field called ‘event-date’ in which, obviously, a date value is stored. Now i want all the posts sorted by that custom field value. How do i do it?

To order posts by custom field, we’d do something like:

<?php
query_posts(array(
	'meta_key'=> 'event_date',
	'orderby'=> 'meta_value',
	'order' => 'DESC'
));
?>

But this won’t work since the value of the postmeta is taken as string and sorted accordingly, which can given unexpected results.

The solution

  1. Add the following code in functions.php of your theme (or at any appropriate place, if you are writing a plugin):
    <?php 
    /* sorts the post based on a date value in custom fields 
     * check: http://webdeveloperswall.com/wordpress/order-by-date-in-post-meta
    */
    function wdw_query_orderby_postmeta_date( $orderby ){
    	$new_orderby = str_replace( "wp_postmeta.meta_value", "STR_TO_DATE(wp_postmeta.meta_value, '%m/%d/%Y')", $orderby );
    	return $new_orderby;
    }
    ?>

    I’ve my date format as ‘mm/dd/yyyy’, if yours is something else, don’t forget to change ‘%m/%d/%Y’ above with a suitable value.

  2. Next, our query_post code will remain the same, but we will add a filter just before this code:
    <?php
    //the filter to sort by date in custom field
    add_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);
    query_posts(array(
    	'meta_key'=> 'event_date',
    	'orderby'=> 'meta_value',
    	'order' => 'DESC'
    ));
    ...
    ...
    ...
    //once done, dont forget to remove that filter
    remove_filter( 'posts_orderby', 'wdw_query_orderby_postmeta_date', 10, 1);
    ?>

Thats a quick, dirty way of getting it done! 🙂
That’s all here.