Using PJAX in Wordpress

Question

I am trying to integrate PJAX into my Wordpress installation, and here is the code I use for it:

<script src="js/jquery.pjax.js"></script> <script type="text/javascript"> $(function(){ // pjax $('ul a').pjax('#middlewrap') }) </script> 

I just follow the demos on the PJAX demo page, but replacing the container they used ( #main ) with the one that was for my Wordpress theme, which was #middlewrap .

I do not see any strange errors on the console, but this does not work either. Appreciate any help!

Answer 1

look here: https://github.com/nikolas/pjax-menu hope this helps :)

EDIT : http://wordpress.org/extend/plugins/pjax-menu/

Answer 2

• Download the pjax plugin for Wordpress .

• The archive you are downloading will have a folder named nikolas-pjax-menu-XXXXXXX, copy this folder to the Wordpress application plugins folder

  / your-wordpress-root app / wp-content / plugins /

  when renaming to a pjax menu, for example.

• Activate the plugin from the Plugins menu in the WordPress toolbar.

• Edit javascript file

  /your-wordpress-app-root/wp-content/plugins/pjax-menu/pjax_menu.js

  to place your links (for example: '#access .menu a' ) and the main content container ( '#main' ).

• I used the following code in WordPress "Twenty Eleven theme v1.2:

   var $j = jQuery; $j(document).ready ( function() { $j('#access .menu a').pjax('#main').live ( 'click', function() { } ); } ); 

• Now that you see that it works on a familiar topic, change it to suit your needs.

Answer 3

I looked at a number of approaches to this and could not find one that was simple or flexible enough to make it realistic for a WordPress theme with even moderate variety in layout.

I built the djax jquery plugin just for this purpose, which allows me to determine which elements on the page are dynamically loaded by assigning them to a specific class. It will by default delete all internal links and accept an array of url fragments for exception as a parameter. Of course, it uses pushstate to maintain browser history and gracefully degrades if the history API is unavailable. Here is an example of installing ajaxified WordPress using the WordPress Bones theme in the "Live Examples" section of the link above.

This topic took 30 lines of code to modify ajaxify using djax. Check out the first documentation link and download links.

Answer 4

The PJAX menu is a great conceptual starting point, but you still have to manually define layouts (within your dynamic content div) for each type of page you are trying to support PJAX.

The difficulty with PJAXifying WordPress is that layouts and content should look the same regardless of static or AJAX loads. I used the widely used thematic theme structure (a well-defined structure, very extensible) and expanded it to support PJAX: Thematic PJAX

Similarly, if you want to use a different theme for PJAX, I released the source code as a link ( github.com/wayoutmind/thematic-pjax ) and the following methods will be applied:

• Define the layout (i.e. template) that will be used on the WordPress site.
• Retrieve only the necessary elements (post, sidebar, etc.) that will be displayed in your dynamic div

• Create custom PJAX templates that connect to The Loop to display content, for example:

   // Load after template initialized, so we can use widgets and sidebar add_filter('get_header', 'myPJAXTemplate'); 

• If necessary, client-side JavaScript should update the parent, non-dynamic nodes of your dynamic content div (e.g. #wrapper , body , etc.) in response to a PJAX load, so everything looks right (e.g. adding / removing CSS classes)

• To facilitate this, you will have to emit some type of indicator (i.e. custom X headers) in your PHP template

Answer 5

Good plugin. An example of using a theme (with Twenty 15):

1. User template page

Create the page-pjax.php inside the theme.
In the administrator, create a page and use this template. It simply displays archive links with a range around them.

 <?php /** * Template Name: Pjax Example */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php $args = array( 'type' => 'daily', 'limit' => '', 'format' => 'html', 'before' => '<span class="a-pjax">', 'after' => '</span>', 'show_post_count' => true, 'echo' => 1, 'order' => 'DESC' ); wp_get_archives( $args ); ?> <div id="pjax-container"></div> </main> </div> <?php get_footer(); ?> 

2. Add the pjax plugin and user script

In the /js folder on the subject, add jquery.pjax.js and the following script my-pjax.js .

 jQuery(document).ready(function($) { $(document).pjax('span.a-pjax a, #recent-posts-2 a', '#pjax-container', {fragment:'#main'}) }); 

3. Download jQuery, pjax and our custom script

In functions.php . Loaded only on the template page.

 add_action( 'wp_enqueue_scripts', 'load_scripts_so_43903250' ); function load_scripts_so_43903250() { if ( is_page_template( 'page-pjax.php' ) ) { wp_register_script( 'pjax', get_stylesheet_directory_uri() . '/js/jquery.pjax.js' ); wp_enqueue_script( 'my-pjax', get_stylesheet_directory_uri() . '/js/my-pjax.js', array('jquery','pjax') ); } } 

4. NOTES

 $(document).pjax( 'span.a-pjax a, #recent-posts-2 a', // ANCHORS '#pjax-container', // TARGET {fragment:'#main'} // OPTIONS ); 

ANCHORS are links to the archive and the Recent posts widget with the identifier #recent-posts-2 . Delete it for this test or add another container of links if you want.

TARGET is hardcoded in the template.

OPTIONS, a snippet is necessary because pjax does not load full HTML pages, we must say which part of the landing page we want.
Twenty-fifteen content is inside this div: <main id="main" class="site-main" role="main"> . Adjust according to the theme used.
_{See pjax notes: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}