How to develop ajax based wordpress theme like spotify or soundcloud?

  • Hi,

    I know how to develop a WordPress theme and I know how to use Ajax to load data from REST API.

    My problem is here:
    I don’t know how to create a WordPress theme that loads pages using AJAX.

    in a normal theme, we create index.php, home.php, and for example page.php.
    Now If I use AJAX it will just use index.php and I can’t change HTML using page.php because it will never open page.php it loads data from REST API and loads it inside index.php or home.php

    Please tell me:
    1. How to stop WordPress from loading page.php to avoid reloading the page and just loading data from REST API.

    2. How to change the HTML of a page when loading page data with Ajax.

    3. Is there any simple WordPress theme that uses Ajax to load pages to learn from it?

    4.I don’t want to use admin-ajax.php.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

  • I think what you are wanting to do is build what they would call a headless WordPress.

    I think the approach would be to build a a Javascript app( using perhaps your favorite Javascript framework like REACT or VUE or NEXT.js etc ) and ‘fetch’ the content from the WP REST API

    I’m sure there are plenty of tutorial is you search for how to build headless WP ( e.g. in REACT )

    Thread Starter Sadegh Hosseini

    (@mr-seven)

    Hello @alanfuller ,

    Thanks for your answer,

    I just want to develop a theme that supports continuous music play when I change pages.

    for this approach, I need a theme that loads data from REST API with Ajax so it doesn’t reload the header or footer when I change pages.

    I’ve found some themes that work like this but I want to develop my own custom theme with custom design.

    Moderator bcworkz

    (@bcworkz)

    You can build a custom page template that dynamically displays content. Name the file according to this defined structure and it’ll be used instead of whatever other file WP would normally use.

    You can avoid admin-ajax.php as long as your PHP Ajax handler code does not use any WP defined functions. Of course if you rely upon the API and REACT or whatever the issue is moot. But the API ends up loading the WP environment just as admin-ajax.php would, so you’re not really gaining anything.

    Thread Starter Sadegh Hosseini

    (@mr-seven)

    Hi @bcworkz ,

    Thanks for your answer,

    We can use page.php for all pages, home.php for the homepage, single.php for single posts, and so on.

    When my clients open my site, home.php will show them. if they click on a post then single.php will show a different structure to them.

    Now this is my problem:

    If I load data from REST API, the single.php will not load and data will load in home.php and I can’t change the structure of the page.

    So I want a documentation or simple theme that help me to do this.

    Moderator bcworkz

    (@bcworkz)

    Once any one template is loaded based on a certain request, it outputs web page content. If a script on that page makes an API request and places the response in the current DOM (possibly replacing other content), no other template is involved. As far as the theme knows, it still had only output that one original page. API responses are un-themed. The theme has no idea that the content it had output is now different.

    It shouldn’t be necessary, but FYI, you can force WP to use a particular template regardless of the default through the “template_redirect” action or “template_include” filter.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to develop ajax based wordpress theme like spotify or soundcloud?’ is closed to new replies.