With elementary, our vision was to create a simple and powerful tool to create any custom element you want. In this post, let me show you how you can create your own custom Archive page with Elementary WordPress Plugin. ( no coding involved )
psst…our own blog archive is created using the following method.
Setting up data: Elementary works with data already created on your WordPress website. So, go ahead and add some new content. It could be posts, pages or any custom post types, even post types created by plugins like WooCommerce, sliders, etc.
USING THE ELEMENTARY PLUGIN :
1. After installing the Elementary plugin, If you notice carefully, you will see a new menu item in the WordPress Dashboard called “Elements”. From the WordPress Dashboard go to Elements -> Add New Element.
2. Here, enter the name of your element and click ‘Customise this Element’ button ( should be in green)
3. Choose an Element:
i. Now, you will only see a ‘Choose Element’ button. Click that and choose any element by clicking on it.
ii. You can now see the Editor Tools appear.
4. Add content-settings:
Lets go ahead and fill in the content settings,
i. First, let’s choose from the available post-types.
ii. Then, choose between ‘field’ or taxonomy. Let’s first try ‘taxonomy’
iii. Now, in the next dropdown, all available taxonomies under the selected ‘post_type’ is listed.
iv. Let’s choose one. Then, in the next dropdown, is listed all available terms of the chosen taxonomy.
vi. After choosing one, choose how to sort your content / query.
vii. Then choose the fields / data from the given posts.
viii. And you will see the values changed in the preview.
5. Change Display Mode:
a. Now, let us try switching the ‘display-mode’ from the top-bar click ‘Group View’.
b. Now you will see that the preview displays 20 posts from the chosen criteria.
6. Change Number Of posts:
a. You can change the number of posts to display from the Group Settings.
b.Wasn’t that simple? Now, lets try editing the CSS of ‘Atom’ or ‘Elements’. ( Atom : the basic and smallest unit of the element. Example: title, featured image, etc )
7. Styling your Element:
a. To style your element, go to Style Settings.
b. By default the css changes you make are applied to the highlighted “atom” or the element itself, in the above screenshot it is the element itself. ( pin-card. )
c. Go on and change the colour, width, padding, etc.
d. Lets see how to edit other atoms.
8. Selecting atoms:
a. To select an atom, just click on the label near it.
b. When in group view, selecting the atom of the first element, and changing css will apply changes to the specific atom in all elements.
c. Let me show you how I change the colour of the “title”.
9. Changing Media:
a. To change media click on the Media dropdown on the top-left of your screen, and choose a media.
b. Now, you can see the result of changing media. ( the css values set for the media will show up, with default / fall-back values taken from “General” Media. The changed values reflect in the “Preview” and the “Style” Editor.
c. Now, let me show changing a css property for the “Tablet” media.
d. Notice that the css properties do not reflect the change when I change back to “General” media or any other media.
10. Saving And Using Element:
a. Just click the “Save” button on the top-right of your screen to save your element. ( You will get a response, “ Element Updated Successfully” )
b. Go to “Elements” page to get the short-code of your element after saving. Copy the short-code.
c. Now, go to any post and edit it. Then, just paste the copied short-code. Then, update / publish.
d. Now, “view post” and see the result.
Viola! And done! Now, you are on your way to mastering your Elements.
Want to be a part of the developed? Join as a Beta User