Create A Categorized Article Archive Page
Create A Categorized Article Archive Page
Categorized Article Archive Page
This is why we will see here how to create an archive page that will list all of your articles which will be sorted by category and this, for your WordPress blog.
The Archives gadget provided by default by Blogger is very practical when starting a blog because it allows readers to easily find articles published from the early days of the blog until today.
It also has the great advantage of not requiring any particular big effort for its implementation, all the work having already been done by Blogger.
However, as the blog blows out its candles, the number of articles it contains increases and the list of archives grows.
There comes a time when the gadget hitherto placed in the sidebar becomes too bulky and unattractive.
The method proposed here makes it possible to generate an archive page automatically using a javascript code: it is therefore not necessary to manually add the articles after each publication.
This is code written by jhwilson that can be found on GitHub .
This code is very good, which explains why a large number of bloggers use it. Unfortunately, it’s not perfect.
The generated page displays all published articles one below the other, with the date in brackets to the right of the title.
If the code performs the function expected of it, the result could be prettier.
I finally arrived at the code that I propose to you in this article.
And as a bonus, it is customizable with a few lines of CSS.
Steps to Create A Categorized Article Archive Page
1. Creation of a new independent page
In your dashboard, click on Pages , and then on New page.
The text editor opens.
Give your new page a title, for example, call it Archives.
Check that you are in HTML mode and not in Compose mode.
2. Adding javascipt code
In the space reserved for the content of the article copy and paste the following code:
There you go, your Archives page is ready to be published.
If you wish, you can stop here, the page will work perfectly.
The following steps are just for improving the code and customizing the layout.
3. Display of a warning if applicable
Following the codes pasted so far, copy and paste the code below:
What is the use of this code?
The Archives page is automatically generated using javascript, not all visitors to your blog will necessarily have javascript enabled in their browser.
These people will therefore not be able to correctly view the content of the page.
To kindly warn these people, we will display a message inviting them to activate javascript in order to view the content of our page.
This message is placed between the tags . You can of course personalize this message by modifying the text included between these tags.
<noscript> … </noscript>.
So It’s up to you to choose the styles that suit you best to make your blog something unique and in your image.
For example, here are the styles I applied to my blog ‘s Archives page:
5. Publishing
Click Publish and you’re done! You now have an automatic and personalized archive page on your blog.
I hope these explanations have helped you.
If you have any questions, feel free to ask them in the comments.
Happy blogging!
