[Resolved] Custom blog category pages – template?

[Jessica]

Hi there! I’m trying to create a page that looks like this: https://cairnproject.flywheelstaging.com/cairn-project-news for all of my blog category archive pages. I think it would be best to create a Content Template Block element to apply to category archive pages, but then I’m stumped because I need the category types listed right below the header to make it clear what page people are on. Is it possible to do that somehow within this element? (eg change the style – bold/background color – of the current category)

Or maybe there’s an easier way where I can build these pages individually and then make URL/category/category-name go to these pages? Would I just set up a redirect or change the URL of these stand alone pages to URL/category/category-name within the page editor?

Thanks in advance for any help you can provide!

[David]

Hi there,

would something like this work ?

https://gpsites.co/dispatch/category/time-saving/

In the Dispatch site i hooked in the Secondary Navigation which is displaying the Category archive menus.

If so:

1. Create a new Hook element.
2. Add this code to the hooks text area:

<div class="second-nav grid-container">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
</div>

3. Set the Hook to generate_after_header and increase the Priority to 25 so it appears after the page hero.
4. Set the Display rules to your Category > Archives.

Does that do it ? Or have i completely missed the point lol

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jessica]

Oooh that’s a good idea I hadn’t considered! I’m already using the secondary navigation as the donate/donate monthly blue bar at the top. I guess I could use a hook for that secondary nav content instead and then use the secondary navigation for this category navigation.

How did you style it with the background colors?

[David]

The background colors are all see in Customizer > Colors –> Secondary Navigation. It has Initial, Hover and Current color options

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jessica]

Ahh gotcha, I may try that then! Just curious, my other question about faking the category names/URLs, would that be possible, eg have each of these regular pages URLs be URL/category/category-name? Or is the best/most logical way to do this by creating a category page template like we’ve discussed? Thanks again!

[David]

You can use redirects or the method here for using static pages.

I personally would only do tahtif i really want to individually customize each category page with long content.

Otherwise i just use the automatic archive pages, and the Block Element to hook over content around my post loop.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jessica]

Ahh gotcha! Okay one more question on that… with the automatic archive pages and GeneratePress, is there a way to change the style of the blog posts, or is it just the settings within the Customizer? eg Would I be able to make the automatic posts page look like the blog page https://cairnproject.flywheelstaging.com/blog or am I limited to the WordPress Customizer settings and can’t change how the actual posts show up? Thanks again!

[David]

For sure, you can crate a Block element – Content Template:

https://docs.generatepress.com/article/block-element-content-template/

You just build the single content template as you have in your query loop and set your display rules to Blog, Category Archives and it will do that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jessica]

Oh yes duh I forgot about that – thanks so much David! I think this is resolved for now and I’ll start a new thread if I have any issues from here. Thanks again for your help!

[David]

You’re welcome !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jessica]

Okay I’m stumped again unfortunately! Here’s the category page I’m working on: https://cairnproject.flywheelstaging.com/category/our-community And here are my issues:

1) How do I get the secondary categories menu to JUST show up on the blog/category archive pages, not on the full site? I created the hook you shared and am not having any luck having it show up on just the category pages.

2) How can I get the header image (the blue sky image) to be full width regardless of screen size? I tried changing container size in the customizer but I have to set it at a number – is there a way to make this automatically full width? Is there any way to have this hero background image set independently for each category archive page?

3) Is there a way to center align the pagination at the bottom?

[Fernando]

Hi Jessica,

1. Can you check if you hook display rule is set to Post Category Archive?

2. How are you adding the Page Hero? If it’s a Block Element, set the hook to after_header. If you want different Background images for each category, you’ll either need to create a new Block Element – Page Hero for each, or create a custom image field in your images and use that image instead – (For this issue, please start a new topic).

3. Try adding this CSS for Category Archives:

.category.archive .nav-links {
    text-align: center;
}

[Jessica]

Hey Fernando, thanks for your help!

1) Yes it’s set to that.

2) One background image for all works, and I have this set up as a Block Element – Page Hero – set to Before content container hook name before_main_content. I have the hook set to generate_after_header priority 25, but I still only see the menu showing up at the top of the website.

3) That worked perfect for the pagination, thank you!

A couple other issues on this page, do I need to start a new topic? I still can’t get 40px of padding around the edge of the posts but keep the page hero header full width – any ideas? And I’m using CSS for even containers to get the post sizes lined up on regular pages, but that CSS isn’t working when applied to the post/card template. Thanks again!

[Fernando]

Let’s tackle #1 and #2.

1. While viewing the page the shouldn’t have the hook element, can you hover on Elements in the Admin bar at the top and see if the same Hook Element is the one displaying? Check the display rules of that hook as well.

2. Can you set the Page Hero to generate_after_header, then try to replace the priority of the Hook to something higher like 100?

Please start a new topic for the other issues.

[Jessica]

The hook element for the categories menu isn’t showing up on pages where it shouldn’t be – only on category pages. I think this secondary menu is showing up everywhere because it’s marked secondary menu in locations under Customizer – Menus. I can’t figure out how to get it off that display but have it show up on the blog categories page.

2. I tried that and it made the page funkier: https://cairnproject.flywheelstaging.com/category/our-community The hook code from above is now set to 100 generate_after_header and the Page Hero element is set to after_header priority 1.

[Author]

Posts