Support » Plugins » Hacks » One-page AJAX-based website. How should I do it?

  • I am trying to create a one-page WordPress website, something like the ones you sometimes see in ThemeForest’s WP section: the whole website is a long page that has everything in one place, from about us, to portfolio, to some blog posts, to contacts.

    Placing all things on one page is not difficult. But when I started thinking about how to present individual posts and pages, I realised that I probably need a general way of getting posts’ data via AJAX, and create new blocks with JS. How should I go about this? I suppose this was done before, but I struggle to find something this specific on Codex or a tutorial with best practices.

    Any advice or link will be greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    I don’t generally see the need to add blocks, just update the contents of the current div as needed.

    For example, presumably the blogs portion would initially have a list of posts, including a brief excerpt terminated by the typical “read more” link that normally leads to a single post page. In your situation, the “read more” link would be an AJAX request for the entire content which would simply replace the excerpt in the same div block.

    I suppose there would be a shrink button or something with the full content to restore the original excerpt condition. I’d be inclined to do another AJAX request, though there are obviously more efficient solutions, as it is easier to just code another div block replacement instead of some sort of local caching scheme.

    Thread Starter parrker

    (@parrker)

    This is certainly an option: to replace the content in existing div blocks with something you get from an Ajax call. My question though was more about the organisation of proper architecture of such calls.

    For now, to load more blog posts I create an action that will run a WP_Query with certain params (paged, posts_per_page, etc.) and return a JSON string of the result of that query. To load a single post (e.g., when the Read More link is clicked), I can pass a post ID to the same function, to get any sort of archive or category page I’ll pass and handle a corresponding parameter as well. I probably need to grab comments for a single post too.

    Do you think this is an acceptable way of approaching this?

    Moderator bcworkz

    (@bcworkz)

    I think it is perfectly acceptable. Is there a better way? Maybe, maybe not. It all depends on the nature of your content and your desired user experience. If it makes sense to you, as you know the constraints and goals better than anyone, then it’s an acceptable way.

    Maybe I’m not the best person to answer, as I believe anything goes as long it doesn’t needlessly bog down the server or introduce security issues. Doesn’t hurt to ask though, you can get great ideas from very unlikely sources. Maybe someone else here has a different take…

    Thread Starter parrker

    (@parrker)

    Still, thanks a lot for your response! It is very helpful to know somebody’s take on a problem you tackle for the first time, and I felt like maybe I was missing an obvious solution. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘One-page AJAX-based website. How should I do it?’ is closed to new replies.