Custom archive template for Custom Post Type with Gutenberg

Hi Alfonso,

Since GP Premium 2.0, we introduced the dynamic feature to the theme.

You can use a block element (Generateblocks plugin is needed) to build your own content template, then we can help you with some CSS to make the CPT into columns if you needed.

Here's the info of block element - content template:
https://docs.generatepress.com/article/block-element-content-template/

Let me know if you need further assistance :)

Thank you very much, i will try it.

So, i have a new question, is possible to make header menu with logo in the middle od the menu items? Like this:

https://snipboard.io/Aj0ltY.jpg

Yes, just need some CSS.

If you can link me to the site, we can help with that :)

Hi Alfonso,

We actually have a brief documentation for doing something like this:

Check the CSS provided in this article https://docs.generatepress.com/article/centering-logo-navigation/

Hi there,

I've applied the CSS provided but the menu items is not displaying correctly:

https://aelmhu2.111pixels.com/

How i can fix it?? Thanks

Hi there,

look for this rule in the CSS:

.main-navigation ul li:nth-child(3) {
    margin-left: auto;
}

And change the nth-child(3) to 4 ie.

.main-navigation ul li:nth-child(4) {
    margin-left: auto;
}

This changes which element is pushed to the right of the logo.

You may need to adjust logo size / menu item widths to allow enough space for the logo and the menu.

Thank you very much David.

Now, is possible to display dropdown menu items a little lower??

And, on my new Archive Template made with "Content Template" from GeneratePress Elements from my Custom Post Type "Articulos" i need to remove the title, is not possible?

https://snipboard.io/7JRTq8.jpg

You can check it on this link: https://aelmhu2.111pixels.com/articulos/

1. Increase the Menu Item Height in Customizer > Layout > Primary Navigation

2. Create a new Layout Element and disable the Content Title and set the Display Rules to match the archive template.

1º I've set the maximum height but is not working:

https://snipboard.io/I8EwaL.jpg

2º I've followed your steps and it doesn't work either

https://snipboard.io/SGjYsR.jpg

https://snipboard.io/RrxXZg.jpg

3º And now, im trying to display my "Articulos" post types belo the image and custom title i've added but is not working.

I've made a custom block with "Listing grid" plugin to design my "articulos" but is displaying duplicated ( i only have 2 "articulos") and is displayin 2 times.

If remove listing grid and only make the same block with Jet Dynamic Content only displaying the first "Articulo" but 2 times (one for each articulo) do you understand me?

Im tried to design the "articulo" with Generate Blocks but i can select dinamic custom fields to display it.

My Custom Post Type "articulos" has these Custom Field:

Extracto
Comentado por
Fichero descargable

and i can't to select it in Generate Dynamic Content. I'm going crazy!

Hi Alfonso,

1. You have this CSS that is overriding the customizer menu item height option, disable this CSS should fix the problem.
https://www.screencast.com/t/uiq7poirnj6f

2. The settings in layout element is to remove the posts' titles, not the archive page title. You can try this PHP snippet:

add_action( 'wp', 'lh_remove_archive_title' );
function lh_remove_archive_title() {
        remove_action( 'generate_archive_title', 'generate_archive_title' );
}

Use one of the method to add PHP: https://docs.generatepress.com/article/adding-php/

3.For custom field content in GP block element, try useing Term Meta as dynamic text, and add your custom field name:
https://www.screencast.com/t/dvaRZU5SqtYk

Here's a video also using custom field, just for your reference :)
https://www.youtube.com/watch?v=H6wHd83DfDI

Hi there,

1º If i disable (line-height: 1) on CSS; the item menu with </br> html tag to get in 2 lines, are displaying horrible:

https://snipboard.io/h9qH4j.jpg

2º Snippets works fine, thanks!

3º I will try it, thanks.

If so, then you can add some CSS push the sub menu down:

@media (min-width: 769px) {
.main-navigation ul ul {
    margin-top: 49px;
}
.main-navigation .main-nav ul li.menu-item-has-children>a {
    padding-bottom: 49px;
    margin-bottom: -49px;
}
}

Thank you very much!! Now is working fine.

So, whats the better option to add Social Icons below main menu? Like this:

https://snipboard.io/d8bwuv.jpg

Here's a video introducing how to add social icons to the top bar.
https://www.youtube.com/watch?v=yAleVWQi5EA&t=126s&ab_channel=GeneratePressGeneratePress

In your case, just choose after_header for hook name instead of before_header.

Let me know if this helps :)