Full Wordpress Post html, scripts and css without Theme Header, Footer, Sidebar

Question

My ultimate goal is to consume the posts stored in a WordPress site from a mobile app (in React Native which shows the post inside a WebView component), and to do that I need to somehow get the sufficiently-fledged html content of the post without the WordPress theme related stuff like header, footer, sidebar.

What I mean with sufficiently-fledged html? Well, let me say something about the problem I encountered.

I tried retrieving the post html simply using get_post($postID)->post_content (and after I also tried to direct call the JSON WordPress REST API, but with same result). This html is not always well renderable by React due to some missing CSS and JavaScript, and this happens when I use some WordPress plugin to add custom content to a post. I realized this when I used premium WordPress plugin UniteGallery to add a photo-gallery to a post, and when React rendered the JSON version of the post it did not displayed the photo-galleries at all, instead it displayed e red message (within the normal HTML content):
UniteGallery css & scripts missing, check if your template includes wp_footer().

So I opened in a normal browser the full web page that display the same post, and I compared this HTML with the JSON-version one.
First I noticed the difference in size: web page is almost 2MB, the JSON-version is about 20KB. For this reason I would like to avoid such solutions where the (React) App should download the whole web page and after inject CSS to hide website theme related stuff like header, menu, sidebar and footer.
Instead I would like to prepare (server side) the html (not over-dimensioned) so that the app can use it as is.

I found that the huge HTML could be logically separated into 4 blocks:

BLOCK1: a lot of theme related stuff: styles definitions (more than 70% of the content) and the unwanted theme header
BLOCK2: the post content (almost identical to the JSON-version one)
BLOCK3: unwanted sidebar of widgets and footer (theme template related stuff)
BLOCK4: css imports, javascript imports and some javascript blocks.

Follows an extract of the ‘huge HTML’:

<!DOCTYPE html>
<html>

<!-- ********* BLOCK1 STARTS ********* -->
  <head>
    <title>Post Title</title>
  
    <!-- several theme-related meta and css link tags -->
    <!-- few theme-related javasdcript blocks and imports-->

    <!-- REACT-RENDER REQUIREMENT no. 1: 2 jQuery imports -->
    <script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
    <script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

    <style id="fusion-stylesheet-inline-css" type="text/css">
      /* = = = = = > HUGE REACT-UNUSED theme-related CSS BLOCK < = = = = = */
    </style>
  </head>

  <body>
    <!-- SURELY UNWANTED HEADER related stuff -->

<!-- ********* BLOCK1 ENDS ********* -->

<!-- ********* BLOCK2 STARTS: THE_CONTENT ********* -->
    <article id="post-1234" class="post post-1234 type-post status-publish">
      <h1 class="entry-title">Post Title</h1>
      <div class="video-shortcode">
        <iframe title="YouTube video player" src="https://www.youtube.com/embed/Suib_DXOj0E?wmode=transparent&autoplay=0" width="800" height="450" allowfullscreen allow="autoplay; fullscreen"></iframe>
      </div>
      <div class="fusion-fullwidth" style="padding:0px;margin: 0px;border-width: 0px 0px 0px 0px;border-style:solid;">
        <p><strong>Photo Gallery1 Title</strong></p>
        <div id='unitegallery_1_1' class='unite-gallery' style='margin:0px auto;'>
          <img alt="_FCO0020" src="" data-image="https://example.com/wp-content/uploads/FCO0020.jpg" data-thumb="https://example.com/wp-content/uploads/FCO0020-300x200.jpg" title="" style="display:none">
          <img alt="_FCO0022" src="" data-image="https://example.com/wp-content/uploads/FCO0022.jpg" data-thumb="https://example.com/wp-content/uploads/FCO0022-300x200.jpg" title="" style="display:none">
          <!-- FOLLOWS A LOT OF PICTURES OF THE PHOTO-GALLERY -->
        </div>
        <!-- Follows the Javascript block the check the presence of UniteGallery library, and display the red error -->
        <script type='text/javascript'>
          window.onload = function (e) {
            if (typeof ugCheckForErrors == "undefined") {
              document.getElementById("unitegallery_1_1").innerHTML =
                "<span style='color:red'>Unite Gallery Error - gallery js and css files not included in the footer. Please make sure that wp_footer() function is added to your theme.</span>";
            }
            else { ugCheckForErrors("unitegallery_1_1", "jquery"); }
          };
        </script>
      </div>
    </article>
<!-- *** BLOCK2 ENDS *** -->

<!-- *** BLOCK3 STARTS *** -->
    <aside id="sidebar" class="sidebar fusion-blogsidebar" style="float: right;">
      <!-- SURELY UNWANTED SIDEBAR related stuff-->
    </aside>
    <div class="fusion-footer">
      <!-- SURELY UNWANTED FOOTER related stuff-->
    </div>
<!-- *** BLOCK3 ENDS *** -->

<!-- *** BLOCK4 STARTS *** -->
    <div class="avada-footer-scripts">
      
      <!-- some theme-related css link -->

      <!-- REACT-RENDER REQUIREMENT no. 2: UniteGallery CSS link -->
      <link rel='stylesheet' id='unite-gallery-css-css' href='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/css/unite-gallery.css?ver=5.7.2' type='text/css' media='all' />

      <!-- many theme-related imports and javascript blocks -->

      <!-- REACT-RENDER REQUIREMENT no. 3: UniteGallery JS imports -->
      <script type='text/javascript' src='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/js/unitegallery.min.js?ver=5.7.2' id='unitegallery_main-js'></script>
      <script type='text/javascript' src='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/themes/tiles/ug-theme-tiles.js?ver=5.7.2' id='unitegallery_tiles_theme-js'></script>

      <!-- REACT-RENDER REQUIREMENT no. 4: UniteGallery gallery unhiding -->
      <script type='text/javascript'>
        var ugapi1;
        jQuery(document).ready(function () {
          var objUGParams = {
            gallery_theme: "tiles",
            gallery_width: "100%",
            tiles_type: "nested"
          };
          if (ugCheckForErrors('#unitegallery_1_1', 'cms'))
            ugapi1 = jQuery('#unitegallery_1_1').unitegallery(objUGParams);
        });
      </script>

    </div>
<!-- *** BLOCK4 ENDS *** -->

  </body>
</html>

So I tried to append lines (CSS & JavaScript) that I highlighted with comments in the code above as REACT-RENDER REQUIREMENT to the JSON-version of the post (hard-coding those lines) and then React rendered properly the photo-galleries within the post. The photo-galleries were already there but hidden (with style display:none) and to be handled by CSS & JavaScript stuff that I manually added.
Note I added following required lines:

2 jQuery imports from BLOCK
UniteGallery imports and javascript from BLOCK 4 while not all the css and javascripts present in BLOCK 4 are needed to obtain a working UniteGallery photo-gallery: most are website theme related stuff.

What I tried in order to systematically add missing plugins related stuff to the HTML is something like this:

ob_start(); // <- buffer following outputs
wp_head(); // <- output header stuff
$post = new \WP_Query('p ='. $postID);
if ($post->have_posts())  $post->the_post(); // <- output post content
wp_footer(); // <- output footer stuff
$full_post_content = ob_get_contents(); // get the output buffer
ob_end_clean(); // <- clear buffer and stop buffering
// -> save $full_post_content to DB table 'app_posts'

This way the content of the post is enriched with UniteGallery CSS & JavaScript imports, but is still missing jQuery imports (see BLOCK1 above) and UniteGallery JavaScript block that unhides the photo-gallery (see the end of BLOCK4 above) then the photo gallery in the post still is not displayed.

I encountered the problem using UniteGallery, but actually I suppose that any plugin that adds custom content into a post could potentially produce a post content not proper-renderable by React, if content of the post is retrieved by JSON-REST-API.

For this reason I am looking for such a way (for example within my custom WordPress plugin) to save an HTML version of posts that includes:

light JSON-version of the content of the post
CSS & JavaScripts needed to properly render such post in React, considering plugins involved in enriching post contents

and this is what I meant at the beginning of the question with 'sufficiently-fledged HTML content of the post'.
Obviously I don't know if there are built-in WordPress tool/API that can achieve this, but I am open to develop such custom plugin to easy the work of the user WordPress content manager.

Excuse me, maybe my comment will be too strict for you, but I really want to help you, I develop themes and applications using WordPress, so it seems to me that you are thinking in the wrong direction, do you want to use WordPress as a database and admin area for posts? Did I understand correctly? Will the application be written using a react? You can use WordPress as an admin panel, disable the entire frontside and use the rest-api, and the client write in react, your entire html should be built in react based on data from the rest-api — Unbywyd
– Unbywyd, Commented Jun 28, 2021 at 20:42
I already have a wordpress website with different contents published (news, posts, events management, media galleries, etc.) I am actually developing a mobile app that retrieves content from different sources (tweets from my twitter account, videos from my youtube channel, posts from wordpress website, and the application is written using react-native (will be published for both iOS and Android) — KoappesT
– KoappesT, Commented Jun 28, 2021 at 20:47
This is good, but you pull everything out of social networks using api and in WordPress you have to do the same, you have to forget about what you have in WordPress, I mean the appearance, you have to make a html/css template for the post and render it using data from the workdress api on the react side. — Unbywyd
– Unbywyd, Commented Jun 28, 2021 at 20:53
Well, tell me if I got the point: are you suggesting to create a custom wordpress post template to use to properly render on react? If so, could you suggest me how to use this custom template only "to the app" and not for normal website post displaying? So I mean/think how to use this template programmatically — KoappesT
– KoappesT, Commented Jun 28, 2021 at 20:56
The theme is responsible for displaying posts, this is a lot of styles and scripts, as well as php templates, you cannot take and rip out the content of your page and display it in your application, at most to save time, you can display your posts in an iframe, removing the header and the footer from the template, this will be the fastest and most inconvenient way for the your users — Unbywyd
– Unbywyd, Commented Jun 28, 2021 at 20:57

Unbywyd · Accepted Answer · 2021-06-28 21:58:46Z

1

If I understand you correctly, you want to display your existing posts from the WordPress site in a react application, then this is how it should be done:

A bit of theory

The theme and plugins are responsible for displaying UI (html, css, js) on the client side of the WordPress site. For displaying posts, most likely your theme is responsible (if you do not use constructor plugins or other plugins) A theme is a set of php files in which the header, body and footer and other regions are included. Each post type has its own template, (depending on the theme) But the essence is always the same, this is the php code in which the display of the current post is displayed and various scripts and styles are included, and for plugins, this is a lot of many scripts, styles and php.. so why am I writing this?? The fact that pulling something out of the middle is almost impossible!

Why is it bad and hard to do (display the finished html with all styles and scripts in the react application):

You will definitely have a conflict in scripts
You will not have an light page as you wanted, you will definitely need to load a lot of different scripts, for example, a jQuery, since it will definitely be used in the wordpress
This is a difficult and wrong way.

Now what can you do:

Solutions

Right way: Use the REST API Wordpress I propose to forget about displaying your posts on your site and make your own html and css template and convert it to react template. Pull the data from the WordPress api dynamically when loading your react page and render your post. See REST API wordpress posts
Second way, it is fast way, but not user-friendly. Use an iframe

You can display your entire post page in an iframe,it will also be heavy in weight, because the entire page will be loaded , you cannot hide the footer and header, because scripts are often loaded in the footer, all you can do is hide them visually with the help of css when your page opens in an iframe, example:

you can add a get parameter to your post links that will say that the link opens in an iframe: your.site/posts/123?iframe_mode=true

then open the header.php template and add the following code there:

<html <?php language_attributes(); ?> class="no-js no-svg <?php $s=''; if(isset($_GET['iframe_mode'])) {$s="iframe-mode"} print $s; ?>">

Now write the css rules what you want to hide from iframe

.iframe-mode .my-navbar {display: none}
/*... etc*/

You can also hide unwanted parts from the template output (not the footer!)

<php if(!isset($_GET['iframe_mode'])): ?>
<?php get_template_part( 'template-parts/header/site-header' ); ?>
<?php endif; ?>

Conclusion

In general, I advise you the first option! Wordpress will work as it did, you just open the rest api for posts, if it closed, and use it in your react application, pull the data and render in the react app without using html and stuff from WordPress, only JSON data! Good luck!

edited Jun 28, 2021 at 21:58

answered Jun 28, 2021 at 21:52

Unbywyd

9761 gold badge6 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KoappesT Over a year ago

I would like to follow the right way (option 1) and retrieve a lighter post content within json->content->rendered from REST API but the problem comes when in a post I use some plugin to put content (ie. this UniteGallery) then JSON post content is not correctly renderable by React because of missing stuff (js and/or css). Instead, when in my post I use built-in 'slider' and 'gallery' components provided by Avada premium page builder that I use, those seems to be html-and-js-self-contained in the JSON. Is there no (even if tricky) way to obtain an enough-self-contained json via REST API?

Unbywyd Over a year ago

show an example of such content with scripts, styles, etc.

KoappesT Over a year ago

Question edited for better explanation of the problem and to include the example of that content

Collectives™ on Stack Overflow

Full Wordpress Post html, scripts and css without Theme Header, Footer, Sidebar

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related