Custom Wordpress Ajax Coding

Question

Ok So I have created this AJAX code For My Wordpress theme and I originally have it for html. How Do I use wordpress php coding to get the content from the wordpress pages when clicked? Not concerned with getting post loops etc.... Going to have a static page. But I Do need It to get the content of the pages on click.

Heres the CODE

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/main.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
});
    });



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

    return false;
});

HTML structure for menu_nav

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button> 


      </div>


    <div class="collapse navbar-collapse" id="homenav">
<ul class="nav navbar-nav"> 
    <li><a href="pages/main.html" class="menu_nav demo-4">
      <span>
        <span>Home</span>
        <span>-Home-</span>
        <span></span>
      </span>
    </a></li>

          <li> <a href="pages/artist.html" class="menu_nav demo-4">
      <span>
        <span>Roster</span>
        <span>-Roster-</span>
        <span></span>
      </span>
    </a></li>
<li>
 <a href="pages/order.html" class="menu_nav demo-4">
      <span>
        <span>Beats</span>
        <span>-Beats-</span>
        <span></span>
      </span>
    </a>    
           </li> <li>
          <a href="pages/music.html" class="menu_nav demo-4">
      <span>
        <span>Music</span>
        <span>-Music-</span>
        <span></span>
      </span>
    </a>    
           </li>     
            <li>
          <a href="pages/videos.html" class="menu_nav demo-4">
      <span>
        <span>Videos</span>
        <span>-Videos-</span>
        <span></span>
      </span>
    </a> </li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
      <span>
        <span>Store</span>
        <span>-Store-</span>
        <span></span>
      </span>
    </a>    
    </li>
    <li>          
               <a href="pages/services.html" class="menu_nav demo-4">
      <span>
        <span>Services</span>
        <span>-Services-</span>
        <span></span>
      </span>
    </a> 
            </li>
            <li>
            <a href="#" class="menu_nav demo-4">
      <span>
        <span>Resources</span>
        <span>-Resources-</span>
        <span></span>
      </span>
    </a>       </li>

    <li>
            <a href="#" class="demo-4 snipcart-checkout">
      <span>
        <span>YOUR CART: </span>
        <span><div class="snipcart-summary"><span class="snipcart-total-price"></span></div></span>
        <span></span>
      </span>
    </a>       </li>


    </ul>

            </div>
                        <div class="col-sm-1 col-md-1"><div class="navbar-right">
                <a href="#" class=""><font color="black" ></span></font></a></span>
            </div></div>




               </div>     
      </nav>

Show html structure for .menu_nav. Basic concept shown is correct. Should also be inside $( document ).ready — charlietfl
– charlietfl, Commented May 28, 2016 at 16:46
@charlietfl Do i leave the .html or do I switch it to .php considering that the pages on wordpress have .php extension — Onset Media
– Onset Media, Commented May 28, 2016 at 16:58

kindisch · Accepted Answer · 2016-05-28 18:37:12Z

1

When you could add instead of the end url just the page id you could do something like this:

HTML

<a href="#" class="menu_nav demo4" data-page="1">Home</a>
<a href="#" class="menu_nav demo4" data-page="2">About</a>
<a href="#" class="menu_nav demo4" data-page="3">Projects</a>
<a href="#" class="menu_nav demo4" data-page="4">Contact</a>

PHP

<?php
    /**
     * Init js script and its variables
     */
    add_action( 'wp_enqueue_scripts', 'init_js_vars' );
    function init_js_vars() {
        wp_enqueue_script( 'your_script', [YOUR_PATH_TO_JS_FILE], array( 'jquery') );

        wp_localize_script( 'your_script', 'theme', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'nonce' => wp_create_nonce( 'ajax-get-page-content' ),
            'page' => 4
        ) );
    }

    /**
     * Handle ajax request, returns content of specific page
     */
    add_action( 'wp_ajax_get_page_content', 'get_page_content' );
    add_action( 'wp_ajax_nopriv_get_page_content', 'get_page_content' );
    function get_page_content() {
        check_ajax_referer( 'ajax-get-page-content', 'nonce' );

        $post_id = absint( $_POST['page_id'] );

        $post = get_post( $post_id );
        $content = apply_filters('the_content', $post->post_content); 

        wp_send_json_success( array( 'content' => $content ) );
    }
?>

JS

$(document).ready(function() {
    function load_page( e ) {
        e.preventDefault();

        var page = $( this ).data( 'page' );

        $.ajax({
            url: theme.ajaxurl,
            method: 'GET',
            data: {
                action: 'get_page_content',
                nonce: theme.nonce,
                page_id: page
            },
            success: function(response) {
                $('#contentarea').html(response.content);
            }
        });
    }

    $('a.menu_nav.demo4').on( 'click', load_page );
});

edited May 28, 2016 at 18:37

answered May 28, 2016 at 16:56

kindisch

7761 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

random_user_name Over a year ago

Beautiful. +1 - but please format your code a bit better.

Onset Media Over a year ago

@kindisch I would like to try this where do I put this PHP file inside functions.php? from reading the add_action thats what It looks like. or do i make the php a seperate file?

kindisch Over a year ago

You can put this in your functions.php. I generally prefer to make an architecture. So you have the functions.php which loads the files script-handler.php and ajax-handler.php. But if you have just this single script load and ajax request I would put it inside the functions.php. Feel free, what's fit your needs. :)

kindisch Over a year ago

Change it bit more to your needs

Onset Media Over a year ago

@kindisch I am getting an parse error what am I missing ..... Parse error: syntax error, unexpected 'wp_localize_script' (T_STRING) in /customers/b/b/3/trillumonopoly.com/httpd.www/wp/wp-content/themes/ILLumonopoly/functions.php on line 10

|

Collectives™ on Stack Overflow

Custom Wordpress Ajax Coding

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related