WordPress.org

Ready to get started?Download WordPress

Forums

Adding a rel= attribute to a menu link (8 posts)

  1. Prometheus Fire
    Member
    Posted 4 years ago #

    I'm now to all this in WordPress, and am looking to modify my menu a little bit.

    Is there a way to add a custom rel= attribute to an external link in the navigation menu? The built-in menu editor is fairly straightforward but also very basic since it doesn't allow alt or rel tags. I've scanned both the WP files and the database but haven't round a way to do (though I now nothing about php - other than "find this" and "paste this after-").

    REASON: I'm trying to integrate my existing forum into my WP site. Instead of doing a deep an complex hack of it, I've installed the Greybox Integrator plugin which works great from a link on a page or in a post. I'm able to invoke the Greybox (lightbox) using a rel attribute. It's a very beautiful and streamlined way to integrate my forum. Trouble is, when I put the forum link in the main navigation menu, I need to find a way to add a rel to it so I can invoke the Greybox otherwise it just takes you to the forum and away from the WP site.

    I've tried the WordPress Menu Creator plugin, but it doesn't work for it and seems to conflict with the built-in menu editor. Any help anyone can share for this would be greatly appreciated.

    Thanks!

  2. Prometheus Fire
    Member
    Posted 4 years ago #

    I found the following code in my theme's core.php. It mentions the different attributes, though I don't php to understand what all this means. (nor to I know what a 'Walker' is)

    // menu walker
    class mystique_MenuWalker extends Walker {
      var $tree_type = array('post_type', 'taxonomy', 'custom');
      var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
    
      function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"level-".($depth+2)."\">\n";
      }
    
      function end_lvl(&$output, $depth) {
       $indent = str_repeat("\t", $depth);
       $output .= "$indent</ul>\n";
      }
    
      function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        if($class_names) $class_names = ' class="' .esc_attr($class_names). '"';
    
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
    
        $attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
        $attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target)     .'"' : '';
        $attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn)        .'"' : '';
        $attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url)        .'"' : '';
    
        $item_output .= '<a'. $attributes .' class="fadeThis">';
        $item_output .= '<span class="title">' . apply_filters('the_title', $item->title, $item->ID) . '</span>';
        $item_output .= '<span class="pointer"></span></a>';
    
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
      }
    
      function end_el(&$output, $item, $depth) {
        $output .= "</li>\n";
      }
    }
  3. jackbrown
    Member
    Posted 3 years ago #

    Sorry for the late response, I actually found this solution about a week ago but I wasn't able to post the answer.

    You can add the link 'rel' and 'alt' options through the default menu editor by going to 'screen options' when you are on the 'menus' page in your admin area.

    Tick the options 'Link Relationship (XFN)' and 'Description', this then adds those options for each menu item.

  4. erikshosting
    Member
    Posted 3 years ago #

  5. larsmiller
    Member
    Posted 3 years ago #

    Jack - thanks for the tip. Wanted to get some menu items to show up in a shadowbox - this allowed me to do that so simply and saved a bunch of time.

  6. Andy
    Member
    Posted 3 years ago #

    Thanks for that Jack. Just potentially saved me a lot of work!

  7. robertcapraru
    Member
    Posted 3 years ago #

    Thanks alot Jack. Really saved alot of my time too.

  8. ndusty
    Member
    Posted 3 years ago #

    Hi Jack, sorry I'm not so savvy. When you check those boxes, what do you type in the Link Relationship Box and the Description? I'm trying to do the same thing as mention above with a shadowbox and am confused in how to follow through with your suggestion. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic