[Resolved] How to create a BLOG Post Archive Page custom CLASS & HTML…

[michael]

Subject: How to create a BLOG Post Archive Page custom CLASS & HTML…

I already have a BLOG Hero Element that is working fine, & the Blog posts are also working fine.

But I cant find where/how to modify the BLOG page HTML. I find nowhere in the Customize-Layout-Blog area or elsewhere to enter HTML or a custom CLASS.

I can use the html section in the GUI for the Element Header Hero area… but that is the Header not the body.

Is this a Custom Template issue??? Do I need to write a Plugin ???? What is the recommended way to this. I want to add my own Text Labels & Layout for my Blog.

Thanks.

[David]

Hi there,

are you trying to change the layout of the Post loop (grid) or add content around the posts? _ Maybe a screenshot or example site you’re trying to match will help us get the idea

[michael]

Thanks for responding on the weekend David,

Answering your question: I believe it is both Grid & Post Content.

1) I want a WELCOME sentence under the Element Hero Header.

2) I want to alternate the layout of each post: Category Icon picture on right, text on left… then swap right & left.
I have a unique Icon/Image for each Category Tag/Type (6 types in all)

Thanks

[michael]

Also I would like to use a few fonts… also I would like to add a couple fields to be displayed with each user post, eg their City & Country if available in database.

[michael]

I want to add 3 or 4 optional input fields (name, city, country, date) on the COMMENTS Blog page, these will appear along with each post. These will only be used for that specific blog post… no saving to database.

[David]

Might be possible without creating a new template using GP Hooks. Which is easily accessibly the Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

1. The content below the Header element can be added to the after_header hook with a priority of 25. Set your Display Rules to Category Archive –> Comments Category ( or whatever one ).

2. To switch the articles position you can use the nth-of-type selector:

.archive .category-comments:nth-of-type(even) {
    background-position: right;
}
.archive .category-comments .inside-article:nth-of-type(even) {
    padding-left: 0;
    padding-right: 70px;
}

3. If you can the fields from the database then again the hook element is the way to go.

Hope this helps

[michael]

Thanks David… I will try your excellent suggestions!!!

[David]

You’re welcome

[Author]

Posts