Remove the Title Attribute from WordPress Category and Page Lists
I was creating a drop down menu for the categories in my Magazine Basic theme and I came across something that started to annoy me a bit. When you hover over the menu item, and the sub-menu dropped down, a title attribute would appear and cover some of the menu. This title attribute it hard wired into WordPress. Just hover over any menu item above and you will see a yellow box appear that says something like “View all posts files under…”.
This is a useful attribute to add to any site in regards to the Web Accessibility Initiative, but if it interferes with the basic navigation of your site, I think it is okay to nix it.
Here is a simple pieces of code that you can use to remove the title attribute from your category list:
<?php $categories = wp_list_categories('echo=0'); $categories = preg_replace('/title=\"(.*?)\"/','',$categories); echo $categories; ?> |
If you really want to get fancy, you can add this as a function to your theme’s function.php file. If the file doesn’t exist, just create it.
Add this:
<?php function categories_without_title_attribute() { $categories = wp_list_categories('echo=0'); $categories = preg_replace('/title=\"(.*?)\"/','',$categories); echo $categories; } ?> |
Now when you want to call your category list, use instead of .
You can do the same to your page lists, just replace wp_list_categories('echo=0') with wp_list_pages('echo=0').
Hello,
Thanks for this. The example works great for removing the title tag from categories, but I just can’t get it to work for page lists.
Could you please post the php code used to remove title tags from wp_list_pages();
This is what I tried.
function pages_without_title_attribute() {
$notitlepages = wp_list_pages(‘echo=0′);
$notitlepages = preg_replace(‘/title=\”(.*?)\”/’,”,$notitlepages);
echo $notitlepages;
The moment this code goes into my functions.php file it crashes wordpress (whether I am calling it or not). I have tried a few different variable names but I cant get this to work.
I am using WordPress 2.7.
Thanks
Tim
Never mind… worked it out.
Was missing the end }.
Thanks again. Works perfectly.
Tim
Probably the best solution anyone’s come up with. However, this function is not similar to wp_list_pages in that it does not accept all of the attributes of the native WP function.
For example:
Here is the code snippet for the example in the previous post:
wp_list_pages(‘title_li=&sort_column=menu_order&depth=1&child_of=144′);
Dreaming of a solution where I’d be able to add all those attributes in place while also stripping the “<a title=” attribute.
Thanks for this, I hate “redundant title attributes”. Not needed for web accessibility or anything else. (When the title is the same as the link text.)
Thanks for the tip, the title tool tips can be distracting. Here’s a little modification I made, in case you want to use some of the wplistpages parameters (e.g., ‘childof’, ‘sortcolumn’, etc.):
function listPagesNoTitle($args) {
if ($args) {
$args .= '&echo=0';
} else {
$args = 'echo=0';
}
$pages = wp_list_pages($args);
$pages = preg_replace('/title=\"(.*?)\"/', '', $pages);
echo $pages;
}
Rather than removing the default hover text, how can I go about changing it?
Oh. That would take some hacking. Not sure which file you would have to go at though. WordPress by default just pulls of the Cat title or the Cat description.
Watt, I found this on another site. You have to go to the wp-includes folder and change the text string(s) in the classes.php and category-template.php files.
In the category-template.php file you have to change it in 6-7 different places.
I don’t like changing the core wp files, so the above works better for me (if I could get it to work, that is).
It’s easy!
Using Jeff’s code above, just replace ‘title=’ with ‘alt=’ in ‘preg_replace’, e.g.:
This is better than removing the ‘title’ attr. completely from accessibility point of view. Screen readers can still read ‘alt’ attributes.
very good
there is another way to do this with jQuery > just add this code to your functions.php file in you theme:
function remove_alt(){
wp_enqueue_script(‘jquery’);
?>
jQuery(document).ready(function(){
jQuery(“li.cat-item a”).each(function(){
jQuery(this).removeAttr(‘title’);
})
jQuery(“li.page_item a”).each(function(){
jQuery(this).removeAttr(‘title’);
})
});
<?php
}
add_filter('wp_head','remove_alt');
save it and it will work “remember you need to add jquery in your theme”
Thank you again
What about replacing ‘the_title’ with ‘the_title_attribute’ BUT only in sidebars or active widgets? Would you know how to do this?
I wish I were a coder, but, I’m not and cannot find this ANYWHERE. I even tried the WP forums to no avail. Looking at your example makes me thing you might know how to do this.
Thanks in advance. Hoping you might know!
I already use a preg replace to add span to the links. Does anyone know how I can combine both codes?
Those who aren’t comfortable editing their theme files can use the Remove Title Attributes plugin to solve this problem.
Thanks for this plugin Tim. Exaclty what I needed at this time of day.
Tim, thanks for your excellent plug-in. You have saved me from so much whining from my rather awkward client
Much kudos and karma to you!
Thanks, this was exactly what I was searching for. It was terribly annoying.
Is there nothing you can tick in wordpress, I cant imagine trying to mess with the pages. Last time I did that I messed it up
I wish everything was that easy. But alas, this one needs some hacking.
No its annoying but I think you can only do it with code.
If you have filled descriptions of categories, you can use the filter
category_descriptionas follows:function quietness() { return ''; } add_filter('category_description', 'quietness'); wp_list_categories();Setup
use_desc_for_title=1when you callwp_list_categories()to disable it.thanks to you it was a fast fix!
Hi,
Maybe this is new in WP but I found a parameter for wp_list_cats that works nicely.
use_desc_for_title = 0
as in
http://codex.wordpress.org/Function_Reference/wp_list_cats
hello, is there a place where I can see how this tutorial is done? I am very new in all this and if I only could understand paste the codes this would really help.
So in “functions.php”, which code of the two is best, the first was to be pasted where?
And finally to call the category list what does this really mean?
Sorry for asking!
The functions.php code above isn’t necessary. That is only worth using if you plan on calling the code in many different file. Just paste the first block of code into the file where you want the list to appear.
Yes I still don’t get it, ups sorry! Where? Paste into the header.php… because there is the menu and there I have the alt tags appearing… ?
And as Nathalie is commenting I also use qtranslate..will it work as well?
Thanks again for your time.
Use the code where you want your menu/list to appear. So if it is in the header.php file then replace the current code.
Dear friend, I paste the code of the header here. I tried to do it by guessing where it could be pasted your code, but no way it does not work, can you please tell me which line must be replaced with your code?
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=” />
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="” />
<link rel="pingback" href="” />
<body id="” >
<a href="”><img src="” alt=”" width=”" height=”"/>
<h1 style="left:px;line-height:px”>
<li><a href="” title=”">
cat_ID; else : $current_cat = ”; endif;
$ex_cats = ts_get_option(‘ts_ex_cats’); wp_list_categories(‘title_li=¤t_category=’.$current_cat.’&exclude=’.$ex_cats.’&orderby=ID’); ?>
Replace this:
I’m new to this as well. I use the Thesis theme and Qtranslate. I really want to get rid of the title attributes, because they look like this: [en:]english page title [nl:]dutch page title. Can someone explain us (Bart en me) in which file we have to paste the codes and which codes? Both?
Thank you in advance.
You can just paste in the code wherever you want it to appear. You don’t have to put it into the function.php file.
By the way, I tried all the plugins made for this, but they don’t work.
Thanks for the advice. I tried everything. I have a website with static pages and one page with a blog. I tried to copy the codes into theme/functions.php and in theme/custom/custom_functions.php. Nothing works. Can you please be more specific to us newbies? Which files, which line do have to copy the codes, which codes exactly from beginning to end? I also tried Tim’s code with the end hook, but no result either.
This is the only blog where codes are mentioned to delete the title attributes. Everyone else suggest the plugins, but they conflict with qtranslate.
Thanks again.
What theme are you using? It might not be using the functions.php file the same way that other themes do. For the most part, if you just copy the second code into the functions.php file anywhere, you can then use the function to call it in any file. Most likely, you would put it into the header.php file in the navigation div or wherever you want your menu to appear.
Thesis 1.7 is the theme.
Thesis doesn’t really allow for easy addition of content. You would have to remove the current menu and then add the code above in. Look for instructions on how to do that on the Thesis Web site.
Not sure if this was mentioned, but you can add the title parameter with an empty string and that’ll remove them:
Very very helpful, I had no idea in how to change the title attribute, i was thinking to use jQuery, but this is better
thanks!!
Thanks, this is very nice!