[Resolved] How to Style Archive Pages?

[Andres]

Hello,

A WordPress novice here looking for information on how to style category pages (sorry, I don’t know if this is the correct term). I found a few articles in GP forums, but they did not lead to a definitive answer.

We are developing a new site with Genereatepress Pro without a page builder. We don’t want to use a page builder as they pretty much turn your site into a slow-loading dog. Our current site uses GP Pro + Elementor Pro. The developer who did the site created Elementor templates for the styling.

We have a few categories page on our site whose sole purpose is to query posts. They are very basic with just an H1, a brief introductory paragraph, and a grid layout for the posts query that shows the featured image, title and description of each post with pagination

We do have one category that is more complex. It’s still a post query, but unlike thee aforementioned one, it queries the featured image from posts and the posts titles appear as a text overlays on the photos. I’ve provided URLs for both types of category pages.

I found a page (https://premium.wpmudev.org/blog/cool-wordpress-category-pages/) while searching for a solution that explained how to make Category pages using the plugin “Category Editor” by installing a WYSIWYG editor. After installing the plugin, the WYSIWYG editor did appear on category pages. However, the text I put in the Description field did not appear when viewing the category page (Categories –> Category in Questions –> View) and instead appeared in the Description area where the categories are listed (Posts –> Categories).

Is there an option in GeneratePress Pro that will permit replicating these pages without using a page builder? Is there something else in GeneratePress that needs to be configured so the plugin Category Editor function correctly? Is there another plugin you recommend that I can use to style category pages as if they were regular pages?

Thank you very much for your time and have a good afternoon!

Cheers,

Andrés

[Tom]

Hi there,

GeneratePress only has the one category/archive style by default.

However, you can likely design those specific category pages to look how you want with some custom CSS.

Let us know if you need more info 🙂

[Andres]

Hi Tom,

Thanks! That style might just work, once I figure out how to find it.

How do I edit the category pages you mention? I’m referring to the page that appears when you click on “View” under the name of a category (Posts –> Categories –> A Category –> View). There is an editor for this category when clicking on Edit.

Whatever I write in the Description field of a category I’ve created for testing does not appear on the page that opens when I click “View” for that same category.

Here’s a link to the category page I created to test things:

The following text is in the Description field for this category: Why is this text not appearing??

Thanks Tom and have a good night.

Regards,

Andrés

[David]

Hi there,

the example URL you provided comes up as Nothing Found ?

[Andres]

Hi David,

That’s correct. That’s the issue.

I created a category titled: Gallery, and the slug is gallery. On the Categories page in WP (Posts –> Categories), under the title of this gallery, there is the Edit option. If I click Edit it, a page opens that has the following fields: Name, Slug, Parent Category, and Description

What I cannot figure out is how to add content to the page:

Where is the editor to add content to this page? I wrote text in the Description field, and it does not appear on this page. It’s clearly not the same process as adding content to a post or page. This is what I cannot figure out.

Sorry if this is basic for you. For the life of me, I can’t figure it out. I spent various hours yesterday trying to figure it out before contacting you guys. I don’t want to waste your time.

[David]

aah ok
Those are Archive pages and cannot be edited like normal pages can.
What changes are you wanting to make the default category archives ?

[Andres]

Hi David,

That explains it!

I edited the first message in this thread to include the URL for a gallery page on our current site. This site uses Elementor. I didn’t create the site. It looks like the developer created templates using Elementor to style this category page and for the content.

The styling and content are pretty basic. How can I replicate this styling and content on a gallery page using just GeneratePress pro without a page builder? As for the page styling, the default style on pages and post in GP Pro work. That’s really not an issue.

Please let me know if there is any additional information I can provide that will help.

Thanks David.

Cheers,

Andrés

[David]

First off – you would need to disable the Elementor templates, then we could assist with a little CSS to style GP archives the same.

Can you set up a staging site where you can disable the elementor templates ?

[Andres]

Hi David,

I really appreciate you helping.

This is what we are doing. We’ve already created a new application on a different server. On the new application, GP Pro is installed without Elementor or any other page builder. The purpose of this new application is to develop a new site using GP Pro without a page builder.

The current live site (the one with GP Pro + Elementor) is for reference only. We are not making any further changes to the current site. Once the new site is done, we will delete the current site.

As such, would you still require us to create a staging site for the current site and then disable Elementor?

Sorry for the confusion.

Regards,

Andrés

[David]

Sorry – i think i need some coffee lol – i just completely ignored out previous replies.

So with your staging site ( the one you provided here ) – can you reverse any changes you made so it displays the default category page ?

[Andres]

Hi David,

Please, no worries. I understand! I can only image how many support enquiries you guys get per day. That you respond so quickly is a testament to your first-rate customer service.

Yes, that staging site is just a place to test plugins and styling, and to get to know GP Pro and GenerateBlocks before implementing anything on the new site. It’s just a playground, so to speak.

As for the styling on that page (…6732.cloudways … /gallery/) – i.e., the grey borders, the color and width is fine. I’d only remove the lower grey border and center the title and text.

What we want to do is to be able to have the same content as on this page: **. I think the posts query can be done with I the posts query can be done with WP Show Posts Pro.

If you can, please delete the URL in this post when done. I don’t know if editing the first post and including it will delete the other URL.

Thanks David!

Andrés

[Tom]

Hi there,

The /client-resources/ is quite standard – you should be able to use the regular GP category pages to build something almost identical with very little CSS.

Right now the /gallery/ page on your staging site is still saying “Not found”.

The /gallery/ page on your current Elementor site would definitely require some custom CSS/maybe some HTML.

Which one are you trying to rebuild with GP? Both?

[Andres]

Hi Tom,

I think we’re making headway!!

Is it alright if we focus on the /how-we-work/ category page first to avoid confusion? Once I create one category page and get the content and styling the way I want, I can just replicate it on other category pages.

To keep it simple, I renamed the category Gallery to How We Work. This is the URL for the How We Work category

I figured out why nothing was appearing on the other category page (/gallery/: There were no posts assigned to that category. I have assigned the post “Some Useful Links for You to Get Started” to the How We Work category. The content of this post is now showing on the How We Work Category page.

Here are 4 screenshots to show what what’s going on.

1. https://gyazo.com/cee15d744caeec6cf977c55b140e864f (Posts –> Categories, first part)

2. https://gyazo.com/7bf6ebb27bd15ba000a823d6fa410ccc (Posts –> Categories, second part)

3. https://gyazo.com/1ed4ac823debb1e2b3005a3362434f65 (Edit Category – How We Work)

4. https://gyazo.com/5b4002d0edf7421deae5b1c62ea9eb12 (How We Work Category Page)

Questions

1. How do I get the How We Work category page on the staging site to look like the category page on the live site (with regards to the title, paragraph text, and the post query)?

2. Is there something I need to enable on GP Pro?

3. For the posts query, can I use your WP Show Posts Pro Plugin?

Thank you for your time and patience, Tom. I’m sure you can do this in your sleep. For me, a few days’ affair with lots of help!

Cheers!!

Andrés

[David]

Do you have the Blog module enabled in Appearance > GeneratePress ?
That will enable these options in the Customizer:

https://docs.generatepress.com/article/blog-content-layout/

Be worth creating some posts in the ‘how we work’ category so we can look at any custom CSS requirements.

[Andres]

Hello David,

I’ve enable the Blog Module and have added posts to the How We Work category. Below are screenshot showing the Blog Module setting in Customizer.

1. https://gyazo.com/5d1c8b1466125351dcea30f48752d705

2. https://gyazo.com/6a1bdaad80e093104fddc12e50420eca

3. https://gyazo.com/28a61b3030635cb95f9bf6f186394bc9

Questions

1. Though I have it set for the image to appear above the title, it appears under it. After looking at the Blog Module settings, do I have something configured incorrectly?

2. Is it possible to show only 6 posts at a time using pagination?

3. Regarding the title and text that appears above the posts, where is the correct place to input it? The paragraph text is currently in the Description field when editing the category.

4. Would it be easier to create custom PHP templates to style the category pages? If using a custom PHP template for this category page, is it possible to use a posts query plugin that uses short code?

Thank you David and have a good day.

Cheers!

Andrés

[Author]

Posts