Ajaxify a website so that .php pages are loaded without page refresh

Question

I have been using the code from the top answer of the following post:

Need help understanding how to ajaxify a web site

It's working correctly when I try it with .html pages, as shown in the example. However, my pages are in php. Everything is working as it should with the php pages, except that when the url updates it shows as .html instead of .php.

In the code, taken from the answer I mentioned:

 <script type="text/javascript">

var directory = 'content/'; //directory of the content we want to ajax in
var state = History.getState();

//for when they click on an ajax link
$('.ajaxify').on('click', function(e){
    var $this = $(this);
    var href = $this.attr('href'); // use the href value to determine what content to ajax in
    $.ajax({
        url: directory + href + '.html', // create the necessary path for our ajax request
        dataType: 'html',
        success: function(data) {
            $('#content').html(data); // place our ajaxed content into our content area
            History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
        }
    });
    e.preventDefault(); // we don't want the anchor tag to perform its native function
});

//for when they hit the back button
$(window).on('statechange', function(){
    state = History.getState(); // find out what we previously ajaxed in
    $.ajax({
        url: directory + state.title + '.html', //create our path
        dataType: 'html',
        success: function(data) {
            $('#content').html(data);
        }
    });
});
</script>

I have tried changing

 $.ajax({
    url: directory + href + '.html', // create the necessary path for our ajax request
    dataType: 'html',
    success: function(data) {
        $('#content').html(data); // place our ajaxed content into our content area
        History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
    }
});

to (changed .html to .php):

 $.ajax({
    url: directory + href + '.php', // create the necessary path for our ajax request
    dataType: 'html',
    success: function(data) {
        $('#content').html(data); // place our ajaxed content into our content area
        History.pushState(null,href, href + '.php'); // change the url and add our ajax request to our history
    }
});

However, this has no effect. I have also tried changing the HTML:

 <ul id="nav">
    <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li>
    <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li>
    <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li>
    <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li>
</ul>

<div id="content">Home Content</div>

to (adding .php to the hrefs):

 <ul id="nav">
    <li id="home-link"><a href="home.php" class="ajaxify" title="Home">Home</a></li>
    <li id="work-link"><a href="work.php" class="ajaxify" title="Work">Work</a></li>
    <li id="labs-link"><a href="labs.php" class="ajaxify" title="Labs">Labs</a></li>
    <li id="blog-link"><a href="blog.php" class="ajaxify" title="Blog">Blog</a></li>
</ul>

<div id="content">Home Content</div>

but this stops the page loads from working completely. Any advice would be greatly appreciated. Thanks!