Add link with class to page menu

It really depends on your theme, and your site specifically.

If you could provide some links, I can give you some assistance.

Thanks for anything you can help with.

Here is the site
https://syw6mm.com/minirev/

I’m trying to get a simple modal contact form working, this is the site
https://www.ericmmartin.com/projects/smcf/

Ahh, you’re using Thematic. The problem is that this code:

<?php wp_page_menu('sort_column=menu_order') ?>

Generates this HTML:

<div class="menu">
<ul>
<li class="page_item page-item-2"><a href="https://syw6mm.com/minirev/about/" title="About">About</a></li>
<li class="page_item page-item-103"><a href="https://syw6mm.com/minirev/contact/" title="Contact">Contact</a></li>
</ul>
</div>

So you can see that if you add a link after that, it will be outside of the division and the unordered list.

You you need to generate your list differently. You will have to do a little experimentation, but if you replace this line in your header:

<?php wp_page_menu('sort_column=menu_order') ?>

With this code:

<div class="menu">
<ul>
<?php wp_list_pages('title_li=&sort_column=post_title' ) ?>
</ul>
</div>

That should generate the same HTML you have right now. The difference is that you have the division and the unordered list hardcoded in your header, so you can manually insert links in that list, before or after the PHP generated list.

So if you modified it to look like this:

<div class="menu">
<ul>
<?php wp_list_pages('title_li=&sort_column=post_title' ) ?>
<li class="page_item page-item-103"><a href="https://syw6mm.com/minirev/contact/" class="smcf-link">Contact</a></li>
</ul>
</div>

You should have the contact link you need at the end of the list, with the class you need in the anchor.

One problem though, you have two Contact links now. You need to exclude the Contact Page from that list. Just change this line of code:

<?php wp_list_pages('title_li=&sort_column=post_title' ) ?>

To this:

<?php wp_list_pages('exclude=2&title_li=&sort_column=post_title' ) ?>

That will exclude a Page with the ID of “2” from your list. In your case, About actually has the post ID of 2, so you will need to change this to the post ID of your Contact Page.

You can easily find out the ID by editing your Page, the URL of that Page will end in “post=ID”.

Good luck, oh and sweet miniatures!

Thanks a lot jlueze, I shall definitely try that.

While I’ve got your ear, I saw this solution on the Thematic developers blog site, https://themeshaper.com/adding-class-wordpress-page-menu/

Do you think this could be modified to add a class to the contact link? I thought it could but can’t get the selectors right.

I think you may be able to do something like that, but it would that class to every link I think.

You should be able to get this to target just the link you want. Instead of replacing “<ul>” or “<li>“, replace title="Contact".

Something like this might do it: str_replace('title="Contact"', 'class="smcf-link" title="Contact"', $ulclass);

– Tim

Thanks Tim, I’d love to try that as well and see which is easier. Where do I put the str_replace statement?

in the functions.php or in the header.php?

The easiest way to do it is to capture your page list in a variable, modify it, and then output it. To do that, replace the menu code in your header with this:

<div class=”menu”>

<?php
$menu = wp_list_pages(‘title_li=&sort_column=menu_order&echo=0’);
$menu = str_replace(‘title=”Contact”‘, ‘class=”smcf-link” title=”Contact”‘, $menu);
echo $menu;
?>

</div>

– Tim

Since I had the same issue, I came here. I started digging into the code suggested above, but given I’m modifying Thematic using a child theme, and the fact that Thematic has put the code above into a hooks-filter file, I’d have to move it to my custom functions file. I probably could, but got lazy. Then I found another easier way:

If you use the All in One SEO pack plugin (recommended), go to your Contact page. In the SEO section, there’s a field for Title Attribute. Simply enter the word Contact there. The Simple Modal Contact Form plugin settings page says:

The title for the contact link to your contact form page.

Make sure you enter the word Contact there, too.

It really depends on your theme, and your site specifically.

If you could provide some links, I can give you some assistance.

I don’t think that the aim was to change the title attribute, it was to add a custom class to the anchor.

Great information here. Thanks a lot!
I was looking for something like:

<?php
$menu = wp_list_pages('title_li=&sort_column=menu_order&echo=0');
$menu = str_replace('title="Contact"', 'class="smcf-link" title="Contact"', $menu);
echo $menu;
?>

Just need to be able to replace “Contact” by any page. I think there is a template tag for that.. Maybe

<?php wp_title(); ?>

If you use the All in One SEO pack plugin (recommended), go to your Contact page. In the SEO section, there’s a field for Title Attribute. Simply enter the word Contact there.

@joefletcher Great tip! Turns out my contact link was working fine until I installed the All in One SEO pack but this sorts it so thanks ??

Use the page_css_class filter:

add_filter('page_css_class', 'my_page_css_class', 10, 2);

function my_page_css_class($class, $page) {
	if ( 'Contact' == $page->post_title ) {
		$class .= ' page-contact-special-class';
	}
	return $class;
}

Then select the anchor as descendant:

.page-contact-special-class a { /* my special styles */ }

There is an enhancement ticket & patch for filtering the Page menu/list hyperlinks directly, which will make this sort of thing a lot easier. You can vote for the ticket if you want to see this change soon. ??