Site icon WP Tips

Title attribute wordpress menu

New Page

New Page

HTML title attribute

❮ Previous HTML Global Attributes Next ❯

Example

Use the assigned title in an HTML document:

<p> <abbr title=”World Health Organization”>WHO </abbr> was founded in 1948. </p> <p title=”Free Web Tutorials”>W3Schools.com </p>

Inténtalo tú mismo” Definition and use

El titleatributo especifica information extra sobre un elemento.

La información generallye muestra como un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

El titleatributo se puede usar en cualquier elemento HTML (se validará en cualquier elemento HTML. Sin embargo, no es necesariamente útil).

Browser Compatibility

Attribute
Title Yes Yes Yes Yes Yes

Syntax

< element title =” text “>

Award values

Assess The description
text Tooltip text for an item

related pages

HTML Tutorial: HTML Attributes

HTML DOM reference: HTML DOM title owner

CSS tutorial: information on CSS options

❮ Previous HTML Global Attributes Next ❯

How to add a title attribute to the WordPress navigation menus

Ultima actualización en30 de enero de 2017por Equipo Editorial | Disclosure of the reader Disclosure : Our content is respaldado por el lector. Esto means that if click in algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por que es important y cómo puede apoyarnos.

Comparte 215 Cuota Pío Cuota Facebook Messenger WhatsApp Correo electrónico

Recently, uno de nuestros readeres preguntó si hay alguna formed de agregar un atributo de título in los menús de WordPress . El atributo de título le permite proporcionar información adicional sobre un enlace. A menudo aparece como texto de información sobre herramientas cuando el mouse se mueve sobre el enlace. In this article, the mostraremos how to aggregate a title attribute in the navigation menus of WordPress.

¿Por qué usar el atributo de título in los menús?

The title attribute is an HTML attribute that can be aggregated with an element cualquier, pero se usa más comúnmente con enlaces e imágenes.

Il vous permet de fournir des informations supplémentaires sur le lien ou l’image. Consultez notre guide sur la différence entre le texte alternatif de l’image et le titre.

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

Having said that, let’s take a look at how to add title attribute in WordPress navigation menus.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding Title Attribute in WordPress Navigation Menu Items

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

This will bring down a menu where you need to click on the check box next to Title Attribute option.

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

Don’t forget to click on the save menu button to store your changes.

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

We hope this article helped you learn how to add title attribute in WordPress navigation menus. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Shares 215 Share Tweet Share Facebook Messenger WhatsApp Email

How to change my website’s menu navigation in WordPress

WordPress offers an easy way to change the site navigation on your site.

To create or edit a navigation menu on your site, go to Appearance > Customize.

This will open the customizer. Once that has loaded, go to Menus.

To create a new menu, click on Add a Menu.

And then type a name for your new menu (this can be anything but should reflect the menus used or location). Once you have given your menu a name, click Create Menu.

Once you have created your menu, you then need to select one or more locations for your menu to be displayed. The number of possible locations will differ from theme to theme.

If you would like WordPress to automatically add new top-level pages to this menu as new navigation items, then click Automatically add new top-level pages to this menu.

After you have selected a location for your menu, you can then add navigation items to it by clicking Add items.

You then have several options depending on what items you want to add to your menu:

In most circumstances, you will just be using pages in your menu. To add an existing page to your menu, click Pages.

Then you can select the page you want to add to your menu.

To add a page as a sub-item, add it the same as above and then drag it to the right.

When you have finished adding pages to your menu, click Save & Publish.

Your menu has now been saved, and the navigation items applied to your site’s navigation.

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Tutorials

Adding Custom Attributes To WordPress Menus

Last updated on: January 5, 2018

They are so many tutorials on the web to explain “how to add a custom field to WordPress menus” but most of them treat about how to use the default CSS field of the default Description field. None of them gives a real method to add a real new field to menus. So, today we will create a simple plugin that will add a “subtitle” field to any WordPress menu.

Here is what the final result is in the WordPress administration:

Step 1: The Plugin Creation

Allez, comme on l’a vu dans un de mes précédents post, créer un plugin n’est pas complexe. Il vous suffit de créer un nouveau dossier sous wp-content/plugins et de l’appeler “sweet-custom-menu”, et de créer à l’intérieur un fichier appelé “sweet-custom-menu.php”. Ouvrez ensuite ce fichier et ajoutez ce code :

<?php /* Plugin name: Sweet Custom Menu plugin URL: http://remicorson.com/sweet-custom-menu Description: A small plugin to add attributes to WordPress menus Version: 0.1 Author: Remi Corson URI of author: http://remicorson.com Contributors: corsonr Text domain: rc_scm Domain path: languages ​​*/

This code is all we need to define a new plugin. We will now create a custom PHP class containing a constructor and the functions we will need for the plugin to work properly.

Here’s how to create the class:

class rc_sweet_custom_menu { /*——————————– ————-* * Manufacturer *——————————— ————————-*/ / ** * Initializes the plugin by defining the functions of localization, filters and administration. */ function __construct() { } // end constructor /* All functions will be placed here */ } // instantiate plugin class $GLOBALS[‘sweet_custom_menu’] = new rc_sweet_custom_menu();

The last line instantiates the class and adds the whole class into a global variable.

Step 2: Add a custom fields filter

Now that we have our class, let’s create some custom functions. The first function to add is the one that will register the “subtitle” custom field that we want to include as an advanced menu attribute. To do this, here is the function to create, place this code instead of /* All functions will be placed here */:

/** * Add custom fields to $item nav object * for use in custom walker * * @access public * @since 1.0 * @return void */ function rc_scm_add_custom_nav_fields( $menu_item ) { $menu_item-> subtitle = get_post_meta ( $menu_item->ID, ‘_menu_item_subtitle’, true ); returns $menu_item; }

Next, we need to tell WordPress to consider our function, so place the code below inside the __construct() function:

// add custom menu fields to the menu add_filter( ‘wp_setup_nav_menu_item’, array( $this, ‘rc_scm_add_custom_nav_fields’ ) ); Step 3: Save Custom Fields

Even though the “subtitle” custom field doesn’t really exist, we need to create a function that will save its value when editing the menu. The menu items are in two custom post types, so we can use the custom post type APIs and the post_meta method. So, to save the value of the custom menu field, add this function under rc_scm_add_custom_nav_fields():

/** * Save menu custom fields * * @access public * @since 1.0 * @return void */ function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) { // Check if item is successfully sent if ( is_array( $_REQUEST [‘menu-item-subtitle’]) ) { $subtitle_value = $_REQUEST[‘menu-item-subtitle’][$menu_item_db_id]; update_post_meta( $menu_item_db_id, ‘_menu_item_subtitle’, $subtitle_value ); } }

In this function, we check if the value of the custom field is submitted from the form we are about to create, and then we simply store its value. Now we need to add the function to the appropriate hook. To do this, add these lines to __construct():

// save menu custom fields add_action( ‘wp_update_nav_menu_item’, array( $this, ‘rc_scm_update_custom_nav_fields’), 10, 3 ); Step 4: The form

If you’ve followed this step-by-step tutorial, you’ll probably guess that we didn’t create the form that should contain our subtitle field. This part is a little more complex than the previous ones. This time we have to deal with Walker. I really encourage you to read the walker class codex, it will really help you understand what it is and what it does. By the way, there are many awesome tutorials all over the internet to give you more details about this class, so check them out! Most of the time, walkers are used to modify the HTML output of a menu. Here we are working on the admin menu exit form. Just add this function to your main class:

/** * Define a new Walker edit * * @access public * @since 1.0 * @return void */ function rc_scm_edit_walker($walker,$menu_id) { return ‘Walker_Nav_Menu_Edit_Custom’; }

then this to the constructor:

// edit the menu walker add_filter( ‘wp_edit_nav_menu_walker’, array( $this, ‘rc_scm_edit_walker’), 10, 2 );

This replaces the default admin edit menu form with a custom form. Now that the filter is added, copy these two lines at the bottom of the sweet-custom-menu.php file, outside of the rc_sweet_custom_menu class:

include_once(‘edit_custom_walker.php’); include_once(‘custom_walker.php’);

We are about to include two files. The first “edit_custom_walker.php” is the one that will modify the default form for editing the menu. It is in this file that we will add the subtitle field.

The second is the welker used on the website interface, this is the file that will modify the menu output for your visitors.

As the “edit_custom_walker.php” is a bit long, I won’t paste all the code. You can see the full code here. The only code I added is from line 174 to line 185. Here is the added code:

<p class=”field-custom description description-wide”> <label for=”edit-menu-item-subtitle-<?php echo $item_id; ?>”> <?php _e(‘Subtitle’); ?><br /> <input type=”text” id=”edit-menu-item-subtitle-<?php echo $item_id; ?>” class=”widefat code edit-menu-item-custom” name=” menu-item-subtitle[<?php echo $item_id; ?>]” value=”<?php echo esc_attr( $item->subtitle ); ?>” /> </label> </p>

If you want to add more fields to the menu, simply duplicate these lines and copies and peguelas. Una vez hecho este paso, el menú debería estar funcionando en la administración. Ahora debería poder ver el nuevo campo de “subtítulo” al agregar un nuevo elemento a un menú. If not es el caso, haz que hayas seguido el tutorial paso a paso. Ahora es el momento de mostrar el valor de los subtítulos en la interfaz.

Step 5: Salida de campo personalized

If everything works well in the administration, probably ahora dessee mostrar el subtítulo en la interface. Open custom_walker.php and accept this code:

<?php /** * Custom Walker * * @access public * @since 1.0 * @return void */ class rc_scm_walker extend Walker_Nav_Menu { 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 ) ); $class_names = ‘ class=”‘. esc_attr( $class_names ). ‘”‘; $exit .= $withdraw . ‘<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).'”‘: ”; $prepend = ‘<strong>’; $append = ‘</strong>’; $description = ! empty( $item->description )? ‘<span>’.esc_attr($item->description).'</span>’: ”; if($depth != 0) { $description = $append = $prepend = “”; } $item_output = $args->before; $item_output .= ‘<a’. $attributes.’>’; $item_output .= $args->link_before .$prepend.apply_filters( ‘the_title’, $element->title, $element->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= ‘ ‘.$item->subtitle.'</a>’; $item_output .= $args->after; $output.= apply_filters(‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args); } }

This code is enough standard. Lo único important aquí es esta línea:

$item_output .= ‘ ‘.$item->subtitle.”; Step 6: ¡Llama al Caminante!

In the last step, deberá opens the header.php archive in its theme mat. Es donde la mayor parte del tiempo se llama al menú. De lo contrario, comuníquese con el creador del tema para saber dónde se llama.

Check out the wp_nav_menu() function.

Luego simplye aggregates the parámetro walker:

‘walker’ => new rc_scm_walker

That’s all ! Hope that hayas disfrutado agregando un campo personalizedizado a un menú de WordPress. Ahora can modify a code to add other fields, as verification boxes, desplegable selection, texting areas, etc. If an error occurs, if lo improves, etc.

Dulce custom menu complement

If you can implement this tutorial, you can download the “dulce custom menu add-in” he created so you can get started. ¡Disfrutar!

Get the add-on →

Article by Remi WPExplorer.com guest author


Video Title attribute wordpress menu

Exit mobile version