WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add a rel attribute to wp_get_categories a tags (9 posts)

  1. chrisjb
    Member
    Posted 1 year ago #

    Hi,

    I'm using wp_get_categories to display a list of sub category links. I'd like to add

    rel="tooltip"

    and the category title as a title attribute on the a tag. This is so I can display tooltips for each category link.

    I would be very grateful for any help.

    Thank you.

  2. wpismypuppet
    Member
    Posted 1 year ago #

    Well, there are two options here:

    First, you can create a custom Walker to use PHP to add that rel attribute to each category. The benefits to this method is you will be guaranteed to have that attribute added each and every time since it's PHP doing the work. The downside is that you'll need to know how to write a custom Walker, and more importantly you'll need to know how to program in PHP.

    The second option is to use jQuery to dynamically add that attribute. The upside to this is you won't need to know PHP or how to create a custom Walker, and it's SUPER easy to do. The downside is that it relies on JavaScript to add the attribute. So if the tooltips are essential to the operation of the site, this is not the method to choose.

    It sounds like your tooltips are probably going to be a JavaScript enhancement anyway, so jQuery is by far the easiest way to go. But again, if your tooltips are ESSENTIAL to the operation of the site, then go PHP.

    Let me know which way you'd like to go and I can offer assistance to both methods.

  3. chrisjb
    Member
    Posted 1 year ago #

    Thanks wpismypuppet, that's really useful. I was hoping there would be a solution that didn't involve custom Walkers!

    I think the tooltip is enhancement rather than essential content, since the tooltip content is only repeating the category name.

    I'm using Twitter Bootstrap though so I was hoping that I could add the rel attributes and title attributes and use Bootstrap js for the tooltips -- since that's just about all that's needed for the Bootstrap tooltips.

    Maybe I'll look into the custom Walker method. Is it very difficult? Unfortunately my knowledge of PHP is very weak.

    Thank you,

    Chris

  4. wpismypuppet
    Member
    Posted 1 year ago #

    If you are using Twitter Bootstraps, then you already have jQuery enabled and ready to do. Technically, you have that with WordPress anyway. Since you want to add the category title as a title attribute, you'll need to loop through each category list item:

    // Loop through each category list item's anchor tag
    jQuery('.cat-item a').each(function() {
        // Add the rel attribute
        jQuery(this).attr('rel', 'tooltip');
        // Get the title
        $title = jQuery(this).html();
        // Add the category title as a title attribute
        jQuery(this).attr('title', $title);
    });
  5. chrisjb
    Member
    Posted 1 year ago #

    Wow, thank you so much wpismypuppet. Do you have a Paypal email so I can buy you a beer?! I think you deserve it. I think it would be a really good idea to have a "buy me a beer" link in the WordPress.org forum because people give free help and it would be nice to be able to give some appreciation for all that help.

    Do I add this code to the category template? I tried adding it and it causes the page to bring back a 500 internal server error.

    Here's a snippet of my template code:

    <div class="row">
    		<div class="span12 destination-guides-index">
    
    			<?php if ( have_posts() ) : ?>
    
    			<header class="page-header">
    				<h1><?php
    					printf( __( '%s', 'twentyeleven' ), '<span>' . single_cat_title( '', false ) . '</span>' );
    				?></h1>
    
    				<?php
    					$category_description = category_description();
    					if ( ! empty( $category_description ) )
    						echo apply_filters( 'category_archive_meta', '<div class="category-archive-meta">' . $category_description . '</div>' );
    				?>
    			</header>
    
    			<div class="map full-width-map">
    				<ul>
    				<?php // Loop through each category list item's anchor tag
    					jQuery('.cat-item a').each(function() {
    					    // Add the rel attribute
    					    jQuery(this).attr('rel', 'tooltip');
    					    // Get the title
    					    $title = jQuery(this).html();
    					    // Add the category title as a title attribute
    					    jQuery(this).attr('title', $title);
    					});
    					?>
    				</ul>
    			</div>
    			<!-- /.map -->
    		</div>
    	</div>
    	<!-- /.row .destination-guides-index -->
  6. wpismypuppet
    Member
    Posted 1 year ago #

    First, thanks for offering to buy me a beer! I do the work on here because I enjoy helping people and my business makes WordPress sites on a daily basis. Instead of a beer, just spread the word about the company I work for! The info is at the website associated with this account.

    As far as the 500 error is concerned... the code I gave you is JavaScript, not PHP. You should really just add it to the footer, or better yet, do it properly through wp_enqueue_script().

    For simplicity, just add it down in the footer before the close body tag </body>. Also, since it's JavaScript, you'll need to enclose all the code in script tags, like so:

    <script type="text/javascript" language="javascript">
    // Loop through each category list item's anchor tag
    jQuery('.cat-item a').each(function() {
        // Add the rel attribute
        jQuery(this).attr('rel', 'tooltip');
        // Get the title
        $title = jQuery(this).html();
        // Add the category title as a title attribute
        jQuery(this).attr('title', $title);
    });
    </script>
  7. chrisjb
    Member
    Posted 1 year ago #

    Woohoo! Thanks wpismypuppet really appreciate your help. I will check out Design Principles. Have you ever thought about offering a service like a "bite size web dev help business" type thing?! Seems like there are a lot of people who need help and would probably be prepared to pay $25 here and there to get little bits done. You could probably make about $500 a day!

    I also used this in my footer to load the javascript for anything with the rel attribute:

    <script type="text/javascript">
      $(document).ready(function () {
        $("[rel=tooltip]").tooltip();
      });
    </script>

    It works a charm. Now I'm going to look into the wp_enqueue_script() so that I can load all the sites javascript properly.

    Thank you again for your help wpismypuppet.

    Cheers,

    Chris

  8. wpismypuppet
    Member
    Posted 1 year ago #

    You are welcome... Glad I could help out. I'll have to consider that "help business". :)

    Also, please mark this as resolved so others know it's all set. Let me know if you need anything else.

  9. chrisjb
    Member
    Posted 1 year ago #

    Thanks again wpismypuppet -- now marked as resolved.

    Cheers,
    Chris

Topic Closed

This topic has been closed to new replies.

About this Topic