Add extra text to user contact methods

Unable to understand the question. Can you please explain in a more clear way, what you’re trying to do and what is you’re getting what you try to do that and such and what change you’re looking at on that?

If you’re trying to ask and say that you have added those filters using the hook and you’re using that function in the backend and frontend that return the contact fields.

and now you’re looking to add some extra files using the same hook only for backend/admin. but in front, you don’t want those extra fields that you want to add in the backend.

Then the answer is, use theis_admin() function in if condition and add your extra fields in hook so that they only render only the backend/admin only not on the frontend.

No, sorry I meant it like that: I want to display the input fields for example like this in the backend:

Instagram [ INPUT FIELD ] (some additional text)

The “some additional text” part could be over or behind the input field, it’s just so that in the backend an editor would know that he/she should provide the “Instagram profile URL” or the “Wikipedia page url” etc.

I don’t need any other additional fields that only an admin can see.

I don’t think you can add something like from hook.

Although, your labels can clearly specify the purpose or input field unless there is a specific need.

This is a jQuery solution that works:

jQuery(document).ready(function() {
    jQuery('tr.user-emailpublic-wrap input#emailpublic').before("<p>Test</p>");
});

Of course I had to enqueue the newly created .js file like this:

function load_custom_wp_admin_script() {
    wp_enqueue_script('ksv-custom-admin',  get_template_directory_uri().'/js/ksv-custom-admin.js', array ('jquery'), '0.0.1', true);
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_script');

So if there is no easier solution without JS I would just do it like that. Position of the text and tags are temporary for testing purposes.

And to your last reply: In some cases it could be misleading because what will be displayed as just “E-mail” in frontend is actually the public e-mail address of that user, not to be confused with the necessary e-mail address of that profile. So it would be nice to have that additional text option.

With Instagram, Twitter and so on some editors might just supply a user name, also to prevent confusion the addtional “profile URL” part should be added as backend only text.

Another possible way could be you can add extra fields like this way https://www.cssigniter.com/how-to-add-a-custom-user-field-in-wordpress/

then if you have to show those just after another use contact info fields. Maybe use Js to move the whole custom fields table after the contact info section.

Thanks, in fact I use a similar function for showing “gender” and “self description” fields. There I can edit the template directly in PHP/HTML as it is portrayed in your link.

But I want to be able to use wp_get_user_contact_methods() in frontend and collect all available options there for a counter variable. This is only possible when they are actually saved in user_contactmethods.

I now ended up like this:

functions.php

function load_custom_wp_admin_scripts() {
    // Admin CSS
    wp_enqueue_style('ksv-admin-style', get_template_directory_uri().'/style-admin.css', array(), '1.0.0');
    // Contact information jQuery Script
    wp_enqueue_script('ksv-custom-admin',  get_template_directory_uri().'/js/ksv-custom-admin.js', array ('jquery'), '0.0.1', true);
    $translation_array = array(
        'emailpublic_text' => __('E-mail address (public)', 'ksv'),
        'facebook_text' => __('Facebook profile URL', 'ksv'),
        'instagram_text' => __('Instagram profile URL', 'ksv'),
        'pinterest_text' => __('Pinterest profile URL', 'ksv'),
        'linkedin_text' => __('LinkedIn profile URL', 'ksv'),
        'twitter_text' => __('Twitter profile URL', 'ksv'),
        'tumblr_text' => __('Tumblr profile URL', 'ksv'),
        'wikipedia_text' => __('Wikipedia profile URL', 'ksv'),
        'youtube_text' => __('YouTube profile URL', 'ksv'),
        'website_text' => __('Website URL', 'ksv'),
        'soundcloud_text' => __('Soundcloud profile URL', 'ksv'),
        'myspace_text' => __('Myspace profile URL', 'ksv')
    );
    wp_localize_script('ksv-custom-admin', 'additional_admin_info', $translation_array);
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_scripts');

wp_localize_script() is necessary to create translatable text, that’s why in jQuery it says for example ‘additional_admin_info.emailpublic_text’ instead of just ‘E-mail (public)’. I’m working with at least two languages and my theme has its own language files, of course you could decide to leave out that $translation_array and wp_localize_script() part if you don’t use translations.

ksv-custom-admin.js

jQuery(document).ready(function() {
    jQuery('tr.user-emailpublic-wrap input#emailpublic').after('<span class="cm-additional-text">'+additional_admin_info.emailpublic_text+'</span>');
    jQuery('tr.user-facebook-wrap input#facebook').after('<span class="cm-additional-text">'+additional_admin_info.facebook_text+'</span>');
    jQuery('tr.user-instagram-wrap input#instagram').after('<span class="cm-additional-text">'+additional_admin_info.instagram_text+'</span>');
    jQuery('tr.user-linkedin-wrap input#linkedin').after('<span class="cm-additional-text">'+additional_admin_info.linkedin_text+'</span>');
    jQuery('tr.user-myspace-wrap input#myspace').after('<span class="cm-additional-text">'+additional_admin_info.myspace_text+'</span>');
    jQuery('tr.user-pinterest-wrap input#pinterest').after('<span class="cm-additional-text">'+additional_admin_info.pinterest_text+'</span>');
    jQuery('tr.user-soundcloud-wrap input#soundcloud').after('<span class="cm-additional-text">'+additional_admin_info.soundcloud_text+'</span>');
    jQuery('tr.user-tumblr-wrap input#tumblr').after('<span class="cm-additional-text">'+additional_admin_info.tumblr_text+'</span>');
    jQuery('tr.user-twitter-wrap input#twitter').after('<span class="cm-additional-text">'+additional_admin_info.twitter_text+'</span>');
    jQuery('tr.user-website-wrap input#website').after('<span class="cm-additional-text">'+additional_admin_info.website_text+'</span>');
    jQuery('tr.user-wikipedia-wrap input#wikipedia').after('<span class="cm-additional-text">'+additional_admin_info.wikipedia_text+'</span>');
    jQuery('tr.user-youtube-wrap input#youtube').after('<span class="cm-additional-text">'+additional_admin_info.youtube_text+'</span>');
});

style-admin.css (I also added some FontAwesome icons and additional styling but just to show the essential part):

.cm-additional-text {
    padding-left: 20px;
    font-style: italic;
}

So that’s how I’ve done it, it works for me and I just wanted to document my progress here in case someone else wonders how this can be achieved. I wanted to make sure that there is no easier or better solution for my scenario, thanks again. ??