This members-only tutorial provides the steps to display blog posts in a timeline when using Oxygen.

Live Demo

We shall edit the Oxygen Template that is applied to Blog Posts Index and add custom and CSS in the Easy Posts element.

Animate On Scroll Javascript library will be used for the scroll animations.

Finer details:

  • pre_get_posts action hook is used to make the blog posts appear in chronological order i.e., older posts at the top.
  • The image is the featured image. For posts that do not have one, a fallback image will be set. Image links to the single post.
  • On smaller screens, posts will appear one below the other with the image positioned in the bottom center.
  • Styling for pagination is included.

Step 1

Create a Page titled say, "Blog" and set it as Posts page at Settings > Reading.

Step 2

Go to Oxygen > Templates.

Add a Template named say, "Blog".

Set it to inherit the design from your Main Catch All Template.

Apply it on Blog Posts Index.

You may have to set a priority value 1 or higher to override a more generic Archives Template if present.

Step 3

Edit the Blog Template.

a) Add a Section.

Background Color: #eff4fb

Horizontal Item Alignment: Center

Advanced > Typography > Text Align: Center

Add any elements like a Heading or Text that you would like to show above the timeline.

Add an Easy Posts element.

Templates > Template PHP:

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: