I have a website that is built with HTML and Bootstrap and have a blog with WordPress (here is the link https://satisfyhost.com/blog/. Now I want to show my blog posts last 3 or 4 on my main website. Is there any way to embed or show it perfectly?
Example:
Yes, you can do that no problem. One way is to use an iframe and point it to a page in the wordpress site. I am assuming that you want the same look and feel from the wordpress site without any extra work. Best to set up a page in wordpress that has no header and no footer but does contain the content you wnat to display. This way it keeps the styling, java scripts, and all other features from the wordpress that are already build in. Creating a custom page template in WordPress without a header or footer is a straightforward task. You can then embed this page in your non-WordPress site using an iframe. Here's how you can do it:
Create a Custom Page Template:
Go to your WordPress theme folder. You can access it via FTP or File Manager in your hosting control panel. Create a new PHP file for your custom template. You can name it something like custom-template.php.
<?php
/*
Template Name: Custom Page No Header Footer
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Your custom HTML content goes here -->
<?php wp_footer(); ?>
</body>
</html>
Create a New Page in WordPress:
Embed the Page Using an Iframe:
On your non-WordPress site, you can embed the WordPress page you just created using an iframe. The HTML code will look something like this:
<iframe src="https://yourwordpresssite.com/your-custom-page/" width="800" height="600"></iframe>
Make sure to replace https://yourwordpresssite.com/your-custom-page/ with the actual URL of the custom page you created in WordPress. Adjust the width and height attributes to fit your layout.
This approach allows you to maintain the CSS and JavaScript of your WordPress site on the custom page while excluding the header and footer.
If there are links in the wordpress content it might try to stay in the iframe window, you can jQuery to control things like that. You can make any link in that window go somewhere on your site instead of the wordpress site, etc. Good Luck!
example.com/wp-json/wp/v2/). It's documented here: developer.wordpress.org/rest-api You should be able to pull the most recent{n}posts using that.