WordPress.org

Ready to get started?Download WordPress

Forums

Add link with class to page menu (15 posts)

  1. rgregory
    Member
    Posted 5 years ago #

    My page menu is generated with the following code:
    <?php wp_page_menu('sort_column=menu_order') ?>

    I need to add an additional link with the following code to this menu

    <a href="/contact" class="smcf-link">Contact</a>

    I have seen advice on the forums here to just add the code below the php call with list tags, but this doesn't work. can anyone advice me on how to add this one list it to the menu list.

    I have tried searching the forums and searching plugins but to no avail.

  2. Josh Leuze
    Member
    Posted 5 years ago #

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

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

  3. rgregory
    Member
    Posted 5 years ago #

    Thanks for anything you can help with.

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

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

  4. Josh Leuze
    Member
    Posted 5 years ago #

    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="http://syw6mm.com/minirev/about/" title="About">About</a></li>
    <li class="page_item page-item-103"><a href="http://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="http://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!

  5. rgregory
    Member
    Posted 5 years ago #

    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, http://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.

  6. Josh Leuze
    Member
    Posted 5 years ago #

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

  7. Technokinetics
    Member
    Posted 5 years ago #

    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

  8. rgregory
    Member
    Posted 5 years ago #

    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?

  9. Technokinetics
    Member
    Posted 5 years ago #

    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

  10. joefletcher
    Member
    Posted 4 years ago #

    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.

  11. Morfeusz1971
    Member
    Posted 4 years ago #

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

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

  12. Technokinetics
    Member
    Posted 4 years ago #

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

  13. Rhand
    Member
    Posted 4 years ago #

    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(); ?>
  14. sklang
    Member
    Posted 4 years ago #

    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 :)

  15. Sam_a
    Member
    Posted 4 years ago #

    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. :)

Topic Closed

This topic has been closed to new replies.

About this Topic