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 latest few posts and load in 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 latest WordPress blog in your custom static Web Page.

Load WordPress in Static WebPage
Load WordPress in Static Web Page

Add or Load WordPress blog-post in Static HTML page

Lets see what we gonna do in a shot list.

  • We will add some php script in the WordPress web directory.
  • We will call that custom WP page in an external or internal static web page.

Let’s have a look about PHP code block.

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

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

yourWordPressDirectory/blog-posts.php

and then next part after the code block.

PHP Script to load WP post 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 post there, if you need more, change numberposts’ => 3 to may be 4 or 5.

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

return substr($content, 0, 140);

One more thing is that, it may sometime return HTML code block and causes a 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  planing to get 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 form post. Set as you need.

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

How to load in Static Page

There are 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 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>

this two way, you can put anywhere , may be in local host in other website. But if we call  page using JavaScipt/jQuery , the file ( that will load those post ) has to be in the same website.

Load HTML using jQuery

Okay, Lets see how we can use jQuery to load the page inside your web page. Well, we will use jQuery Load method and the code block we be 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 ajax request to server. If not in the same server, request will not be processed.


Related Post

Google AdSense in WordPress AMP Post Content In this tutorial, we will show you how to add Google AdSense in WordPress AMP Post Content in a site running with WordPress. May be you are using Word...
AMP AdSense Post Content Ad WordPress Plugin We have created a WordPress plugin called AdSense AMP Post Content Ad. The main goal of this plugin is to let you insert your AdSense ad code inside W...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.