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?

EDIT
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 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?

EDIT
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.

• php
• theme-development
• ajax
• html

• You can treat Pages the same as Posts for most tutorials, if you ignore the archive lists. I've just had to do this for a page and I'll have a crack at an answer later today if no-one steps in before me. – Andy Macaulay-Brook Commented May 20, 2016 at 7:14
• Sounds cool! As I said, I'm a noob when it comes to Wordpress so any help is appreciated – Jay Commented May 20, 2016 at 7:15
• In the mean time how have you structured your theme so far? – Andy Macaulay-Brook Commented May 20, 2016 at 7:25
• Everything is a mess right know, the footer and the header look pretty good. The index php is where my content is, that's why I want to make this cleaner and a little bit more customisable – Jay Commented May 20, 2016 at 19:40
• Hmm. You need to let WP load your theme in its usual way rather than calling theme files directly. Might take me a while to whip up an answer. I've two sites to get live before Tuesday - can you wait till then? – Andy Macaulay-Brook Commented May 20, 2016 at 19:46

1 Answer 1

My philosophy is that if you use a system like WP then you embrace it and do things the WP way. WP has plenty of hooks that let you override functionality and the flexible theme structure gives you almost total control over the output.

So, I'd advise using a WP theme and WP built in menus. Your menu items will link to normal WP pages. The site will work for those without JS.

Use jQuery to put click events onto the menu links which use jQuery AJAX calls to the requested pages. These calls can strip the HTML returned back to a particular element (main is a good one if the theme uses it).

I haven't thought through how you'd handle your hashes yet.