A dynamic list of posts is an invaluable addition to our self-hosted WordPress website. It will allow our visitors to access all of our work on a single page, increasing the pageviews and reducing the bounce rate. Let's see how to create a dynamic list of posts with multiple options.
Unblock any international website, browse anonymously, and download movies and Mp3 with complete safety with CyberGhost, just for $2.75 per month:
We will need to use programming code to create the dynamic list of posts. If you don't have any prior programming knowledge, don't worry; we will make it as simple and detailed as possible.
Be prepared: Server access and Notepad ++
Since we are going to write code for our website, we will need access to our hosting servers, either through FTP or using the File Manager on Cpanel/Plesk.
We will write the code locally on our PC, and then upload it to the proper folder for the WordPress installation to use it.
We can use any text editor to create the dynamic list of posts, like the Windows Notepad.
It's better, however, to have a code-aware editor, as it will color-code the various programming elements (comments, tags, etc.) and help us avoid mistakes.
For this guide, we will use Notepad ++, one of the best-known text editors for programmers, with multiple features both for the novice and the experienced programmer.
The first code we write won't be color coded, but that's only until we click on save...
...and select to save the file as PHP Hypertext Preprocessor file.
This way, Notepad++ will know we are writing PHP code, and will apply the proper format.
How to create the template for a dynamic list of posts on WordPress (most themes)
We will first create a page template on WordPress, which we can use to create any dynamic list of posts, e.g. a full archive, a site feed, a categories archive, etc.
The first step is to declare that this is a page template and give it a name. You don't need to write this code; you will find it in full to copy and paste it below.
As you can see, inside the <?php ... ?> we create comments between /* and */. Outside the PHP, the comments are between <!-- and -->. This is an important distinction.
The name we have selected here is the one we will find at the page editor, on the "Template" list. Make sure it describes the type of page you want to create.
After the template name, we import the page header with the <?php get_header(); ?> code, and we open two <div> tags. It's optional to give them an id and class, but it will help if we want to use CSS to change the list of post's appearance.
It's good coding etiquette to leave spaces or tabs before each new sub-tag. It makes the code easier to read and will help us make sure we have closed all the tags.
Next, we open a PHP while, with the "have_posts()" check:
<?php while ( have_posts() ) : the_post(); ?>
The have_posts() function is boolean, and will return TRUE OR FALSE. The above code will check if there are posts left (have_posts() is true), and return each post.
We also create a header, where we use the function the_title() to import the page title.
We open two more <div> tags, one for the page content, and one for the list of posts.
The "page-content" div will include any text we write on the page which will use the template.
Inside the "posts" div, we will add the proper code, to create the list of posts we want.
There are several different options at this point, so we will leave it blank for the time being, and we will list some examples later in the guide.
Finally, we close all the tags we have opened: the posts and "page-content" divs, the article, the while, the "site-content" div and the "posts-area" div.
After the main code, in the example we have hidden the sidebar. To have it appear, we uncomment the get_sidebar() function.
The last function get_footer() will load the page footer.
The complete code we have created so far is this:
<?php /* Template Name: Sitemap Template * @package PCsteps */ ?> <!-- This is where the actual code begins --> <?php get_header(); ?> <div id="posts" class="posts-area"> <div id="content" class="site-content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <!-- add the page title --> <h1 class="entry-title h1"> <?php the_title(); ?> </h1> </header> <div class="page-content"> <!-- Shows the page content we have written, e.g. an opening paragraph --> <?php the_content(); ?> <div class="posts"> <!-- Here we will add the code that will shape the list of posts--> <!-- End of code --> </div><!-- closing .posts--> </div><!-- closing .page-content--> </article><!-- closing #post --> <?php endwhile; ?><!-- closing the while loop --> </div><!-- closing .site-content --> </div><!-- closing .posts-area --> <?php /* We have to remove the comment if we want to show the sidebar get_sidebar(); */ ?> <!-- Include the page footer --> <?php get_footer(); ?>
The different codes for multiple kinds of lists
Depending on the type of list of posts we want to create, we need to add the specific code right after the <div class="posts">. We can add more than one code, to combine two types of functionalities.
Search box
<div class="posts">
<section class="q-search"> <h2 class="entry-title">Search</h2> <?php get_search_form(); ?> </section>
</div><!-- closing .posts-->
RSS Feeds (Post + Comment Feeds)
<div class="posts">
<section class="feeds"> <h2 class="entry-title">Feeds</h2> <ul> <li><a title="Full content" href="feed:<?php bloginfo('rss2_url'); ?>">Main RSS</a></li> <li><a title="Comment Feed" href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comment Feed</a></li> </ul> </section>
</div><!-- closing .posts-->
Full Category list + RSS
<div class="posts">
<section class="categories"> <h2 class="entry-title"><i class="icon-th-list"></i> Categories</h2> <ul><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?> </ul> </section>
</div><!-- closing .posts-->
Monthly Archive
<div class="posts">
<section class="archives"> <h2 class="entry-title">Mothnly Archive</h2> <ul> <?php wp_get_archives('type=monthly&show_post_count=true'); ?> </ul> </section>
</div><!-- closing .posts-->
Page List
<div class="posts">
<section class="pages"> <h2 class="entry-title">Pages</h2> <ul><?php wp_list_pages("title_li="); ?></ul> </section>
</div><!-- closing .posts-->
List of posts (10 latest)
<div class="posts">
<section class="posts"> <h2 class="entry-title">Our latest Posts:</h2> <ul> <?php $archive_query = new WP_Query('showposts=10'); while ($archive_query->have_posts()) : $archive_query->the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; ?> </ul> </section>
</div><!-- closing .posts-->
List of posts (all posts)
<div class="posts">
<section class="posts"> <h2 class="entry-title">Όλες οι δημοσιεύσεις:</h2> <ul> <?php $archive_query = new WP_Query('showposts=-1'); while ($archive_query->have_posts()) : $archive_query->the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; ?> </ul> </section>
</div><!-- closing .posts-->
How to create the template for a dynamic list of posts on the Genesis Framework
The Genesis Framework is one of the most popular theme frameworks for WordPress.
Since the Genesis Framework works in a different way than most themes, the above code will not work to create a list of posts.
This is the code that will work on the Genesis Framework and any child-theme.
<?php /** * Template Name: Sitemap Template */ // Add our custom loop add_action( 'genesis_loop', 'cd_full_loop' ); function cd_full_loop() { /* This array will decide the category, the order, and the quantity of the list of posts */ $args = array( // 'category_name' => 'windows', /* with the 'category_name' commented out or empty, we will get all the posts from every category*/ 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page'=> '-1', ); $loop = new WP_Query( $args ); //if there are posts... if( $loop->have_posts() ) { //...and for as long as there are posts... while( $loop->have_posts() ): $loop->the_post(); //...show (echo) every post with the permalink, title, and date echo '<li><a href="'. get_permalink() .'" target="_blank" style="font-weight: 700;">' . get_the_title() . '</a><br>Published on '. get_the_date() .'</li><br>'; endwhile; } wp_reset_postdata(); } genesis();
This code is much simpler since it doesn't require us to create div tags, the Genesis Framework takes care of it for us.
For more options for the $args array, which will allow us to include the proper posts on the list, and in the proper order, you can check out the WordPress Codex for the get_posts function.
Upload the file and select the template
For both of the above scenarios - general theme and Genesis Framework - after we have created the file we just need to upload it, either by FTP or by the File Manager.
We must upload the file inside our current theme folder, which we will find in /wp-content/themes/(theme name)/
For the Genesis Framework, if we are using a child-theme, we need to upload the file to the child-theme's folder.
After we have uploaded it, we create a new Page through WordPress and select the new template.
Our Dynamis List of Posts is ready
By visiting this page:
https://www.pcsteps.com/full-posts-archive/
you will find all the published posts of PCsteps.com, in alphabetical order.
Did you have any trouble creating your list of posts?
If you can't get the list of posts to work on your theme, or it works, but it's not exactly how you like it, leave us a comment.
Support PCsteps
Do you want to support PCsteps, so we can post high quality articles throughout the week?
You can like our Facebook page, share this post with your friends, and select our affiliate links for your purchases on Amazon.com or Newegg.
If you prefer your purchases from China, we are affiliated with the largest international e-shops:
Leave a Reply