Using PJAX in Wordpress

Question

I'm trying to integrate PJAX into my Wordpress install, and here's the code I am using for it:

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

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

I don't see any weird errors on the console, but it doesn't work either. Appreciate any help!

Melmon

Answer 1

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

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

Enki

Sorry mate, thanks for your time but that was really poorly documented and I had no idea what to do with it. I tried grabbing the sample JS code but it was practically the same thing. – Melmon

it's ready plugin. just download/extract rename folder to pjax-menu and put it into plugins folder of wordpress. – Enki

@Melmon Here's the plugin at wordpress.org: wordpress.org/extend/plugins/pjax-menu – Pedometer

Answer 2

1. Download pjax menu plugin for wordpress.

2. The archive you download will have a folder named nikolas-pjax-menu-XXXXXXX, copy that folder to your wordpress application's plugins folder

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

   while renaming it to pjax-menu for example.

3. Activate the plugin from the Plugins menu in your WordPress Dashboard.

4. Edit the javascript file

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

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

5. I used the following code on WordPress' Twenty Eleven theme v1.2:

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

6. Now when you see it works on a familiar theme, modify it to fit your needs

Adaptable

sorry on the non-formatted code in step 5, but I just don't know how to fix it... – Adaptable

Just paste it line-by-line with 4 or more spaces at the start to start a codeblock – Magnetoelectricity

@tr3online: thanks, I thought I tried everything... I guess I need a rubber duck :-) (en.wikipedia.org/wiki/Rubber_duck_debugging) – Adaptable

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 the layout.

I put together the djax jquery plugin for just this purpose, which lets me designate which elements on the page to dynamically load by assigning them a certain class. It will default to ajaxifying all internal links, and accepts an array of url fragments to exclude as a parameter. Of course it uses pushstate to maintain browser history, and gracefully degrades if the history API is not available. There's an example of an ajaxified WordPress install using the WordPress Bones theme in the Live Examples section of the link above.

That theme took about 30 lines of code modification to ajaxify with djax. Have a look at the first link for documentation and download link.

Busra

Answer 4

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

The difficulty in PJAXifying WordPress is that layouts and content must look the same, regardless of static or AJAX loads. I took the widely used Thematic theme framework (well defined structure, highly extensible) and extended it to support PJAX: Thematic PJAX

Similarly, if you wish to use a different theme to PJAX, I've released the code open source as a reference (github.com/wayoutmind/thematic-pjax), and the following techniques would apply:

1. Identify layout(s) (ie. Template) to be used throughout WordPress site
2. Extract only the necessary elements (post, sidebar, etc) to be displayed within your dynamic div

3. Create specialized PJAX templates that hook into The Loop to render content, for example:

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

4. If necessary, your client side JavaScript will have to update parent, non-dynamic nodes of your dynamic content div (eg. #wrapper, body, etc) in response to PJAX loads so everything looks right (eg. adding/removing CSS classes)

5. To facilitate this, you'll then have to emit some type of indicator (ie. custom X-Headers) in your PHP template

Characteristic

Answer 5

Nice plugin. Usage example on a theme (tried with Twenty Fifteen):

1. Custom Template page

Create the file page-pjax.php inside the theme.
At admin, create a page and use this template. It simply displays archive links with a span 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 pjax plugin and a custom script

Inside the folder /js on the theme 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. Load jQuery, pjax and our custom script

In functions.php. Loads 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 the archive links and the widget Recent Posts that has the ID #recent-posts-2. Remove it for this test or add another links container as desired.

TARGET is hardcoded on the template.

OPTIONS, the fragment is essential as pjax doesn't load full HTML pages, we have to tell it which part of the target page we want.
On Twenty Fifteen, the content is inside this div: <main id="main" class="site-main" role="main">. Adjust according to theme used.
_{See pjax notes: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}

Whiteley