I have created custom post type 'portfolio' in my wordpress application.
I am using wp-pagenavi plugin for pagination of custom posts.Can anyone guide me how will I implement ajax pagination i.e load newer posts without reloading the whole page. Any help will be greatly appreciated...
/*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#content').html('Loading...'); //the 'main' div is inside the 'content' div
jQuery('#content').load(link+' #main');
});
the .live() function has been depreciated so use .on() instead.
obviously the jQuery library is needed too.
Here's a couple of options you can try:
AJAXify WordPress Tutorial
AJAXify WordPress Plugin
I've used the first option, its a good tutorial. I know it works. You may need to modify it some though. I cannot vouch for the second option as I've never used it. Just a quick Google search turned it up though.
Related
WooCommerce:
I have some jQuery that loads on document.ready that effects the quantity input box. Works great.
My issue is that when I update the cart/delete item, the jQuery needs to run again because the AJAX call kills it (refreshes it). Is there some hook/filter I can add that will re-run my script again after a cart update? Ive searched and can't find anything (or maybe I'm not aware of what I am looking for).
Thank you!!!!
The WooCommerce scripts have several custom events built in. Your own script can listen to these events and run your own code when they are triggered. The most obvious one for your case might be updated_cart_totals but updated_wc_div might also be helpful, I'm not sure without testing. Tested and works.
$( document.body ).on( 'updated_cart_totals', function(){
//re-do your jquery
});
I also needed to run a function after user removes item from cart, and the above events updated_cart_totals or updated_wc_div didn't work for me.
After digging into the Woocommerce frontend code
[/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js]
I found these events:
$(document.body).on('added_to_cart removed_from_cart', do_magic);
These worked like a charm!
In my case I have to add the following:
jQuery(document.body).on('removed_from_cart updated_cart_totals', function () {
location.reload();
});
Because I have a huge customization with js cart submit
I've spent a few hours on this but I'm not getting anywhere. I'm just starting on Wordpress, and I'd like a simple page where I click on something (a list item) and a textual description appears in a div somewhere else on the same page.
This would be trivial if I was writing plain HTML and JS, but I can't get my head around how to integrate this into WordPress. As far as I can make out, I have to write a plugin, but I can't find any handlers for mouse events in the hooks API. Or should I just hardcode an onclick into the HTML, and find somewhere to put some JavaScript code to handle it? Any advice appreciated...
Wordpress doesn't have mouse events/hooks. Wordpress hooks apply to the backend only, they are a way to interact with the WP core which is written in PHP (executed on the server, not the client).
Mouse events happen on the client side, so to achieve what you want you should register a Javascript file with wordpress via wp_register_script (http://codex.wordpress.org/Function_Reference/wp_register_script) and add your Javascript behaviour there.
You don't have to write a plugin, just add wp_register_script logic in your functions.php.
Vlad Cazacu is right, we dont have any hooks for javascript events and i am not sure if there is any option in other server side languages as well besides node.js. Anyways you can use jquery in the normal way with registering and enqueing the file. But if you want to have advanced interactivity then there are functions in wordpress that can do that for instance there's this function wp_localize_script, it is used with ajax to grabs the data as a javascript array/object and then converts it into php array/object which is then available to use in wordpress/php.
In short -
Add an id (and a styling class) to whatever you want a handler for
in the HTML
Register handlers in JS, as follows:
function fp_onload_js() {
var id = document.getElementById('myID');
id.addEventListener(
"click",
function() { myEventListener(); },
false);
}
Register/enqueue the file which contains your JS, in functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_stuff');
function theme_enqueue_stuff() {
...
wp_enqueue_script(
'myHandle',
get_template_directory_uri() . '/path_to_my_js_file.js');
}
The tricky bit: you have to make sure that the event listener code is run after WordPress has constructed the DOM, after the IDs have been created. You need to run the JS after the page loads (see here). Basically, also in functions.php:
add_action('wp_footer', 'fp_onload_php');
function fp_onload_php() {
?>
<script type="text/javascript">
fp_onload_js();
</script>
<?php
}
And make sure you don't use the 'visual' tab in the WordPress editor - it will mess up your carefully-crafted HTML.
I have been developing wordpress plugins for a while now and i always seem to get the following issues with all my plugins Jquery conflicts issues.
I have tried so many different ways to avoid these but i always get users contacting me saying when they have installed one off my plugins it has stopped another plugin from working aahhhhh.
I really want to get this sorted because i understand how frustrating this can be for people.
I always set and option or include wordpresses jquery, below is just an example not working code.
add_action( 'init', array( $this, 'include_jquery' ) );
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
Ok so after issues with this i now have a select option in the plugin admin to toggle yes or no to include jquery or not i know it is automatically installed but some users remove this, this works for some people but not all.
if you include the wordpress jquery i know you have to run your jquery with the following.
jQuery(document).ready(function ($) {
jQuery instead of the dollar sign $
i understand and have used jquery no conflict and tried and tested some if not all off these
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
This as with the others works for some but not all users with conflicts arising still with certain users.
I am hoping that from this post some of us wordpress plugin developers could help out and post a bullet proof way to use wordpress and jquery within our plugins without getting conflict issues.
Thanks
Doesn't it work with a closure?
(function($){
// your plugin code
})(jQuery);
Read these parts of the codex :
Load a default WordPress script from a non-default location
jQuery noConflict wrappers
You should use wp_enqueue_scripts hook instead of init.
And you should use jQuery.noConflict(); instead of $.noConflict();.
Even though, I used same code for both of them http://bda.ctuproject.com/ is not showing tip image. When you go over any item in http://bda.ctuproject.com/wp-content/themes/twentyten/exam/index.html you will see that box will come up saying what is that picture but it's not doing it when I put it in WordPress. Why any ideas ?
http://bda.ctuproject.com
http://bda.ctuproject.com/wp-content/themes/twentyten/exam/index.html
i think you're calling the jquery script twice
As #Colby said, you are loading jQuery twice. Try putting this into your active theme's functions.php file to deregister the WP jQuery load:
if( !is_admin()){
wp_deregister_script('jquery');
}
I am working in worpress front page.
I want to add a plugin to the page at a specific location manually but adding the code to the page myself.
I basically want to include a plugin in a certain page on a certain location. So I'm create a div...
<div id="plugin-holder">
**Plugin-will-appear-here-with-this-code**
</div>
Don't anyone know how this is done please?
Thanks
If you're wanting a plugin to appear somewhere, you'll be looking for "shortcode" functionality.
This is actually surprisingly easy to code, check out the examples in the Codex under Shortcode API - ie:
function bartag_func( $atts ) {
// ... do more things here ...
return "text to replace shortcode";
}
add_shortcode( 'bartag', 'bartag_func' );
Once you've called these functions you can use [bartag] in code and it will run your function and replace the shortcode with the generated text your function returns.
If you're adding shortcode functionality to your site, it generally makes most sense to code a really simple plugin and put it in that. The reason why this works best is that, over time, it's really easy to forget and upgrade a theme by mistake (or even change to a new theme) and thus break your site by losing your custom code in your former functions.php. Surprisingly, this is pretty easy to achieve and only requires some specially formatted comments at the top of your plugin file and a little common sense in coding - there are many tutorials and "how to"s around!
Here's a useful shortcode tutorial: http://www.reallyeffective.co.uk/archives/2009/06/22/how-to-code-your-own-wordpress-shortcode-plugin-tutorial-part-1/
You should add the relevant plugin code to functions.php.
I suspect you'll want to use some conditional tags, like is_home() to pinpoint your location. But maybe not, depending on what you are trying to do,
Also, if you're trying to to insert from a pre-existing plug-in, make sure you remove the register_activation_hook or activate_pluginname action.
If your plugin supports a sidebar widget you can simply "widgitize" the div tag that you wish to insert the plugin into.. Google the term and you are gonna find many resources.