Embed in HTML, AngularJS, Bootstrap Site

  • Hi Guys

    I’ve had a good look around and I’m struggling to find a definitive answer on the best way to embed WordPress in my existing website.

    I’ve installed WordPress and can see my blog in a separate page if I navigate to mydomain/blog

    What I would like is to seamlessly embed my blog into my website, so the blog appears if a user hits “Blog” in my header navigation. And then navigate back to other parts of my site from the blog, using the same navigation.

    My site is HTML, using Bootstrap and AngularJS (for navigation and some small scale data binding).

    It is essentially a 1 page site with navigation facilitated by embedded HTML views managed by Angular routing. So it would be great if I could embed WordPress in such a view.

    I don’t mind if the blog looks slightly different to my site, just want it embedded inside my header/footer/master page.

    I’ve seen the PHP examples, but not sure how I would fit that.

    Any help or advice would be much appreciated.

    Many Thanks
    JRW

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jrwstudio

    (@jrwstudio)

    Hi

    Have you any ideas for help with this?

    To put it more simply. How do I embed my WordPress blog in a HTML file?

    Which I then plan to serve as a view via Angular Routing.

    Many Thanks
    JRW

    I would write 2 WP filters and 2 WP action:

    1. add_filter( ‘the_content’, ‘last_but_not_least’ , 99999) with lowest priority as we want to be the very last that will be executed
    2. add_filter( ‘the_content’, ‘first_but_angular’ , 0) with the highest priority as we want to be the very first that is executed
    3. add_action( ‘save_post’, ‘remove_cached_version_of_post’ );
    4. do_action( ‘deleted_post’, $postid );

    In the (1) filter I would check if there is a cached version of the current page (given by $post) and if it is then the content I would return would be a hijacked angular version of the page (an angular template that will render the cached version of the content).
    In the (2) filter I would save the current content of the post to a file on disk representing its cached version then I would return the value of the function given at (1).
    In the (3) action I would delete from the disk the cached version of the post, if any.
    In the (4) I would remove the cached version from the disk.

    The flow would be the following:
    – if there is a cached version of the post then return a angular template that would render the cached version (which is just a dumb .html file)
    – if there is no cached version then I would create it although I would not return that content back; instead I would return the angular template which would render the cached version of it.

    In order to be sure we are in-sync with the post changes (because a post might be changed at a later time) we drop the cache every time the post is changed (ie. created/updated/deleted). This will force the (2) filter to recreate its updated cached version again.

    In theory this should work ??

    • This reply was modified 7 years, 12 months ago by Eugen Mihailescu. Reason: clarification
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Embed in HTML, AngularJS, Bootstrap Site’ is closed to new replies.

Tags