WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have the following code generated by wordpress for my nav1:

<div id="nav1">
<ul class="menusm">
    <li class="page_item page-item-6"><a title="Inicio" href="http://localhost/road/" class="top_level">Inicio</a></li>
    <li class="page_item page-item-11"><a title="Quienes Somos" href="http://localhost/road/quienes-somos" class="top_level">Quienes Somos</a></li>
    <li class="page_item page-item-13"><a title="Servicios" href="http://localhost/road/servicios" class="top_level">Servicios</a>
        <ul class="children" style="display: none;">
            <li class="page_item page-item-25"><a title="Inteligencia" href="http://localhost/road/servicios/inteligencia" class="">Inteligencia</a></li>
            <li class="page_item page-item-27"><a title="Personal, Equipos, Armamentos" href="http://localhost/road/servicios/personal-equipos-armamentos" class="">Personal, Equipos, Armamentos</a></li>
            <li class="page_item page-item-22"><a title="Seguridad Operativa" href="http://localhost/road/servicios/seguridad-operativa" class="">Seguridad Operativa</a></li>
    <li class="page_item page-item-17"><a title="Contacto" href="http://localhost/road/contacto" class="top_level">Contacto</a></li>
    <li class="page_item page-item-37 current_page_item"><a title="Cotice su stand en ferias" href="http://localhost/road/pedir-cotizacion" class="top_level">Cotice su stand en ferias</a></li>
</ul><div class="clr"></div>

And I would like the last <li> tag under the title of "Cotice su stand en ferias" to use a button instead of text as the rest of the <li>'s. Is there a way to accomplish this without having to completely remove that item and placing a button next to the #nav1?

Thanks for the help in advance.

Edit: got it.

#nav1 ul li:last-child {background: url(images/cotizacion-icono.jpg) no-repeat scroll;}
share|improve this question
You mean an image that you have, that happens to look like a button, or a button like <input type="button"/>? (Use @Jan when you reply in a comment and I get a notification) – Jan Fabry May 19 '11 at 16:15
If you found the solution yourself you can also add it as an answer, you don't have to edit the question for that. (Perhaps you have to wait a day before you can do that as a new user, to prevent people from gaming the system) – Jan Fabry May 19 '11 at 16:56
up vote 1 down vote accepted

jQuery Solution

if you're using jQuery you can use:

var $li = jQuery('ul > li:last-child','#nav1');

to select your last menu child.

Then after you select it you can chain it with another function:

$li.wrapInner('<input type="button" value="My Button!">');

Then all together:

jQuery(document).ready(function() {
   // Cache your selection
   var $li = jQuery('ul > li:last-child','#nav1');
   // Replace it with your button
   $li.wrapInner('<input type="button" value="My Button!">');

Pure CSS Solution

Setup your dropdown navigation:

PHP in the template:

<?php $args = array(
    'sort_column' => 'menu_order, post_title',
    'menu_class'  => 'menu',
    'include'     => '',
    'exclude'     => '',
    'echo'        => true,
    'show_home'   => false,
    'link_before' => '<span>', // Wrap your span here
    'link_after'  => '</span>' ); // close it with a span too
share|improve this answer
Well Chris, what I don't know is how to select that particular li, as something like this won't work: .page-item-37 li {background: url(images/icono.jpg) no-repeat scroll;} – user5057 May 19 '11 at 16:17
With jQuery right? If yes. I'll update my answer. – chrisjlee May 19 '11 at 16:18
Can't this be done with pure css? – user5057 May 19 '11 at 16:27
Yes. I would change your menu output to wrap each item span and then add a button. – chrisjlee May 19 '11 at 16:29
I got it Chris, Thanks a lot for your help – user5057 May 19 '11 at 16:31

If you use the new custom navigation menu functionality added in WordPress 3.0, you can use straight HTML in the Navigation label box. So it's no problem to write the image code there instead of the regular title.

Menu admin page with HTML code

Front page menu with image

share|improve this answer
I'm not doing this with categories but pages. Could I somehow try to apply this to custom fields? – user5057 May 19 '11 at 16:33
sorry @jan I had not seen the message earlier – user5057 May 19 '11 at 16:48
@user5057: I could have known it by looking closer at your example output. No problem, I clarified my answer to make it clearer for others with the same problem. It seems the answer from Chris helped you out? You can then click the checkmark next to that answer to mark it as accepted. – Jan Fabry May 19 '11 at 16:50
ok thanks a lot for the tip. – user5057 May 19 '11 at 17:08

Using jQuery you could do something like this:

$('#nav1').find('> ul > li:last-child a').wrapInner('<button/>');

However, going for pure CSS seems like the cleaner way to go. Using border-radius you can easily apply a button look to a regular anchor.

share|improve this answer
I don't need a button look but to use an image that I was sent by the web's owner – user5057 May 19 '11 at 16:26

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.