[Resolved] Active state button custom post

[Author]

Posts

[paulw-2]

Hi There,

We we're having trouble with the next thing.

We have created 2 custom post types with types.
These are shown in a archive page. In this state the menu is as expected (underlined in active state).
Permalink: hidden link

When we click a item in the archive and enter the single page, the menu item is no longer underlined.
The permalink is here: hidden link

We see the problem in these links but don't know how we can handle this.
We want the single page to have the link (to have a active state button):
hidden link

Can you help us out?
How can we arrange this?

Thanks,
Paul

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

This partly relates to your theme, but partly requires modifying the default WordPress behaviour with a custom code snippet.

WordPress adds the class .current-menu-item to the menu when it judges you are on the same page as the menu link, and it is up to your theme how to style menu items with that class.

If you add a menu link to a custom post archive page it will add that class on the archive page, but not when visiting a single post of that type.

Let's say you have a custom post type with a slug of event, and you add the link to the event archive to your menu.

We will need to use the WordPress filter nav_menu_css_class to add the class to single posts.

<?php
add_filter( 'nav_menu_css_class', 'custom_menu_class', 10, 3 );
function custom_menu_class( $classes, $item, $args ) {
		
	if ( is_singular( 'event' ) )
		$classes[] = 'current-menu-item';
		
	return array_unique( $classes );
}

[EDIT: removed surplus parenthesis from if statement]

That would add the class .current-menu-item to single event posts. How that appears on your site is up to your theme.

[paulw-2]

Hi Nigel,

Thanks for your fast assistance.
We placed the code in functions.php and created a line of css.

Somehow this is not working.
The page with overview gets the extra css, the single page still isn't.

What would be better in my opinion is to have the pagelink as you might expect when a page is under a archive:

hidden link
hidden link

We tried to make some adjustments inside wp-types but it wasn't possible to save because it said:
'you cannot use this slug because it's already used... (i think for te page where the wp-views archive is placed)

Is this possible?
It might be a solution as well and the other result is a better link structure.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

The example I gave was for standard urls for archives and single custom posts (and it was missing something, more below).

For a custom post type with a slug of 'projects' the archive (the standard WordPress archive or a custom archive you create with Views) will be available at 'site.com/projects'.

So in your menu you add a custom link to this url for your archive page.

Your single posts will be available at a url such as site.com/projects/some-post.

If you add the code snippet I provided (editing the slug as required) then you should have the current-menu-item class added.

Testing it to confirm it works now I realise I didn't perform a test for the individual menu items, which meant that class was being added to all menu items and not just the one for the post type we are on. Let me remedy that.

add_filter( 'nav_menu_css_class', 'custom_menu_class', 10, 3 );
function custom_menu_class( $classes, $item, $args ) {
		
	if ( is_singular( 'event' ) && $item->post_title == 'Events' )
		$classes[] = 'current-menu-item';
		
	return array_unique( $classes );
}

Note that $item->post_title holds the text you use in the menu.

[paulw-2]

Hi Nigel,

It is still not working.
I've made a custom link as well but we didn't get te result we need.

The archive page 'hidden link' gets the extra class.
The single page 'hidden link' is not.

Isn't it better to focus on the permalink structure?

I trie to clear out how it is loaded now:
Archive page: hidden link
Single page: hidden link

As you can see the single page is under the folder 'event' which might be the slug which we set in
wp-types. When we try to change this to 'kandidaten' , wp-types says we cannot use this because it's already reserved (i think for the page where we load the archive view).

Wished scenario:

I want the permalinks like this:
Archive page: hidden link
Single page: hidden link

I think this is also a solution for the menu button state or isn't it.
If you want i can permit access to our site so you can see for yourself.

Thanks,

Paul

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

I think, yes, it would help for me to be able to see your settings for the custom post type and permalink.

The code snippet I provided assumed default urls for the custom post archive and single posts, but if you have customised these I may need to modify it.

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site, even though I don't intend to make any changes.

Can you also confirm the name/slug of the custom post type.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

I tried to access your site but the credentials you gave didn't work, could you please check and try again?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

You can customise the url structure for your custom post types in the options section when editing the custom post type via Toolset > Post Types.

I checked on your site and you haven't done that yet. I would rather not do that for you (it doesn't help that I can't change the site language to English for some reason).

Go to edit the Profielen post type and scroll down to the options.

From your description, you want to use the standard url format for single posts (e.g. site.com/profielen/post-slug) and a custom format for the archive url (i.e. kandidaten/bedrijfspresentaties/).

The first rewrite option is for single posts, so set this to use the normal WP logic.

Lower down for the archive you can add your custom url there.

(You can see what is happening behind the scenes here: https://codex.wordpress.org/Post_Types#URLs_of_Namespaced_Custom_Post_Types_Identifiers)

Do the same for the events post type.

You will need to re-save your permalinks for the changes to take effect.

I didn't understand what you meant by "What we would like is the single pages have a follow up hierarchy in the link".

Can you explain?

Once we have your url structures nailed down I can work on your original question.

[paulw-2]

Hi Nigel,

I've changed the settings (see image).

(I didn't understand what you meant by "What we would like is the single pages have a follow up hierarchy in the link".):
Now we have the urls as expected.

for archive:
hidden link
hidden link

for single page:
hidden link
hidden link

The problem now is that when you click a item in a archive page, the single page (CT) is not found.
Maybe you can see if i'm missing something....

I've tried to republish the posts (events / profielen) but this didn't do anything.

Thanks,

Paul

----

PS

Language
The problem for setting the language of wordpress was caused by WPML.
In there there was selected the admin language was EN (i've set it to EN now).

We've installed WPML because it seems to be impossible to localise buttons in WP-Views and WP-Cred to dutch. WPML is no solution because this still is not working. (if you have any clue for that, please let me know, i've created other topics for that but there is still no solution i presume).

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

Firstly, I'm not sure what the issue is you are having with the language settings and WPML, but let's keep that to another thread (either an existing one or open another one if you need to).

Now, the problem with the urls was that as per my screenshot you added the custom urls with a trailing slash, but it meant it was generating urls with a double-slash between the post type slug and the post name, like this one:

hidden link

So I edited your post types and modified the custom urls to remove the trailing slash, re-saved the permalinks and re-tested, and they are working as expected.

Now, turning to the original question about the menu, I was surprised to see when on the archive page at hidden link the menu styling didn't reflect that, and checking the source code I saw that the class .current-menu-item was not being added.

Checking your menu I see you have a (minor) problem. The menu links to a page "Overzicht Bedrijfspresentaties" where you add a view to show the posts as if it were an archive, although it is not the archive page itself. That page now has the same url as your actual archive given the custom url we defined in the post type settings. If you enter that url into the browser you should see that the WordPress archive wins the race over the page with the same url.

I'm not sure what your objective is here, but please note that you can customise an archive at Toolset > WordPress Archives if that's what you want to do, rather than making a page where you add a view to simulate the archive.

In any case, note that I added another item to your menu to show how to link to the archive, and that now has different formatting when you are on the archive page. Which means you should be able to modify the code I gave in https://toolset.com/forums/topic/active-state-button-custom-post/#post-459007 to solve your original issue.

[paulw-2]

Hi Nigel,

Thanks for your time so far.

I've created the css (.current-menu-item:{background:#333}) and php is already in functions.
This is working all over the site except for the single pages. The problem with the underlined active button is not on the archive page (in the old and new setting) but on the single page. There is still no underline here. The code (functions and css) are shown all over the site but not on the single page.
The link structure is now as we wanted but we need a solution for this. Hope you have a clue how we can handle this.

Old vs new structure
The reason for the archive loaded inside a page is because we have grip on the sidebar etc inside the themes page settings. Another thing is, the theme is not responding this way on the endless list option in views.

Do you have a idea how we can get grip on that with this setup?
How can we have a archive based on JS-composer?

Hope you can find a bit more time for me...
Thanks so far.

Paul

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

I checked your functions.php file and see that you had not edited it for the slug of the post type or the title in the menu, which I have now done, so that the class .current-menu-item is added when you are on a single post page.

Regarding your other question I don't understand what you mean by having a grip on the sidebar, but in any case could you please open a new thread for it.

I think the original issue is resolved, but if you still have any problems with it then let me know.

[paulw-2]

Hi Nigel,

Thanks for your time.
The 'other' issue was a answer, why we set it up the way we did.
When using a theme page (visual composer) we can use the system of our website, use the features of VC and load what we want, where we want.

In this setting we just have a archive page so the question was, what's your advice to handle the design for these toolset archive pages? Can i use VC for these?

Thanks anyway!
Great way you helped us out.

Paul

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Paul

An archive page returns a list of posts and if you create a custom archive you can insert a content template into the loop output section to style the post summaries which the archive lists.

You can design those content templates in VC, but you can't design the whole content section of the page with VC, just the individual loop items.

That may or may not be sufficient, depending on what you are aiming for.

I'm glad the menu issue is resolved.

[paulw-2]

Hi Nigel,

Can you please help me out on this one.

What would be best to do.
We tried to use wp-layouts but this isn't showing up on our archive page.

What we need is a a custom archive like i created in the screenshot.
- on the right: We need the archive / and on top a slider - top position (2/3 with)
- on the left: a sidebar (1/3 width, in this sidebar is also our filter).

If you want me to create a new post that's no problem.

We had this running before we started this conversation to fix the links and menu (in maybe the wrong structure).
Hope you can help me out.

Thanks
Paul