How To Add A WordPress Blog Post Anywhere Without Plugins

WordPress is such a robust platform to work with. Starting out as simply a blogging engine, it has now grown to be a powerful CMS that businesses, both large and small rely heavily upon. Blogging is still a major part of any business’s visibility – allowing it’s customers to stay up-to-date with the companies growth […]

My Role(s):

Typography

Primary Font:
Secondary Font:

Development Tools

Palette

What I Learned

WordPress is such a robust platform to work with. Starting out as simply a blogging engine, it has now grown to be a powerful CMS that businesses, both large and small rely heavily upon. Blogging is still a major part of any business’s visibility – allowing it’s customers to stay up-to-date with the companies growth and direction. Websites are becoming more and more creative about the blog posts placement, straying away from the basic listings on the ‘blog’ page. This code-snippet tutorial is going to demonstrate how to add a WordPress blog post anywhere without plugins.

As WordPress developers, especially when first starting out, we tend to rely on plugins for a lot of things. Galleries, contact forms, and chat functionality can all be added quickly with the press of a button. But, plugins also can cause conflicts within the core of your WordPress install. All plugins require scripts that may interfere with each other and slow your website down, or break it all together. Thankfully, we can adjust our blog posts to our liking with WordPress’s built in functions.

The following code snippets are the bare bones to display your blog post anywhere on your site. You can spice it up as you see fit. The first part of the code is the query for posts we want to display. This can be placed inside a div tag.

<?php
        /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $query = new WP_Query( array ( 'post_type' => 'portfolio', 'posts_per_page' => 12, 'paged' => $paged ) );


        if($query->have_posts()) :  while($query->have_posts()) :  $query->the_post(); 
        ?>

The code takes the following parameters, but more can be added. Visit the WordPress Codex for more information.

  • post_type = displays posts from a specific post category. If left blank, all posts will show.
  • posts_per_page = displays the amount of posts to be shown in that area on the page. If no value is specified, it will default to your installation’s posts per page.
  • paged = determines pagination for the posts

That’s the hard part. Now, we’ll just add a few WordPress-specific statements to adjust things as we want them. In my example I’ll be adding just a thumbnail image and a link to the full article. This can be done easily with the code below:

<div class="img-fluid">
		<?php the_post_thumbnail(); ?>
		</div>

<p class="mt-2 text-center"><a href="<?php the_permalink(); ?>" class="btn btnSolid">Launch Project</a></p>	


  <?php       
            if(($query->current_post+1)%2 == 0){ 
                echo '<div class="clear" style="clear:left"></div>';
            }
        ?>

<?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>


I’ve wrapped the thumbnail and the link in regular HTML elements and styled them using CSS. I’ve also added a modulo operator (%) statement that tells the engine to split the post listings into 2 columns. More on that statement in another post. That code produces the styling that can be seen on my portfolio page. We finally close the loop with an “endwhile/endif;” statement. And that’s it!

Launch Demo

I'm Accepting New Web Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Let's Talk

Get In Touch

I make it easy to get in touch with me to start your next project.

I'm available to discuss your project via email. Let's link up.

Email Me

I'm not much of a phone person, but let's talk anyway.

Call Me