How to load WordPress blog-post in HTML page

Today I am going to show you how you can load WordPress Blog content on an HTML file.  I will show you to load the latest few posts and load them in an Internal or external HTML file.  Maybe you have an external or internal HTML template and you have a blog section. This tutorial is the best solution for you to Add the latest WordPress blog to your custom static Web Page.

Add or Load WordPress blog-post in Static HTML page

Let us see what we gonna do in a shot list.

• We will add some PHP scripts to the WordPress web directory.
• We will call that custom WP page an external or internal static web page.

Let’s have a look at the PHP code block.

At the very first, create a file with maybe name  blog-posts.php. We will put this into the same directory of WordPress installation from where we want to get blog posts for static HTML web pages.

And then, copy the below code there and save it. And then have a look at whether it is working or not. Just follow the link like

yourWordPressDirectory/blog-posts.php

and then the next part after the code block.

PHP Script to load WP posts in static pages.

<?php
require('wp-blog-header.php');//link to your blog-header.php using relative path

/*if you are getting 404 errors uncomment the next 2 lines*/
// status_header(200);
// nocache_headers();
?>

<?php
add_filter("the_content", "plugin_myContentFilter");

function plugin_myContentFilter($content)
{
// Take the existing content and return a subset of it
    return substr($content, 0, 140);
}

$args = array( 'numberposts' => 3, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
    <div class="col-md-4">
        <article class="post-content">
            <div class="featured-img">
                <?php $feat_image = wp_get_attachment_image( get_post_thumbnail_id($post->ID), $size = 'medium' );
                echo $feat_image; ?>
            </div>
            <div class="post-container">
                <h3 class="post-title">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                        <?php the_title(); ?>
                    </a>
                </h3><!-- /.post-title -->
                <div class="post-description">
                    <?php the_content(); ?>
                </div>
                <div class="post-meta">
                    <div class="continue-reading pull-left">
                        <a href="<?php the_permalink(); ?>" > Continue reading... </a>
                    </div><!-- /.continue-reading -->

                </div><!-- /.post-meta -->
            </div><!-- /.post-container -->
        </article>
    </div><!-- /.col-md-4 -->
    <?php endforeach; ?>

I think everything is working there 🙂 We have shown 3 latest posts there, if you need more, change numberposts’ => 3 to maybe 4 or 5.

And also, we are getting only 140 characters of content. change the number if you need it at

return substr($content, 0, 140);

One more thing is that it may sometimes return an HTML code block and causes an HTML code break. And the outcome will look so weird as it will break the HTML  structure.

Well, there is a way to remove those HTML from your string as follows. we have used strip_tags to filter HTML and also added a “…”

 return substr(strip_tags($content), 0, 140). "...";

Post Content Filter Word Wise

In case, you are planning to get a few words instant of charterers. Well, to do so, we will use WordPress build-in function called wp_trim_words(), details at developer.wordpress.org .  So, all you have to do is just replace

return substr($content, 0, 140);

with

return wp_trim_words($content, 35);

And you see that 35 as a parameter of function ?  that is actually how many words you want to get from the post. Set as you need.

Okay, Time to load that into a static HTML or PHP webpage. Let see how we get in into the static page.

How to load in Static Page

There is 3 way to load this WordPress Latest post into a static web page.

• using iframe
• using object
• using JavaScript/jQuery

Now, using iframe or Object, you can easily load it anywhere. But the problem is, it will give you a Scroll bar. Tough, you can manage them using CSS and JS. So,

Using iframe

<iframe src="https://www.yourWPsite.com/blog-posts.php"></iframe>

or using object

<object height="400" data="https://www.yourWPsite.com/blog-posts.php"></object>

These two way, you can put anywhere, maybe in localhost in another website. But if we call a page using JavaScipt/jQuery , the file ( that will load those posts) has to be in the same website.

Load HTML using jQuery

Okay, Let’s see how we can use jQuery to load the page inside your web page. Well, we will use the jQuery Load method, and the code block we are like below.

<div id="blog-content"></div>
jQuery(document).ready(function($) {
   // Load Blog section
   $('#blog-content').load("http://www.yourWPsite.com/blog-posts.php");
});

As you see in the above code block, we need a HTML container, in our case <div id=”blog-content”></div>  where those blog post will be loaded.

Note: for this jQuery code block, this should be in the same server as it creates an ajax request to the server. If not in the same server, the request will not be processed.