Include HTML from HTML and PHP

Just before I forget, this article is about 2 great ways to load (include) HTML file from another HTML or from PHP.  Among other things I will show how to load HTLM file from WordPress text widget.

Problem – Why would you need to load an HTML text file in WordPress?

Say, you need to load a complex banner or several objects from several places in your code. In that case, you would want to maintain all that complexity in one file outside of your WordPress itself.   I used this load HTML from HTML  technique inside a Text widget to load 2 banners – one AD banner from Google and the other to load my internal site banner to announce a new featured article.   I could’ve loaded everything directly in a text widget, but that wold lead to duplication.  I also needed to load the same  HTML content from PHP code from functions.php.  To do all that, I offer you this approach below.

 

Include HTML from PHP is easy:

function w3_add_banner() {
 include($_SERVER['DOCUMENT_ROOT']."/wp-content/themes/yourTheme/file.html");
}

This way you a loading and “executing” loaded HTML content from the file all at the same time. No ECHO is needed.

`

To include HTML from HTML without using <OBJECT> or <EMBED> I had to use a small JS library from W3 (https://www.w3schools.com/lib/w3.js):

 <script src="/wp-content/themes/yourTheme/your.js"></script>
 <div w3-include-html="/wp-content/themes/yourTheme/file.html"></div>
 <script> w3IncludeHTML(); </script>
 <!-- <div w3-include-html="/wp-content/themes/youtTheme/file.html"></div> -->

In the four lines above,
 – first one loads the library from W3 that you can copy to your drive,
– the second loads the <DIV> with a custom attribute w3-include-html,
 – third line calls the custom function w3IncludeHTML() to read and load your HTML file line-by-line,
– and the fourth is just a comment.  I need this line to preserve, copy and paste <DIV> element.


Note:
Every time I go to edit this code in WordPress –> Customize –> Widgets,  <DIV> element in the second line get stripped of its custom property w3-include-html.  Most likely reason is that WordPress doesn’t recognize the property and  is designed to remove all that seems a misspell.  But I will allow me to copy, paste and save it gain from commented line four.

Why not use <OBJECT> or <EMBED> ?

You can load HTML from HTML using <OBJECT> or <EMBED>.  And it works. The only problem is that you need to specify the dimensions of your <OBJECT> or <EMBED> and they could be different on different screen resolutions. And you do not want intrusive scroll bars to appear on some resolutions and obscure portions of your content.

[RE: this article written over the Christmas break 2017]

 

(Visited 31 times, 1 visits today)

Be the first to comment

Your question, correction or clarification Ваш вопрос, поправка или уточнение

Editor on duty will review your comment. Can't wait? Discuss your topic right now in forums, if you register and login.     Required fields are marked with * Ваше послание пойдет на просмотр в редакцию. Не можете ждать? Обсудите ваш вопрос прямо сейчас в форуме Русский Круг , ecли вы зарегистрируетесь и войдёте под своим именем.     Поля, обязательные для заполнения, помечены *
* *