Using Elementary Plug-in to Create Custom Archive Page

• August 12, 2016
• Leave a comment

Creating custom archive page without coding is not a difficult task. In this article, you can learn a way to create custom archive page using Elementary plug-in. It works with data created already on your WordPress website. You can add some new content like posts, pages or any custom post types created by WooCommerce, sliders, etc.

Firstly, you need to install the Elementary plug-in. Once installed, you can see a new menu that appears on Dashboard’s left sidebar named as “Elements”. Now, go to Elements → Add New Element as shown below. Enter the name of your element and click on Customize this Element button.

Now choose any element. Upon the selection of an element, the Editor Tools screen will appear as shown below:

For adding content sections, choose from the available post-types at first. Now choose any one from field or taxonomy. Let’s try on taxonomy. In the next dropdown, all available taxonomies under the selected ‘post_type’ is listed. Choose anyone.

All the available terms of the chosen taxonomy will be listed in the next dropdown. After choosing any one of them, decide from the available options to sort your content/query. Now, choose the fields/data from the available posts. The changed values will now appear in the preview as follows:

To change ‘display-mode’, switch it from the top-bar and click on ‘Group View’. Now, the preview will display 20 posts from the chosen criteria. You can also change the number of posts to display from “Group Settings”.

For styling the selected element, go to “Style Settings”. Default CSS changes will be applied to the element. Proceed forward and change the color, width, padding, etc.

For selecting atoms, either select the “element” and just click on the “label” near it or in group view, select the element, modify it and then change the CSS according to your need.

To change media, click on the media dropdown located on the top-left of your screen, and choose a media. The result of changing media will be displayed (either the CSS values set for the media will appear by default or fall-back values taken from “General” media will appear). The changed values will be reflected in “Preview” and “Style” editor.

For saving and using element, just click the “Save” button located on the top-right corner of your screen. Now, go to “Elements” page to get the short-code of your element after saving and copy it.

Now, go to any post and edit it. After that, just paste the copied short-code and update/publish it. The final result of the post will be displayed as: