This members-only tutorial provides the steps to set up a Posts page template in Oxygen inspired by https://backlinko.com/blog.

Step 1

Install and activate WooSidebars plugin.

Go to Appearance > Widget Areas and add a widget area named say, "Primary Sidebar".

Go to Appearance > Widgets and add in your desired widgets in the newly created widget area.

Step 2

Install and activate Code Snippets plugin.

Add a new Snippet titled say, "Add custom image size for Posts page" having

add_image_size( 'posts-page-thumb', 626, 256, true );

Regenerate thumbnails (not needed if none of the posts have featured images set yet).

Step 3

Oxygen > Templates > Add New Template.

Enter a title of say, "Posts page".

Set the Template to inherit from your Main Template having the Header and Footer.

Apply it to Other > Blog Posts Index.

Edit with Oxygen.

Step 4

Add a Section and inside that, a Heading element.

Set the text to something like, "Our Blog".

In this example, the primary color is #8ebf51 (green) which is what I've set the background color as.

Add another Section and inside that, a Columns element having two columns.

In my test site, I set the Widths of Left and Right Divs to 69% and 31% respectively.

a) Left Div:

I have set padding as 0, 15px, 0 and 0 (top, right, bottom, left).

Add an Easy Posts element inside this Div.

Template PHP:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

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.
  • Hi Sridhar,

    Thanks for this great tutorial. however, I have a problem. In the backend everything works properly, but in the frontend the CSS has no effect on the sidebar?

    Thanks in advance.

  • Adding the sidebar class to the right div seems to have better results than adding to the sidebar itself. When added to the sidebar component itself, the css functioned in-editor but not on frontend.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: