• Jose

    (@josefaarseth)


    I’m really a noob when it comes to WordPress, right now I’m working on a theme that basically is all static, if you want to edit something you’ll have to edit the .php file than rather doing it on the admin. It is a landing page where you click a menu button and a modal appears with the content, to do this I followed this tutorial which is not exactly WordPress-oriented. I’m loading static pages via ajax and I really want to change this to editable WordPress pages but I have no idea how to do it. I don’t post the code because everything is like in the tutorial, I haven’t used functions.php or anything. How would you call the content of a page to load as if it was a static page just like in that tutorial?

    The ajax call

    $(function() {
            $('.w-container .w-nav-menu a').click(function() {
                var $linkClicked = $(this).attr('href');
                var $pageRoot = $linkClicked.replace('#', '');
                if (!$(this).hasClass("active")) {
                    $(".w-container .w-nav-menu a").removeClass("active");
                    $(this).addClass("active");
                    $.ajax({
                        type: "POST",
                        url: "./wp-content/themes/THEMENAME/load.php",
                        data: 'page='+$pageRoot,
                        dataType: "html",
                        beforeSend: function(){
                                $('#canvasloader-container.wrapper').show();
                            },
                        complete: function(){
                                $('#canvasloader-container.wrapper').hide();
                            },
                        success: function(msg){
                            if((msg))
                            {
                                $('.content').html(msg);
                                $('.content').hide().fadeIn();
                            }
                        }
                    });
                }
            event.preventDefault();
        });
    
        var hash = window.location.hash;
        hash = hash.replace(/^#/, '');
        switch (hash) {
            case 'products' :
                $("#" + hash + "-link").trigger("click");
                break;
            case 'about' :
                $("#" + hash + "-link").trigger("click");
                break;
            case 'storelocator' :
                $("#" + hash + "-link").trigger("click");
                break;
            case 'media' :
                $("#" + hash + "-link").trigger("click");
                break;
            case 'faq' :
                $("#" + hash + "-link").trigger("click");
                break;
            case 'contact' :
                $("#" + hash + "-link").trigger("click");
                break;
            }
        });

    load.php

    <?php
        if($_POST['page']);
        $page = $_POST['page'];
        if(file_exists('pages/'.$page.'.php'))
        echo file_get_contents('pages/'.$page.'.php');
        else echo 'Unavailable';
        ?>

    I have only found tutorials with posts and that stuff, and that’s not what I want.

    I’m new to this forum so if I’m posting on the incorrect section, please, move it

    [ No bumping please. ]

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Load page into DIV with Ajax’ is closed to new replies.