While coding my personal website, I ran into a problem: I want to create a modal window with an “iframe” tag, but Google Translate does not support text in the iframe. So I tried to embed another HTML file in index.html with JavaScript or PHP.
GOAL
The goal today is to embed sub.html in index.html without using iframe tags so that Google Translate will work for the embedded text.
Below is how to embed the code in an iframe tag.
<iframe src="sub.html"></iframe>
Environment
PHP8.3.8 Latest Google Chrome (Version 127.0.6533.90)
<?php include 'sub.html'; ?>
//<?php include('sub.html'); ?> also works
Change index.html into index.php to use PHP function in index file. Or you can use html as PHP by using “AddType” in .htaccess. Reference: Parse HTML as PHP using HTACCESS File
<div id="frame-content"></div>
<!-- need to read jQuery -->
<script src="jquery.min.js"></script>
<script>
$("#frame-content").load('sub.html');
</script>
Trouble Shooting
Opening index.html in a local environment causes a CROS policy error as below. For correct results, we must use a web server or a local HTTP server.
Access to XMLHttpRequest at 'file:///C:/.../sub.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Today’s goal is to implement a search suggestion as below. The suggestion should be displayed without page transition while inputting the search word.
Environment
Windows10 XAMPP 7.4.10
What is Ajax
AJAX, Asynchronous JavaScript And XML, is a term that refers to a group of Web development techniques for asynchronous communication on the client side using JavaScript. Please check “What Is AJAX (and Asynchronous Communication)?” for details about ajax.
The following is a brief explanation about the ajax mechanism.
How Ajax works
In Ajax, the 2 system “sending the request and getting the response from the server” and “get the data from the browser and reflect the received data to the browser” are separated. So users can operate on the browser while waiting the response.
JSON is used for data exchange in PHP. But how can I create json data in php and pass it to JavaScript?
GOAL
Today’s goal is to generate Json data from PHP array and get the data in JavaScript. This can be used when getting data from the server in PHP and processing the data in JavaScript.
This function is used to get template from {}-{}.php.
In my case, get the template from content/content-search.php by using get_template_part( ‘content/content’, ‘search’). But I don’t need content-search.php because the template content/content-search.php is the same as content.php.
post_password_required() is used to protect contents (posts) with password. This function detect whether post requires password and correct password has been provided.
This function checks a post type’s support for a given feature. The first argument $post_type is the post type being checked and the second one $feature is the feature being checked.
In my case, get the post type of the current post with get_post_type(), and check if it is ‘comments’.
comment_form() is used to output a complete commenting form for use within a template.
This function is used to displays a list of comments for current post or page. The argument array $args defines default arguments and form fields to override. You can use it to change class and id names.
Reference: Parameters of comment_form() in wordpress.org
This is one of the articles about project “Create Original Theme in WordPress”.
GOAL
To create sidebar.php
Environment
WordPress 5.5.1 XAMPP 7.4.10
sidebar.php
<?php
/**
* The template used for the sidebar
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>
<?php if ( is_active_sidebar('sidebar') ) : ?>
<aside id="sidebar">
<?php dynamic_sidebar('sidebar'); ?>
</aside>
<?php endif; ?>
functions.php
‘widgets_init’
‘widgets_init’ is the hook to initialize widgets such as sidebar. You should hook the register function register_sidebar() with add_action(). Please check the article “What is Hook in WordPress?” for detail about hook in WordPress.
In my case, techblog_widgets_init() is the function to register sidebar.
The function wp_head() should be in <head></head>. This is initially the same as do_action(‘wp_head’).
function wp_head() {
/**
* Prints scripts or data in the head tag on the front end.
*
* @since 1.5.0
*/
do_action( 'wp_head' );
}
This function fire functions attached to the hook ‘wp_head’. For example, some functions are added to the hook ‘wp_head’ in wordpress\wp-includes\default-filters.php as below.
The function body_class() is displays the class names for the body element.
function body_class( $class = '' ) {
// Separates class names with a single space, collates class names for body element.
echo 'class="' . esc_attr( implode( ' ', get_body_class( $class ) ) ) . '"';
}
The following is an example of actual HTML output.
<body class="home blog logged-in admin-bar no-customize-support">
wp_nav_menu() is the function to display navigation menu. the arguments list can be seen here.
How to import style.css in the header
It is recommended to use wp_enqueue_scripts instead of embedding <link rel=”stylesheet” href=”wordpress/wp-content/themes/techblog/style.css” type=”text/css”/> in header.php directly.
Add add_action( ‘wp_enqueue_scripts’, ‘<enque_function_name>‘ ); in functions.php of your theme.
add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
// Add main theme stylesheet
wp_enqueue_style( 'techblog-main-style', get_stylesheet_uri(), null);
}
In many WordPress themes, the link tag <link rel=”profile” href=”http://gmpg.org/xfn/11″> is contained within <head>. This tag is used for making relationship to XMDP (Xhtml Meta Data Profiles). You don’t need include this. You can see more information in “What rel=profile is for?“.
