I’ve been trying to make this feature work for many days now and it’s driving me nuts!

I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.

I found this question and followed up the linked tutorial and was partially successful.

I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it’s acting:

1. I click on the link.
2. the current content goes away.
3. the loading span appears correctely.
4. the SAME content fades in.
5. after 1 second or so the current content is replaced with the new content and the address bar does not change at all.

Here’s the code I have:

• atracoes.js
  $(document).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('.controle nav li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href)){
          var aCarregar = hash+'.html #atr-conteudo';
          $('#atr-conteudo').load(aCarregar)
      }
  });
  
  $('.controle nav li a').click(function() {
  
      var aCarregar = $(this).attr('href')+' #atr-conteudo';
      $('#atr-conteudo').hide('fast',carregarConteudo);
      $('#carregando').remove();
      $('#atracoes').append('<span id="carregando">Carregando...</span>');
      $('#carregando').fadeIn('normal');
  
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
  
      function carregarConteudo () {
          $('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
      }
      function mostrarNovoConteudo () {
          $('#atr-conteudo').show('normal',esconderCarregando());
      }
      function esconderCarregando () {
          $('#carregando').fadeOut('normal');
      }
  
      return false;
      });
      });
  

• index.php (the dynamic content part)

  <div class="main" id="atracoes">
  
      <div class="controle">
  
          <nav>
          <?php
          $args = array( 'posts_per_page' => 20);
  
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
              <li>
                  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </li>
          <?php endforeach; 
          wp_reset_postdata();?>
          </nav>
  
      </div>
  
      <div id="atr-conteudo">
  
          <?php the_post_thumbnail(); ?>
          <div id="atr-texto">
              <h2><?php the_title(); ?></h2>
              <?php the_content(); ?>
          </div>
  
      </div>
  
  </div>
  

  • single.php (the part I’m plucking with ajax)

  <!-- article -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  
      <!-- post thumbnail -->
      <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
              <?php the_post_thumbnail(); // Fullsize image for the single post ?>
          </a>
      <?php endif; ?>
      <!-- /post thumbnail -->
  
  
      <div id="atr-texto">
      <!-- post title -->
      <h1>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
      </h1>
      <!-- /post title -->
  
      <?php the_content(); // Dynamic Content ?>
  
      <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
      </div>
  </article>