Create a Custom Archive Page Programmatically

If you go through the list of default page types in Wordpress, you will realize that you hardly use the archive page. It is not popular as it does not offer user friendliness. Did you know you could customize the archive page programmatically? Let's see how it's done. But, before getting started with the customization, let's try and understand the archive page.

The Default Archive Page

Here is a directory of all the default pages that come with your Wordpress theme

404 error page

Archive page

Image attachment page

Index page

Default page template

Search result page

Single post and attachment page

All the pages that have been listed as part of this default directory have the same ensemble structure that offers no creativity to the users. Header at the top can be attributed as the only difference between the index and archive page. The archive page offers a classic archive of all the posts, but is just an extension of the index page as far as intuitiveness and structure is concerned. As of now, the only way to introduce archives to your website is by including the widgets. This simply means eating up into the space of your website. If you want to avoid that, you can add the archive page using code.

Creating the Archive Page: Getting Started

The custom archive page that you will be creating here will include a custom welcome message. It will also include a configurable list of the posts (15 being the default number) along with author and monthly archives. The whole page will be responsive and will change itself to match the theme being used. The whole custom archive page will base itself on the custom page template. So, let's begin!

You can start creating the custom archive page using the page.php file in your theme folder. This file is optimized in order to display custom content, and it has a simple yet intuitive structure.

You will need to call the tmpl_archives.php to get started with programmatically creating the archive page.

Now, replace

With

With this, the content file that needs to be archived will be fetched

You will need to keep the HTML contents that are responsible for the archive in the file.

You have a default custom template declaration comment. Replace it with

This is the file structure that you get at the end of all the replacements

With this single line code, your job's done!

Adding Widget Areas

You can create a new widget area using the standard process. Create a new file archives-page-functions.php, and place it within the theme's main directory. You can register the new widget areas here.

if(!function_exists('archives_page_widgets_init')) :

function archives_page_widgets_init() {

/* First archive page widget, displayed to the LEFT. */

register_sidebar(array(

'name' => __('Archives page widget LEFT', 'zerif-lite'),

'description' => __('This widget will be shown on the left side of your archive page.', 'zerif-lite'),

'id' => 'archives-left',

'before_widget' => '',

'after_widget' => '',

'before_title' => '',

'after_title' => '',

));

/* Second archive page widget, displayed to the RIGHT. */

register_sidebar(array(

'name' => __('Archives page widget RIGHT', 'zerif-lite'),

'description' => __('This widget will be shown on the right side of your archive page.', 'zerif-lite'),

'id' => 'archives-right',

'before_widget' => '',

'after_widget' => '',

'before_title' => '',

'after_title' => '',

));

}

endif;

add_action('widgets_init', 'archives_page_widgets_init');

You will need to style the CSS page. Here is a stylesheet that you can incorporate into the theme folder

if(!function_exists('archives_page_styles')) :

function archives_page_styles() {

if(is_page_template('tmpl_archives.php')) {

wp_enqueue_style('archives-page-style', get_template_directory_uri() . '/archives-page-style.css'); // standard way of adding style sheets in WP.

}

}

endif;

add_action('wp_enqueue_scripts', 'archives_page_styles');You will need to activate the archives-page-functions.php file. Add the following code at the end of functions.php file

require get_template_directory() . '/archives-page-functions.php';

To call the content, you will need to place the following content in the content-tmpl_archives.php file

Listing the Posts

You will need to list the 15 posts. You can easily achieve this by using the necessary widgets, but let's try and perform some coding to achieve this. Using the archived-posts-no custom field, you can set the number of posts. Always keep the default number at 15

Add the below code to content-tmpl_archives.php file